From 67c5c4f34dbe73656169e5f110f880d75e26087b Mon Sep 17 00:00:00 2001 From: Peter Cruckshank Date: Thu, 31 Oct 2024 19:19:00 -0400 Subject: [PATCH 1/4] feat: UI tests for username change on /settings --- e2e/settings.spec.ts | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/e2e/settings.spec.ts b/e2e/settings.spec.ts index f53480c0..bdfdaa5b 100644 --- a/e2e/settings.spec.ts +++ b/e2e/settings.spec.ts @@ -1,4 +1,4 @@ -import test from "@playwright/test"; +import { test, expect } from "@playwright/test"; import { loggedInAsUserOne } from "./utils"; test.describe("Unauthenticated setttings Page", () => { @@ -10,6 +10,32 @@ test.describe("Authenticated settings Page", () => { test.beforeEach(async ({ page }) => { await loggedInAsUserOne(page); }); - // - // Replace with tests for authenticated users + + // Test for changing username + test('Username input field', async ({ page }) => { + await page.goto('http://localhost:3000/settings', { timeout: 30000 }); + + // Wait for the username input field to be visible + await page.locator('input[id="username"]').waitFor(); + + // Test that the input field is visible and has the correct attributes + const inputField = page.locator('input[id="username"]'); + await expect(inputField).toBeVisible(); + await expect(inputField).toHaveAttribute('type', 'text'); + await expect(inputField).toHaveAttribute('autocomplete', 'username'); + + // Test that the error message appears when the input field is invalid + await inputField.fill('45&p^x#@!96%*()'); + await page.locator('button[type="submit"]').click(); + const errorMessage = page.locator('p:text-is("Username can only contain alphanumerics and dashes.")') + await expect(errorMessage).toBeVisible(); + await expect(errorMessage).toHaveText('Username can only contain alphanumerics and dashes.'); + // Reset the form + await page.locator('button:has-text("Reset")').click(); + + // Test that the input field can be filled with a valid value and saves it + await inputField.fill('codu-rules'); + await page.locator('button[type="submit"]').click(); + await expect(inputField).toHaveValue('codu-rules'); + }); }); From 8724657d823e4dd0b0e24d4efa65ae43ea13eacb Mon Sep 17 00:00:00 2001 From: Peter Cruckshank Date: Thu, 31 Oct 2024 23:35:21 -0400 Subject: [PATCH 2/4] Test to see if input is showing, working, and update persits. --- e2e/settings.spec.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/e2e/settings.spec.ts b/e2e/settings.spec.ts index bdfdaa5b..b5d933f6 100644 --- a/e2e/settings.spec.ts +++ b/e2e/settings.spec.ts @@ -38,4 +38,27 @@ test.describe("Authenticated settings Page", () => { await page.locator('button[type="submit"]').click(); await expect(inputField).toHaveValue('codu-rules'); }); + + // Tests location input, autocomplete, and saved values + test('location input is visible', async ({page}) => { + // Test to see if input is visible + await page.locator('#location').isVisible(); + + // Test to fill if value can be changed + await page.locator('#location').fill('New York'); + await expect(page.locator('#location')).toHaveValue('New York'); + + // Test to see if autocomplete is working + await expect(page.locator('#location')).toHaveAttribute('autocomplete', 'country-name'); + + // Test to see if change in location persits + await page.locator('#location').fill('A fun place to visit.'); + await page.locator('button[type="submit"]').click(); + await expect(page.locator('#location')).toHaveValue('A fun place to visit.'); + }); + + + + + }); From 4699c2b5c64f07f5775d78282c58161f7f5e6819 Mon Sep 17 00:00:00 2001 From: Peter Cruckshank Date: Thu, 14 Nov 2024 17:56:01 -0500 Subject: [PATCH 3/4] fix: fixed typo and added test for max length on location input. --- e2e/settings.spec.ts | 77 ++++++++++++++++++++++++++------------------ 1 file changed, 45 insertions(+), 32 deletions(-) diff --git a/e2e/settings.spec.ts b/e2e/settings.spec.ts index b5d933f6..3239cf53 100644 --- a/e2e/settings.spec.ts +++ b/e2e/settings.spec.ts @@ -10,55 +10,68 @@ test.describe("Authenticated settings Page", () => { test.beforeEach(async ({ page }) => { await loggedInAsUserOne(page); }); - + // Test for changing username - test('Username input field', async ({ page }) => { - await page.goto('http://localhost:3000/settings', { timeout: 30000 }); - + test("Username input field", async ({ page }) => { + await page.goto("http://localhost:3000/settings"); + // Wait for the username input field to be visible await page.locator('input[id="username"]').waitFor(); - + // Test that the input field is visible and has the correct attributes const inputField = page.locator('input[id="username"]'); await expect(inputField).toBeVisible(); - await expect(inputField).toHaveAttribute('type', 'text'); - await expect(inputField).toHaveAttribute('autocomplete', 'username'); - + await expect(inputField).toHaveAttribute("type", "text"); + await expect(inputField).toHaveAttribute("autocomplete", "username"); + // Test that the error message appears when the input field is invalid - await inputField.fill('45&p^x#@!96%*()'); - await page.locator('button[type="submit"]').click(); - const errorMessage = page.locator('p:text-is("Username can only contain alphanumerics and dashes.")') + await inputField.fill("45&p^x#@!96%*()"); + await page.locator('button[type="submit"]').click(); + const errorMessage = page.locator( + 'p:text-is("Username can only contain alphanumerics and dashes.")', + ); await expect(errorMessage).toBeVisible(); - await expect(errorMessage).toHaveText('Username can only contain alphanumerics and dashes.'); - // Reset the form + await expect(errorMessage).toHaveText( + "Username can only contain alphanumerics and dashes.", + ); + // Reset the form await page.locator('button:has-text("Reset")').click(); - + // Test that the input field can be filled with a valid value and saves it - await inputField.fill('codu-rules'); - await page.locator('button[type="submit"]').click(); - await expect(inputField).toHaveValue('codu-rules'); + await inputField.fill("codu-rules"); + await page.locator('button[type="submit"]').click(); + await expect(inputField).toHaveValue("codu-rules"); }); - // Tests location input, autocomplete, and saved values - test('location input is visible', async ({page}) => { + // Tests location input, autocomplete, and saved values + test("location input is visible", async ({ page }) => { + await page.goto("http://localhost:3000/settings"); + // Test to see if input is visible - await page.locator('#location').isVisible(); + await page.locator('input[id="location"]').isVisible(); // Test to fill if value can be changed - await page.locator('#location').fill('New York'); - await expect(page.locator('#location')).toHaveValue('New York'); + await page.fill('input[id="location"]', "New York"); + await expect(page.locator('input[id="location"]')).toHaveValue("New York"); // Test to see if autocomplete is working - await expect(page.locator('#location')).toHaveAttribute('autocomplete', 'country-name'); - - // Test to see if change in location persits - await page.locator('#location').fill('A fun place to visit.'); + await expect(page.locator('input[id="location"]')).toHaveAttribute( + "autocomplete", + "country-name", + ); + + // Add validation tests for location + await page.locator('input[id="location"]').fill("a".repeat(101)); + await page.locator('button[type="submit"]').click(); + await expect( + page.getByText("Max location length is 100 characters."), + ).toBeVisible(); + + // Test to see if change in location persists after submit and page reload + await page.fill('input[id="location"]', "A fun place to visit."); await page.locator('button[type="submit"]').click(); - await expect(page.locator('#location')).toHaveValue('A fun place to visit.'); + await expect(page.locator('input[id="location"]')).toHaveValue( + "A fun place to visit.", + ); }); - - - - - }); From 1fad2e061ef09240829c0131360c0bed6896df4e Mon Sep 17 00:00:00 2001 From: Peter Cruckshank Date: Sun, 17 Nov 2024 18:54:45 -0500 Subject: [PATCH 4/4] fix: added assertion for `#location` and test after page refresh. --- e2e/settings.spec.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/e2e/settings.spec.ts b/e2e/settings.spec.ts index 3239cf53..d1dc2008 100644 --- a/e2e/settings.spec.ts +++ b/e2e/settings.spec.ts @@ -48,7 +48,7 @@ test.describe("Authenticated settings Page", () => { await page.goto("http://localhost:3000/settings"); // Test to see if input is visible - await page.locator('input[id="location"]').isVisible(); + await expect(page.locator('input[id="location"]')).toBeVisible(); // Test to fill if value can be changed await page.fill('input[id="location"]', "New York"); @@ -73,5 +73,11 @@ test.describe("Authenticated settings Page", () => { await expect(page.locator('input[id="location"]')).toHaveValue( "A fun place to visit.", ); + + // Verify persistence after reload + await page.reload(); + await expect(page.locator('input[id="location"]')).toHaveValue( + "A fun place to visit.", + ); }); });