E2e

.github/workflows/test.yml

@@ -34,6 +34,10 @@ jobs:
     - run: |
         yarn test --coverage --coverageDirectory=./coverage
 
+    - run: |
+        mkdir __screenshots__
+        TEST_SCREENSHOT_PATH=__screenshots__ yarn test:e2e
+
     - uses: codecov/codecov-action@v1.1.1
 
     - if: ${{ github.ref == 'master' }}

e2e/index.test.ts

@@ -0,0 +1,43 @@
+import * as path from "path";
+
+jest.setTimeout(5 * 60 * 1000);
+
+const screenshotPath = process.env["TEST_SCREENSHOT_PATH"];
+
+const maySaveScreenshot = async (filename: string): Promise<void> => {
+  if (screenshotPath) {
+    await page.screenshot({
+      path: path.join(screenshotPath, filename),
+      fullPage: true,
+    });
+  }
+};
+
+
+describe("fuTimer", () => {
+  beforeEach(async () => {
+    await page.goto("http://localhost:3232/futimer", {
+      waitUntil: "networkidle0",
+    });
+  });
+
+  it("should render", async () => {
+    await page.waitForTimeout(2000);
+
+    await expect(page.title()).resolves.toMatch("fuTimer");
+
+    await expect(
+      page.$eval("[data-testid=scramble]", (el) => el.textContent)
+    ).resolves.toMatch(/[UBRLFB' ]+/);
+
+    await maySaveScreenshot("01-loaded.png");
+
+    await page.click("[data-testid=timerButton]", { delay: 1000 });
+
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    await expect(page.$eval("[data-testid=timerButton]", (el) => parseFloat(el.textContent || ""))).resolves.toBeGreaterThan(2.0);
+
+    await maySaveScreenshot("02-timer-running.png");
+  });
+});

e2e/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: "jest-puppeteer",
+  transform: {
+    ".tsx?$": "ts-jest",
+  },
+};

e2e/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false
+  }
+}

jest-puppeteer.config.js

@@ -0,0 +1,21 @@
+const debug = !!process.env["DEBUG"];
+const path = require('path');
+
+module.exports = {
+  launch: {
+    headless: debug ? false : true,
+    devtools: debug ? true : false,
+    slowMo: debug ? 500 : 0,
+    args: [
+      "--enable-logging",
+      "--log-file=" + path.join(process.cwd(), 'chrome.log'),
+    ]
+  },
+  server: {
+    command: "PORT=3232 BROWSER=none yarn start",
+    port: 3232,
+    launchTimeout: 30 * 1000,
+    debug: true,
+    usedPortAction: "ask",
+  },
+};

package.json

@@ -25,15 +25,16 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "test:e2e": "jest -c ./e2e/jest.config.js --detectOpenHandles"
   },
   "devDependencies": {
-    "gh-pages": "3.1.0",
     "@types/classnames": "2.2.11",
     "@types/gapi.auth2": "0.0.52",
     "@types/gapi.client.drive": "3.0.13",
     "@types/gapi.client.sheets": "4.0.20201029",
     "@types/jest": "24.9.1",
+    "@types/jest-environment-puppeteer": "^4.4.1",
     "@types/node": "12.19.9",
     "@types/react": "16.14.2",
     "@types/react-dom": "16.9.10",
@@ -42,8 +43,14 @@
     "@types/redux-actions": "2.6.1",
     "eslint-config-prettier": "7.1.0",
     "eslint-plugin-prettier": "3.1.4",
+    "express": "^4.17.1",
+    "gh-pages": "3.1.0",
+    "jest-environment-puppeteer": "^5.0.4",
+    "jest-puppeteer": "^5.0.4",
     "prettier": "2.1.2",
+    "puppeteer": "<10",
     "react-scripts": "4.0.0",
+    "ts-jest": "^26",
     "typescript": "4.0.5"
   },
   "resolutions": {
@@ -66,5 +73,10 @@
       "react-app",
       "plugin:prettier/recommended"
     ]
+  },
+  "jest": {
+    "transform": {
+      ".tsx?$": "ts-jest"
+    }
   }
 }

src/components/Measurer.tsx

@@ -122,11 +122,12 @@ class Measurer extends React.Component<Props, State> {
             [this.props.classes.isLoading]: !this.props.scramble,
           })}
         >
-          <code>
+          <code data-testid="scramble">
             {this.props.scramble || this.prevScramble || "Generating…"}
           </code>
         </div>
         <ButtonBase
+          data-testid="timerButton"
           action={this.handleButtonMount}
           onTouchStart={this.handleHoldStart}
           onTouchEnd={this.handleHoldEnd}