test: browser tests (#778)

Browser tests! Ok, so I'd kind of given up on maintaining the snapshot tests. But now that we're trying to add mdx, I _really_ want them. This PR adds a link to the latest app css bundles so there are lots of little changes to the styles. As well, we changed the layout of the demo app a bit, so I had to expand the viewport of the test browser.
readmeio · Jul 11, 2023 · 856aa87 · 856aa87
1 parent a50de42
commit 856aa87
Show file tree

Hide file tree

Showing 19 changed files with 37 additions and 3 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -24,3 +24,35 @@ jobs:
 
       - name: Run tests
         run: npm test
+
+  visual:
+    name: 'Visual Tests'
+    if: "!contains(github.event.head_commit.message, 'SKIP CI')"
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Run visual tests (node ${{ matrix.node-version }})
+        run: make ci
+
+      - name: Upload snapshot diffs
+        uses: actions/upload-artifact@v2
+        if: ${{ failure() }}
+        with:
+          name: snapshots-diffs
+          path: __tests__/browser/__image_snapshots__/__diff_output__
+
+      - name: Update regression test snapshots
+        if: ${{ failure() }}
+        run: make updateSnapshot
+
+      - name: Upload snapshots
+        uses: actions/upload-artifact@v2
+        if: ${{ failure() }}
+        with:
+          name: image-snapshots
+          path: __tests__/browser/__image_snapshots__/
diff --git a/Dockerfile b/Dockerfile
@@ -27,6 +27,8 @@ RUN npm install
 
 COPY . ./
 
+RUN mkdir -p __tests__/browser/__image_snapshots__/__diff_output__
+
 RUN make emojis
 
 EXPOSE 9966

diff --git a/...render-html-blocks-style-tags-and-style-attributes-with-safe-mode-on-1-snap.png b/...render-html-blocks-style-tags-and-style-attributes-with-safe-mode-on-1-snap.png
diff --git a/...regression-tests-rdmd-syntax-renders-callout-tests-without-surprises-1-snap.png b/...regression-tests-rdmd-syntax-renders-callout-tests-without-surprises-1-snap.png
diff --git a/...sual-regression-tests-rdmd-syntax-renders-callouts-without-surprises-1-snap.png b/...sual-regression-tests-rdmd-syntax-renders-callouts-without-surprises-1-snap.png
diff --git a/...ression-tests-rdmd-syntax-renders-code-block-tests-without-surprises-1-snap.png b/...ression-tests-rdmd-syntax-renders-code-block-tests-without-surprises-1-snap.png
diff --git a/...l-regression-tests-rdmd-syntax-renders-code-blocks-without-surprises-1-snap.png b/...l-regression-tests-rdmd-syntax-renders-code-blocks-without-surprises-1-snap.png
diff --git a/...visual-regression-tests-rdmd-syntax-renders-embeds-without-surprises-1-snap.png b/...visual-regression-tests-rdmd-syntax-renders-embeds-without-surprises-1-snap.png
diff --git a/...sual-regression-tests-rdmd-syntax-renders-features-without-surprises-1-snap.png b/...sual-regression-tests-rdmd-syntax-renders-features-without-surprises-1-snap.png
diff --git a/...sual-regression-tests-rdmd-syntax-renders-headings-without-surprises-1-snap.png b/...sual-regression-tests-rdmd-syntax-renders-headings-without-surprises-1-snap.png
diff --git a/...nders-html-blocks-style-tags-and-style-attributes-with-safe-mode-off-1-snap.png b/...nders-html-blocks-style-tags-and-style-attributes-with-safe-mode-off-1-snap.png
diff --git a/...visual-regression-tests-rdmd-syntax-renders-images-without-surprises-1-snap.png b/...visual-regression-tests-rdmd-syntax-renders-images-without-surprises-1-snap.png
diff --git a/...-visual-regression-tests-rdmd-syntax-renders-lists-without-surprises-1-snap.png b/...-visual-regression-tests-rdmd-syntax-renders-lists-without-surprises-1-snap.png
diff --git a/...-tests-rdmd-syntax-renders-table-of-contents-tests-without-surprises-1-snap.png b/...-tests-rdmd-syntax-renders-table-of-contents-tests-without-surprises-1-snap.png
diff --git a/...-regression-tests-rdmd-syntax-renders-tables-tests-without-surprises-1-snap.png b/...-regression-tests-rdmd-syntax-renders-tables-tests-without-surprises-1-snap.png
diff --git a/...visual-regression-tests-rdmd-syntax-renders-tables-without-surprises-1-snap.png b/...visual-regression-tests-rdmd-syntax-renders-tables-without-surprises-1-snap.png
diff --git a/...ual-regression-tests-rdmd-syntax-renders-vars-test-without-surprises-1-snap.png b/...ual-regression-tests-rdmd-syntax-renders-vars-test-without-surprises-1-snap.png
diff --git a/__tests__/browser/markdown.test.js b/__tests__/browser/markdown.test.js
@@ -6,8 +6,8 @@ const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 describe('visual regression tests', () => {
   describe('rdmd syntax', () => {
     beforeEach(async () => {
-      // At 1025 the TOC disappears
-      await page.setViewport({ width: 1026, height: 800 });
+      // The ToC disappears somewhere below 1200, 1175-ish?
+      await page.setViewport({ width: 1400, height: 800 });
     });
 
     const docs = [

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "start": "webpack serve --config ./webpack.dev.js --open --mode development",
     "test": "jest --coverage --runInBand --testPathIgnorePatterns '__tests__/browser'",
     "test.watch": "jest --watch --coverage=false --testPathIgnorePatterns '__tests__/browser'",
-    "test.browser": "jest --runInBand --testPathPattern '__tests__/browser'",
+    "test.browser": "jest --config jest.browser.js --runInBand --testPathPattern '__tests__/browser'",
     "watch": "webpack -w --progress --mode production"
   },
   "dependencies": {