diff --git a/.prettierignore b/.prettierignore index b45598ac6..f45f23c4d 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,6 @@ node_modules/ .nuxt/ + +playwright-report/ +tests-examples/ +test-results/ diff --git a/frontend/.github/workflows/playwright.yml b/frontend/.github/workflows/playwright.yml index f7f7c1c41..881a55bcf 100644 --- a/frontend/.github/workflows/playwright.yml +++ b/frontend/.github/workflows/playwright.yml @@ -1,27 +1,27 @@ name: Playwright Tests on: push: - branches: [ main, master ] + branches: [main, master] pull_request: - branches: [ main, master ] + 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 - - name: Run Playwright tests - run: yarn playwright test - - uses: actions/upload-artifact@v4 - if: always() - with: - name: playwright-report - path: playwright-report/ - retention-days: 30 + - 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 + - name: Run Playwright tests + run: yarn playwright test + - uses: actions/upload-artifact@v4 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts index 9ab45b83d..d9a07f774 100644 --- a/frontend/playwright.config.ts +++ b/frontend/playwright.config.ts @@ -1,4 +1,4 @@ -import { defineConfig, devices } from '@playwright/test'; +import { defineConfig, devices } from "@playwright/test"; /** * Read environment variables from file. @@ -12,15 +12,15 @@ import { defineConfig, devices } from '@playwright/test'; // Environment configurations const environments = { - local: 'http://127.0.0.1:3000', - prod: 'https://activist.org' + local: "http://127.0.0.1:3000", + prod: "https://activist.org", }; // Determine the environment from the command line or default to 'local' -const ENV = (process.env.TEST_ENV || 'local') as keyof typeof environments; +const ENV = (process.env.TEST_ENV || "local") as keyof typeof environments; export default defineConfig({ - testDir: './tests/specs', + testDir: "./tests/specs", /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ @@ -30,53 +30,53 @@ export default defineConfig({ /* 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', + 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: environments[ENV], /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry', + trace: "on-first-retry", }, /* Configure projects for major desktop browsers */ projects: [ { - name: 'chromium', - use: { ...devices['Desktop Chrome'] }, + name: "chromium", + use: { ...devices["Desktop Chrome"] }, }, { - name: 'firefox', - use: { ...devices['Desktop Firefox'] }, + name: "firefox", + use: { ...devices["Desktop Firefox"] }, }, { - name: 'webkit', - use: { ...devices['Desktop Safari'] }, + name: "webkit", + use: { ...devices["Desktop Safari"] }, }, { - name: 'Microsoft Edge', - use: { ...devices['Desktop Edge'], channel: 'msedge' }, + name: "Microsoft Edge", + use: { ...devices["Desktop Edge"], channel: "msedge" }, }, /* Test against mobile viewports. */ { - name: 'Mobile Chrome', - use: { ...devices['Pixel 5'], isMobile: true }, + name: "Mobile Chrome", + use: { ...devices["Pixel 5"], isMobile: true }, }, { - name: 'Mobile Safari', - use: { ...devices['iPhone 12'], isMobile: true }, + name: "Mobile Safari", + use: { ...devices["iPhone 12"], isMobile: true }, }, { - name: 'Mobile Samsung', - use: { ...devices['Galaxy S20'], isMobile: true }, + name: "Mobile Samsung", + use: { ...devices["Galaxy S20"], isMobile: true }, }, { - name: 'Mobile iPad', - use: { ...devices['iPad (gen 8)'], isMobile: true }, + name: "Mobile iPad", + use: { ...devices["iPad (gen 8)"], isMobile: true }, }, /* Test against branded browsers. */ diff --git a/frontend/tests-examples/demo-todo-app.spec.ts b/frontend/tests-examples/demo-todo-app.spec.ts index 36eaf637b..c06e84614 100644 --- a/frontend/tests-examples/demo-todo-app.spec.ts +++ b/frontend/tests-examples/demo-todo-app.spec.ts @@ -1,75 +1,77 @@ -import { test, expect, type Page } from '@playwright/test'; +import { test, expect, type Page } from "@playwright/test"; test.beforeEach(async ({ page }) => { - await page.goto('https://demo.playwright.dev/todomvc'); + await page.goto("https://demo.playwright.dev/todomvc"); }); const TODO_ITEMS = [ - 'buy some cheese', - 'feed the cat', - 'book a doctors appointment' + "buy some cheese", + "feed the cat", + "book a doctors appointment", ]; -test.describe('New Todo', () => { - test('should allow me to add todo items', async ({ page }) => { +test.describe("New Todo", () => { + test("should allow me to add todo items", async ({ page }) => { // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); + const newTodo = page.getByPlaceholder("What needs to be done?"); // Create 1st todo. await newTodo.fill(TODO_ITEMS[0]); - await newTodo.press('Enter'); + await newTodo.press("Enter"); // Make sure the list only has one todo item. - await expect(page.getByTestId('todo-title')).toHaveText([ - TODO_ITEMS[0] - ]); + await expect(page.getByTestId("todo-title")).toHaveText([TODO_ITEMS[0]]); // Create 2nd todo. await newTodo.fill(TODO_ITEMS[1]); - await newTodo.press('Enter'); + await newTodo.press("Enter"); // Make sure the list now has two todo items. - await expect(page.getByTestId('todo-title')).toHaveText([ + await expect(page.getByTestId("todo-title")).toHaveText([ TODO_ITEMS[0], - TODO_ITEMS[1] + TODO_ITEMS[1], ]); await checkNumberOfTodosInLocalStorage(page, 2); }); - test('should clear text input field when an item is added', async ({ page }) => { + test("should clear text input field when an item is added", async ({ + page, + }) => { // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); + const newTodo = page.getByPlaceholder("What needs to be done?"); // Create one todo item. await newTodo.fill(TODO_ITEMS[0]); - await newTodo.press('Enter'); + await newTodo.press("Enter"); // Check that input is empty. await expect(newTodo).toBeEmpty(); await checkNumberOfTodosInLocalStorage(page, 1); }); - test('should append new items to the bottom of the list', async ({ page }) => { + test("should append new items to the bottom of the list", async ({ + page, + }) => { // Create 3 items. await createDefaultTodos(page); // create a todo count locator - const todoCount = page.getByTestId('todo-count') + const todoCount = page.getByTestId("todo-count"); // Check test using different methods. - await expect(page.getByText('3 items left')).toBeVisible(); - await expect(todoCount).toHaveText('3 items left'); - await expect(todoCount).toContainText('3'); + await expect(page.getByText("3 items left")).toBeVisible(); + await expect(todoCount).toHaveText("3 items left"); + await expect(todoCount).toContainText("3"); await expect(todoCount).toHaveText(/3/); // Check all items in one call. - await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS); + await expect(page.getByTestId("todo-title")).toHaveText(TODO_ITEMS); await checkNumberOfTodosInLocalStorage(page, 3); }); }); -test.describe('Mark all as completed', () => { +test.describe("Mark all as completed", () => { test.beforeEach(async ({ page }) => { await createDefaultTodos(page); await checkNumberOfTodosInLocalStorage(page, 3); @@ -79,39 +81,47 @@ test.describe('Mark all as completed', () => { await checkNumberOfTodosInLocalStorage(page, 3); }); - test('should allow me to mark all items as completed', async ({ page }) => { + test("should allow me to mark all items as completed", async ({ page }) => { // Complete all todos. - await page.getByLabel('Mark all as complete').check(); + await page.getByLabel("Mark all as complete").check(); // Ensure all todos have 'completed' class. - await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']); + await expect(page.getByTestId("todo-item")).toHaveClass([ + "completed", + "completed", + "completed", + ]); await checkNumberOfCompletedTodosInLocalStorage(page, 3); }); - test('should allow me to clear the complete state of all items', async ({ page }) => { - const toggleAll = page.getByLabel('Mark all as complete'); + test("should allow me to clear the complete state of all items", async ({ + page, + }) => { + const toggleAll = page.getByLabel("Mark all as complete"); // Check and then immediately uncheck. await toggleAll.check(); await toggleAll.uncheck(); // Should be no completed classes. - await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']); + await expect(page.getByTestId("todo-item")).toHaveClass(["", "", ""]); }); - test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => { - const toggleAll = page.getByLabel('Mark all as complete'); + test("complete all checkbox should update state when items are completed / cleared", async ({ + page, + }) => { + const toggleAll = page.getByLabel("Mark all as complete"); await toggleAll.check(); await expect(toggleAll).toBeChecked(); await checkNumberOfCompletedTodosInLocalStorage(page, 3); // Uncheck first todo. - const firstTodo = page.getByTestId('todo-item').nth(0); - await firstTodo.getByRole('checkbox').uncheck(); + const firstTodo = page.getByTestId("todo-item").nth(0); + await firstTodo.getByRole("checkbox").uncheck(); // Reuse toggleAll locator and make sure its not checked. await expect(toggleAll).not.toBeChecked(); - await firstTodo.getByRole('checkbox').check(); + await firstTodo.getByRole("checkbox").check(); await checkNumberOfCompletedTodosInLocalStorage(page, 3); // Assert the toggle all is checked again. @@ -119,205 +129,236 @@ test.describe('Mark all as completed', () => { }); }); -test.describe('Item', () => { - - test('should allow me to mark items as complete', async ({ page }) => { +test.describe("Item", () => { + test("should allow me to mark items as complete", async ({ page }) => { // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); + const newTodo = page.getByPlaceholder("What needs to be done?"); // Create two items. for (const item of TODO_ITEMS.slice(0, 2)) { await newTodo.fill(item); - await newTodo.press('Enter'); + await newTodo.press("Enter"); } // Check first item. - const firstTodo = page.getByTestId('todo-item').nth(0); - await firstTodo.getByRole('checkbox').check(); - await expect(firstTodo).toHaveClass('completed'); + const firstTodo = page.getByTestId("todo-item").nth(0); + await firstTodo.getByRole("checkbox").check(); + await expect(firstTodo).toHaveClass("completed"); // Check second item. - const secondTodo = page.getByTestId('todo-item').nth(1); - await expect(secondTodo).not.toHaveClass('completed'); - await secondTodo.getByRole('checkbox').check(); + const secondTodo = page.getByTestId("todo-item").nth(1); + await expect(secondTodo).not.toHaveClass("completed"); + await secondTodo.getByRole("checkbox").check(); // Assert completed class. - await expect(firstTodo).toHaveClass('completed'); - await expect(secondTodo).toHaveClass('completed'); + await expect(firstTodo).toHaveClass("completed"); + await expect(secondTodo).toHaveClass("completed"); }); - test('should allow me to un-mark items as complete', async ({ page }) => { + test("should allow me to un-mark items as complete", async ({ page }) => { // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); + const newTodo = page.getByPlaceholder("What needs to be done?"); // Create two items. for (const item of TODO_ITEMS.slice(0, 2)) { await newTodo.fill(item); - await newTodo.press('Enter'); + await newTodo.press("Enter"); } - const firstTodo = page.getByTestId('todo-item').nth(0); - const secondTodo = page.getByTestId('todo-item').nth(1); - const firstTodoCheckbox = firstTodo.getByRole('checkbox'); + const firstTodo = page.getByTestId("todo-item").nth(0); + const secondTodo = page.getByTestId("todo-item").nth(1); + const firstTodoCheckbox = firstTodo.getByRole("checkbox"); await firstTodoCheckbox.check(); - await expect(firstTodo).toHaveClass('completed'); - await expect(secondTodo).not.toHaveClass('completed'); + await expect(firstTodo).toHaveClass("completed"); + await expect(secondTodo).not.toHaveClass("completed"); await checkNumberOfCompletedTodosInLocalStorage(page, 1); await firstTodoCheckbox.uncheck(); - await expect(firstTodo).not.toHaveClass('completed'); - await expect(secondTodo).not.toHaveClass('completed'); + await expect(firstTodo).not.toHaveClass("completed"); + await expect(secondTodo).not.toHaveClass("completed"); await checkNumberOfCompletedTodosInLocalStorage(page, 0); }); - test('should allow me to edit an item', async ({ page }) => { + test("should allow me to edit an item", async ({ page }) => { await createDefaultTodos(page); - const todoItems = page.getByTestId('todo-item'); + const todoItems = page.getByTestId("todo-item"); const secondTodo = todoItems.nth(1); await secondTodo.dblclick(); - await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]); - await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); - await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter'); + await expect(secondTodo.getByRole("textbox", { name: "Edit" })).toHaveValue( + TODO_ITEMS[1] + ); + await secondTodo + .getByRole("textbox", { name: "Edit" }) + .fill("buy some sausages"); + await secondTodo.getByRole("textbox", { name: "Edit" }).press("Enter"); // Explicitly assert the new text value. await expect(todoItems).toHaveText([ TODO_ITEMS[0], - 'buy some sausages', - TODO_ITEMS[2] + "buy some sausages", + TODO_ITEMS[2], ]); - await checkTodosInLocalStorage(page, 'buy some sausages'); + await checkTodosInLocalStorage(page, "buy some sausages"); }); }); -test.describe('Editing', () => { +test.describe("Editing", () => { test.beforeEach(async ({ page }) => { await createDefaultTodos(page); await checkNumberOfTodosInLocalStorage(page, 3); }); - test('should hide other controls when editing', async ({ page }) => { - const todoItem = page.getByTestId('todo-item').nth(1); + test("should hide other controls when editing", async ({ page }) => { + const todoItem = page.getByTestId("todo-item").nth(1); await todoItem.dblclick(); - await expect(todoItem.getByRole('checkbox')).not.toBeVisible(); - await expect(todoItem.locator('label', { - hasText: TODO_ITEMS[1], - })).not.toBeVisible(); + await expect(todoItem.getByRole("checkbox")).not.toBeVisible(); + await expect( + todoItem.locator("label", { + hasText: TODO_ITEMS[1], + }) + ).not.toBeVisible(); await checkNumberOfTodosInLocalStorage(page, 3); }); - test('should save edits on blur', async ({ page }) => { - const todoItems = page.getByTestId('todo-item'); + test("should save edits on blur", async ({ page }) => { + const todoItems = page.getByTestId("todo-item"); await todoItems.nth(1).dblclick(); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur'); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .fill("buy some sausages"); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .dispatchEvent("blur"); await expect(todoItems).toHaveText([ TODO_ITEMS[0], - 'buy some sausages', + "buy some sausages", TODO_ITEMS[2], ]); - await checkTodosInLocalStorage(page, 'buy some sausages'); + await checkTodosInLocalStorage(page, "buy some sausages"); }); - test('should trim entered text', async ({ page }) => { - const todoItems = page.getByTestId('todo-item'); + test("should trim entered text", async ({ page }) => { + const todoItems = page.getByTestId("todo-item"); await todoItems.nth(1).dblclick(); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(' buy some sausages '); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter'); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .fill(" buy some sausages "); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .press("Enter"); await expect(todoItems).toHaveText([ TODO_ITEMS[0], - 'buy some sausages', + "buy some sausages", TODO_ITEMS[2], ]); - await checkTodosInLocalStorage(page, 'buy some sausages'); + await checkTodosInLocalStorage(page, "buy some sausages"); }); - test('should remove the item if an empty text string was entered', async ({ page }) => { - const todoItems = page.getByTestId('todo-item'); + test("should remove the item if an empty text string was entered", async ({ + page, + }) => { + const todoItems = page.getByTestId("todo-item"); await todoItems.nth(1).dblclick(); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(''); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter'); + await todoItems.nth(1).getByRole("textbox", { name: "Edit" }).fill(""); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .press("Enter"); - await expect(todoItems).toHaveText([ - TODO_ITEMS[0], - TODO_ITEMS[2], - ]); + await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); }); - test('should cancel edits on escape', async ({ page }) => { - const todoItems = page.getByTestId('todo-item'); + test("should cancel edits on escape", async ({ page }) => { + const todoItems = page.getByTestId("todo-item"); await todoItems.nth(1).dblclick(); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape'); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .fill("buy some sausages"); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .press("Escape"); await expect(todoItems).toHaveText(TODO_ITEMS); }); }); -test.describe('Counter', () => { - test('should display the current number of todo items', async ({ page }) => { +test.describe("Counter", () => { + test("should display the current number of todo items", async ({ page }) => { // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); + const newTodo = page.getByPlaceholder("What needs to be done?"); // create a todo count locator - const todoCount = page.getByTestId('todo-count') + const todoCount = page.getByTestId("todo-count"); await newTodo.fill(TODO_ITEMS[0]); - await newTodo.press('Enter'); + await newTodo.press("Enter"); - await expect(todoCount).toContainText('1'); + await expect(todoCount).toContainText("1"); await newTodo.fill(TODO_ITEMS[1]); - await newTodo.press('Enter'); - await expect(todoCount).toContainText('2'); + await newTodo.press("Enter"); + await expect(todoCount).toContainText("2"); await checkNumberOfTodosInLocalStorage(page, 2); }); }); -test.describe('Clear completed button', () => { +test.describe("Clear completed button", () => { test.beforeEach(async ({ page }) => { await createDefaultTodos(page); }); - test('should display the correct text', async ({ page }) => { - await page.locator('.todo-list li .toggle').first().check(); - await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible(); + test("should display the correct text", async ({ page }) => { + await page.locator(".todo-list li .toggle").first().check(); + await expect( + page.getByRole("button", { name: "Clear completed" }) + ).toBeVisible(); }); - test('should remove completed items when clicked', async ({ page }) => { - const todoItems = page.getByTestId('todo-item'); - await todoItems.nth(1).getByRole('checkbox').check(); - await page.getByRole('button', { name: 'Clear completed' }).click(); + test("should remove completed items when clicked", async ({ page }) => { + const todoItems = page.getByTestId("todo-item"); + await todoItems.nth(1).getByRole("checkbox").check(); + await page.getByRole("button", { name: "Clear completed" }).click(); await expect(todoItems).toHaveCount(2); await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); }); - test('should be hidden when there are no items that are completed', async ({ page }) => { - await page.locator('.todo-list li .toggle').first().check(); - await page.getByRole('button', { name: 'Clear completed' }).click(); - await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden(); + test("should be hidden when there are no items that are completed", async ({ + page, + }) => { + await page.locator(".todo-list li .toggle").first().check(); + await page.getByRole("button", { name: "Clear completed" }).click(); + await expect( + page.getByRole("button", { name: "Clear completed" }) + ).toBeHidden(); }); }); -test.describe('Persistence', () => { - test('should persist its data', async ({ page }) => { +test.describe("Persistence", () => { + test("should persist its data", async ({ page }) => { // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); + const newTodo = page.getByPlaceholder("What needs to be done?"); for (const item of TODO_ITEMS.slice(0, 2)) { await newTodo.fill(item); - await newTodo.press('Enter'); + await newTodo.press("Enter"); } - const todoItems = page.getByTestId('todo-item'); - const firstTodoCheck = todoItems.nth(0).getByRole('checkbox'); + const todoItems = page.getByTestId("todo-item"); + const firstTodoCheck = todoItems.nth(0).getByRole("checkbox"); await firstTodoCheck.check(); await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); await expect(firstTodoCheck).toBeChecked(); - await expect(todoItems).toHaveClass(['completed', '']); + await expect(todoItems).toHaveClass(["completed", ""]); // Ensure there is 1 completed item. await checkNumberOfCompletedTodosInLocalStorage(page, 1); @@ -326,11 +367,11 @@ test.describe('Persistence', () => { await page.reload(); await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); await expect(firstTodoCheck).toBeChecked(); - await expect(todoItems).toHaveClass(['completed', '']); + await expect(todoItems).toHaveClass(["completed", ""]); }); }); -test.describe('Routing', () => { +test.describe("Routing", () => { test.beforeEach(async ({ page }) => { await createDefaultTodos(page); // make sure the app had a chance to save updated todos in storage @@ -339,33 +380,33 @@ test.describe('Routing', () => { await checkTodosInLocalStorage(page, TODO_ITEMS[0]); }); - test('should allow me to display active items', async ({ page }) => { - const todoItem = page.getByTestId('todo-item'); - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); + test("should allow me to display active items", async ({ page }) => { + const todoItem = page.getByTestId("todo-item"); + await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check(); await checkNumberOfCompletedTodosInLocalStorage(page, 1); - await page.getByRole('link', { name: 'Active' }).click(); + await page.getByRole("link", { name: "Active" }).click(); await expect(todoItem).toHaveCount(2); await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); }); - test('should respect the back button', async ({ page }) => { - const todoItem = page.getByTestId('todo-item'); - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); + test("should respect the back button", async ({ page }) => { + const todoItem = page.getByTestId("todo-item"); + await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check(); await checkNumberOfCompletedTodosInLocalStorage(page, 1); - await test.step('Showing all items', async () => { - await page.getByRole('link', { name: 'All' }).click(); + await test.step("Showing all items", async () => { + await page.getByRole("link", { name: "All" }).click(); await expect(todoItem).toHaveCount(3); }); - await test.step('Showing active items', async () => { - await page.getByRole('link', { name: 'Active' }).click(); + await test.step("Showing active items", async () => { + await page.getByRole("link", { name: "Active" }).click(); }); - await test.step('Showing completed items', async () => { - await page.getByRole('link', { name: 'Completed' }).click(); + await test.step("Showing completed items", async () => { + await page.getByRole("link", { name: "Completed" }).click(); }); await expect(todoItem).toHaveCount(1); @@ -375,63 +416,74 @@ test.describe('Routing', () => { await expect(todoItem).toHaveCount(3); }); - test('should allow me to display completed items', async ({ page }) => { - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); + test("should allow me to display completed items", async ({ page }) => { + await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check(); await checkNumberOfCompletedTodosInLocalStorage(page, 1); - await page.getByRole('link', { name: 'Completed' }).click(); - await expect(page.getByTestId('todo-item')).toHaveCount(1); + await page.getByRole("link", { name: "Completed" }).click(); + await expect(page.getByTestId("todo-item")).toHaveCount(1); }); - test('should allow me to display all items', async ({ page }) => { - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); + test("should allow me to display all items", async ({ page }) => { + await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check(); await checkNumberOfCompletedTodosInLocalStorage(page, 1); - await page.getByRole('link', { name: 'Active' }).click(); - await page.getByRole('link', { name: 'Completed' }).click(); - await page.getByRole('link', { name: 'All' }).click(); - await expect(page.getByTestId('todo-item')).toHaveCount(3); + await page.getByRole("link", { name: "Active" }).click(); + await page.getByRole("link", { name: "Completed" }).click(); + await page.getByRole("link", { name: "All" }).click(); + await expect(page.getByTestId("todo-item")).toHaveCount(3); }); - test('should highlight the currently applied filter', async ({ page }) => { - await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected'); + test("should highlight the currently applied filter", async ({ page }) => { + await expect(page.getByRole("link", { name: "All" })).toHaveClass( + "selected" + ); //create locators for active and completed links - const activeLink = page.getByRole('link', { name: 'Active' }); - const completedLink = page.getByRole('link', { name: 'Completed' }); + const activeLink = page.getByRole("link", { name: "Active" }); + const completedLink = page.getByRole("link", { name: "Completed" }); await activeLink.click(); // Page change - active items. - await expect(activeLink).toHaveClass('selected'); + await expect(activeLink).toHaveClass("selected"); await completedLink.click(); // Page change - completed items. - await expect(completedLink).toHaveClass('selected'); + await expect(completedLink).toHaveClass("selected"); }); }); async function createDefaultTodos(page: Page) { // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?'); + const newTodo = page.getByPlaceholder("What needs to be done?"); for (const item of TODO_ITEMS) { await newTodo.fill(item); - await newTodo.press('Enter'); + await newTodo.press("Enter"); } } async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) { - return await page.waitForFunction(e => { - return JSON.parse(localStorage['react-todos']).length === e; + return await page.waitForFunction((e) => { + return JSON.parse(localStorage["react-todos"]).length === e; }, expected); } -async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) { - return await page.waitForFunction(e => { - return JSON.parse(localStorage['react-todos']).filter((todo: any) => todo.completed).length === e; +async function checkNumberOfCompletedTodosInLocalStorage( + page: Page, + expected: number +) { + return await page.waitForFunction((e) => { + return ( + JSON.parse(localStorage["react-todos"]).filter( + (todo: any) => todo.completed + ).length === e + ); }, expected); } async function checkTodosInLocalStorage(page: Page, title: string) { - return await page.waitForFunction(t => { - return JSON.parse(localStorage['react-todos']).map((todo: any) => todo.title).includes(t); + return await page.waitForFunction((t) => { + return JSON.parse(localStorage["react-todos"]) + .map((todo: any) => todo.title) + .includes(t); }, title); } diff --git a/frontend/tests-examples/example.spec.ts b/frontend/tests-examples/example.spec.ts index 54a906a4e..aea16f836 100644 --- a/frontend/tests-examples/example.spec.ts +++ b/frontend/tests-examples/example.spec.ts @@ -1,18 +1,20 @@ -import { test, expect } from '@playwright/test'; +import { test, expect } from "@playwright/test"; -test('has title', async ({ page }) => { - await page.goto('https://playwright.dev/'); +test("has title", async ({ page }) => { + await page.goto("https://playwright.dev/"); // Expect a title "to contain" a substring. await expect(page).toHaveTitle(/Playwright/); }); -test('get started link', async ({ page }) => { - await page.goto('https://playwright.dev/'); +test("get started link", async ({ page }) => { + await page.goto("https://playwright.dev/"); // Click the get started link. - await page.getByRole('link', { name: 'Get started' }).click(); + await page.getByRole("link", { name: "Get started" }).click(); // Expects page to have a heading with the name of Installation. - await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); + await expect( + page.getByRole("heading", { name: "Installation" }) + ).toBeVisible(); }); diff --git a/frontend/tests/component-objects/BaseComponent.ts b/frontend/tests/component-objects/BaseComponent.ts index 765653e93..e24e611ab 100644 --- a/frontend/tests/component-objects/BaseComponent.ts +++ b/frontend/tests/component-objects/BaseComponent.ts @@ -1,4 +1,4 @@ -import type { Page } from '@playwright/test'; +import type { Page } from "@playwright/test"; export default abstract class BaseComponent { protected readonly page: Page; diff --git a/frontend/tests/fixtures/page-fixtures.ts b/frontend/tests/fixtures/page-fixtures.ts index a7eaaec90..fe7988d97 100644 --- a/frontend/tests/fixtures/page-fixtures.ts +++ b/frontend/tests/fixtures/page-fixtures.ts @@ -1,6 +1,6 @@ // tests/fixtures/page-fixtures.ts -import { test as baseTest } from '@playwright/test'; -import LandingPage from '../page-objects/LandingPage'; +import { test as baseTest } from "@playwright/test"; +import LandingPage from "../page-objects/LandingPage"; export const test = baseTest.extend<{ landingPage: LandingPage }>({ landingPage: async ({ page }, use) => { @@ -9,5 +9,5 @@ export const test = baseTest.extend<{ landingPage: LandingPage }>({ }, }); -export { expect } from '@playwright/test'; +export { expect } from "@playwright/test"; export { LandingPage }; diff --git a/frontend/tests/page-objects/BasePage.ts b/frontend/tests/page-objects/BasePage.ts index c3c2bbe6e..424cca9bf 100644 --- a/frontend/tests/page-objects/BasePage.ts +++ b/frontend/tests/page-objects/BasePage.ts @@ -1,11 +1,11 @@ -import type { Page } from '@playwright/test'; +import type { Page } from "@playwright/test"; export default abstract class BasePage { protected readonly pageName: string; protected readonly pageURL: string; protected readonly page: Page; - constructor(page: Page, pageName: string, pageURL = '/') { + constructor(page: Page, pageName: string, pageURL = "/") { this.page = page; this.pageName = pageName; this.pageURL = pageURL; diff --git a/frontend/tests/page-objects/LandingPage.ts b/frontend/tests/page-objects/LandingPage.ts index a5b3d7d9b..ca35f65ff 100644 --- a/frontend/tests/page-objects/LandingPage.ts +++ b/frontend/tests/page-objects/LandingPage.ts @@ -1,5 +1,5 @@ -import { type Page, type Locator } from '@playwright/test'; -import BasePage from './BasePage'; +import { type Page, type Locator } from "@playwright/test"; +import BasePage from "./BasePage"; export default class LandingPage extends BasePage { public static readonly locators = { @@ -13,7 +13,7 @@ export default class LandingPage extends BasePage { }; constructor(page: Page) { - super(page, 'Activist.org Landing Page', '/'); + super(page, "Activist.org Landing Page", "/"); } public getLocator(key: keyof typeof LandingPage.locators): Locator { diff --git a/frontend/tests/specs/landing-page.spec.ts b/frontend/tests/specs/landing-page.spec.ts index df242e7e7..6f14add7c 100644 --- a/frontend/tests/specs/landing-page.spec.ts +++ b/frontend/tests/specs/landing-page.spec.ts @@ -1,24 +1,25 @@ -import { expect, test, LandingPage } from '../fixtures/page-fixtures'; -import AxeBuilder from '@axe-core/playwright'; - -test.describe('Landing Page', () => { +import { expect, test, LandingPage } from "../fixtures/page-fixtures"; +import AxeBuilder from "@axe-core/playwright"; +test.describe("Landing Page", () => { // Initialize page before each test, wait for the landing splash to be visible test.beforeEach(async ({ landingPage }) => { - await landingPage.goto('/en'); - const landingSplash = await landingPage.getLocator('LANDING_SPLASH'); - await landingSplash.waitFor({ state: 'visible' }); + await landingPage.goto("/en"); + const landingSplash = await landingPage.getLocator("LANDING_SPLASH"); + await landingSplash.waitFor({ state: "visible" }); }); // Test accessibility of the landing page (skip this test for now) - test.skip('should not have any detectable accessibility issues', async ({ landingPage }, testInfo) => { + test.skip("should not have any detectable accessibility issues", async ({ + landingPage, + }, testInfo) => { const results = await new AxeBuilder({ page: landingPage.getPage }) - .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']) - .analyze(); + .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"]) + .analyze(); - await testInfo.attach('accessibility-scan-results', { + await testInfo.attach("accessibility-scan-results", { body: JSON.stringify(results, null, 2), - contentType: 'application/json' + contentType: "application/json", }); expect(results.violations).toEqual([]); @@ -26,19 +27,26 @@ test.describe('Landing Page', () => { test('title should contain "activist"', async ({ landingPage }) => { const pageTitle = await landingPage.getPage.title(); - console.log('Page Title:', pageTitle); - expect(pageTitle).toContain('activist'); + console.log("Page Title:", pageTitle); + expect(pageTitle).toContain("activist"); }); - test('should contain the request access link', async ({ landingPage }) => { - const requestAccessLink = await landingPage.getLocator('REQUEST_ACCESS_LINK'); - expect(await requestAccessLink.getAttribute('href')) - .toBe('https://tally.so/r/nprxbq'); + test("should contain the request access link", async ({ landingPage }) => { + const requestAccessLink = await landingPage.getLocator( + "REQUEST_ACCESS_LINK" + ); + expect(await requestAccessLink.getAttribute("href")).toBe( + "https://tally.so/r/nprxbq" + ); }); - test('All important links should be visible on the landing page', async ({ landingPage }) => { + test("All important links should be visible on the landing page", async ({ + landingPage, + }) => { for (const key in LandingPage.locators) { - const locator = landingPage.getLocator(key as keyof typeof LandingPage.locators); + const locator = landingPage.getLocator( + key as keyof typeof LandingPage.locators + ); await expect(locator).toBeVisible(); } }); diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 16bd19615..eaec1cb9e 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -4,6 +4,12 @@ "compilerOptions": { "strict": true, "skipLibCheck": true, - "types": ["@vueuse/nuxt", "@vueuse/core", "@pinia/nuxt", "@types/zxcvbn", "playwright"], + "types": [ + "@vueuse/nuxt", + "@vueuse/core", + "@pinia/nuxt", + "@types/zxcvbn", + "playwright" + ] } }