Skip to content

Commit

Permalink
build(setup): Port playwright setup
Browse files Browse the repository at this point in the history
  • Loading branch information
joerideg committed Jul 5, 2024
1 parent 2f73b98 commit 5a52f85
Show file tree
Hide file tree
Showing 14 changed files with 207 additions and 513 deletions.
74 changes: 74 additions & 0 deletions .github/workflows/cicd.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ on:
pull_request:
workflow_dispatch:
inputs:
update-snapshots:
description: "Update snapshots"
type: boolean
do_release:
type: boolean
default: false
Expand Down Expand Up @@ -70,6 +73,15 @@ jobs:
- name: Run unit & integration test
run: pnpm test

- name: Upload coverage artifacts
uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
path: coverage
name: coverage
retention-days: 30
overwrite: true

- name: Build distribution assets
run: pnpm build

Expand All @@ -79,6 +91,68 @@ jobs:
path: dist
key: ${{ runner.os }}-build-${{ github.sha }}

- name: Upload build artifacts
uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
path: dist
name: assets
retention-days: 30
overwrite: true

e2e:
name: Run end-to-end tests
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0

- name: Setup PNPM
uses: pnpm/action-setup@v3
with:
run_install: false

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version-file: package.json
cache: 'pnpm'
cache-dependency-path: pnpm-lock.yaml

- name: Install dependencies
run: pnpm install

- name: Build storybook
run: pnpm storybook:build

- name: Install playwright browsers
run: pnpm playwright install --with-deps

- name: Setup screenshots cache
id: screenshot-cache
uses: actions/cache@v4
with:
key: ${{ runner.os }}-build-${{ github.ref }}
path: src/**/*-snapshots/*

- name: Initialize screenshots
if: ${{steps.screenshot-cache.outputs.cache-hit != 'true' || inputs.update-snapshots == 'true'}}
run: pnpm e2e --update-snapshots

- name: Run tests
run: pnpm e2e

- name: Upload e2e artifacts
uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: playwright-report
path: playwright-report/
retention-days: 30
overwrite: true

release:
if:
${{ github.event_name == 'workflow_dispatch' && github.event.inputs.do_release == 'true' &&
Expand Down
29 changes: 13 additions & 16 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,33 +1,30 @@
.env
node_modules/
dist/
docs/
coverage/
storybook-static/
playwright-report/
playwright/.cache/
test-results/
*storybook.log
.env
.secrets

# AI output
.aider*

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.vim
.aider*

*storybook.log
# Other
.DS_Store
1 change: 0 additions & 1 deletion .storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import THEME from './theme';
const preview: Preview = {
tags: ['autodocs'],
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
Expand Down
22 changes: 12 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,10 @@
"test:watch": "vitest",
"type-check": "tsc --noEmit",
"generate": "plop",
"storybook": "storybook dev -p 6006",
"storybook:build": "storybook build",
"storybook:upload": "pnpm dlx ts-node --esm --transpile-only scripts/sb-upload/index.ts",
"storybook": "storybook dev -p 6006"
"e2e": "playwright test",
"e2e:report": "playwright show-report"
},
"dependencies": {
"react": "^18.3.1",
Expand All @@ -42,23 +43,24 @@
"@faker-js/faker": "^8.4.1",
"@playwright/test": "1.42.1",
"@semantic-release/git": "^10.0.1",
"@storybook/addon-a11y": "8.1.1",
"@storybook/addon-actions": "8.1.1",
"@storybook/addon-a11y": "^8.1.11",
"@storybook/addon-actions": "^8.1.11",
"@storybook/addon-essentials": "^8.1.11",
"@storybook/addon-interactions": "^8.1.11",
"@storybook/addon-links": "^8.1.11",
"@storybook/addon-mdx-gfm": "8.1.1",
"@storybook/addon-mdx-gfm": "^8.1.11",
"@storybook/addon-onboarding": "^8.1.11",
"@storybook/addon-storysource": "8.1.1",
"@storybook/addon-storysource": "^8.1.11",
"@storybook/blocks": "^8.1.11",
"@storybook/cli": "8.1.1",
"@storybook/manager-api": "8.1.1",
"@storybook/preview-api": "8.1.1",
"@storybook/cli": "^8.1.11",
"@storybook/manager-api": "^8.1.11",
"@storybook/preview-api": "^8.1.11",
"@storybook/react": "^8.1.11",
"@storybook/react-vite": "^8.1.11",
"@storybook/test": "^8.1.11",
"@storybook/theming": "8.1.1",
"@storybook/theming": "^8.1.11",
"@testing-library/react": "^16.0.0",
"@types/node": "20",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.13.1",
Expand Down
68 changes: 68 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { defineConfig, devices } from '@playwright/test';

const PORT = process.env.PORT ? +process.env.PORT : 5678;

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './src',
/* 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 ? '50%' : 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:${PORT}`,

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},

expect: {
toHaveScreenshot: {
/* Allow 0.05% difference in pixels for a screenshot to be valid */
maxDiffPixelRatio: 0.05,
/* Allow only 10% of color difference for visual tests because
the component border colors have a really small difference */
threshold: 0.1,
},
},

testMatch: '**/?(*.)+(test).ts?(x)',

/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
{
name: 'edge',
use: { ...devices['Desktop Edge'] },
},
],

/* Run your local server before starting the tests */
webServer: {
command: `pnpm dlx servor storybook-static index.html ${PORT}`,
port: PORT,
reuseExistingServer: !process.env.CI,
},
});

4 changes: 2 additions & 2 deletions plop-templates/component/{{ dashCase name }}.stories.tsx.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Meta, StoryObj } from '@storybook/react';
import {{pascalCase name}} from './{{kebabCase name}}';

const meta: Meta<typeof {{pascalCase name}}> = {
title: '{{pascalCase name}}',
component: {{pascalCase name}},
title: '{{kebabCase name}}',
component: {{kebabCase name}},
tags: ['autodocs'],
args: {
/**
Expand Down
2 changes: 1 addition & 1 deletion plop-templates/component/{{ dashCase name }}.test.tsx.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';

test.describe('{{pascalCase name}}', () => {
test.describe('Base', () => {
const storyId = '{{kebabCase name}}-qa--basic';
const storyId = '{{pascalCase name}}-qa--basic';

test('should render successfully', async ({ page }) => {
await page.goto(`/iframe.html?id=${storyId}`);
Expand Down
Loading

0 comments on commit 5a52f85

Please sign in to comment.