add tests for Footer component

Signed-off-by: Haris Bikovic <[email protected]>

frontend/src/components/Footer.test.tsx

@@ -0,0 +1,84 @@
+/*
+  This file is part of Edgehog.
+
+  Copyright 2023 SECO Mind Srl
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+  SPDX-License-Identifier: Apache-2.0
+*/
+
+import { it, expect } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "setupTests";
+
+import Footer from "./Footer";
+
+it("displays correct app name and app version", () => {
+  renderWithProviders(
+    <Footer
+      appName="appName"
+      appVersion="appVersion"
+      homepageUrl="https://edgehog.io/"
+      repoUrl="https://github.com/edgehog-device-manager/edgehog"
+      issueTrackerUrl="https://github.com/edgehog-device-manager/edgehog/issues"
+    />,
+  );
+
+  const appNameElement = screen.getByText("appName");
+  const appVersionElement = screen.getByText("appName");
+
+  expect(appNameElement).toBeInTheDocument();
+  expect(appVersionElement).toBeInTheDocument();
+});
+
+it("app logo redirects to homepage", () => {
+  renderWithProviders(
+    <Footer
+      appName="Edgehog"
+      appVersion="v1.0"
+      homepageUrl="https://edgehog.io/"
+      repoUrl="https://github.com/edgehog-device-manager/edgehog"
+      issueTrackerUrl="https://github.com/edgehog-device-manager/edgehog/issues"
+    />,
+  );
+
+  const appLogo = screen.getByAltText(/Logo/i);
+  expect(appLogo).toHaveAttribute("src", "/src/assets/images/brand.png");
+
+  const homepageLink = screen.getByRole("link", { name: "Edgehog Logo" });
+  expect(homepageLink).toHaveAttribute("href", "https://edgehog.io/");
+});
+
+it("anchors redirect to correct links", () => {
+  renderWithProviders(
+    <Footer
+      appName="appName"
+      appVersion="appVersion"
+      homepageUrl="https://edgehog.io/"
+      repoUrl="https://github.com/edgehog-device-manager/edgehog"
+      issueTrackerUrl="https://github.com/edgehog-device-manager/edgehog/issues"
+    />,
+  );
+
+  const repositoryLink = screen.getByRole("link", { name: "GitHub" });
+  const issuesLink = screen.getByRole("link", { name: "GitHub-Issues" });
+  expect(repositoryLink).toHaveAttribute(
+    "href",
+    "https://github.com/edgehog-device-manager/edgehog",
+  );
+  expect(issuesLink).toHaveAttribute(
+    "href",
+    "https://github.com/edgehog-device-manager/edgehog/issues",
+  );
+});

frontend/src/components/Footer.tsx

@@ -18,11 +18,12 @@
   SPDX-License-Identifier: Apache-2.0
 */
 
+import { useIntl } from "react-intl";
+
 import assets from "assets";
 import Center from "components/Center";
 import Icon from "components/Icon";
 import Stack from "components/Stack";
-import { useIntl } from "react-intl";
 import "./Footer.scss";
 
 type FooterProps = {
@@ -46,8 +47,20 @@ const Footer = ({
       <Center>
         <div>
           <Stack gap={2} direction="horizontal">
-            <a href={homepageUrl}>
-              <img alt="Logo" src={assets.images.brand} />
+            <a
+              href={homepageUrl}
+              aria-label={intl.formatMessage({
+                id: "components.Footer.edgehogHomeLinkLabel",
+                defaultMessage: "Edgehog Logo",
+              })}
+            >
+              <img
+                alt={intl.formatMessage({
+                  id: "components.Footer.logo",
+                  defaultMessage: "Logo",
+                })}
+                src={assets.images.brand}
+              />
             </a>
             <span>
               {appName} <small>(v{appVersion})</small>

frontend/src/i18n/langs/en.json

@@ -310,6 +310,9 @@
   "components.Footer.issuesLinkLabel": {
     "defaultMessage": "GitHub-Issues"
   },
+  "components.Footer.logo": {
+    "defaultMessage": "Logo"
+  },
   "components.Footer.repositoryLinkLabel": {
     "defaultMessage": "GitHub"
   },