feat: add extra visual error (#108)

* feat: add extra visual error * fix: fix coverage
saucelabs · Nov 1, 2023 · 53bba5a · 53bba5a
1 parent 155837d
commit 53bba5a
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 3 deletions.
diff --git a/src/components/DrawerMenu.css b/src/components/DrawerMenu.css
@@ -63,3 +63,7 @@
 /* Individual item */
 .bm-item {
 }
+
+.visual_failure {
+  transform: rotate(3deg);
+}
diff --git a/src/components/DrawerMenu.jsx b/src/components/DrawerMenu.jsx
@@ -4,7 +4,11 @@ import PropTypes from "prop-types";
 import { slide as Menu } from "react-burger-menu";
 import { ShoppingCart } from "../utils/shopping-cart";
 import { ROUTES } from "../utils/Constants";
-import { isProblemUser, removeCredentials } from "../utils/Credentials";
+import {
+  isProblemUser,
+  isVisualUser,
+  removeCredentials,
+} from "../utils/Credentials";
 import menuClosePng from "../assets/img/close.png";
 import menuCloseSvg from "../assets/svg/[email protected]";
 import menuIconPng from "../assets/img/menu.png";
@@ -19,14 +23,26 @@ const DrawerMenu = ({ history }) => {
   const aboutLink = isProblemUser()
     ? "https://saucelabs.com/error/404"
     : "https://saucelabs.com/";
+  const isVisualFailure = isVisualUser();
+  const imageClass = isVisualFailure ? "visual_failure" : "";
 
   return (
     <Menu
       customBurgerIcon={
-        <img src={menuIconPng} srcSet={menuIconSvg} alt="Open Menu" />
+        <img
+          src={menuIconPng}
+          className={imageClass}
+          srcSet={menuIconSvg}
+          alt="Open Menu"
+        />
       }
       customCrossIcon={
-        <img src={menuClosePng} srcSet={menuCloseSvg} alt="Close Menu" />
+        <img
+          src={menuClosePng}
+          className={imageClass}
+          srcSet={menuCloseSvg}
+          alt="Close Menu"
+        />
       }
       outerContainerId={"page_wrapper"}
       pageWrapId={"contents_wrapper"}

diff --git a/src/components/__tests__/DrawerMenu.tests.js b/src/components/__tests__/DrawerMenu.tests.js
@@ -23,6 +23,14 @@ describe("DrawerMenu", () => {
     expect(component).toMatchSnapshot();
   });
 
+  it("should render correctly for a visual user", () => {
+    const isVisualUserSpy = jest.spyOn(Credentials, "isVisualUser");
+    isVisualUserSpy.mockReturnValue(true);
+    const component = shallow(<DrawerMenu.WrappedComponent {...props} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
   it("should render return an incorrect about link for a problem user", () => {
     const isProblemUserSpy = jest.spyOn(Credentials, "isProblemUser");
     isProblemUserSpy.mockReturnValue(true);

diff --git a/src/components/__tests__/__snapshots__/DrawerMenu.tests.js.snap b/src/components/__tests__/__snapshots__/DrawerMenu.tests.js.snap
@@ -11,13 +11,92 @@ exports[`DrawerMenu should render correctly 1`] = `
   customBurgerIcon={
     <img
       alt="Open Menu"
+      className=""
       src="test-file-stub"
       srcSet="test-file-stub"
     />
   }
   customCrossIcon={
     <img
       alt="Close Menu"
+      className=""
+      src="test-file-stub"
+      srcSet="test-file-stub"
+    />
+  }
+  disableAutoFocus={false}
+  disableCloseOnEsc={false}
+  htmlClassName=""
+  id=""
+  itemClassName=""
+  itemListClassName=""
+  itemListElement="nav"
+  menuClassName=""
+  morphShapeClassName=""
+  noOverlay={true}
+  noTransition={false}
+  onIconHoverChange={[Function]}
+  onStateChange={[Function]}
+  outerContainerId="page_wrapper"
+  overlayClassName=""
+  pageWrapId="contents_wrapper"
+  styles={Object {}}
+  width={300}
+>
+  <a
+    className="menu-item"
+    href="#"
+    id="inventory_sidebar_link"
+    onClick={[Function]}
+  >
+    All Items
+  </a>
+  <a
+    className="menu-item"
+    href="https://saucelabs.com/"
+    id="about_sidebar_link"
+  >
+    About
+  </a>
+  <a
+    className="menu-item"
+    href="#"
+    id="logout_sidebar_link"
+    onClick={[Function]}
+  >
+    Logout
+  </a>
+  <a
+    className="menu-item"
+    href="#"
+    id="reset_sidebar_link"
+    onClick={[Function]}
+  >
+    Reset App State
+  </a>
+</Menu>
+`;
+
+exports[`DrawerMenu should render correctly for a visual user 1`] = `
+<Menu
+  bodyClassName=""
+  burgerBarClassName=""
+  burgerButtonClassName=""
+  className=""
+  crossButtonClassName=""
+  crossClassName=""
+  customBurgerIcon={
+    <img
+      alt="Open Menu"
+      className="visual_failure"
+      src="test-file-stub"
+      srcSet="test-file-stub"
+    />
+  }
+  customCrossIcon={
+    <img
+      alt="Close Menu"
+      className="visual_failure"
       src="test-file-stub"
       srcSet="test-file-stub"
     />