Unit tests of Pages and Components

Author: gabriel-hahn

.gitignore

@@ -59,4 +59,4 @@ buck-out/
 coverage
 
 # Snapshots
-__tests__/components/__snapshots__
+__tests__/**/__snapshots__

__tests__/components/PlaceholderLoading.spec.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactTestRender from 'react-test-renderer';
+
+import PlaceholderLoading from '~/components/PlaceholderLoading';
+
+let wrapper;
+
+beforeEach(() => {
+  wrapper = ReactTestRender.create(<PlaceholderLoading />);
+});
+
+afterEach(() => {
+  wrapper.unmount();
+});
+
+describe('PlaceholderLoading page', () => {
+  describe('Smoke tests', () => {
+    it('Should render PlaceholderLoading page correctly', () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+  });
+});

__tests__/pages/Cart.spec.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import createStore from 'redux-mock-store';
+import ReactTestRender from 'react-test-renderer';
+
+import Cart from '~/pages/Cart';
+
+const mockStore = createStore();
+
+const INITIAL_STATE = {
+  cart: {
+    items: [
+      {
+        id: 1,
+        name: 'Camiseta Hyperas Preta',
+        brand: 'Quiksilver',
+        image: 'https://t-static.dafiti.com.br/cer-243-1-product.jpg',
+        price: 49.99,
+        quantity: 2,
+      },
+    ],
+  },
+};
+
+const EMPTY_STATE = {
+  cart: {
+    items: [],
+  }
+}
+
+let wrapper;
+let wrapperEmpty;
+
+beforeEach(() => {
+  wrapper = ReactTestRender.create(
+    <Provider store={mockStore(INITIAL_STATE)}>
+      <Cart />
+    </Provider>,
+  );
+
+  wrapperEmpty = ReactTestRender.create(
+    <Provider store={mockStore(EMPTY_STATE)}>
+      <Cart />
+    </Provider>,
+  );
+});
+
+afterEach(() => {
+  wrapper.unmount();
+  wrapperEmpty.unmount();
+});
+
+describe('Cart page', () => {
+  describe('Smoke tests', () => {
+    it('Should render Cart page correctly', () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('Page structure', () => {
+    it('Should render empty cart message when items array is empty', () => {
+      expect(wrapperEmpty.root.findAllByType('Text')[0].props.children).toEqual('There are no products in the cart.');
+    });
+
+    it('Should render products when items prop is not empty - Brand', () => {
+      expect(wrapper.root.findAllByType('Text')[1].props.children).toEqual('Quiksilver');
+    });
+  });
+});

__tests__/pages/Product.spec.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import createStore from 'redux-mock-store';
+import ReactTestRender from 'react-test-renderer';
+
+const mockStore = createStore();
+
+import Product from '~/pages/Product';
+
+const navigationParam = {
+  id: 1,
+  name: 'Camiseta Hyperas Preta',
+  brand: 'Quiksilver',
+  image: 'https://t-static.dafiti.com.br/cer-243-1-product.jpg',
+  price: 49.99,
+  quantity: 2,
+};
+
+const navigation = { navigate: jest.fn(), getParam: jest.fn(() => navigationParam) };
+
+let wrapper;
+
+beforeEach(() => {
+  wrapper = ReactTestRender.create(
+    <Provider store={mockStore({})}>
+      <Product navigation={navigation} />
+    </Provider>,
+  );
+});
+
+afterEach(() => {
+  wrapper.unmount();
+});
+
+describe('Product page', () => {
+  describe('Smoke tests', () => {
+    it('Should render Product page correctly', () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('Page structure', () => {
+    it('Should render product details correctly - Image', () => {
+      expect(wrapper.root.findAllByType('Image').length).toEqual(1);
+    });
+  });
+});