Infra: Separate out examples CI steps (#1194)

* Separate out examples CI steps

* Hahaha

* Combine start and test

* Set timeout

* chore: fix tsconfig for generated projects

* chore: make jest ignore compiled or cached test files

* chore: increase jest timeout

* chore: comment on timeout-altering line

Co-authored-by: fritz-c <[email protected]>

Author: ryan-roemer

.github/workflows/create-spectacle.yml

@@ -5,16 +5,19 @@ on:
     branches:
       - main
     paths:
+      - ".github/workflows/create-spectacle.yml"
       - "packages/create-spectacle/**"
   pull_request:
     branches:
       - main
     paths:
+      - ".github/workflows/create-spectacle.yml"
       - "packages/create-spectacle/**"
 
 jobs:
   build:
     name: Create, build, and install
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -55,15 +58,20 @@ jobs:
       # Then, start a background dev server.
       - name: Create example - ${{ matrix.create-type }}
         working-directory: ./packages/create-spectacle
-        run: |
-          pnpm run examples:${{ matrix.create-type }}:create && \
-          pnpm run examples:${{ matrix.create-type }}:install && \
-          pnpm run examples:${{ matrix.create-type }}:build && \
-          pnpm run examples:${{ matrix.create-type }}:start &
+        run: pnpm run examples:${{ matrix.create-type }}:create
+
+      - name: Install example - ${{ matrix.create-type }}
+        working-directory: ./packages/create-spectacle
+        run: pnpm run examples:${{ matrix.create-type }}:install
+
+      - name: Build example - ${{ matrix.create-type }}
+        working-directory: ./packages/create-spectacle
+        run: pnpm run examples:${{ matrix.create-type }}:build
 
       # Wait until the dev server is full up and running and then test.
-      - name: Test example - ${{ matrix.create-type }}
+      - name: Start and test example - ${{ matrix.create-type }}
         working-directory: ./packages/create-spectacle
         run: |
+          pnpm run examples:${{ matrix.create-type }}:start & \
           pnpm exec wait-on http-get://localhost:3000 && \
           pnpm run examples:test

packages/create-spectacle/jest.config.js

@@ -1,3 +1,8 @@
 module.exports = {
-  preset: 'ts-jest/presets/js-with-ts'
+  preset: 'ts-jest/presets/js-with-ts',
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '<rootDir>/bin/',
+    '<rootDir>/.wireit/'
+  ]
 };

packages/create-spectacle/src/templates/tsconfig.ts

@@ -9,6 +9,7 @@ export const tsconfigTemplate = () =>
     "jsx": "react-jsx",
     "module": "commonjs",
     "moduleResolution": "node",
+    "allowJs": true,
     "allowUmdGlobalAccess": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,

packages/create-spectacle/test/e2e.test.ts

@@ -2,6 +2,9 @@ import type { Browser, Page } from 'puppeteer';
 import puppeteer from 'puppeteer';
 import { getLaunchOptions } from './util';
 
+// Make the test timeout longer to accomodate Puppeteer startup
+jest.setTimeout(20000);
+
 describe('App.js', () => {
   let browser: Browser;
   let page: Page;