Display random prices for visual user (#124)

* Display random prices for visual user

* update snapshot

---------

Co-authored-by: Benjamin Karran <benjamin.karran@saucelabs.com>

Author: ebekebe

src/pages/Inventory.jsx

@@ -28,6 +28,7 @@ const Inventory = ({data}) => {
     }
   };
   const isVisualFailure = isVisualUser();
+  const randomPrice = () => Math.round(Math.random() * 10000) / 100;
 
   /* istanbul ignore next */
   if (isPerformanceGlitchUser()) {
@@ -117,7 +118,7 @@ const Inventory = ({data}) => {
                       }
                       name={item.name}
                       desc={item.desc}
-                      price={item.price}
+                      price={isVisualFailure ? randomPrice() : item.price}
                       isTextAlignRight={isVisualFailure && i > 1 && i < 4}
                       missAlignButton={isVisualFailure && i === 5}
                     />

src/pages/__tests__/Inventory.tests.js

@@ -43,6 +43,10 @@ describe("Inventory", () => {
   it("should render correctly for a visual user", () => {
     const isVisualUserSpy = jest.spyOn(Credentials, "isVisualUser");
     isVisualUserSpy.mockReturnValue(true);
+
+    const randomSpy = jest.spyOn(Math, "random");
+    randomSpy.mockReturnValue(0.5);
+
     const wrapper = shallow(<Inventory.WrappedComponent data={InventoryData} />);
 
     expect(wrapper).toMatchSnapshot();

src/pages/__tests__/__snapshots__/Inventory.tests.js.snap

@@ -299,7 +299,7 @@ exports[`Inventory should render correctly for a visual user 1`] = `
               key="4"
               missAlignButton={false}
               name="Sauce Labs Backpack"
-              price={29.99}
+              price={50}
             />
             <withRouter(InventoryListItem)
               desc="A red light isn't the desired state in testing but it sure helps when riding your bike at night. Water-resistant with 3 lighting modes, 1 AAA battery included."
@@ -309,7 +309,7 @@ exports[`Inventory should render correctly for a visual user 1`] = `
               key="0"
               missAlignButton={false}
               name="Sauce Labs Bike Light"
-              price={9.99}
+              price={50}
             />
             <withRouter(InventoryListItem)
               desc="Get your testing superhero on with the Sauce Labs bolt T-shirt. From American Apparel, 100% ringspun combed cotton, heather gray with red bolt."
@@ -319,7 +319,7 @@ exports[`Inventory should render correctly for a visual user 1`] = `
               key="1"
               missAlignButton={false}
               name="Sauce Labs Bolt T-Shirt"
-              price={15.99}
+              price={50}
             />
             <withRouter(InventoryListItem)
               desc="It's not every day that you come across a midweight quarter-zip fleece jacket capable of handling everything from a relaxing day outdoors to a busy day at the office."
@@ -329,7 +329,7 @@ exports[`Inventory should render correctly for a visual user 1`] = `
               key="5"
               missAlignButton={false}
               name="Sauce Labs Fleece Jacket"
-              price={49.99}
+              price={50}
             />
             <withRouter(InventoryListItem)
               desc="Rib snap infant onesie for the junior automation engineer in development. Reinforced 3-snap bottom closure, two-needle hemmed sleeved and bottom won't unravel."
@@ -339,7 +339,7 @@ exports[`Inventory should render correctly for a visual user 1`] = `
               key="2"
               missAlignButton={false}
               name="Sauce Labs Onesie"
-              price={7.99}
+              price={50}
             />
             <withRouter(InventoryListItem)
               desc="This classic Sauce Labs t-shirt is perfect to wear when cozying up to your keyboard to automate a few tests. Super-soft and comfy ringspun combed cotton."
@@ -349,7 +349,7 @@ exports[`Inventory should render correctly for a visual user 1`] = `
               key="3"
               missAlignButton={true}
               name="Test.allTheThings() T-Shirt (Red)"
-              price={15.99}
+              price={50}
             />
           </div>
         </div>