Speed up github actions for PRs (#7250)

Co-authored-by: Michaël De Boey <[email protected]>

.github/workflows/reusable-test.yml

@@ -163,7 +163,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ${{ fromJSON(inputs.node_version) }}
-        browser: ["edge"]
+        browser: ["msedge"]
 
     runs-on: windows-latest
     steps:

.github/workflows/shared-build.yml

@@ -0,0 +1,36 @@
+name: 🛠️ Build
+
+on:
+  workflow_call:
+
+env:
+  CI: true
+  CYPRESS_INSTALL_BINARY: 0
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+
+      - name: Disable GitHub Actions Annotations
+        run: |
+          echo "::remove-matcher owner=tsc::"
+          echo "::remove-matcher owner=eslint-compact::"
+          echo "::remove-matcher owner=eslint-stylish::"
+
+      - name: 📥 Install deps
+        run: yarn --frozen-lockfile
+
+      - name: 🏗 Build
+        run: yarn build

.github/workflows/shared-test-integration.yml

@@ -0,0 +1,62 @@
+name: 🧪 Test (Integration)
+
+on:
+  workflow_call:
+    inputs:
+      os:
+        required: true
+        type: string
+      node_version:
+        required: true
+        # this is limited to string | boolean | number (https://github.community/t/can-action-inputs-be-arrays/16457)
+        # but we want to pass an array (node_version: "[18, 20]"),
+        # so we'll need to manually stringify it for now
+        type: string
+      browser:
+        required: true
+        # this is limited to string | boolean | number (https://github.community/t/can-action-inputs-be-arrays/16457)
+        # but we want to pass an array (browser: "['chromium', 'firefox']"),
+        # so we'll need to manually stringify it for now
+        type: string
+
+env:
+  CI: true
+  CYPRESS_INSTALL_BINARY: 0
+
+jobs:
+  integration:
+    name: "${{ inputs.os }} / node@${{ matrix.node }} / ${{ matrix.browser }}"
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ${{ fromJSON(inputs.node_version) }}
+        browser: ${{ fromJSON(inputs.browser) }}
+
+    runs-on: ${{ inputs.os }}
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: "yarn"
+
+      - name: Disable GitHub Actions Annotations
+        run: |
+          echo "::remove-matcher owner=tsc::"
+          echo "::remove-matcher owner=eslint-compact::"
+          echo "::remove-matcher owner=eslint-stylish::"
+
+      - name: 📥 Install deps
+        run: yarn --frozen-lockfile
+
+      - name: 📥 Install Playwright
+        run: npx playwright install --with-deps ${{ matrix.browser }}
+
+      - name: 👀 Run Integration Tests ${{ matrix.browser }}
+        run: "yarn test:integration --project=${{ matrix.browser }}"

.github/workflows/shared-test-unit.yml

@@ -0,0 +1,55 @@
+name: 🧪 Test (Unit)
+
+on:
+  workflow_call:
+    inputs:
+      os:
+        required: true
+        type: string
+      node_version:
+        required: true
+        # this is limited to string | boolean | number (https://github.community/t/can-action-inputs-be-arrays/16457)
+        # but we want to pass an array (node_version: "[18, 20]"),
+        # so we'll need to manually stringify it for now
+        type: string
+
+env:
+  CI: true
+  CYPRESS_INSTALL_BINARY: 0
+
+jobs:
+  test:
+    name: "${{ inputs.os }} / node@${{ matrix.node }}"
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ${{ fromJSON(inputs.node_version) }}
+    runs-on: ${{ inputs.os }}
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/[email protected]
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: "yarn"
+
+      - name: Disable GitHub Actions Annotations
+        run: |
+          echo "::remove-matcher owner=tsc::"
+          echo "::remove-matcher owner=eslint-compact::"
+          echo "::remove-matcher owner=eslint-stylish::"
+
+      - name: 📥 Install deps
+        run: yarn --frozen-lockfile
+
+      # It's faster to use the built `cli.js` in tests if its available and up-to-date
+      - name: 🏗 Build
+        run: yarn build
+
+      - name: 🧪 Run Primary Tests
+        run: "yarn test:primary"

.github/workflows/test-full.yml

@@ -0,0 +1,63 @@
+name: Branch
+
+# main/dev branches will get the full run across all OS/browsers
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+    paths-ignore:
+      - "docs/**"
+      - "scripts/**"
+      - "contributors.yml"
+      - "**/*.md"
+
+jobs:
+  build:
+    name: "⚙️ Build"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-build.yml
+
+  unit-ubuntu:
+    name: "🧪 Unit Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-unit.yml
+    with:
+      os: "ubuntu-latest"
+      node_version: '["latest"]'
+
+  unit-windows:
+    name: "🧪 Unit Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-unit.yml
+    with:
+      os: "windows-latest"
+      node_version: '["latest"]'
+
+  integration-ubuntu:
+    name: "👀 Integration Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-integration.yml
+    with:
+      os: "ubuntu-latest"
+      node_version: '["latest"]'
+      browser: '["chromium", "firefox"]'
+
+  integration-windows:
+    name: "👀 Integration Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-integration.yml
+    with:
+      os: "windows-latest"
+      node_version: '["latest"]'
+      browser: '["msedge"]'
+
+  integration-macos:
+    name: "👀 Integration Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-integration.yml
+    with:
+      os: "macos-latest"
+      node_version: '["latest"]'
+      browser: '["webkit"]'

.github/workflows/test-pr-ubuntu.yml

@@ -0,0 +1,34 @@
+name: PR (Base)
+
+# All PRs touching code will run tests on ubuntu/node/chromium
+
+on:
+  pull_request:
+    paths-ignore:
+      - "docs/**"
+      - "scripts/**"
+      - "contributors.yml"
+      - "**/*.md"
+
+jobs:
+  build:
+    name: "⚙️ Build"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-build.yml
+
+  unit-ubuntu:
+    name: "🧪 Unit Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-unit.yml
+    with:
+      os: "ubuntu-latest"
+      node_version: '["latest"]'
+
+  integration-chromium:
+    name: "👀 Integration Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-integration.yml
+    with:
+      os: "ubuntu-latest"
+      node_version: '["latest"]'
+      browser: '["chromium"]'

.github/workflows/test-pr-windows-macos.yml

@@ -0,0 +1,46 @@
+name: PR (Full)
+
+# PRs touching create-remix/remix-dev will also run on Windows and OSX
+
+on:
+  pull_request:
+    paths:
+      - "packages/create-remix/**"
+      - "packages/remix-dev/**"
+      - "!**/*.md"
+
+jobs:
+  unit-windows:
+    name: "🧪 Unit Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-unit.yml
+    with:
+      os: "windows-latest"
+      node_version: '["latest"]'
+
+  integration-firefox:
+    name: "👀 Integration Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-integration.yml
+    with:
+      os: "ubuntu-latest"
+      node_version: '["latest"]'
+      browser: '["firefox"]'
+
+  integration-msedge:
+    name: "👀 Integration Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-integration.yml
+    with:
+      os: "windows-latest"
+      node_version: '["latest"]'
+      browser: '["msedge"]'
+
+  integration-webkit:
+    name: "👀 Integration Test"
+    if: github.repository == 'remix-run/remix'
+    uses: ./.github/workflows/shared-test-integration.yml
+    with:
+      os: "macos-latest"
+      node_version: '["latest"]'
+      browser: '["webkit"]'

integration/fetcher-test.ts

@@ -244,8 +244,11 @@ test.describe("useFetcher", () => {
           method: "get",
         }),
       ]);
-
-      await page.waitForSelector(`pre:has-text("${LUNCH}")`);
+      // Check full HTML here - Chromium/Firefox/Webkit seem to render this in
+      // a <pre> but Edge puts it in some weird code editor markup:
+      // <body data-code-mirror="Readonly code editor.">
+      //   <div hidden="true">"LUNCH"</div>
+      expect(await app.getHtml()).toContain(LUNCH);
     });
 
     test("Form can hit an action", async ({ page }) => {
@@ -258,7 +261,11 @@ test.describe("useFetcher", () => {
           method: "post",
         }),
       ]);
-      await page.waitForSelector(`pre:has-text("${CHEESESTEAK}")`);
+      // Check full HTML here - Chromium/Firefox/Webkit seem to render this in
+      // a <pre> but Edge puts it in some weird code editor markup:
+      // <body data-code-mirror="Readonly code editor.">
+      //   <div hidden="true">"LUNCH"</div>
+      expect(await app.getHtml()).toContain(CHEESESTEAK);
     });
   });
 

integration/hmr-test.ts

@@ -590,7 +590,7 @@ whatsup
     // let expectedErrorCount = 0;
     let expectDestructureTypeError = expectConsoleError((error) => {
       let expectedMessage = new Set([
-        // chrome, edge
+        // chrome, msedge
         "Cannot destructure property 'hello' of 'useLoaderData(...)' as it is null.",
         // firefox
         "(intermediate value)() is null",

integration/playwright.config.ts

@@ -26,8 +26,13 @@ const config: PlaywrightTestConfig = {
       use: devices["Desktop Safari"],
     },
     {
-      name: "edge",
-      use: devices["Desktop Edge"],
+      name: "msedge",
+      use: {
+        ...devices["Desktop Edge"],
+        // Desktop Edge uses chromium by default
+        // https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json#L1502
+        channel: "msedge",
+      },
     },
     {
       name: "firefox",