Move E2E tests to screenshots based tests (#337)

Author: mattcompiles

.github/workflows/screenshots.yml

@@ -0,0 +1,36 @@
+name: Screenshots
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    name: Lint & Test
+    runs-on: macos-latest
+    env:
+      CI: true
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@main
+
+      - name: Setup Node.js 14.x
+        uses: actions/setup-node@main
+        with:
+          node-version: 14.x
+
+      - name: Install Dependencies
+        run: yarn --immutable
+
+      - name: Install Browsers
+        run: yarn playwright install chromium
+
+      - name: Build packages
+        run: yarn build
+
+      - name: Screenshot tests
+        run: yarn test:playwright
+
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: test-results
+          path: test-results/

.github/workflows/validate.yml

@@ -27,4 +27,4 @@ jobs:
         run: yarn lint
 
       - name: Test
-        run: yarn test
+        run: yarn test:jest

.gitignore

@@ -5,6 +5,7 @@ yarn-error.log
 packages/**/README.md
 !packages/sprinkles/README.md
 !packages/integration/README.md
+test-results
 
 
 .yarn/*

fixtures/themed/src/styles.css.ts

@@ -5,8 +5,6 @@ import {
   fallbackVar,
   fontFace,
   globalFontFace,
-  keyframes,
-  globalKeyframes,
   globalStyle,
 } from '@vanilla-extract/css';
 import { shadow } from './shared.css';
@@ -20,26 +18,7 @@ globalFontFace('MyGlobalComicSans', {
   src: 'local("Comic Sans MS")',
 });
 
-const slide = keyframes({
-  '0%': {
-    transform: 'translateY(-4px)',
-  },
-  '100%': {
-    transform: 'translateY(4px)',
-  },
-});
-
-globalKeyframes('globalSlide', {
-  '0%': {
-    transform: 'translateY(-4px)',
-  },
-  '100%': {
-    transform: 'translateY(4px)',
-  },
-});
-
 export const container = style({
-  animation: `3s infinite alternate globalSlide ease-in-out`,
   display: 'flex',
   flexDirection: 'column',
   gap: vars.space[2],
@@ -81,8 +60,8 @@ export const button = style([
   iDunno,
 ]);
 
-globalStyle(`body ${iDunno}`, {
-  animation: `3s infinite alternate ${slide} ease-in-out`,
+globalStyle(`body ${iDunno}:after`, {
+  content: "'I am content'",
 });
 
 const blankVar1 = createVar();

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
-  preset: 'jest-puppeteer',
   setupFilesAfterEnv: ['./jest.setup.ts'],
   transform: {
     '\\.tsx?$': ['babel-jest', { configFile: './babel-jest.config.js' }],
   },
+  testMatch: ['**/?(*.)+(test).[jt]s?(x)'],
 };

jest.setup.ts

@@ -1,3 +1 @@
 import '@testing-library/jest-dom';
-
-jest.setTimeout(30000);

package.json

@@ -13,7 +13,8 @@
     "start-site": "manypkg run site start",
     "build-site": "manypkg run site build",
     "postinstall": "yarn dev",
-    "test": "jest",
+    "test:jest": "jest",
+    "test:playwright": "playwright test",
     "format": "prettier --write .",
     "lint": "manypkg check && prettier --check . && tsc",
     "copy-readme-to-packages": "ts-node scripts/copy-readme-to-packages",
@@ -44,17 +45,14 @@
     "@changesets/changelog-github": "^0.4.0",
     "@changesets/cli": "^2.16.0",
     "@manypkg/cli": "^0.17.0",
+    "@playwright/test": "^1.14.1",
     "@preconstruct/cli": "^2.0.1",
     "@testing-library/dom": "^7.30.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@types/jest": "^26.0.20",
-    "@types/jest-environment-puppeteer": "^4.4.1",
-    "@types/puppeteer": "^5.4.3",
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3",
-    "jest-puppeteer": "^4.4.0",
     "prettier": "^2.3.2",
-    "puppeteer": "^8.0.0",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.3"
   }

playwright.config.ts

@@ -0,0 +1,37 @@
+import { PlaywrightTestConfig, devices } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testMatch: '**/*.playwright.ts',
+  updateSnapshots: 'none',
+  expect: {
+    toMatchSnapshot: {
+      threshold: 0.1,
+    },
+  },
+
+  projects: [
+    {
+      name: 'Desktop - Chromium',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome',
+        viewport: {
+          width: 1200,
+          height: 1080,
+        },
+      },
+    },
+    {
+      name: 'Mobile - Chromium',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome',
+        viewport: {
+          width: 414,
+          height: 896,
+        },
+      },
+    },
+  ],
+};
+export default config;

test-helpers/src/getNodeStyles.ts

@@ -1,5 +1,4 @@
 export * from './startFixture';
-export * from './getNodeStyles';
 export * from './getStylesheet';
 
 export const getTestNodes = (fixture: string) =>