Skip to content

Commit 2bf7829

Browse files
paweltomaszewskisaucelabspaweltomaszewskisaucelabs
authored
IRIS-826 add long inventory list (#115)
* IRIS-826 add long inventory list * add missing prop * add missing prop * update test * fix test
1 parent beeb511 commit 2bf7829

File tree

5 files changed

+178
-6
lines changed

5 files changed

+178
-6
lines changed

‎src/index.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
2121
import { ROUTES } from "./utils/Constants";
2222
import { currentUser } from "./utils/Credentials";
2323
import { ShoppingCart } from "./utils/shopping-cart";
24+
import { InventoryData } from "./utils/InventoryData.js";
25+
import { InventoryDataLong } from "./utils/InventoryDataLong.js";
2426

2527
BacktraceClient.initialize({
2628
name: "Swag Store",
@@ -36,7 +38,8 @@ const routing = (
3638
<ErrorBoundary>
3739
<Router>
3840
<Route exact path={ROUTES.LOGIN} component={Login} />
39-
<PrivateRoute path={ROUTES.INVENTORY} component={Inventory} />
41+
<PrivateRoute path={ROUTES.INVENTORY} component={(props) => <Inventory data={InventoryData} {...props}/>} />
42+
<PrivateRoute path={ROUTES.INVENTORY_LONG} component={(props) => <Inventory data={InventoryDataLong} {...props}/>} />
4043
<PrivateRoute path={ROUTES.INVENTORY_LIST} component={InventoryItem} />
4144
<PrivateRoute path={ROUTES.CART} component={Cart} />
4245
<PrivateRoute

‎src/pages/Inventory.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
isProblemUser,
77
isVisualUser,
88
} from "../utils/Credentials";
9-
import { InventoryData } from "../utils/InventoryData.js";
109
import InventoryListItem from "../components/InventoryListItem";
1110
import SwagLabsFooter from "../components/Footer";
1211
import HeaderContainer from "../components/HeaderContainer";
@@ -15,7 +14,8 @@ import Select from "../components/Select";
1514
import "./Inventory.css";
1615
import { BacktraceClient } from "@backtrace-labs/react";
1716

18-
const Inventory = () => {
17+
const Inventory = ({data}) => {
18+
const InventoryData = data;
1919
const [inventoryList, setInventoryList] = useState(
2020
sortAsc(InventoryData, "name")
2121
);

‎src/pages/__tests__/Inventory.tests.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { useState as useStateMock } from "react";
22
import { shallow } from "enzyme";
33
import Inventory from "../Inventory";
44
import * as Credentials from "../../utils/Credentials";
5+
import {InventoryData} from "../../utils/InventoryData";
6+
import {InventoryDataLong} from "../../utils/InventoryDataLong";
57

68
jest.mock("react", () => ({
79
...jest.requireActual("react"),
@@ -20,14 +22,19 @@ describe("Inventory", () => {
2022
});
2123

2224
it("should render correctly", () => {
23-
const wrapper = shallow(<Inventory.WrappedComponent />);
25+
const wrapper = shallow(<Inventory.WrappedComponent data={InventoryData} />);
2426
expect(wrapper).toMatchSnapshot();
2527
});
2628

29+
it("should render correctly long", () => {
30+
const wrapper = shallow(<Inventory.WrappedComponent data={InventoryDataLong} />);
31+
expect(wrapper.find('[data-test="inventory-list"]').length).toEqual(1);
32+
});
33+
2734
it("should render correctly for a problem user", () => {
2835
const isProblemUserSpy = jest.spyOn(Credentials, "isProblemUser");
2936
isProblemUserSpy.mockReturnValue(true);
30-
const wrapper = shallow(<Inventory.WrappedComponent />);
37+
const wrapper = shallow(<Inventory.WrappedComponent data={InventoryData} />);
3138

3239
expect(wrapper).toMatchSnapshot();
3340
isProblemUserSpy.mockClear();
@@ -36,7 +43,7 @@ describe("Inventory", () => {
3643
it("should render correctly for a visual user", () => {
3744
const isVisualUserSpy = jest.spyOn(Credentials, "isVisualUser");
3845
isVisualUserSpy.mockReturnValue(true);
39-
const wrapper = shallow(<Inventory.WrappedComponent />);
46+
const wrapper = shallow(<Inventory.WrappedComponent data={InventoryData} />);
4047

4148
expect(wrapper).toMatchSnapshot();
4249
isVisualUserSpy.mockClear();

‎src/utils/Constants.js

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const VALID_PASSWORD = "secret_sauce";
1111
export const ROUTES = {
1212
LOGIN: "/",
1313
INVENTORY: "/inventory.html",
14+
INVENTORY_LONG: "/inventory-long.html",
1415
INVENTORY_LIST: "/inventory-item.html",
1516
CART: "/cart.html",
1617
CHECKOUT_STEP_ONE: "/checkout-step-one.html",

‎src/utils/InventoryDataLong.js

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
export const InventoryDataLong = [
2+
{
3+
id: 0,
4+
name: "Sauce Labs Bike Light",
5+
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.`,
6+
price: 9.99,
7+
image_url: "bike-light-1200x1500.jpg",
8+
},
9+
{
10+
id: 1,
11+
name: "Sauce Labs Bolt T-Shirt (XS)",
12+
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.`,
13+
price: 15.99,
14+
image_url: "bolt-shirt-1200x1500.jpg",
15+
},
16+
{
17+
id: 2,
18+
name: "Sauce Labs Onesie",
19+
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.`,
20+
price: 7.99,
21+
image_url: "red-onesie-1200x1500.jpg",
22+
},
23+
{
24+
id: 3,
25+
name: "Test.allTheThings() T-Shirt (Red) (XS)",
26+
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.`,
27+
price: 15.99,
28+
image_url: "red-tatt-1200x1500.jpg",
29+
},
30+
{
31+
id: 4,
32+
name: "Sauce Labs Backpack",
33+
desc: `carry.allTheThings() with the sleek, streamlined Sly Pack that melds uncompromising style with unequaled laptop and tablet protection.`,
34+
price: 29.99,
35+
image_url: "sauce-backpack-1200x1500.jpg",
36+
},
37+
{
38+
id: 5,
39+
name: "Sauce Labs Fleece Jacket (XS)",
40+
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.`,
41+
price: 49.99,
42+
image_url: "sauce-pullover-1200x1500.jpg",
43+
},
44+
{
45+
id: 6,
46+
name: "Sauce Labs Fleece Jacket (S)",
47+
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.`,
48+
price: 49.99,
49+
image_url: "sauce-pullover-1200x1500.jpg",
50+
},
51+
{
52+
id: 7,
53+
name: "Sauce Labs Fleece Jacket (M)",
54+
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.`,
55+
price: 49.99,
56+
image_url: "sauce-pullover-1200x1500.jpg",
57+
},
58+
{
59+
id: 8,
60+
name: "Sauce Labs Fleece Jacket (L)",
61+
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.`,
62+
price: 49.99,
63+
image_url: "sauce-pullover-1200x1500.jpg",
64+
},
65+
{
66+
id: 9,
67+
name: "Sauce Labs Fleece Jacket (XL)",
68+
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.`,
69+
price: 49.99,
70+
image_url: "sauce-pullover-1200x1500.jpg",
71+
},
72+
{
73+
id: 10,
74+
name: "Sauce Labs Fleece Jacket (XXL)",
75+
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.`,
76+
price: 49.99,
77+
image_url: "sauce-pullover-1200x1500.jpg",
78+
},
79+
{
80+
id: 11,
81+
name: "Test.allTheThings() T-Shirt (Red) (S)",
82+
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.`,
83+
price: 15.99,
84+
image_url: "red-tatt-1200x1500.jpg",
85+
},
86+
87+
{
88+
id: 12,
89+
name: "Test.allTheThings() T-Shirt (Red) (M)",
90+
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.`,
91+
price: 15.99,
92+
image_url: "red-tatt-1200x1500.jpg",
93+
},
94+
95+
{
96+
id: 13,
97+
name: "Test.allTheThings() T-Shirt (Red) (L)",
98+
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.`,
99+
price: 15.99,
100+
image_url: "red-tatt-1200x1500.jpg",
101+
},
102+
103+
{
104+
id: 14,
105+
name: "Test.allTheThings() T-Shirt (Red) (L)",
106+
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.`,
107+
price: 15.99,
108+
image_url: "red-tatt-1200x1500.jpg",
109+
},
110+
111+
{
112+
id: 15,
113+
name: "Test.allTheThings() T-Shirt (Red) (XL)",
114+
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.`,
115+
price: 15.99,
116+
image_url: "red-tatt-1200x1500.jpg",
117+
},
118+
119+
{
120+
id: 16,
121+
name: "Test.allTheThings() T-Shirt (Red) (XXL)",
122+
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.`,
123+
price: 15.99,
124+
image_url: "red-tatt-1200x1500.jpg",
125+
},
126+
{
127+
id: 17,
128+
name: "Sauce Labs Bolt T-Shirt (M)",
129+
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.`,
130+
price: 15.99,
131+
image_url: "bolt-shirt-1200x1500.jpg",
132+
},
133+
{
134+
id: 18,
135+
name: "Sauce Labs Bolt T-Shirt (L)",
136+
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.`,
137+
price: 15.99,
138+
image_url: "bolt-shirt-1200x1500.jpg",
139+
},
140+
{
141+
id: 19,
142+
name: "Sauce Labs Bolt T-Shirt (XL)",
143+
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.`,
144+
price: 15.99,
145+
image_url: "bolt-shirt-1200x1500.jpg",
146+
},
147+
{
148+
id: 20,
149+
name: "Sauce Labs Bolt T-Shirt (XXL)",
150+
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.`,
151+
price: 15.99,
152+
image_url: "bolt-shirt-1200x1500.jpg",
153+
},
154+
{
155+
id: 21,
156+
name: "Sauce Labs Bolt T-Shirt (S)",
157+
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.`,
158+
price: 15.99,
159+
image_url: "bolt-shirt-1200x1500.jpg",
160+
},
161+
];

0 commit comments

Comments
 (0)