feat(main): added dark mode media query support for html inputs

Added support for prefers-color-scheme: dark media query for html inputs.

fix #227

package.json

@@ -11,13 +11,14 @@
     "test": "jest -i",
     "test:update": "npm run test:update:snapshots && npm run test:update:visuals",
     "test:update:snapshots": "jest -u",
-    "test:update:visuals": "npm run visuals:input-svg && npm run visuals:input-png && npm run visuals:input-html && npm run visuals:output-transparent && npm run visuals:output-jpeg && npm run visuals:output-jpg",
+    "test:update:visuals": "npm run visuals:input-svg && npm run visuals:input-png && npm run visuals:input-html && npm run visuals:input-html-dark && npm run visuals:output-transparent && npm run visuals:output-jpeg && npm run visuals:output-jpg",
     "visuals:output-jpeg": "node ./bin/cli ./static/logo.svg ./src/__snapshots__/visual/output-jpeg -s false -t jpeg -q 80 -b coral",
     "visuals:output-jpg": "node ./bin/cli ./static/logo.svg ./src/__snapshots__/visual/output-jpg -s false -t jpg -q 80 -b coral",
     "visuals:output-transparent": "node ./bin/cli ./static/logo.svg ./src/__snapshots__/visual/output-transparent -s false -b transparent -o false",
     "visuals:input-svg": "node ./bin/cli ./static/logo.svg ./src/__snapshots__/visual/input-svg -s false -b coral",
     "visuals:input-png": "node ./bin/cli ./static/logo.png ./src/__snapshots__/visual/input-png -s false -b coral",
     "visuals:input-html": "node ./bin/cli ./static/logo.html ./src/__snapshots__/visual/input-html -s false",
+    "visuals:input-html-dark": "node ./bin/cli ./static/logo.html ./src/__snapshots__/visual/input-html-dark -s false -d true",
     "commit": "git-cz",
     "chromium": "cross-env PAG_TEST_MODE=1 node bin/install",
     "update": "node bin/update-fallback-data",

src/helpers/puppets.ts

@@ -268,6 +268,15 @@ const saveImages = async (
         await page.setViewport({ width, height });
 
         if (address) {
+          // Emulate dark mode media feature when html source is provided and darkMode is enabled
+          if (options.darkMode) {
+            await page.emulateMediaFeatures([
+              {
+                name: 'prefers-color-scheme',
+                value: 'dark',
+              },
+            ]);
+          }
           await page.goto(address, { waitUntil: 'networkidle0' });
         } else {
           await page.setContent(shellHtml);

src/main.test.ts

@@ -491,20 +491,40 @@ describe('visually compares generated images with', () => {
       });
     });
 
-    test('in html format', async () => {
-      const testSuite = 'input-html';
-      const result = await generateTempImages(
-        {
-          scrape: false,
-          log: false,
-        },
-        './static/logo.html',
-        `./temp/local/${testSuite}`,
-      );
+    describe('in html format', () => {
+      test('with dark mode disabled', async () => {
+        const testSuite = 'input-html';
+        const result = await generateTempImages(
+          {
+            scrape: false,
+            log: false,
+          },
+          './static/logo.html',
+          `./temp/local/${testSuite}`,
+        );
+
+        const matchResult = await getAllSnapshotsMatchStatus(result, testSuite);
+        matchResult.forEach((mr: MatchResult) => {
+          expect(mr.looksSame).toBeTruthy();
+        });
+      });
 
-      const matchResult = await getAllSnapshotsMatchStatus(result, testSuite);
-      matchResult.forEach((mr: MatchResult) => {
-        expect(mr.looksSame).toBeTruthy();
+      test('with dark mode enabled', async () => {
+        const testSuite = 'input-html-dark';
+        const result = await generateTempImages(
+          {
+            scrape: false,
+            darkMode: true,
+            log: false,
+          },
+          './static/logo.html',
+          `./temp/local/${testSuite}`,
+        );
+
+        const matchResult = await getAllSnapshotsMatchStatus(result, testSuite);
+        matchResult.forEach((mr: MatchResult) => {
+          expect(mr.looksSame).toBeTruthy();
+        });
       });
     });
 
@@ -607,20 +627,40 @@ describe('visually compares generated images with', () => {
       });
     });
 
-    test('in html format', async () => {
-      const testSuite = 'input-html';
-      const result = await generateTempImages(
-        {
-          scrape: false,
-          log: false,
-        },
-        'https://onderceylan.github.io/pwa-asset-generator/static/logo.html',
-        `./temp/remote/${testSuite}`,
-      );
+    describe('in html format', () => {
+      test('with dark mode disabled', async () => {
+        const testSuite = 'input-html';
+        const result = await generateTempImages(
+          {
+            scrape: false,
+            log: false,
+          },
+          'https://onderceylan.github.io/pwa-asset-generator/static/logo.html',
+          `./temp/remote/${testSuite}`,
+        );
+
+        const matchResult = await getAllSnapshotsMatchStatus(result, testSuite);
+        matchResult.forEach((mr: MatchResult) => {
+          expect(mr.looksSame).toBeTruthy();
+        });
+      });
 
-      const matchResult = await getAllSnapshotsMatchStatus(result, testSuite);
-      matchResult.forEach((mr: MatchResult) => {
-        expect(mr.looksSame).toBeTruthy();
+      test('with dark mode enabled', async () => {
+        const testSuite = 'input-html-dark';
+        const result = await generateTempImages(
+          {
+            scrape: false,
+            log: false,
+            darkMode: true,
+          },
+          'https://onderceylan.github.io/pwa-asset-generator/static/logo.html',
+          `./temp/remote/${testSuite}`,
+        );
+
+        const matchResult = await getAllSnapshotsMatchStatus(result, testSuite);
+        matchResult.forEach((mr: MatchResult) => {
+          expect(mr.looksSame).toBeTruthy();
+        });
       });
     });
   });

static/logo.html

@@ -16,6 +16,10 @@
       margin: 0 auto;
       object-fit: contain;
     }
+
+    @media (prefers-color-scheme: dark) {
+      body { background: dimgray; }
+    }
   </style>
 </head>
 <body>