Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test for location input on /settings page. #1204

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

Test for location input on /settings page. #1204

Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
67c5c4f
feat: UI tests for username change on /settings
petercr Oct 31, 2024
e6883a5
Merge branch 'codu-code:develop' into develop
petercr Oct 31, 2024
8724657
Test to see if input is showing, working, and update persits.
petercr Nov 1, 2024
ed62c79
Merge branch 'develop' into test-for-location-input
CarolinaCobo Nov 12, 2024
4699c2b
fix: fixed typo and added test for max length on location input.
petercr Nov 14, 2024
1fad2e0
fix: added assertion for `#location` and test after page refresh.
petercr Nov 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 65 additions & 3 deletions e2e/settings.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import test from "@playwright/test";
import { test, expect } from "@playwright/test";
import { loggedInAsUserOne } from "./utils";

test.describe("Unauthenticated setttings Page", () => {
Expand All @@ -10,6 +10,68 @@ 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");

// 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");
});

petercr marked this conversation as resolved.
Show resolved Hide resolved
// 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('input[id="location"]').isVisible();

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix incorrect usage of isVisible() method.

The isVisible() method returns a Promise that needs to be properly handled with an assertion.

Replace with:

-await page.locator('input[id="location"]').isVisible();
+await expect(page.locator('input[id="location"]')).toBeVisible();
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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");
await expect(page.locator('input[id="location"]')).toHaveValue("New York");

// Test to see if autocomplete is working
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('input[id="location"]')).toHaveValue(
"A fun place to visit.",
);
});
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add missing page reload in persistence test.

The test comment mentions verifying persistence after page reload, but the actual reload step is missing.

Add the reload step:

   await page.fill('input[id="location"]', "A fun place to visit.");
   await page.locator('button[type="submit"]').click();
   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.",
+  );
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// 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('input[id="location"]')).toHaveValue(
"A fun place to visit.",
);
});
// 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('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.",
);
});

Loading