From a19247c79f51e48daf0dd6e7a4158af315810754 Mon Sep 17 00:00:00 2001 From: Ryan McDermott Date: Mon, 20 Mar 2017 21:30:42 -0700 Subject: [PATCH] Inventory test --- .eslintrc | 3 ++- README.md | 2 +- test/Inventory.test.js | 45 ++++++++++++++++++++++++++++-------------- 3 files changed, 33 insertions(+), 17 deletions(-) diff --git a/.eslintrc b/.eslintrc index cc19db4..6b09763 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,6 +8,7 @@ "react/jsx-no-bind": "off", "react/jsx-filename-extension": "off", "react/forbid-prop-types": "off", - "react/no-array-index-key": "off" + "react/no-array-index-key": "off", + "react/jsx-indent": "off" } } diff --git a/README.md b/README.md index a8a5303..7a96642 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ While this definition and others can bring clarity to the elements that make up ## What is This Project? This project attempts to analyze 3 "ilities" of software architecture (readability, reusability, and refactorability), and show how we can form better and better code by thinking through these concepts hierarchically. -The code we will be looking at is a simple shopping cart application written in JavaScript, which makes use of two major libraries in the ecosystem: React and Redux. JavaScript and the aforementioned tools are by no means the only way to structure any particular application. They happen to be used by a lot of newcomers to the industry, and by many seasoned veterans, and this frequency of usage makes them a wonderful common language by which to discuss code quality. I hope you find this project helpful in thinking about code, and I hope it brings us just a little closer to defining software architecture. +The code we will be looking at is a simple shopping cart application written in JavaScript, which makes use of two major libraries in the ecosystem: React and Redux. JavaScript and the aforementioned tools are by no means the only way to structure any particular application. They happen to be used by a lot of newcomers to the industry, and by many seasoned veterans, and this frequency of usage makes them a wonderful common language by which to discuss code quality. This isn't the only way to look at software, and it certainly can't give you an architecture, but it's something that can hopefully guide your thinking, as it has guided mine. Without further ado, let's get started! diff --git a/test/Inventory.test.js b/test/Inventory.test.js index 1c742e1..78b0770 100644 --- a/test/Inventory.test.js +++ b/test/Inventory.test.js @@ -12,20 +12,6 @@ const props = { price: 100, currency: 'usd', }, - 2: { - product: 'Tin can', - img: '/tin_can.jpg', - desc: 'Pretty much what you would expect from a tin can', - price: 32, - currency: 'usd', - }, - 3: { - product: 'Cardboard Box', - img: '/cardboard_box.png', - desc: 'It holds things', - price: 5, - currency: 'usd', - }, }, addToCart: jest.fn(), changeCurrency: jest.fn(), @@ -34,6 +20,35 @@ const props = { }, }; -it('should render Inventory', () => { +it('should render Inventory without crashing', () => { + const inventoryComponent = shallow(); + expect(inventoryComponent); +}); + +it('should show all inventory data in table', () => { + props.currencyConverter.convert = function () { + return `$${props.inventory[1].price}`; + }; + + const inventoryComponent = shallow(); + let tr = inventoryComponent.find('tr'); + expect(tr.length).toEqual(2); + + let td = inventoryComponent.find('td'); + let product = td.at(0); + let image = td.at(1); + let desc = td.at(2); + let price = td.at(3); + + expect(product.text()).toEqual('Flashlight'); + expect(image.html()).toEqual(''); + expect(desc.text()).toEqual('A really great flashlight'); + expect(price.text()).toEqual('$100'); +}); + +it('should have Add to Cart button work', () => { const inventoryComponent = shallow(); + let addToCartBtn = inventoryComponent.find('button').first(); + addToCartBtn.simulate('click'); + expect(props.addToCart).toBeCalled(); });