From 4fcf01c0484a7bb727d78c40746d29dead494d59 Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Sun, 28 May 2023 18:16:05 -0400 Subject: [PATCH] Improve e2e and GitHub Actions caching (#3805) * Update GH Actions * Fix unit test command * Fix next-link issue * Fix start:app * Fix react * Fix playwright tests w/react event system changes * Use .blur() in playwright (h/t chatgpt for messing this up) * Upgrade @testing-library/react * Switch to .blur() * Fix e2e react usage (#3806) * Fix e2e react usage * Fix lockfile --- .github/workflows/playwright.yml | 34 ++++++- .github/workflows/release.yml | 24 +++-- .github/workflows/size.yml | 2 +- .github/workflows/test.yml | 17 ++-- app/package.json | 6 +- app/pages/basic.js | 151 ++++++++++++++-------------- app/pages/index.tsx | 8 +- e2e/basic.test.ts | 34 +++---- package.json | 4 +- packages/formik-native/package.json | 2 +- playwright.config.ts | 2 +- yarn.lock | 128 ++++++++++++----------- 12 files changed, 233 insertions(+), 179 deletions(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 279919834..58fbca7d0 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -6,17 +6,47 @@ on: branches: [main] jobs: test: - timeout-minutes: 10 + timeout-minutes: 5 runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 + + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT + + - uses: actions/cache@v3 + id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + - name: Install dependencies run: yarn + + - name: Get installed Playwright version + id: playwright-version + run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV + + - name: Cache playwright binaries + uses: actions/cache@v3 + id: playwright-cache + with: + path: | + ~/.cache/ms-playwright + key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }} + - name: Install Playwright Browsers run: yarn playwright install --with-deps + if: steps.playwright-cache.outputs.cache-hit != 'true' + - run: yarn playwright install-deps + if: steps.playwright-cache.outputs.cache-hit != 'true' + - name: Run Playwright tests run: yarn playwright test - uses: actions/upload-artifact@v3 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index a997687c3..1d843022b 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -9,17 +9,29 @@ jobs: runs-on: ubuntu-latest if: github.repository == 'jaredpalmer/formik' steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 with: fetch-depth: 0 - - name: Use Node.js 16.x - uses: actions/setup-node@v1 + - name: Use Node.js 18.x + uses: actions/setup-node@v3 with: - version: 16.x + node-version: 18.x - - name: Install deps and build (with cache) - uses: bahmutov/npm-install@v1 + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT + + - uses: actions/cache@v3 + id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + + - name: Install Dependencies + run: yarn install - name: Create Release Pull Request or Publish to npm uses: changesets/action@master diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml index 7046621ab..7c515450a 100644 --- a/.github/workflows/size.yml +++ b/.github/workflows/size.yml @@ -7,7 +7,7 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 with: fetch-depth: 1 - uses: preactjs/compressed-size-action@v2 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index e181b01d0..db604f312 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -10,22 +10,27 @@ jobs: strategy: matrix: - node: ['16.x'] + node: ['18.x'] name: Test on node ${{ matrix.node }} steps: - - uses: actions/checkout@v1 + - uses: actions/checkout@v3 - name: Use Node.js ${{ matrix.node }} - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: node-version: ${{ matrix.node }} - - uses: actions/cache@v1 + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT + + - uses: actions/cache@v3 + id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) with: - path: ~/.cache/yarn - key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }} + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} restore-keys: | ${{ runner.os }}-yarn- diff --git a/app/package.json b/app/package.json index 33e5288ae..ce92f0df3 100644 --- a/app/package.json +++ b/app/package.json @@ -9,9 +9,9 @@ }, "dependencies": { "formik": "latest", - "next": "latest", - "react": "latest", - "react-dom": "latest", + "next": "^12.0.0", + "react": "^17.0.1", + "react-dom": "^17.0.1", "yup": "^0.29.3" }, "devDependencies": { diff --git a/app/pages/basic.js b/app/pages/basic.js index aa55c2b07..9149dc8d0 100644 --- a/app/pages/basic.js +++ b/app/pages/basic.js @@ -2,84 +2,87 @@ import React from 'react'; import { Formik, Field, Form, ErrorMessage } from 'formik'; import * as Yup from 'yup'; -let renderCount = 0; +const Basic = () => { + const renderCount = React.useRef(0); + return ( +
+

Sign Up

+ { + await new Promise(r => setTimeout(r, 500)); + alert(JSON.stringify(values, null, 2)); + }} + > +
+ + -const Basic = () => ( -
-

Sign Up

- { - await new Promise(r => setTimeout(r, 500)); - alert(JSON.stringify(values, null, 2)); - }} - > - - - + + - - + + - - - - - -
Checkbox Group
-
- - -
-
Picked
-
- - -
- -
{renderCount++}
- - -
-); + +
Checkbox Group
+
+ + + +
+
Picked
+
+ + +
+ +
{renderCount.current++}
+ +
+
+ ); +}; export default Basic; diff --git a/app/pages/index.tsx b/app/pages/index.tsx index 30daffeed..d0f46ea50 100644 --- a/app/pages/index.tsx +++ b/app/pages/index.tsx @@ -7,14 +7,10 @@ function Home() {

Formik Examples and Fixtures