From 5ea00c29314ae7ef7a1203961d9fbbd2217d2d20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marti=CC=81=20Mayoral?= <76410086+martimayoral@users.noreply.github.com> Date: Wed, 27 Nov 2024 18:10:15 +0100 Subject: [PATCH 1/9] add e2e tests with playwright --- .github/workflows/playwright.yml | 35 ++++++ .gitignore | 7 ++ examples/apps/auth-sample/package.json | 3 + .../apps/auth-sample/playwright.config.ts | 103 ++++++++++++++++ .../Sessions/MintNFTButtonSession.tsx | 1 + examples/apps/auth-sample/tests/Logger.ts | 55 +++++++++ .../auth-sample/tests/accountActions.spec.ts | 35 ++++++ examples/apps/auth-sample/tests/auth.setup.ts | 62 ++++++++++ examples/apps/auth-sample/tests/auth.spec.ts | 16 +++ examples/apps/auth-sample/tests/base.spec.ts | 9 ++ examples/apps/auth-sample/tests/constants.ts | 2 + .../auth-sample/tests/embeddedWallet.spec.ts | 105 +++++++++++++++++ .../auth-sample/tests/linkedSocials.spec.ts | 19 +++ .../apps/auth-sample/tests/logout.spec.ts | 10 ++ .../auth-sample/tests/sessionKeys.spec.ts | 67 +++++++++++ .../apps/auth-sample/tests/signatures.spec.ts | 32 +++++ examples/apps/auth-sample/yarn.lock | 80 +++++++++++++ package.json | 111 +++++++++--------- 18 files changed, 697 insertions(+), 55 deletions(-) create mode 100644 .github/workflows/playwright.yml create mode 100644 examples/apps/auth-sample/playwright.config.ts create mode 100644 examples/apps/auth-sample/tests/Logger.ts create mode 100644 examples/apps/auth-sample/tests/accountActions.spec.ts create mode 100644 examples/apps/auth-sample/tests/auth.setup.ts create mode 100644 examples/apps/auth-sample/tests/auth.spec.ts create mode 100644 examples/apps/auth-sample/tests/base.spec.ts create mode 100644 examples/apps/auth-sample/tests/constants.ts create mode 100644 examples/apps/auth-sample/tests/embeddedWallet.spec.ts create mode 100644 examples/apps/auth-sample/tests/linkedSocials.spec.ts create mode 100644 examples/apps/auth-sample/tests/logout.spec.ts create mode 100644 examples/apps/auth-sample/tests/sessionKeys.spec.ts create mode 100644 examples/apps/auth-sample/tests/signatures.spec.ts diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 00000000..3b01b79b --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,35 @@ +name: Playwright Tests +on: + push: + branches: [ main, master ] + pull_request: + branches: [ main, master ] +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 'lts/*' + + - name: Install dependencies + run: npm install -g yarn && yarn + + - name: Install Playwright Browsers + run: yarn playwright install --with-deps + working-directory: sdk + + - name: Run Playwright tests + run: yarn playwright test + working-directory: sdk + + - uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: sdk/playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index bdaa9124..8d035d6c 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,10 @@ dist/ yalc.lock docs/ + +# Test and Playwright related artifacts +/examples/apps/auth-sample/test-results/ +/examples/apps/auth-sample/playwright-report/ +/examples/apps/auth-sample/blob-report/ +/examples/apps/auth-sample/playwright/.cache/ +/examples/apps/auth-sample/playwright/.auth/ diff --git a/examples/apps/auth-sample/package.json b/examples/apps/auth-sample/package.json index c220c856..d3b26d8c 100644 --- a/examples/apps/auth-sample/package.json +++ b/examples/apps/auth-sample/package.json @@ -24,6 +24,7 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cors": "^2.8.5", + "dotenv": "^16.4.5", "ethers": "5.7.2", "jsonwebtoken": "^9.0.2", "lucide-react": "^0.454.0", @@ -37,8 +38,10 @@ "wagmi": "^2.9.2" }, "devDependencies": { + "@playwright/test": "^1.48.0", "@types/cors": "^2.8.17", "@types/jsonwebtoken": "^9.0.7", + "@types/node": "^22.7.5", "@types/react": "^18.3.0", "autoprefixer": "^10.3.4", "eslint": "7.32.0", diff --git a/examples/apps/auth-sample/playwright.config.ts b/examples/apps/auth-sample/playwright.config.ts new file mode 100644 index 00000000..de63e32d --- /dev/null +++ b/examples/apps/auth-sample/playwright.config.ts @@ -0,0 +1,103 @@ +import { defineConfig, devices } from '@playwright/test'; + +import dotenv from 'dotenv'; +import path from 'path'; + +// Alternatively, read from "../my.env" file. +dotenv.config({ path: path.resolve(__dirname, '.env.local') }); + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// import dotenv from 'dotenv'; +// import path from 'path'; +// dotenv.config({ path: path.resolve(__dirname, '.env') }); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './tests', + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: 'http://127.0.0.1:3000', + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + /* Configure projects for major browsers */ + projects: [ + // Setup project + { name: 'setup', testMatch: /.*\.setup\.ts/ }, + + { + name: 'chromium', + use: { + ...devices['Desktop Chrome'], + // Use prepared auth state. + storageState: 'playwright/.auth/user.json', + }, + dependencies: ['setup'], + }, + + { + name: 'firefox', + use: { + ...devices['Desktop Firefox'], + // Use prepared auth state. + storageState: 'playwright/.auth/user.json', + }, + dependencies: ['setup'], + }, + + { + name: 'webkit', + use: { + ...devices['Desktop Safari'], + // Use prepared auth state. + storageState: 'playwright/.auth/user.json', + }, + dependencies: ['setup'], + }, + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { ...devices['Desktop Edge'], channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + // }, + ], + // outputDir: "playwright/.auth/", + + /* Run your local dev server before starting the tests */ + webServer: { + command: 'yarn dev', + url: 'http://127.0.0.1:3000', + reuseExistingServer: !process.env.CI, + }, +}); diff --git a/examples/apps/auth-sample/src/components/Sessions/MintNFTButtonSession.tsx b/examples/apps/auth-sample/src/components/Sessions/MintNFTButtonSession.tsx index 76f56c39..dfee64ae 100644 --- a/examples/apps/auth-sample/src/components/Sessions/MintNFTButtonSession.tsx +++ b/examples/apps/auth-sample/src/components/Sessions/MintNFTButtonSession.tsx @@ -56,6 +56,7 @@ const MintNFTSessionButton: React.FC<{