-
Notifications
You must be signed in to change notification settings - Fork 887
feat: create e2e tests for organization custom roles page #15814
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.
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
Merged
Merged
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
c2268e4
feat: wip
jaaydenh ab42630
feat: add custom roles e2e tests
jaaydenh 1ef60fc
fix: use different org name for test
jaaydenh 1c16357
fix: format
jaaydenh eae7fae
feat: add test for custom roles disabled
jaaydenh 992c579
fix: format
jaaydenh 6330959
fix: run test only if there is no premium license
jaaydenh 6723ce8
fix: format
jaaydenh d5ca1b0
fix: use randomName
jaaydenh 4a8a8a8
fix: format
jaaydenh File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
205 changes: 205 additions & 0 deletions
205
site/e2e/tests/organizations/customRoles/customRoles.spec.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,205 @@ | ||
| import { expect, test } from "@playwright/test"; | ||
| import { | ||
| createCustomRole, | ||
| createOrganizationWithName, | ||
| deleteOrganization, | ||
| setupApiCalls, | ||
| } from "../../../api"; | ||
| import { | ||
| randomName, | ||
| requiresLicense, | ||
| requiresUnlicensed, | ||
| } from "../../../helpers"; | ||
| import { beforeCoderTest } from "../../../hooks"; | ||
|
|
||
| test.describe("CustomRolesPage", () => { | ||
| test.beforeEach(async ({ page }) => await beforeCoderTest(page)); | ||
|
|
||
| test("create custom role and cancel edit changes", async ({ page }) => { | ||
| requiresLicense(); | ||
| await setupApiCalls(page); | ||
|
|
||
| const org = await createOrganizationWithName(randomName()); | ||
|
|
||
| const customRole = await createCustomRole( | ||
| org.id, | ||
| "custom-role-test-1", | ||
| "Custom Role Test 1", | ||
| ); | ||
|
|
||
| await page.goto(`/organizations/${org.name}/roles`); | ||
| const roleRow = page.getByTestId(`role-${customRole.name}`); | ||
| await expect(roleRow.getByText(customRole.display_name)).toBeVisible(); | ||
| await expect(roleRow.getByText("organization_member")).toBeVisible(); | ||
|
|
||
| await roleRow.getByRole("button", { name: "More options" }).click(); | ||
| const menu = page.locator("#more-options"); | ||
| await menu.getByText("Edit").click(); | ||
|
|
||
| await expect(page).toHaveURL( | ||
| `/organizations/${org.name}/roles/${customRole.name}`, | ||
| ); | ||
|
|
||
| const cancelButton = page.getByRole("button", { name: "Cancel" }).first(); | ||
| await expect(cancelButton).toBeVisible(); | ||
| await cancelButton.click(); | ||
|
|
||
| await expect(page).toHaveURL(`/organizations/${org.name}/roles`); | ||
|
|
||
| await deleteOrganization(org.name); | ||
| }); | ||
|
|
||
| test("create custom role, edit role and save changes", async ({ page }) => { | ||
| requiresLicense(); | ||
| await setupApiCalls(page); | ||
|
|
||
| const org = await createOrganizationWithName(randomName()); | ||
|
|
||
| const customRole = await createCustomRole( | ||
| org.id, | ||
| "custom-role-test-1", | ||
| "Custom Role Test 1", | ||
| ); | ||
|
|
||
| await page.goto(`/organizations/${org.name}/roles`); | ||
| const roleRow = page.getByTestId(`role-${customRole.name}`); | ||
| await expect(roleRow.getByText(customRole.display_name)).toBeVisible(); | ||
| await expect(roleRow.getByText("organization_member")).toBeVisible(); | ||
|
|
||
| await page.goto(`/organizations/${org.name}/roles/${customRole.name}`); | ||
|
|
||
| const displayNameInput = page.getByRole("textbox", { | ||
| name: "Display name", | ||
| }); | ||
| await displayNameInput.fill("Custom Role Test 2 Edited"); | ||
|
|
||
| const groupCheckbox = page.getByTestId("group").getByRole("checkbox"); | ||
| await expect(groupCheckbox).toBeVisible(); | ||
| await groupCheckbox.click(); | ||
|
|
||
| const organizationMemberCheckbox = page | ||
| .getByTestId("organization_member") | ||
| .getByRole("checkbox"); | ||
| await expect(organizationMemberCheckbox).toBeVisible(); | ||
| await organizationMemberCheckbox.click(); | ||
|
|
||
| const saveButton = page.getByRole("button", { name: "Save" }).first(); | ||
| await expect(saveButton).toBeVisible(); | ||
| await saveButton.click(); | ||
|
|
||
| await expect(roleRow.getByText("Custom Role Test 2 Edited")).toBeVisible(); | ||
|
|
||
| const roleRow2 = page.getByTestId(`role-${customRole.name}`); | ||
| await expect(roleRow2.getByText("organization_member")).not.toBeVisible(); | ||
| await expect(roleRow2.getByText("group")).toBeVisible(); | ||
|
|
||
| await expect(page).toHaveURL(`/organizations/${org.name}/roles`); | ||
|
|
||
| await deleteOrganization(org.name); | ||
| }); | ||
|
|
||
| test("displays built-in role without edit/delete options", async ({ | ||
| page, | ||
| }) => { | ||
| requiresLicense(); | ||
| await setupApiCalls(page); | ||
|
|
||
| const org = await createOrganizationWithName(randomName()); | ||
|
|
||
| await page.goto(`/organizations/${org.name}/roles`); | ||
|
|
||
| const roleRow = page.getByTestId("role-organization-admin"); | ||
| await expect(roleRow).toBeVisible(); | ||
|
|
||
| await expect(roleRow.getByText("Organization Admin")).toBeVisible(); | ||
|
|
||
| // Verify that the more menu (three dots) is not present for built-in roles | ||
| await expect( | ||
| roleRow.getByRole("button", { name: "More options" }), | ||
| ).not.toBeVisible(); | ||
|
|
||
| await deleteOrganization(org.name); | ||
| }); | ||
|
|
||
| test("create custom role with UI", async ({ page }) => { | ||
| requiresLicense(); | ||
| await setupApiCalls(page); | ||
|
|
||
| const org = await createOrganizationWithName(randomName()); | ||
|
|
||
| await page.goto(`/organizations/${org.name}/roles`); | ||
|
|
||
| await page | ||
| .getByRole("link", { name: "Create custom role" }) | ||
| .first() | ||
| .click(); | ||
|
|
||
| await expect(page).toHaveURL(`/organizations/${org.name}/roles/create`); | ||
|
|
||
| const customRoleName = "custom-role-test"; | ||
| const roleNameInput = page.getByRole("textbox", { | ||
| exact: true, | ||
| name: "Name", | ||
| }); | ||
| await roleNameInput.fill(customRoleName); | ||
|
|
||
| const customRoleDisplayName = "Custom Role Test"; | ||
| const displayNameInput = page.getByRole("textbox", { | ||
| exact: true, | ||
| name: "Display Name", | ||
| }); | ||
| await displayNameInput.fill(customRoleDisplayName); | ||
|
|
||
| await page.getByRole("button", { name: "Create Role" }).first().click(); | ||
|
|
||
| await expect(page).toHaveURL(`/organizations/${org.name}/roles`); | ||
|
|
||
| const roleRow = page.getByTestId(`role-${customRoleName}`); | ||
| await expect(roleRow.getByText(customRoleDisplayName)).toBeVisible(); | ||
| await expect(roleRow.getByText("None")).toBeVisible(); | ||
|
|
||
| await deleteOrganization(org.name); | ||
| }); | ||
|
|
||
| test("delete custom role", async ({ page }) => { | ||
| requiresLicense(); | ||
| await setupApiCalls(page); | ||
|
|
||
| const org = await createOrganizationWithName(randomName()); | ||
| const customRole = await createCustomRole( | ||
| org.id, | ||
| "custom-role-test-1", | ||
| "Custom Role Test 1", | ||
| ); | ||
| await page.goto(`/organizations/${org.name}/roles`); | ||
|
|
||
| const roleRow = page.getByTestId(`role-${customRole.name}`); | ||
| await roleRow.getByRole("button", { name: "More options" }).click(); | ||
|
|
||
| const menu = page.locator("#more-options"); | ||
| await menu.getByText("Delete…").click(); | ||
|
|
||
| const input = page.getByRole("textbox"); | ||
| await input.fill(customRole.name); | ||
| await page.getByRole("button", { name: "Delete" }).click(); | ||
|
|
||
| await expect( | ||
| page.getByText("Custom role deleted successfully!"), | ||
| ).toBeVisible(); | ||
|
|
||
| await deleteOrganization(org.name); | ||
| }); | ||
| }); | ||
|
|
||
| test("custom roles disabled", async ({ page }) => { | ||
| requiresUnlicensed(); | ||
| await page.goto("/organizations/coder/roles"); | ||
| await expect(page).toHaveURL("/organizations/coder/roles"); | ||
|
|
||
| await expect( | ||
| page.getByText("Upgrade to a premium license to create a custom role"), | ||
| ).toBeVisible(); | ||
| await expect( | ||
| page.getByRole("link", { name: "Create custom role" }), | ||
| ).not.toBeVisible(); | ||
| }); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why not make this a helper and call it from the other test rather than using the api?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have actually been going the route of having 2 different types of tests, one that starts with a change using the api and then completing the test through the UI and then another that does the same thing through the UI. I think there is the potential catching edge cases through this way of testing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@aslilac Looking around at many of the existing tests, I see this pattern when the same things to happen for many tests, for example creating a template, the API is used but then atleast one test would do the same thing through the UI if possible. I feel like this many be a bit more performant than going through the UI for every test. The except would be if there are many variations of path the user could take through the UI.