Skip to content

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.

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

Merged
merged 10 commits into from
Dec 16, 2024
Merged

feat: create e2e tests for organization custom roles page #15814

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c2268e4
feat: wip
jaaydenh Dec 6, 2024
ab42630
feat: add custom roles e2e tests
jaaydenh Dec 10, 2024
1ef60fc
fix: use different org name for test
jaaydenh Dec 10, 2024
1c16357
fix: format
jaaydenh Dec 10, 2024
eae7fae
feat: add test for custom roles disabled
jaaydenh Dec 10, 2024
992c579
fix: format
jaaydenh Dec 10, 2024
6330959
fix: run test only if there is no premium license
jaaydenh Dec 10, 2024
6723ce8
fix: format
jaaydenh Dec 10, 2024
d5ca1b0
fix: use randomName
jaaydenh Dec 12, 2024
4a8a8a8
fix: format
jaaydenh Dec 12, 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
37 changes: 37 additions & 0 deletions site/e2e/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,43 @@ export const createOrganizationSyncSettings = async () => {
return settings;
};

export const createCustomRole = async (
orgId: string,
name: string,
displayName: string,
) => {
const role = await API.createOrganizationRole(orgId, {
name,
display_name: displayName,
organization_id: orgId,
site_permissions: [],
organization_permissions: [
{
negate: false,
resource_type: "organization_member",
action: "create",
},
{
negate: false,
resource_type: "organization_member",
action: "delete",
},
{
negate: false,
resource_type: "organization_member",
action: "read",
},
{
negate: false,
resource_type: "organization_member",
action: "update",
},
],
user_permissions: [],
});
return role;
};

export async function verifyConfigFlagBoolean(
page: Page,
config: DeploymentConfig,
Expand Down
4 changes: 4 additions & 0 deletions site/e2e/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@ export function requiresLicense() {
test.skip(!license);
}

export function noPremiumLicense() {
test.skip(license.length > 0);
}

/**
* requireTerraformProvisioner by default is enabled.
*/
Expand Down
8 changes: 4 additions & 4 deletions site/e2e/tests/deployment/idpOrgSync.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ test.describe("IdpOrgSyncPage", () => {
requiresLicense();
await setupApiCalls(page);

await createOrganizationWithName("developers");
await createOrganizationWithName("admins");

await page.goto("/deployment/idp-org-sync", {
waitUntil: "domcontentloaded",
Expand All @@ -135,7 +135,7 @@ test.describe("IdpOrgSyncPage", () => {

// Select Coder organization from combobox
await orgSelector.click();
await page.getByRole("option", { name: "developers" }).click();
await page.getByRole("option", { name: "admins" }).click();

// Add button should now be enabled
await expect(addButton).toBeEnabled();
Expand All @@ -146,12 +146,12 @@ test.describe("IdpOrgSyncPage", () => {
const newRow = page.getByTestId("idp-org-new-idp-org");
await expect(newRow).toBeVisible();
await expect(newRow.getByText("new-idp-org")).toBeVisible();
await expect(newRow.getByText("developers")).toBeVisible();
await expect(newRow.getByText("admins")).toBeVisible();

await expect(
page.getByText("Organization sync settings updated."),
).toBeVisible();

await deleteOrganization("developers");
await deleteOrganization("admins");
});
});
201 changes: 201 additions & 0 deletions site/e2e/tests/organizations/customRoles/customRoles.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
import { expect, test } from "@playwright/test";
import {
createCustomRole,
createOrganizationWithName,
deleteOrganization,
setupApiCalls,
} from "../../../api";
import { noPremiumLicense, requiresLicense } 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("developers");

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

test("create custom role, edit role and save changes", async ({ page }) => {
requiresLicense();
await setupApiCalls(page);

const org = await createOrganizationWithName("users");

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

test("displays built-in role without edit/delete options", async ({
page,
}) => {
requiresLicense();
await setupApiCalls(page);

const org = await createOrganizationWithName("testers");

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

test("create custom role with UI", async ({ page }) => {
Copy link
Member

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?

Copy link
Contributor Author

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.

Copy link
Contributor Author

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.

requiresLicense();
await setupApiCalls(page);

const org = await createOrganizationWithName("contractors");

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

test("delete custom role", async ({ page }) => {
requiresLicense();
await setupApiCalls(page);

const org = await createOrganizationWithName("custom1");
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("custom1");
});
});

test("custom roles disabled", async ({ page }) => {
noPremiumLicense();
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();
});
Loading