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(); });