Fix namespace selector and add test coverage

Signed-off-by: Jordan Pellizzari <jordan@weave.works>

package.json

@@ -13,7 +13,11 @@
     "watch": "jest --runInBand --watch"
   },
   "jest": {
-    "preset": "ts-jest"
+    "preset": "ts-jest",
+    "moduleNameMapper": {
+      "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/ui/lib/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/ui/lib/fileMock.js"
+    }
   },
   "dependencies": {
     "@babel/preset-env": "^7.13.8",

ui/components/AppStateProvider.tsx

@@ -45,7 +45,7 @@ export default function AppStateProvider({ clustersClient, ...props }) {
     });
   };
 
-  const query = qs.parse(location.pathname);
+  const query = qs.parse(location.search);
 
   const getNamespaces = (ctx) => {
     clustersClient.listNamespacesForContext({ contextname: ctx }).then(

ui/components/TopNav.tsx

@@ -90,9 +90,13 @@ function TopNav({ className }: Props) {
         <NavWrapper column center wide>
           <Flex center>
             <FormControl variant="outlined">
-              <InputLabel id="context-selector">Context</InputLabel>
+              <InputLabel htmlFor="context-select" id="context-select-label">
+                Context
+              </InputLabel>
               {currentContext && contexts.length > 0 && (
                 <Select
+                  labelId="context-select-label"
+                  id="context-select"
                   onChange={(ev) => {
                     const nextCtx = ev.target.value as string;
                     // setCurrentContext(nextCtx);
@@ -103,8 +107,6 @@ function TopNav({ className }: Props) {
                     );
                   }}
                   value={currentContext}
-                  id="context-selector"
-                  label="Contexts"
                 >
                   {_.map(contexts, (c) => (
                     <MenuItem value={c.name || ""} key={c.name}>
@@ -116,7 +118,7 @@ function TopNav({ className }: Props) {
             </FormControl>
             <FormControl variant="outlined">
               <InputLabel id="namespaces-selector">Namespace</InputLabel>
-              {currentNamespace && namespaces && (
+              {currentNamespace && namespaces && namespaces.length > 0 && (
                 <Select
                   onChange={(ev) => {
                     const nextNs = (ev.target.value === allNamespaces

ui/components/__tests__/TopNav.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import "jest-styled-components";
+import { stubbedClustersResponses, withContext } from "../../lib/test-utils";
+import TopNav from "../TopNav";
+
+describe("TopNav", () => {
+  let container;
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  describe("snapshots", () => {
+    it("renders", async () => {
+      const url = "/?context=my-context&namespace=default";
+
+      const tree = render(withContext(TopNav, url, stubbedClustersResponses));
+      expect((await screen.findByText("my-context")).textContent).toBeTruthy();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+  it("sets the current context", async () => {
+    const url = "/?context=my-context&namespace=default";
+
+    render(withContext(TopNav, url, stubbedClustersResponses));
+
+    const input = await screen.findByDisplayValue("my-context");
+
+    expect(input).toBeTruthy();
+  });
+  it("sets the current namespace", async () => {
+    const ns = "some-ns";
+    const url = `/?context=my-context&namespace=${ns}`;
+
+    render(
+      withContext(TopNav, url, {
+        ...stubbedClustersResponses,
+        listNamespacesForContext: { namespaces: [ns] },
+      })
+    );
+
+    const input = await screen.findByDisplayValue(ns);
+    expect(input).toBeTruthy();
+  });
+});