feat: add tests for dropdown menu (open-sauced#1135)

CodeItQuick · Aug 24, 2021 · 79bfc0c · 79bfc0c
1 parent a02e764
commit 79bfc0c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 28 deletions.
diff --git a/src/components/DropdownMenu.js b/src/components/DropdownMenu.js
@@ -6,31 +6,33 @@ import {getAppVersion} from "../lib/appVersion";
 function DropdownMenu({forwardRef, user, _logOutRedirect}) {
   return (
     <DropdownMenuCard ref={forwardRef}>
-      <li>
-        <SubtleLink
-          tabIndex={0}
-          className="menu-link"
-          href={`https://github.com/${user.login}`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {user.login}
-        </SubtleLink>
-      </li>
-      <li>
-        <SubtleLink
-          tabIndex={0}
-          className="menu-link"
-          href={`https://github.com/open-sauced/open-sauced/releases/tag/v${getAppVersion()}`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          v{getAppVersion()}
-        </SubtleLink>
-      </li>
-      <li>
-        <SubtleLink tabIndex={0} className="menu-link" onClick={_logOutRedirect}>Logout</SubtleLink>
-      </li>
+      <ul>
+        <li>
+          <SubtleLink
+            tabIndex={0}
+            className="menu-link"
+            href={`https://github.com/${user.login}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {user.login}
+          </SubtleLink>
+        </li>
+        <li>
+          <SubtleLink
+            tabIndex={0}
+            className="menu-link"
+            href={`https://github.com/open-sauced/open-sauced/releases/tag/v${getAppVersion()}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            v{getAppVersion()}
+          </SubtleLink>
+        </li>
+        <li>
+          <SubtleLink tabIndex={0} className="menu-link" onClick={_logOutRedirect}>Logout</SubtleLink>
+        </li>
+      </ul>
     </DropdownMenuCard>
   );
 }

diff --git a/src/styles/Card.js b/src/styles/Card.js
@@ -276,10 +276,13 @@ const DropdownMenuCard = styled(Card)`
   padding: 0 20px; 
   width: fit-content;
   right: 15px;
-  display: flex; 
-  flex-direction: column;
   z-index: 1;
- 
+  ul {
+     display: flex; 
+     flex-direction: column;
+     padding:0;
+     margin: 0;
+  }
   li {
     padding: 0px;
     line-height: 47px;

diff --git a/src/tests/DropdownMenu.test.js b/src/tests/DropdownMenu.test.js
@@ -0,0 +1,17 @@
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import {render, cleanup} from "@testing-library/react";
+import DropdownMenu from "../components/DropdownMenu";
+import {data} from "./mocks";
+import {axe, toHaveNoViolations} from "jest-axe";
+expect.extend(toHaveNoViolations);
+
+const {user} = data;
+test("container component should have no violations", async() => {
+  const {container} = render(<DropdownMenu user={user} />);
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+
+  cleanup();
+});
+