[frontend] Split AppNavigation from App

packages/frontend/__tests__/components/AppNavigation.test.tsx

@@ -0,0 +1,15 @@
+import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+
+import { AppNavigation } from "../../src/components/AppNavigation";
+
+describe("AppNavigation component", () => {
+  test("should render correctly", () => {
+    const { container } = render(
+      <MemoryRouter>
+        <AppNavigation />
+      </MemoryRouter>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

packages/frontend/__tests__/components/__snapshots__/AppNavigation.test.tsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppNavigation component should render correctly 1`] = `
+.emotion-0 {
+  list-style: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 24px;
+  padding: 0 16px;
+  border-bottom: 1px solid #294885;
+}
+
+.emotion-1 {
+  display: block;
+  padding: 0.2em 0.8em;
+  margin-bottom: -1px;
+  border: 1px solid transparent;
+  border-radius: 5px 5px 0 0;
+}
+
+.emotion-1.active {
+  border-top: 1px solid #294885;
+  border-right: 1px solid #294885;
+  border-left: 1px solid #294885;
+  background-color: #fff;
+}
+
+<nav>
+  <div
+    class="emotion-0"
+  >
+    <a
+      aria-current="page"
+      class="emotion-1 active"
+      href="/"
+    >
+      Poptávky
+    </a>
+    <a
+      class="emotion-1"
+      href="/projekty"
+    >
+      Projekty
+    </a>
+  </div>
+</nav>
+`;

packages/frontend/src/App.tsx

@@ -6,29 +6,14 @@ import useSWR from "swr";
 
 import type { ProjectListings } from "./interfaces/ProjectListings";
 
+import { AppNavigation } from "./components/AppNavigation";
 import { Container } from "./components/Container";
-import { Navigation } from "./components/Navigation";
 import { config } from "./config";
 import { IssueDetail } from "./pages/IssueDetail";
 import { IssuesList } from "./pages/IssuesList";
 import { ProjectDetail } from "./pages/ProjectDetail";
 import { ProjectsList } from "./pages/ProjectsList";
 
-const AppNavigation = (): React.JSX.Element => (
-  <Navigation
-    items={[
-      {
-        link: "/",
-        title: "Poptávky",
-      },
-      {
-        link: "/projekty",
-        title: "Projekty",
-      },
-    ]}
-  />
-);
-
 export const App = (): React.JSX.Element => {
   const { data, error } = useSWR<ProjectListings, unknown>(
     config.dataApiUrl,

packages/frontend/src/components/AppNavigation.tsx

@@ -0,0 +1,18 @@
+import type React from "react";
+
+import { Navigation } from "./Navigation";
+
+export const AppNavigation = (): React.JSX.Element => (
+  <Navigation
+    items={[
+      {
+        link: "/",
+        title: "Poptávky",
+      },
+      {
+        link: "/projekty",
+        title: "Projekty",
+      },
+    ]}
+  />
+);