Add settings page test coverage

Author: hojberg

src/UnisonShare/ErrorDetails.elm

@@ -17,3 +17,11 @@ view session error =
 
     else
         UI.nothing
+
+
+
+{- details []
+   [ summary [] [ text "Error Details" ]
+   , pre [] [ text (Util.httpErrorToString error) ]
+   ]
+-}

src/UnisonShare/Page/ProjectSettingsPage.elm

@@ -384,7 +384,7 @@ removeWebhook appContext projectRef webhook =
 pageTitle : PageTitle.PageTitle msg
 pageTitle =
     PageTitle.title "Project Settings"
-        |> PageTitle.withDescription "Manage your project visibility and settings."
+        |> PageTitle.withDescription "Manage your project. Collaborators, webhooks, and visibility."
 
 
 viewLoadingPage : PageLayout msg
@@ -413,8 +413,8 @@ viewLoadingPage =
         |> PageLayout.withSubduedBackground
 
 
-viewCollaborators : Model -> Html Msg
-viewCollaborators model =
+viewCollaborators : Session -> Model -> Html Msg
+viewCollaborators session model =
     let
         ( collabs, addButton ) =
             case model.collaborators of
@@ -461,15 +461,16 @@ viewCollaborators model =
                     in
                     content
 
-                Failure _ ->
+                Failure e ->
                     ( div [ class "collaborators_error" ]
                         [ StatusBanner.bad "Could not load collaborators"
+                        , ErrorDetails.view session e
                         ]
                     , UI.nothing
                     )
 
                 _ ->
-                    ( div [ class "collaborators_loading" ]
+                    ( div [ class "list_loading" ]
                         [ Placeholder.text |> Placeholder.withLength Placeholder.Small |> Placeholder.view
                         , Placeholder.text |> Placeholder.withLength Placeholder.Medium |> Placeholder.view
                         , Placeholder.text |> Placeholder.withLength Placeholder.Huge |> Placeholder.view
@@ -479,7 +480,7 @@ viewCollaborators model =
                     )
     in
     Card.card
-        [ header [ class "project-settings_card_header" ] [ h2 [] [ text "Project Collaborators" ], addButton ]
+        [ header [ class "project-settings_card_header" ] [ h2 [] [ text "Collaborators" ], addButton ]
         , collabs
         ]
         |> Card.asContained
@@ -562,12 +563,12 @@ viewWebhooks session model =
                         ]
 
                 Failure e ->
-                    [ StatusBanner.bad "An unexpected error occurred, please try again."
+                    [ StatusBanner.bad "Could not load webhooks."
                     , ErrorDetails.view session e
                     ]
 
                 _ ->
-                    [ div [ class "webhooks_loading" ]
+                    [ div [ class "list_loading" ]
                         [ Placeholder.text |> Placeholder.withLength Placeholder.Small |> Placeholder.view
                         , Placeholder.text |> Placeholder.withLength Placeholder.Medium |> Placeholder.view
                         , Placeholder.text |> Placeholder.withLength Placeholder.Huge |> Placeholder.view
@@ -651,8 +652,13 @@ viewPageContent session project model =
                                 , StatusBanner.info "Changing visibility is not supported for public organizations."
                                 )
 
-                        Failure _ ->
-                            ( overlay_, StatusBanner.bad "An unexpected error occurred, please try again." )
+                        Failure e ->
+                            ( overlay_
+                            , div []
+                                [ StatusBanner.bad "An unexpected error occurred, please try again."
+                                , ErrorDetails.view session e
+                                ]
+                            )
             in
             Card.card
                 [ h2 [] [ text "Project Visibility" ]
@@ -723,7 +729,7 @@ viewPageContent session project model =
 
         collaborators =
             if Project.isPublic project || project.isPremiumProject then
-                viewCollaborators model
+                viewCollaborators session model
 
             else
                 UI.nothing

src/css/unison-share/page/project-settings-page.css

@@ -82,7 +82,7 @@
   color: var(--u-color_icon_subdued);
 }
 
-.project-settings-page .collaborators_loading {
+.project-settings-page .list_loading {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;

tests/e2e/ProjectSettingsPage.spec.ts

@@ -0,0 +1,58 @@
+import { test, expect } from "@playwright/test";
+import { button } from "./TestHelpers/Page";
+import * as API from "./TestHelpers/Api";
+
+const projectRef = "@alice/html";
+
+test.beforeEach(async ({ page }) => {
+  await API.getWebsiteFeed(page);
+});
+
+test.describe("without being signed in", () => {
+  test.beforeEach(async ({ page }) => {
+    await API.getAccount(page, "NOT_SIGNED_IN");
+    await page.goto(`http://localhost:1234/${projectRef}/settings`);
+  });
+
+  test("can *NOT* see the project settings page", async ({ page }) => {
+    await expect(page.getByText("Project Settings")).not.toBeVisible();
+  });
+});
+
+test.describe("with the project:manage permission", () => {
+  test.beforeEach(async ({ page }) => {
+    await API.getAccount(page, "@alice");
+    await API.getUserProfile(page, "@alice");
+    await API.getProjectRoleAssignments(page, projectRef);
+    await API.getProjectWebhooks(page, projectRef);
+    await API.getProject(page, projectRef, {
+      visibility: "public",
+      permissions: ["project:manage"],
+    });
+    await page.goto(`http://localhost:1234/${projectRef}/settings`);
+  });
+
+  test("The user can see the project settings page", async ({ page }) => {
+    await expect(page.getByText("Project Settings")).toBeVisible();
+  });
+
+  test("The user can see the the collaborators section", async ({ page }) => {
+    await expect(page.locator(".collaborator")).toHaveCount(3);
+  });
+
+  test("The user can see the the visibility section", async ({ page }) => {
+    await expect(page.getByText("Project Visibility")).toBeVisible();
+  });
+
+  test.describe("webhooks", () => {
+    test("The user can see the webhooks section", async ({ page }) => {
+      await expect(page.locator(".webhook")).toHaveCount(3);
+      await expect(button(page, "Add a webhook")).toBeVisible();
+    });
+
+    test("The user can see the add webhook modal", async ({ page }) => {
+      await button(page, "Add a webhook").click();
+      await expect(page.locator(".modal")).toBeVisible();
+    });
+  });
+});

tests/e2e/TestHelpers/Api.ts

@@ -5,6 +5,8 @@ import {
   project,
   type ContributionDiffConfig,
   type Notification,
+  projectRoleAssignment,
+  projectWebhook,
   contributionTimeline,
   contributionDiff,
   ticket,
@@ -537,6 +539,53 @@ async function patchProjectTicket(
   });
 }
 
+// -- /users/:handle/:project-ref/roles
+
+async function getProjectRoleAssignments(
+  page: Page,
+  projectRef: string,
+  resp?: { status: number },
+) {
+  const [handle, projectSlug] = projectRef.split("/");
+
+  return get(page, {
+    ...{
+      url: `/users/${handle.replace("@", "")}/projects/${projectSlug}/roles`,
+      status: 200,
+      data: {
+        active: true,
+        role_assignments: [
+          projectRoleAssignment(),
+          projectRoleAssignment(),
+          projectRoleAssignment(),
+        ],
+      },
+    },
+    ...(resp || {}),
+  });
+}
+
+// -- /users/:handle/:project-ref/webhooks
+//
+async function getProjectWebhooks(
+  page: Page,
+  projectRef: string,
+  resp?: { status: number },
+) {
+  const [handle, projectSlug] = projectRef.split("/");
+
+  return get(page, {
+    ...{
+      url: `/users/${handle.replace("@", "")}/projects/${projectSlug}/webhooks`,
+      status: 200,
+      data: {
+        webhooks: [projectWebhook(), projectWebhook(), projectWebhook()],
+      },
+    },
+    ...(resp || {}),
+  });
+}
+
 // /users/:handle/notifications
 
 type NotificationsHubData = {
@@ -677,6 +726,8 @@ export {
   getProject,
   getProject_,
   getProjectReadme,
+  getProjectRoleAssignments,
+  getProjectWebhooks,
   getProjectDependencies,
   getProjectContribution,
   getProjectContribution_,

tests/e2e/TestHelpers/Data.ts

@@ -727,6 +727,26 @@ function userSearchMatch() {
   };
 }
 
+function projectRoleAssignment() {
+  return {
+    roles: ["project_contributor"],
+    subject: {
+      data: user(),
+      kind: "user",
+    },
+  };
+}
+
+function projectWebhook() {
+  return {
+    notificationSubscriptionId: faker.string.uuid(),
+    createdAt: faker.date.past(),
+    updatedAt: faker.date.past(),
+    uri: faker.internet.url(),
+    topics: { type: "all" },
+  };
+}
+
 export {
   projectRef,
   project,
@@ -741,6 +761,8 @@ export {
   contribution,
   contributionTimeline,
   contributionStatusChangeEvent,
+  projectRoleAssignment,
+  projectWebhook,
   contributionDiff,
   notification,
   notificationEvent,