Run smoke tests for React 18

redwoodjs · Jun 5, 2024 · 38a5203 · 38a5203
1 parent 70f7a42
commit 38a5203
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 12 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -281,6 +281,105 @@ jobs:
     steps:
       - run: echo "Skipped"
 
+  smoke-tests-react-18:
+    needs: check
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+        bundler: [vite, webpack]
+
+    name: 🔄 Smoke tests React 18 / ${{ matrix.os }} / ${{ matrix.bundler }} / node 20 latest
+    runs-on: ${{ matrix.os }}
+
+    env:
+      REDWOOD_CI: 1
+      REDWOOD_VERBOSE_TELEMETRY: 1
+
+    steps:
+      - name: Checkout the framework code
+        uses: actions/checkout@v4
+        with:
+          path: __tmp__fw_copy
+
+      - name: Set up job
+        uses: ./.github/actions/set-up-job
+        with:
+          yarn-install-directory: ./__tmp__fw_copy
+
+      - name: 🌲 Set up test project for React 18
+        id: set-up-test-project-react-18
+        working-directory: __tmp__fw_copy
+        uses: ./.github/actions/set-up-test-project
+        with:
+          bundler: ${{ matrix.bundler }}
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false
+
+      - name: 🎭 Install playwright dependencies
+        run: npx playwright install --with-deps chromium
+
+      - name: 🧑‍💻 Run dev smoke tests
+        working-directory: ./tasks/smoke-tests/dev
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: '${{ steps.set-up-test-project-react-18.outputs.test-project-path }}'
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: 🔐 Run auth smoke tests
+        working-directory: ./tasks/smoke-tests/auth
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: ${{ steps.set-up-test-project-react-18.outputs.test-project-path }}
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: Run `rw build --no-prerender`
+        run: |
+          yarn rw build --no-prerender
+        working-directory: ${{ steps.set-up-test-project-react-18.outputs.test-project-path }}
+
+      - name: Run `rw prerender`
+        run: |
+          yarn rw prerender --verbose
+        working-directory: ${{ steps.set-up-test-project-react-18.outputs.test-project-path }}
+
+      - name: 🖥️ Run serve smoke tests
+        working-directory: tasks/smoke-tests/serve
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: ${{ steps.set-up-test-project-react-18.outputs.test-project-path }}
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: 📄 Run prerender smoke tests
+        working-directory: tasks/smoke-tests/prerender
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: ${{ steps.set-up-test-project-react-18.outputs.test-project-path }}
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: 📕 Run Storybook smoke tests
+        working-directory: tasks/smoke-tests/storybook
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: ${{ steps.set-up-test-project-react-18.outputs.test-project-path }}
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+  smoke-tests-react-18-skip:
+    needs: detect-changes
+    if: needs.detect-changes.outputs.code == 'false'
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+        bundler: [vite, webpack]
+
+    name: 🔄 Smoke tests React 18 / ${{ matrix.os }} / ${{ matrix.bundler }} / node 20 latest
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - run: echo "Skipped"
+
   cli-smoke-tests:
     needs: check
 

diff --git a/tasks/smoke-tests/shared/common.ts b/tasks/smoke-tests/shared/common.ts
@@ -7,39 +7,39 @@ export async function smokeTest({ page }: PlaywrightTestArgs) {
   // Check that the blog posts load. We're deliberately not checking their titles because we edit them in other tests.
   await expect(
     page.getByText(
-      'Meh waistcoat succulents umami asymmetrical, hoodie post-ironic paleo chillwave '
-    )
+      'Meh waistcoat succulents umami asymmetrical, hoodie post-ironic paleo chillwave ',
+    ),
   ).toBeVisible()
   await expect(
     page.getByText(
-      'Raclette shoreditch before they sold out lyft. Ethical bicycle rights meh prism '
-    )
+      'Raclette shoreditch before they sold out lyft. Ethical bicycle rights meh prism ',
+    ),
   ).toBeVisible()
   await expect(
     page.getByText(
-      "I'm baby single- origin coffee kickstarter lo - fi paleo skateboard.Tumblr hasht"
-    )
+      "I'm baby single- origin coffee kickstarter lo - fi paleo skateboard.Tumblr hasht",
+    ),
   ).toBeVisible()
 
   // CSS checks. We saw this break when we switched bundlers, so while it's not comprehensive, it's at least something.
   // While playwright recommends against using locators that are too-closely tied to the DOM, `#redwood-app` is a stable ID.
   const bgBlue700 = 'rgb(29, 78, 216)'
   expect(page.locator('#redwood-app > header')).toHaveCSS(
     'background-color',
-    bgBlue700
+    bgBlue700,
   )
 
   const textBlue400 = 'rgb(96, 165, 250)'
-  expect(await page.getByRole('link', { name: 'Redwood Blog' })).toHaveCSS(
+  expect(page.getByRole('link', { name: 'Redwood Blog' })).toHaveCSS(
     'color',
-    textBlue400
+    textBlue400,
   )
 
   // Check the about page.
   await page.getByRole('link', { name: 'About', exact: true }).click()
   expect(page.url()).toBe('http://localhost:8910/about')
-  await page.getByText(
-    'This site was created to demonstrate my mastery of Redwood: Look on my works, ye'
+  page.getByText(
+    'This site was created to demonstrate my mastery of Redwood: Look on my works, ye',
   )
 
   // Check the contact us page.
@@ -78,7 +78,7 @@ export const signUpTestUser = async ({
   await Promise.race([
     page.waitForURL('/'),
     expect(
-      page.getByText(`Username \`${email}\` already in use`)
+      page.getByText(`Username \`${email}\` already in use`),
     ).toBeVisible(),
   ])
 }