From 32dd32fdec730b3c6063ef79a22daa1273f6d4dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ernesto=20Garc=C3=ADa?= <ernesto@doist.com>
Date: Thu, 29 Dec 2022 11:54:27 -0300
Subject: [PATCH] Prepare workflow to run on CI

---
 .eslintignore                                 |  4 ++++
 .eslintrc                                     |  1 +
 .github/workflows/visual-regression-tests.yml | 13 +++++++++++
 Dockerfile                                    |  2 +-
 jest.config.js                                |  1 +
 package.json                                  |  4 ++--
 playwright-ct.config.ts                       | 22 +++++++++++++++----
 tsconfig.json                                 |  4 ++--
 8 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 .github/workflows/visual-regression-tests.yml

diff --git a/.eslintignore b/.eslintignore
index 3ed6b5966..10a85d528 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,6 +1,10 @@
+playwright-ct.config.ts
+playwright/
+
 lint-staged.config.js
 jest.config.js
 babel.config.js
+
 coverage/
 dist/
 docs/
diff --git a/.eslintrc b/.eslintrc
index 00670c398..3595e2d45 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -46,6 +46,7 @@
         {
             "files": ["*.spec.*"],
             "rules": {
+                "import/no-unresolved": "off",
                 "jest/no-standalone-expect": "off",
                 "@typescript-eslint/no-unsafe-member-access": "off",
                 "@typescript-eslint/no-unsafe-call": "off"
diff --git a/.github/workflows/visual-regression-tests.yml b/.github/workflows/visual-regression-tests.yml
new file mode 100644
index 000000000..29775ba17
--- /dev/null
+++ b/.github/workflows/visual-regression-tests.yml
@@ -0,0 +1,13 @@
+name: Visual Regression Tests
+
+on: pull_request
+
+jobs:
+    visual-regression-tests:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - name: Docker Compose Action
+              uses: isbang/compose-action@v1.4.1
+              with:
+                  up-flags: "--exit-code-from playwright --abort-on-container-exit"
diff --git a/Dockerfile b/Dockerfile
index fdc98011b..caf5fcbe8 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,4 +4,4 @@ RUN apt-get update && apt-get -y install libnss3 libatk-bridge2.0-0 libdrm-dev l
  
 WORKDIR /app
 COPY package.json .
-RUN npm install
+RUN npm install --quiet
diff --git a/jest.config.js b/jest.config.js
index 49f924531..c72d2bc43 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,6 +1,7 @@
 module.exports = {
     collectCoverageFrom: [
         'src/**/*.{ts,tsx,js,jsx}',
+        '!**/*.spec.{js,jsx,ts,tsx}',
         '!**/*.stories.{js,jsx,ts,tsx}',
         '!**/*storybook*.{js,jsx,ts,tsx}',
     ],
diff --git a/package.json b/package.json
index e440fb3c4..7ca6abc1c 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "scripts": {
         "postinstall": "patch-package",
         "setup": "npm install && npm run validate",
-        "validate": "npm run lint && npm run type-check && npm run test",
+        "validate": "npm run lint && npm run type-check && npm run test && npm run visual-tests",
         "start": "tsdx watch --onSuccess \"./scripts/organize-styles.sh\"",
         "build-all": "npm run build && npm run build:storybook",
         "build": "scripts/build.sh",
@@ -41,7 +41,7 @@
         "storybook": "start-storybook -p 6006",
         "prettify": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css,scss,less,md,mdx}\"",
         "test-ct": "playwright test -c playwright-ct.config.ts",
-        "visual-tests": "docker compose up"
+        "visual-tests": "docker compose up --exit-code-from playwright"
     },
     "peerDependencies": {
         "classnames": "^2.2.5",
diff --git a/playwright-ct.config.ts b/playwright-ct.config.ts
index e46c909ce..c51b8cd6b 100644
--- a/playwright-ct.config.ts
+++ b/playwright-ct.config.ts
@@ -1,6 +1,7 @@
-import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react'
 import { devices } from '@playwright/experimental-ct-react'
 
+import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react'
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -32,9 +33,22 @@ const config: PlaywrightTestConfig = {
 
     /* Configure projects for major browsers */
     projects: [
-        { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
-        { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
-        { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+
+        {
+            name: 'webkit',
+            use: { ...devices['Desktop Safari'] },
+        },
+
+        //
+        // Firefox tests are disabled, hopefully temporarily. For some reason they only work when
+        // running tests locally on macOS, but they get stuck without failing or passing when
+        // running locally on Windows, or when tests are run on CI.
+        //
+        // { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
     ],
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index a1bd79f61..7239613bb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
     "extends": "@doist/tsconfig",
-    "include": ["src", "types", "*.config.ts", "playwright"],
+    "include": ["src", "types"],
     "compilerOptions": {
         "allowJs": true,
         "module": "esnext",
@@ -8,7 +8,7 @@
         "importHelpers": true,
         "declaration": true,
         "sourceMap": true,
-        "rootDir": "./",
+        "rootDir": "src",
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "moduleResolution": "node",