From ed96c7ee744db7428674fbab6b898ab816eee629 Mon Sep 17 00:00:00 2001 From: keitakn Date: Tue, 8 Oct 2024 14:46:20 +0900 Subject: [PATCH 1/3] :construction: #351 From 558b1356e56c6f96762016bb23d2f094b70ee1fa Mon Sep 17 00:00:00 2001 From: keitakn Date: Tue, 8 Oct 2024 23:16:50 +0900 Subject: [PATCH 2/3] =?UTF-8?q?:green=5Fheart:=20#351=20E2E=E3=83=86?= =?UTF-8?q?=E3=82=B9=E3=83=88=E3=81=AE=E7=82=BA=E3=81=ABplaywright?= =?UTF-8?q?=E3=81=AE=E5=AE=9F=E8=A1=8C=E7=92=B0=E5=A2=83=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 5 ++ package-lock.json | 181 ++++++++++++++++++++++++++++++++++++----- package.json | 13 ++- playwright.config.ts | 79 ++++++++++++++++++ tests-e2e/home.spec.ts | 7 ++ vitest.config.mts | 1 + 6 files changed, 261 insertions(+), 25 deletions(-) create mode 100644 playwright.config.ts create mode 100644 tests-e2e/home.spec.ts diff --git a/.gitignore b/.gitignore index e9da8f00..228438f8 100644 --- a/.gitignore +++ b/.gitignore @@ -56,3 +56,8 @@ build-storybook.log # Stylelint .stylelintcache +node_modules/ +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/package-lock.json b/package-lock.json index a5d74cf4..904f58bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@eslint/js": "^9.9.0", "@ianvs/prettier-plugin-sort-imports": "^4.3.1", "@next/env": "^14.2.5", + "@playwright/test": "^1.47.2", "@storybook/addon-a11y": "^8.2.9", "@storybook/addon-essentials": "^8.2.9", "@storybook/addon-interactions": "^8.2.9", @@ -37,6 +38,7 @@ "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@types/eslint": "^9.6.0", + "@types/node": "^22.7.5", "@types/prettier": "^2.7.3", "@types/react": "18.3.3", "@typescript-eslint/eslint-plugin": "7.18.0", @@ -61,6 +63,7 @@ "msw": "^2.3.5", "msw-storybook-addon": "2.0.3", "npm-run-all": "^4.1.5", + "playwright": "^1.47.2", "postcss": "^8.4.41", "prettier": "^3.3.3", "storybook": "^8.2.9", @@ -3236,15 +3239,6 @@ "node": ">=18" } }, - "node_modules/@inquirer/core/node_modules/@types/node": { - "version": "22.4.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.4.0.tgz", - "integrity": "sha512-49AbMDwYUz7EXxKU/r7mXOsxwFr4BYbvB7tWYxVuLdb2ibd30ijjXINSMAHiEEZk5PCRBmW1gUeisn2VMKt3cQ==", - "dev": true, - "dependencies": { - "undici-types": "~6.19.2" - } - }, "node_modules/@inquirer/core/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -3292,12 +3286,6 @@ "node": ">=8" } }, - "node_modules/@inquirer/core/node_modules/undici-types": { - "version": "6.19.6", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.6.tgz", - "integrity": "sha512-e/vggGopEfTKSvj4ihnOLTsqhrKRN3LeO6qSN/GxohhuRv8qH9bNQ4B8W7e/vFL+0XTnmHPB4/kegunZGA4Org==", - "dev": true - }, "node_modules/@inquirer/core/node_modules/wrap-ansi": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", @@ -4165,6 +4153,21 @@ "node": ">=14" } }, + "node_modules/@playwright/test": { + "version": "1.47.2", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.47.2.tgz", + "integrity": "sha512-jTXRsoSPONAs8Za9QEQdyjFn+0ZQFjCiIztAIF6bi1HqhBzG9Ma7g1WotyiGqFSBRZjIEqMdT8RUlbk1QVhzCQ==", + "dev": true, + "dependencies": { + "playwright": "1.47.2" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.15", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz", @@ -6912,6 +6915,21 @@ } } }, + "node_modules/@storybook/builder-webpack5/node_modules/@types/node": { + "version": "18.19.55", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.55.tgz", + "integrity": "sha512-zzw5Vw52205Zr/nmErSEkN5FLqXPuKX/k5d1D7RKHATGqU7y6YfX9QxZraUzUrFGqH6XzOzG196BC35ltJC4Cw==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, + "node_modules/@storybook/builder-webpack5/node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/@storybook/codemod": { "version": "8.2.9", "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-8.2.9.tgz", @@ -7034,6 +7052,36 @@ "storybook": "^8.2.9" } }, + "node_modules/@storybook/core-webpack/node_modules/@types/node": { + "version": "18.19.55", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.55.tgz", + "integrity": "sha512-zzw5Vw52205Zr/nmErSEkN5FLqXPuKX/k5d1D7RKHATGqU7y6YfX9QxZraUzUrFGqH6XzOzG196BC35ltJC4Cw==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, + "node_modules/@storybook/core-webpack/node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, + "node_modules/@storybook/core/node_modules/@types/node": { + "version": "18.19.55", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.55.tgz", + "integrity": "sha512-zzw5Vw52205Zr/nmErSEkN5FLqXPuKX/k5d1D7RKHATGqU7y6YfX9QxZraUzUrFGqH6XzOzG196BC35ltJC4Cw==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, + "node_modules/@storybook/core/node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/@storybook/csf": { "version": "0.1.11", "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.11.tgz", @@ -7208,6 +7256,21 @@ } } }, + "node_modules/@storybook/nextjs/node_modules/@types/node": { + "version": "18.19.55", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.55.tgz", + "integrity": "sha512-zzw5Vw52205Zr/nmErSEkN5FLqXPuKX/k5d1D7RKHATGqU7y6YfX9QxZraUzUrFGqH6XzOzG196BC35ltJC4Cw==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, + "node_modules/@storybook/nextjs/node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/@storybook/preset-react-webpack": { "version": "8.2.9", "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-8.2.9.tgz", @@ -7246,6 +7309,21 @@ } } }, + "node_modules/@storybook/preset-react-webpack/node_modules/@types/node": { + "version": "18.19.55", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.55.tgz", + "integrity": "sha512-zzw5Vw52205Zr/nmErSEkN5FLqXPuKX/k5d1D7RKHATGqU7y6YfX9QxZraUzUrFGqH6XzOzG196BC35ltJC4Cw==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, + "node_modules/@storybook/preset-react-webpack/node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/@storybook/preview-api": { "version": "8.2.9", "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.2.9.tgz", @@ -7346,6 +7424,21 @@ "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==", "dev": true }, + "node_modules/@storybook/react/node_modules/@types/node": { + "version": "18.19.55", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.55.tgz", + "integrity": "sha512-zzw5Vw52205Zr/nmErSEkN5FLqXPuKX/k5d1D7RKHATGqU7y6YfX9QxZraUzUrFGqH6XzOzG196BC35ltJC4Cw==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, + "node_modules/@storybook/react/node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/@storybook/test": { "version": "8.2.9", "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.2.9.tgz", @@ -8106,11 +8199,11 @@ } }, "node_modules/@types/node": { - "version": "18.19.44", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.44.tgz", - "integrity": "sha512-ZsbGerYg72WMXUIE9fYxtvfzLEuq6q8mKERdWFnqTmOvudMxnz+CBNRoOwJ2kNpFOncrKjT1hZwxjlFgQ9qvQA==", + "version": "22.7.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.5.tgz", + "integrity": "sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==", "dependencies": { - "undici-types": "~5.26.4" + "undici-types": "~6.19.2" } }, "node_modules/@types/parse-json": { @@ -17259,6 +17352,50 @@ "pathe": "^1.1.2" } }, + "node_modules/playwright": { + "version": "1.47.2", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.47.2.tgz", + "integrity": "sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==", + "dev": true, + "dependencies": { + "playwright-core": "1.47.2" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.47.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.2.tgz", + "integrity": "sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==", + "dev": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/pnp-webpack-plugin": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.7.0.tgz", @@ -20602,9 +20739,9 @@ } }, "node_modules/undici-types": { - "version": "5.26.5", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==" }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", diff --git a/package.json b/package.json index 56c6ba5b..722f0eef 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,13 @@ "fix:eslint": "npm run lint:eslint -- --fix", "lint": "run-s lint:*", "format": "run-s fix:*", - "test": "vitest", - "test:coverage": "vitest run --coverage", - "test:ci": "vitest run --coverage", + "test": "vitest --exclude **/tests-e2e/**", + "test:coverage": "vitest run --coverage --exclude **/tests-e2e/**", + "test:ci": "vitest run --coverage --exclude **/tests-e2e/**", + "test:e2e": "npx playwright test", + "test:e2e:debug": "npx playwright test --debug", + "test:e2e:report": "npx playwright show-report", + "test:e2e:codegen": "npx playwright codegen", "storybook": "storybook dev -p 6008", "build-storybook": "storybook build", "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN" @@ -37,6 +41,7 @@ "@eslint/js": "^9.9.0", "@ianvs/prettier-plugin-sort-imports": "^4.3.1", "@next/env": "^14.2.5", + "@playwright/test": "^1.47.2", "@storybook/addon-a11y": "^8.2.9", "@storybook/addon-essentials": "^8.2.9", "@storybook/addon-interactions": "^8.2.9", @@ -49,6 +54,7 @@ "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", "@types/eslint": "^9.6.0", + "@types/node": "^22.7.5", "@types/prettier": "^2.7.3", "@types/react": "18.3.3", "@typescript-eslint/eslint-plugin": "7.18.0", @@ -73,6 +79,7 @@ "msw": "^2.3.5", "msw-storybook-addon": "2.0.3", "npm-run-all": "^4.1.5", + "playwright": "^1.47.2", "postcss": "^8.4.41", "prettier": "^3.3.3", "storybook": "^8.2.9", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 00000000..b655c753 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,79 @@ +import { defineConfig, devices } from '@playwright/test'; + +/** + * 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-e2e', + /* 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 == null), + /* Retry on CI only */ + retries: process.env.CI != null ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI != null ? 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: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + /* 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' }, + // }, + ], + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // url: 'http://127.0.0.1:3000', + // reuseExistingServer: !process.env.CI, + // }, +}); diff --git a/tests-e2e/home.spec.ts b/tests-e2e/home.spec.ts new file mode 100644 index 00000000..6b72a918 --- /dev/null +++ b/tests-e2e/home.spec.ts @@ -0,0 +1,7 @@ +import { test } from '@playwright/test'; + +test('has title', async ({ page }) => { + await page.goto('https://lgtmeow.com/'); + + await page.getByText('LGTMeow').click(); +}); diff --git a/vitest.config.mts b/vitest.config.mts index 1e0cb420..58c9025d 100644 --- a/vitest.config.mts +++ b/vitest.config.mts @@ -24,6 +24,7 @@ export default defineConfig({ 'next.config.js', 'next-env.d.ts', 'sentry.*.config.js', + '**/tests-e2e/**', ], }, exclude: [...configDefaults.exclude], From a677ae731bb1bb40830f938abc16ee7f95e9950e Mon Sep 17 00:00:00 2001 From: keitakn Date: Tue, 8 Oct 2024 23:54:01 +0900 Subject: [PATCH 3/3] =?UTF-8?q?:white=5Fcheck=5Fmark:=20#351=20Header?= =?UTF-8?q?=E3=81=A8Footer=E3=81=AEComponent=E3=83=86=E3=82=B9=E3=83=88?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_components/Footer.test.tsx | 24 ++++++++++++++ src/app/_components/Header.test.tsx | 50 +++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+) create mode 100644 src/app/_components/Footer.test.tsx create mode 100644 src/app/_components/Header.test.tsx diff --git a/src/app/_components/Footer.test.tsx b/src/app/_components/Footer.test.tsx new file mode 100644 index 00000000..9105a44b --- /dev/null +++ b/src/app/_components/Footer.test.tsx @@ -0,0 +1,24 @@ +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import { expect, test } from 'vitest'; +import { Footer } from './Footer'; + +test('show language is ja', () => { + render(