Merge pull request #485 from huwshimi/navigation-tests

WD-17050 - chore(tests): add Navigation component tests

ui/src/components/Navigation/Navigation.test.tsx

@@ -0,0 +1,58 @@
+import { renderComponent } from "test/utils";
+import { screen, within } from "@testing-library/dom";
+
+import { urls } from "urls";
+
+import Navigation from "./Navigation";
+import { Label } from "./types";
+import { authURLs } from "api/auth";
+import { appendAPIBasePath } from "util/basePaths";
+
+test("displays page links", () => {
+  renderComponent(<Navigation />);
+  expect(
+    screen.getByRole("link", { name: Label.IDENTITY_PROVIDERS }),
+  ).toHaveAttribute("href", urls.providers.index);
+  expect(screen.getByRole("link", { name: Label.CLIENTS })).toHaveAttribute(
+    "href",
+    urls.clients.index,
+  );
+  expect(screen.getByRole("link", { name: Label.IDENTITIES })).toHaveAttribute(
+    "href",
+    urls.identities.index,
+  );
+  expect(screen.getByRole("link", { name: Label.SCHEMAS })).toHaveAttribute(
+    "href",
+    urls.schemas.index,
+  );
+  expect(screen.getByRole("link", { name: "Groups" })).toHaveAttribute(
+    "href",
+    urls.groups.index,
+  );
+  expect(screen.getByRole("link", { name: "Roles" })).toHaveAttribute(
+    "href",
+    urls.roles.index,
+  );
+});
+
+test("displays username", () => {
+  renderComponent(<Navigation username="[email protected]" />);
+  const userNav = document.querySelector(".p-side-navigation--user-menu");
+  expect(userNav).toBeInTheDocument();
+  if (userNav) {
+    expect(
+      within(userNav as HTMLElement).getByText("[email protected]"),
+    ).toBeInTheDocument();
+  }
+});
+
+test("has a logout link", () => {
+  renderComponent(<Navigation username="[email protected]" />);
+  const userNav = document.querySelector(".p-side-navigation--user-menu");
+  expect(userNav).toBeInTheDocument();
+  if (userNav) {
+    expect(
+      within(userNav as HTMLElement).getByRole("link", { name: Label.LOGOUT }),
+    ).toHaveAttribute("href", appendAPIBasePath(authURLs.logout));
+  }
+});

ui/src/components/Navigation/Navigation.tsx

@@ -5,6 +5,8 @@ import { Button } from "@canonical/react-components";
 import { GroupsLink, RolesLink } from "@canonical/rebac-admin-admin-ui";
 import { authURLs } from "api/auth";
 import { appendAPIBasePath } from "util/basePaths";
+import { urls } from "urls";
+import { Label } from "./types";
 
 type Props = {
   username?: string;
@@ -20,23 +22,23 @@ const Navigation: FC<Props> = ({ username }) => {
             items: [
               {
                 icon: "plans",
-                label: "Identity providers",
-                to: "/provider",
+                label: Label.IDENTITY_PROVIDERS,
+                to: urls.providers.index,
               },
               {
                 icon: "applications",
-                label: "Clients",
-                to: "/client",
+                label: Label.CLIENTS,
+                to: urls.clients.index,
               },
               {
                 icon: "user",
-                label: "Identities",
-                to: "/identity",
+                label: Label.IDENTITIES,
+                to: urls.identities.index,
               },
               {
                 icon: "profile",
-                label: "Schemas",
-                to: "/schema",
+                label: Label.SCHEMAS,
+                to: urls.schemas.index,
               },
               <GroupsLink
                 className="p-side-navigation__link"
@@ -75,7 +77,7 @@ const Navigation: FC<Props> = ({ username }) => {
                 className="p-side-navigation__link"
                 key="logout"
               >
-                Logout
+                {Label.LOGOUT}
               </Button>,
             ],
           },

ui/src/components/Navigation/types.ts

@@ -0,0 +1,7 @@
+export enum Label {
+  CLIENTS = "Clients",
+  IDENTITIES = "Identities",
+  IDENTITY_PROVIDERS = "Identity providers",
+  LOGOUT = "Logout",
+  SCHEMAS = "Schemas",
+}