From 10b7e383d48968b3f3b966663e2eec7cef4ab70c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Sat, 31 Aug 2024 21:43:45 +0200
Subject: [PATCH] [frontend] Split AppNavigation from App

---
 .../components/AppNavigation.test.tsx         | 15 ++++++
 .../__snapshots__/AppNavigation.test.tsx.snap | 49 +++++++++++++++++++
 packages/frontend/src/App.tsx                 | 17 +------
 .../frontend/src/components/AppNavigation.tsx | 18 +++++++
 4 files changed, 83 insertions(+), 16 deletions(-)
 create mode 100644 packages/frontend/__tests__/components/AppNavigation.test.tsx
 create mode 100644 packages/frontend/__tests__/components/__snapshots__/AppNavigation.test.tsx.snap
 create mode 100644 packages/frontend/src/components/AppNavigation.tsx

diff --git a/packages/frontend/__tests__/components/AppNavigation.test.tsx b/packages/frontend/__tests__/components/AppNavigation.test.tsx
new file mode 100644
index 000000000..92d6fae6f
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/packages/frontend/__tests__/components/__snapshots__/AppNavigation.test.tsx.snap b/packages/frontend/__tests__/components/__snapshots__/AppNavigation.test.tsx.snap
new file mode 100644
index 000000000..0e3cf0fff
--- /dev/null
+++ b/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>
+`;
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 34175ed08..2528a6945 100644
--- a/packages/frontend/src/App.tsx
+++ b/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,
diff --git a/packages/frontend/src/components/AppNavigation.tsx b/packages/frontend/src/components/AppNavigation.tsx
new file mode 100644
index 000000000..695b0777e
--- /dev/null
+++ b/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",
+      },
+    ]}
+  />
+);