pos-navigation redesign

apps/tests/accessibility.spec.ts

@@ -1,21 +1,24 @@
-import { test, expect } from "@playwright/test";
+import { expect } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
 
+import { test } from "./fixtures";
+
 test.describe("accessibility", () => {
   ["light", "dark"].forEach((colorScheme: "light" | "dark") => {
-    test(`no contrast issues in ${colorScheme} mode`, async ({ page }) => {
+    test(`no contrast issues in ${colorScheme} mode`, async ({
+      page,
+      navigationBar,
+    }) => {
       await test.step(`given the preferred color scheme is set to ${colorScheme}`, async () => {
         await page.emulateMedia({ colorScheme });
       });
 
       await test.step("when viewing a typical page in PodOS Browser", async () => {
         await page.goto("/");
 
-        const navigationBar = page.getByPlaceholder("Enter URI");
-        await navigationBar.fill(
+        await navigationBar.fillAndSubmit(
           "http://localhost:4000/alice/public/generic/resource#it",
         );
-        await navigationBar.press("Enter");
 
         const heading = page.getByRole("heading");
         await expect(heading).toHaveText("Something");

apps/tests/add-literal-value.spec.ts

@@ -1,17 +1,17 @@
-import { expect, test } from "@playwright/test";
+import { expect } from "@playwright/test";
 import { signIn } from "./actions/signIn";
 import { alice } from "./fixtures/credentials";
 
-test("can add a literal value", async ({ page }) => {
+import { test } from "./fixtures";
+
+test("can add a literal value", async ({ page, navigationBar }) => {
   // when opening PodOS Browser
   await page.goto("/");
 
   // and navigating to a generic resource
-  const navigationBar = page.getByPlaceholder("Enter URI");
-  await navigationBar.fill(
+  await navigationBar.fillAndSubmit(
     "http://localhost:4000/alice/public/generic/resource#it",
   );
-  await navigationBar.press("Enter");
 
   // then I cannot see any input to add literal values
   const missingAddLiteralField = page.getByPlaceholder("Add literal");

apps/tests/add-new-thing.spec.ts

@@ -1,17 +1,16 @@
-import { expect, test } from "@playwright/test";
+import { expect } from "@playwright/test";
 import { signIn } from "./actions/signIn";
 import { alice } from "./fixtures/credentials";
+import { test } from "./fixtures";
 
-test("can add a new thing", async ({ page }) => {
+test("can add a new thing", async ({ page, navigationBar }) => {
   // when opening PodOS Browser
   await page.goto("/");
 
   // and navigating to a container
-  const navigationBar = page.getByPlaceholder("Enter URI");
-  await navigationBar.fill(
+  await navigationBar.fillAndSubmit(
     "http://localhost:4000/alice/acb50d31-42af-4d4c-9ead-e2d5e70d7317/",
   );
-  await navigationBar.press("Enter");
 
   // when signing in as the pod owner
   await signIn(page, alice);
@@ -37,7 +36,7 @@ test("can add a new thing", async ({ page }) => {
   await page.keyboard.press("Enter");
 
   // then I am at the page showing the new thing
-  await expect(navigationBar).toHaveValue(
+  expect(await navigationBar.inputValue()).toEqual(
     "http://localhost:4000/alice/acb50d31-42af-4d4c-9ead-e2d5e70d7317/my-new-thing#it",
   );
 

apps/tests/fixtures/index.ts

@@ -0,0 +1,10 @@
+import { test as base } from "playwright/test";
+import { NavigationBar } from "../page-objects/NavigationBar";
+
+export const test = base.extend<{
+  navigationBar: NavigationBar;
+}>({
+  navigationBar: async ({ page }, use) => {
+    await use(new NavigationBar(page));
+  },
+});

apps/tests/generic.spec.ts

@@ -1,17 +1,18 @@
-import { test, expect } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+import { test } from "./fixtures";
 
 test("show generic information about unknown types of things", async ({
   page,
+  navigationBar,
 }) => {
   // when opening PodOS Browser
   await page.goto("/");
 
   // and navigating to a generic resource
-  const navigationBar = page.getByPlaceholder("Enter URI");
-  await navigationBar.fill(
+  await navigationBar.fillAndSubmit(
     "http://localhost:4000/alice/public/generic/resource#it",
   );
-  await navigationBar.press("Enter");
 
   // then page shows a heading with the resource name
   const heading = page.getByRole("heading");

apps/tests/ldp-container.spec.ts

@@ -1,13 +1,13 @@
-import { test, expect } from "@playwright/test";
+import { expect } from "@playwright/test";
 
-test("show contents of an LDP container", async ({ page }) => {
+import { test } from "./fixtures";
+
+test("show contents of an LDP container", async ({ page, navigationBar }) => {
   // when opening PodOS Browser
   await page.goto("/");
 
   // and navigating to a ldp container resource
-  const navigationBar = page.getByPlaceholder("Enter URI");
-  await navigationBar.fill("http://localhost:4000/alice/container/");
-  await navigationBar.press("Enter");
+  await navigationBar.fillAndSubmit("http://localhost:4000/alice/container/");
 
   // then page shows the full container URL as heading
   const heading = await page.getByRole("heading", { level: 1 });

apps/tests/page-objects/NavigationBar.ts

@@ -0,0 +1,37 @@
+import { Locator, Page } from "@playwright/test";
+
+export class NavigationBar {
+  private readonly nav: Locator;
+  private readonly close: () => Promise<void>;
+
+  constructor(private page: Page) {
+    this.nav = page.getByRole("navigation");
+    this.close = () => page.keyboard.press("Escape");
+  }
+
+  async fill(text: string) {
+    const input = await this.activateInput();
+    await input.fill(text);
+    return input;
+  }
+
+  async fillAndSubmit(text: string) {
+    const input = await this.fill(text);
+    await input.press("Enter");
+  }
+
+  async activateInput() {
+    const button = this.nav.getByRole("button", {
+      name: "Search or enter URI",
+    });
+    await button.click();
+    return this.page.getByPlaceholder("Search or enter URI");
+  }
+
+  async inputValue() {
+    const input = await this.activateInput();
+    const value = await input.inputValue();
+    await this.close();
+    return value;
+  }
+}

apps/tests/person.spec.ts

@@ -1,13 +1,15 @@
-import { test, expect } from "@playwright/test";
+import { expect } from "@playwright/test";
 
-test("show name as heading for a person", async ({ page }) => {
+import { test } from "./fixtures";
+
+test("show name as heading for a person", async ({ page, navigationBar }) => {
   // when opening PodOS Browser
   await page.goto("/");
 
   // and navigating to Alice's WebID
-  const navigationBar = page.getByPlaceholder("Enter URI");
-  await navigationBar.fill("http://localhost:4000/alice/profile/card#me");
-  await navigationBar.press("Enter");
+  await navigationBar.fillAndSubmit(
+    "http://localhost:4000/alice/profile/card#me",
+  );
 
   // then the heading shows Alice's name as heading
   const label = await page.getByRole("heading");

apps/tests/reading-while-offline.spec.ts

@@ -1,9 +1,12 @@
-import { test, expect } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+import { test } from "./fixtures";
 
 test("can access cached resources while offline", async ({
   page,
   context,
   browserName,
+  navigationBar,
 }) => {
   test.skip(
     browserName === "webkit",
@@ -17,11 +20,9 @@ test("can access cached resources while offline", async ({
   });
 
   await test.step("and the they have visited a resource", async () => {
-    const navigationBar = page.getByPlaceholder("Enter URI");
-    await navigationBar.fill(
+    await navigationBar.fillAndSubmit(
       "http://localhost:4000/alice/public/generic/resource#it",
     );
-    await navigationBar.press("Enter");
 
     const heading = page.getByRole("heading");
     await expect(heading).toHaveText("Something");
@@ -36,11 +37,9 @@ test("can access cached resources while offline", async ({
   });
 
   await test.step("and visits the previously loaded resource", async () => {
-    const navigationBar = page.getByPlaceholder("Enter URI");
-    await navigationBar.fill(
+    await navigationBar.fillAndSubmit(
       "http://localhost:4000/alice/public/generic/resource#it",
     );
-    await navigationBar.press("Enter");
   });
 
   await test.step("then the cached content is still accessible", async () => {

apps/tests/text-search.spec.ts

@@ -1,24 +1,27 @@
-import { test, expect } from "@playwright/test";
+import { expect } from "@playwright/test";
 import { signIn } from "./actions/signIn";
 import { alice } from "./fixtures/credentials";
 
+import { test } from "./fixtures";
 test.describe("Text search", () => {
-  test("finds a thing based on the label index", async ({ page }) => {
+  test("finds a thing based on the label index", async ({
+    page,
+    navigationBar,
+  }) => {
     await test.step("given a user is signed in", async () => {
       await page.goto("/");
       await signIn(page, alice);
     });
 
     await test.step("when they search for a text and select the first result", async () => {
-      const navigationBar = page.getByPlaceholder("Search or enter URI");
-      await navigationBar.fill("ometh");
+      const input = await navigationBar.fill("ometh");
 
       const result = page
         .getByRole("listitem")
         .filter({ hasText: "Something" });
       await expect(result).toBeVisible();
-      await navigationBar.press("ArrowDown");
-      await navigationBar.press("Enter");
+      await input.press("ArrowDown");
+      await input.press("Enter");
     });
 
     await test.step("then the page shows the selected resource", async () => {
@@ -29,26 +32,27 @@ test.describe("Text search", () => {
     });
   });
 
-  test("can find a thing, after making it findable", async ({ page }) => {
+  test("can find a thing, after making it findable", async ({
+    page,
+    navigationBar,
+  }) => {
     await test.step("given a user is signed in", async () => {
       await page.goto("/");
       await signIn(page, alice);
     });
 
+    const input = await navigationBar.activateInput();
+
     await test.step("and there is no search result for 'Banana'", async () => {
-      const navigationBar = page.getByPlaceholder("Search or enter URI");
-      await navigationBar.fill("Banana");
+      await input.fill("Banana");
 
       const result = page.getByRole("listitem").filter({ hasText: "Banana" });
       await expect(result).not.toBeVisible();
     });
 
     await test.step("when they navigate to the thing", async () => {
-      const navigationBar = page.getByPlaceholder("Enter URI");
-      await navigationBar.fill(
-        "http://localhost:4000/alice/make-findable/banana#it",
-      );
-      await navigationBar.press("Enter");
+      await input.fill("http://localhost:4000/alice/make-findable/banana#it");
+      await input.press("Enter");
       await expect(page.getByRole("heading", { name: "Banana" })).toBeVisible();
     });
 
@@ -57,7 +61,6 @@ test.describe("Text search", () => {
     });
 
     await test.step("then they will find it when retrying the search", async () => {
-      const navigationBar = page.getByPlaceholder("Search or enter URI");
       await navigationBar.fill("Banana");
 
       const result = page.getByRole("listitem").filter({ hasText: "Banana" });

docs/elements/apps/pos-app-browser/readme.md

@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property                 | Attribute                  | Description                                                                                                                                                                           | Type                    | Default        |
-| ------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------------- |
-| `mode`                   | `mode`                     | The mode the app is running in:  - standalone:  use this when you deploy it as a standalone web application - pod: use this when you host this app as a default interface for you pod | `"pod" \| "standalone"` | `'standalone'` |
-| `restorePreviousSession` | `restore-previous-session` |                                                                                                                                                                                       | `boolean`               | `false`        |
+| Property                 | Attribute                  | Description                                                                                                                                                                          | Type                    | Default        |
+| ------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | -------------- |
+| `mode`                   | `mode`                     | The mode the app is running in:  - standalone: use this when you deploy it as a standalone web application - pod: use this when you host this app as a default interface for you pod | `"pod" \| "standalone"` | `'standalone'` |
+| `restorePreviousSession` | `restore-previous-session` |                                                                                                                                                                                      | `boolean`               | `false`        |
 
 
 ## Dependencies
@@ -21,7 +21,7 @@
 - [pos-error-toast](../../components/pos-error-toast)
 - [pos-router](../../components/pos-router)
 - [pos-add-new-thing](../../components/pos-add-new-thing)
-- [pos-navigation-bar](../../components/pos-navigation-bar)
+- [pos-navigation](../../components/pos-navigation)
 - [pos-login](../../components/pos-login)
 - [pos-internal-router](../../components/pos-internal-router)
 - [pos-resource](../../components/pos-resource)
@@ -34,7 +34,7 @@ graph TD;
   pos-app-browser --> pos-error-toast
   pos-app-browser --> pos-router
   pos-app-browser --> pos-add-new-thing
-  pos-app-browser --> pos-navigation-bar
+  pos-app-browser --> pos-navigation
   pos-app-browser --> pos-login
   pos-app-browser --> pos-internal-router
   pos-app-browser --> pos-resource
@@ -48,13 +48,12 @@ graph TD;
   pos-add-new-thing --> pos-new-thing-form
   pos-dialog --> ion-icon
   pos-new-thing-form --> pos-select-term
+  pos-navigation --> pos-navigation-bar
+  pos-navigation --> pos-rich-link
   pos-navigation-bar --> pos-make-findable
-  pos-navigation-bar --> ion-searchbar
-  pos-navigation-bar --> pos-rich-link
   pos-make-findable --> pos-resource
   pos-make-findable --> pos-label
   pos-resource --> ion-progress-bar
-  ion-searchbar --> ion-icon
   pos-rich-link --> pos-resource
   pos-rich-link --> pos-label
   pos-rich-link --> pos-description

docs/elements/components/pos-container-contents/readme.md

@@ -9,26 +9,29 @@
 
 | Event             | Description | Type               |
 | ----------------- | ----------- | ------------------ |
-| `pod-os:link`     |             | `CustomEvent<any>` |
 | `pod-os:resource` |             | `CustomEvent<any>` |
 
 
 ## Dependencies
 
 ### Used by
 
- - [pos-container-contents](.)
+ - [pos-app-ldp-container](../../apps/pos-app-ldp-container)
 
 ### Depends on
 
-- ion-icon
+- [pos-resource](../pos-resource)
+- [pos-container-item](.)
 
 ### Graph
 ```mermaid
 graph TD;
-  pos-container-item --> ion-icon
+  pos-container-contents --> pos-resource
   pos-container-contents --> pos-container-item
-  style pos-container-item fill:#f9f,stroke:#333,stroke-width:4px
+  pos-resource --> ion-progress-bar
+  pos-container-item --> ion-icon
+  pos-app-ldp-container --> pos-container-contents
+  style pos-container-contents fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------