test: add some initial rendering testing for the top bar

webapp/src/components/Layout.jsx

@@ -5,17 +5,17 @@ import {Button, Container, Flex, Grid, GridItem, Link, Menu, MenuButton, MenuIte
 import { ChevronDownIcon } from "@chakra-ui/icons";
 import { useTranslation } from "react-i18next";
 
-function TopBar() {
+export function TopBar() {
 
   const { t } = useTranslation();
 
   function parseMenu(page){
-    return <Menu>
-      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+    return <Menu key={page.name}>
+      <MenuButton as={Button} key={page.name} rightIcon={<ChevronDownIcon />} data-testid={page.name}>
         {t(page.name)}
       </MenuButton>
       <MenuList>
-        {page.children.map(p => <MenuItem as={Link} href={p.link}>{t(p.name)}</MenuItem>)}
+        {page.children.map(p => <MenuItem key={p.name} as={Link} href={p.link} data-testid={p.name}>{t(p.name)}</MenuItem>)}
       </MenuList>
     </Menu>
   }
@@ -24,15 +24,16 @@ function TopBar() {
     if (page.children !== undefined) {
       return parseMenu(page)
     }
-    return <Button as={Link} href={page.link} mr={"1vw"}>{t(page.name)}</Button>
+    return <Button key={page.name} as={Link} href={page.link} mr={"1vw"} data-testid={page.name}>{t(page.name)}</Button>
   }
 
   return <Grid padding={"1.5vh 1.5vw"}
-            bgColor="#365486" as="nav" templateColumns={"repeat(5, 20%);"}>
-      <GridItem colSpan={4}>
+            bgColor="#365486" as="nav" 
+            templateColumns={"repeat(5, 20%)"}>
+      <GridItem colSpan={4} key={"left-navbar"}>
       { pages.map(page => parsePage(page)) }
       </GridItem>
-      <GridItem as={Flex} justifyContent={"right"}>
+      <GridItem as={Flex} justifyContent={"right"} key={"right-navbar"}>
         <Button as={Link} mr={"1vw"}>{t("nav.login")}</Button>
         <Button as={Link} mr={"1vw"}>{t("nav.register")}</Button>
       </GridItem>

webapp/src/components/Layout.test.js

@@ -0,0 +1,24 @@
+import { getByTestId, render } from "@testing-library/react";
+import React from "react";
+import { TopBar } from "./Layout";
+
+describe("Top bar component", () => {
+
+    it("should contain all elements", () => {
+        const { container } = render(<TopBar />);
+
+        expect(container.querySelectorAll("nav > div > a").length).toBe(5);
+        expect(container.querySelectorAll("nav > div > button").length).toBe(1);
+        expect(container.querySelectorAll("nav > div > div > div > a").length).toBe(2);
+    });
+
+    it("should contain each option the correct link", () => {
+        const { container } = render(<TopBar />);
+
+        expect(getByTestId(container, "nav.home").getAttribute("href")).toBe("/");
+        expect(getByTestId(container, "nav.api_docs").getAttribute("href")).toBe("/api");
+        expect(getByTestId(container, "nav.play").getAttribute("href")).toBe("/play");
+        expect(getByTestId(container, "nav.statistics.general").getAttribute("href")).toBe("/statistics/general");
+        expect(getByTestId(container, "nav.statistics.personal").getAttribute("href")).toBe("/statistics/personal")
+    });
+});