test: remove redundant color diffing dependency

spec-main/api-browser-window-spec.ts

@@ -10,7 +10,7 @@ import { app, BrowserWindow, BrowserView, dialog, ipcMain, OnBeforeSendHeadersLi
 import { emittedOnce, emittedUntil, emittedNTimes } from './events-helpers';
 import { ifit, ifdescribe, defer, delay } from './spec-helpers';
 import { closeWindow, closeAllWindows } from './window-helpers';
-import { areColorsSimilar, captureScreen, CHROMA_COLOR_HEX, getPixelColor } from './screen-helpers';
+import { areColorsSimilar, captureScreen, HexColors, getPixelColor } from './screen-helpers';
 
 const features = process._linkedBinding('electron_common_features');
 const fixtures = path.resolve(__dirname, '..', 'spec', 'fixtures');
@@ -2035,15 +2035,7 @@ describe('BrowserWindow module', () => {
   });
 
   ifdescribe(process.platform === 'darwin')('BrowserWindow.setVibrancy(type)', () => {
-    let appProcess: childProcess.ChildProcessWithoutNullStreams | childProcess.ChildProcess | undefined;
-
-    afterEach(() => {
-      if (appProcess && !appProcess.killed) {
-        appProcess.kill();
-        appProcess = undefined;
-      }
-      closeAllWindows();
-    });
+    afterEach(closeAllWindows);
 
     it('allows setting, changing, and removing the vibrancy', () => {
       const w = new BrowserWindow({ show: false });
@@ -2062,18 +2054,6 @@ describe('BrowserWindow module', () => {
         w.setVibrancy('i-am-not-a-valid-vibrancy-type' as any);
       }).to.not.throw();
     });
-
-    // TODO(nornagon): disabled due to flakiness.
-    it.skip('Allows setting a transparent window via CSS', async () => {
-      const appPath = path.join(__dirname, 'fixtures', 'apps', 'background-color-transparent');
-
-      appProcess = childProcess.spawn(process.execPath, [appPath], {
-        stdio: 'inherit'
-      });
-
-      const [code] = await emittedOnce(appProcess, 'exit');
-      expect(code).to.equal(0);
-    });
   });
 
   ifdescribe(process.platform === 'darwin')('trafficLightPosition', () => {
@@ -5560,13 +5540,13 @@ describe('BrowserWindow module', () => {
     });
 
     // Linux and arm64 platforms (WOA and macOS) do not return any capture sources
-    ifit(process.platform !== 'linux' && process.arch !== 'arm64')('should not display a visible background', async () => {
+    it('should not display a visible background', async () => {
       const display = screen.getPrimaryDisplay();
 
       const backgroundWindow = new BrowserWindow({
         ...display.bounds,
         frame: false,
-        backgroundColor: CHROMA_COLOR_HEX,
+        backgroundColor: HexColors.GREEN,
         hasShadow: false
       });
 
@@ -5581,7 +5561,7 @@ describe('BrowserWindow module', () => {
       });
 
       foregroundWindow.loadFile(path.join(__dirname, 'fixtures', 'pages', 'half-background-color.html'));
-      await emittedOnce(foregroundWindow, 'ready-to-show');
+      await emittedOnce(foregroundWindow.webContents, 'did-finish-load');
 
       const screenCapture = await captureScreen();
       const leftHalfColor = getPixelColor(screenCapture, {
@@ -5593,8 +5573,43 @@ describe('BrowserWindow module', () => {
         y: display.size.height / 2
       });
 
-      expect(areColorsSimilar(leftHalfColor, CHROMA_COLOR_HEX)).to.be.true();
-      expect(areColorsSimilar(rightHalfColor, '#ff0000')).to.be.true();
+      expect(areColorsSimilar(leftHalfColor, HexColors.GREEN)).to.be.true();
+      expect(areColorsSimilar(rightHalfColor, HexColors.RED)).to.be.true();
+    });
+
+    it('Allows setting a transparent window via CSS', async () => {
+      const display = screen.getPrimaryDisplay();
+
+      const backgroundWindow = new BrowserWindow({
+        ...display.bounds,
+        frame: false,
+        backgroundColor: HexColors.PURPLE,
+        hasShadow: false
+      });
+
+      await backgroundWindow.loadURL('about:blank');
+
+      const foregroundWindow = new BrowserWindow({
+        ...display.bounds,
+        frame: false,
+        transparent: true,
+        hasShadow: false,
+        webPreferences: {
+          contextIsolation: false,
+          nodeIntegration: true
+        }
+      });
+
+      foregroundWindow.loadFile(path.join(__dirname, 'fixtures', 'pages', 'css-transparent.html'));
+      await emittedOnce(ipcMain, 'set-transparent');
+
+      const screenCapture = await captureScreen();
+      const centerColor = getPixelColor(screenCapture, {
+        x: display.size.width / 2,
+        y: display.size.height / 2
+      });
+
+      expect(areColorsSimilar(centerColor, HexColors.PURPLE)).to.be.true();
     });
   });
 
@@ -5608,7 +5623,7 @@ describe('BrowserWindow module', () => {
       const w = new BrowserWindow({
         ...display.bounds,
         show: true,
-        backgroundColor: CHROMA_COLOR_HEX
+        backgroundColor: HexColors.BLUE
       });
 
       w.loadURL('about:blank');
@@ -5620,7 +5635,7 @@ describe('BrowserWindow module', () => {
         y: display.size.height / 2
       });
 
-      expect(areColorsSimilar(centerColor, CHROMA_COLOR_HEX)).to.be.true();
+      expect(areColorsSimilar(centerColor, HexColors.BLUE)).to.be.true();
     });
   });
 });

spec-main/fixtures/pages/css-transparent.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>test-color-window</title>
+    <style>
+      body {
+        background: red;
+      }
+    </style>
+  </head>
+  <body id="body">
+    <script>
+      const { ipcRenderer } = require('electron');
+
+      const observer = new MutationObserver((mutationList, observer) => {
+        mutationList.forEach(({ type, attributeName }) => {
+          if (type === 'attributes' && attributeName === 'style') {
+            ipcRenderer.send('set-transparent');
+          }
+        });
+      });
+
+      observer.observe(document.body, { attributes: true });
+
+      document.addEventListener('DOMContentLoaded', event => {
+        document.body.style.background = 'transparent';
+      });
+    </script>
+  </body>
+</html>

spec-main/package.json

@@ -16,7 +16,6 @@
   "dependencies": {
     "chai-as-promised": "^7.1.1",
     "dirty-chai": "^2.0.1",
-    "get-image-colors": "^4.0.0",
     "pdfjs-dist": "^2.2.228"
   }
 }

spec-main/screen-helpers.ts

@@ -4,8 +4,12 @@ import { screen, desktopCapturer, NativeImage } from 'electron';
 
 const fixtures = path.resolve(__dirname, '..', 'spec', 'fixtures');
 
-/** Chroma key green. */
-export const CHROMA_COLOR_HEX = '#00b140';
+export enum HexColors {
+  GREEN = '#00b140',
+  PURPLE = '#6a0dad',
+  RED = '#ff0000',
+  BLUE = '#0000ff'
+};
 
 /**
  * Capture the screen at the given point.
@@ -15,11 +19,13 @@ export const CHROMA_COLOR_HEX = '#00b140';
 export const captureScreen = async (point: Electron.Point = { x: 0, y: 0 }): Promise<NativeImage> => {
   const display = screen.getDisplayNearestPoint(point);
   const sources = await desktopCapturer.getSources({ types: ['screen'], thumbnailSize: display.size });
+  const sources1 = await desktopCapturer.getSources({ types: ['screen'], thumbnailSize: display.size });
+  const sources2 = await desktopCapturer.getSources({ types: ['screen'], thumbnailSize: display.size });
   // Toggle to save screen captures for debugging.
-  const DEBUG_CAPTURE = false;
+  const DEBUG_CAPTURE = process.env.DEBUG_CAPTURE || false;
   if (DEBUG_CAPTURE) {
-    for (const source of sources) {
-      await fs.promises.writeFile(path.join(fixtures, `screenshot_${source.display_id}.png`), source.thumbnail.toPNG());
+    for (const source of [...sources, ...sources1, ...sources2]) {
+      await fs.promises.writeFile(path.join(fixtures, `screenshot_${source.display_id}_${Date.now()}.png`), source.thumbnail.toPNG());
     }
   }
   const screenCapture = sources.find(source => source.display_id === `${display.id}`);