diff --git a/package-lock.json b/package-lock.json index 3da2036..2696ea5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "armakuni-way", "version": "1.0.0", "dependencies": { + "@axe-core/playwright": "^4.10.0", "@fontsource/maven-pro": "^5.0.16", "@heroicons/react": "^2.1.5", "@mdx-js/react": "^3.0.1", @@ -190,6 +191,18 @@ "node": ">=8" } }, + "node_modules/@axe-core/playwright": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.10.0.tgz", + "integrity": "sha512-kEr3JPEVUSnKIYp/egV2jvFj+chIjCjPp3K3zlpJMza/CB3TFw8UZNbI9agEC2uMz4YbgAOyzlbUy0QS+OofFA==", + "license": "MPL-2.0", + "dependencies": { + "axe-core": "~4.10.0" + }, + "peerDependencies": { + "playwright-core": ">= 1.0.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.7.tgz", @@ -19684,7 +19697,6 @@ "version": "1.47.2", "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.2.tgz", "integrity": "sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==", - "dev": true, "license": "Apache-2.0", "bin": { "playwright-core": "cli.js" diff --git a/package.json b/package.json index 05d45ea..c263cde 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,8 @@ "gatsby" ], "scripts": { - "lint": "eslint --cache --cache-location=./node_modules/.eslintcache src", - "lint:fix": "eslint --cache --cache-location=./node_modules/.eslintcache --fix src", + "lint": "eslint --cache --cache-location=./node_modules/.eslintcache src tests", + "lint:fix": "eslint --cache --cache-location=./node_modules/.eslintcache --fix src tests", "test:unit": "vitest", "test:e2e": "playwright test", "develop": "gatsby develop", @@ -23,6 +23,7 @@ "node": ">=v22.2.0" }, "dependencies": { + "@axe-core/playwright": "^4.10.0", "@fontsource/maven-pro": "^5.0.16", "@heroicons/react": "^2.1.5", "@mdx-js/react": "^3.0.1", diff --git a/playwright.config.ts b/playwright.config.ts index db10fb3..b666320 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -1,6 +1,6 @@ import { defineConfig, devices } from '@playwright/test'; -const baseUrl = process.env.PW_BASE_URL ? process.env.PW_BASE_URL : 'http://localhost:8000'; +const baseUrl = process.env.PW_BASE_URL ? process.env.PW_BASE_URL : 'http://localhost:8002'; const startWebserver = !process.env.PW_BASE_URL; export default defineConfig({ @@ -47,7 +47,7 @@ export default defineConfig({ ], // Run your local dev server before starting the tests. webServer: startWebserver ? { - command: 'npm run start', + command: 'npm run start -- --port 8002', url: baseUrl, reuseExistingServer: !process.env.CI, timeout: 5 * 60 * 1000, diff --git a/src/components/post-layout.tsx b/src/components/post-layout.tsx index aeadbe2..491eb7f 100644 --- a/src/components/post-layout.tsx +++ b/src/components/post-layout.tsx @@ -25,6 +25,7 @@ export default function PostLayout({ children }: PostLayoutProps) { return ( <> + {data.mdx.frontmatter.title} - {data.site.siteMetadata.title} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9f9910c..1e3ee0f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -191,6 +191,7 @@ export default IndexPage; export const Head: HeadFC = () => { return ( <> + Armakuni Way diff --git a/tailwind.config.mts b/tailwind.config.mts index 27c6e0c..6f33427 100644 --- a/tailwind.config.mts +++ b/tailwind.config.mts @@ -18,8 +18,8 @@ module.exports = { sans: ['"Maven Pro"', ...defaultTheme.fontFamily.sans], }, colors: { - "info-light": "oklch(var(--info-light) / 1)", - "info-light-content": "oklch(var(--info-light-content) / 1)", + "info-light": "var(--info-light)", + "info-light-content": "var(--info-light-content)", }, }, }, @@ -32,7 +32,7 @@ module.exports = { "primary-content": "#ffffff", secondary: "#d6f3ff", "secondary-content": "#000", - accent: "#eb339e", + accent: "#EB66B3", "accent-content": "#000", neutral: "#ffffff", "neutral-content": "#000000", @@ -40,16 +40,16 @@ module.exports = { "base-200": "#dedede", "base-300": "#bebebe", "base-content": "#161616", - info: "#1b95c5", + info: "#00A4EB", "info-content": "#000", success: "#7db701", "success-content": "#000", warning: "#f49301", "warning-content": "#000", - error: "#db180f", + error: "#F56861", "error-content": "#000", - "--info-light": "72.59% 0.1236 230.28", - "--info-light-content": "0% 0 0", + "--info-light": "#62C1EA", + "--info-light-content": "#000000", }, }, { @@ -58,7 +58,7 @@ module.exports = { "primary-content": "#ffffff", secondary: "#d6f3ff", "secondary-content": "#000", - accent: "#eb339e", + accent: "#EB66B3", "accent-content": "#000", neutral: "#000", "neutral-content": "#ffffff", @@ -66,16 +66,16 @@ module.exports = { "base-200": "#001222", "base-300": "#000e1c", "base-content": "#c5cbd0", - info: "#1b95c5", + info: "#00A4EB", "info-content": "#000", success: "#7db701", "success-content": "#000", warning: "#f49301", "warning-content": "#000", - error: "#db180f", + error: "#F56861", "error-content": "#000", - "--info-light": "72.59% 0.1236 230.28", - "--info-light-content": "0% 0 0", + "--info-light": "#62C1EA", + "--info-light-content": "#000000", }, }, ], diff --git a/tests/index.test.ts b/tests/index.test.ts index d3f5c74..b345732 100644 --- a/tests/index.test.ts +++ b/tests/index.test.ts @@ -1,19 +1,57 @@ -import { test } from '@playwright/test'; +import AxeBuilder from "@axe-core/playwright"; +import { test } from "@playwright/test"; +test.describe("index page", () => { + test.beforeEach(async ({ page }) => { + await page.goto("/"); + }); -test('it should have at least one page', async ({ page }) => { - await page.goto("/") - test.expect(await page.getByRole("main").getByRole("link").count()).toBeGreaterThan(1) -}); + test("it should have at least one page", async ({ page }) => { + test + .expect(await page.getByRole("main").getByRole("link").count()) + .toBeGreaterThan(1); + }); + + test("it should link to the details page", async ({ page }) => { + const locator = page.getByRole("main").getByRole("link").first(); + const headingText = await locator + .getByRole("heading", { level: 3 }) + .textContent(); + + test.expect(headingText).not.toBe(null); + + await locator.click(); + await page.getByRole("heading", { level: 1 }).first().waitFor(); + await test + .expect(page.getByRole("heading", { level: 1 }).first()) + .toHaveText(headingText ?? ""); + }); + + test.describe("a11y", () => { + test.describe("light mode", () => { + test.use({ colorScheme: "light" }); + test("should not have any automatically detectable accessibility issues", async ({ + page, + }) => { + const accessibilityScanResults = await new AxeBuilder({ + page, + }).analyze(); -test('it should link to the details page', async ({ page }) => { - await page.goto("/") - const locator = page.getByRole("main").getByRole("link").first(); - const headingText = await locator.getByRole("heading", {level: 3}).textContent(); + test.expect(accessibilityScanResults.violations).toEqual([]); + }); + }); - test.expect(headingText).not.toBe(null) + test.describe("dark mode", () => { + test.use({ colorScheme: "dark" }); + test("should not have any automatically detectable accessibility issues", async ({ + page, + }) => { + const accessibilityScanResults = await new AxeBuilder({ + page, + }).analyze(); - await locator.click() - await page.getByRole("heading", {level: 1}).first().waitFor() - await test.expect(page.getByRole("heading", {level: 1}).first()).toHaveText(headingText ?? "") + test.expect(accessibilityScanResults.violations).toEqual([]); + }); + }); + }); }); diff --git a/tests/post.test.ts b/tests/post.test.ts index 6d312c2..ef17733 100644 --- a/tests/post.test.ts +++ b/tests/post.test.ts @@ -1,17 +1,48 @@ -import { test } from '@playwright/test'; -import { expect } from "vitest"; +import AxeBuilder from "@axe-core/playwright"; +import { test } from "@playwright/test"; -test.beforeEach(async ({ page }) => { - await page.goto("/") - const locator = page.getByRole("main").getByRole("link").first(); - const headingText = await locator.getByRole("heading", {level: 3}).textContent(); +test.describe("post page", () => { + test.beforeEach(async ({ page }) => { + await page.goto("/"); + const locator = page.getByRole("main").getByRole("link").first(); + const headingText = await locator + .getByRole("heading", { level: 3 }) + .textContent(); - test.expect(headingText).not.toBe(null) + test.expect(headingText).not.toBe(null); - await locator.click() - await page.getByRole("heading", {level: 1}).first().waitFor() -}) + await locator.click(); + await page.getByRole("heading", { level: 1 }).first().waitFor(); + }); -test('it should have a header', async ({ page }) => { - await test.expect(page.getByRole("heading", {level: 1})).toBeVisible() + test("it should have a header", async ({ page }) => { + await test.expect(page.getByRole("heading", { level: 1 })).toBeVisible(); + }); + + test.describe("a11y", () => { + test.describe("light mode", () => { + test.use({ colorScheme: "light" }); + test("should not have any automatically detectable accessibility issues", async ({ + page, + }) => { + const accessibilityScanResults = await new AxeBuilder({ + page, + }).analyze(); + + test.expect(accessibilityScanResults.violations).toEqual([]); + }); + }); + test.describe("dark mode", () => { + test.use({ colorScheme: "dark" }); + test("should not have any automatically detectable accessibility issues", async ({ + page, + }) => { + const accessibilityScanResults = await new AxeBuilder({ + page, + }).analyze(); + + test.expect(accessibilityScanResults.violations).toEqual([]); + }); + }); + }); });