describe('<Color /> UI Component Test Suite', () => { it('Renders correct properties...', () => { const wrapperOutput = shallow( <Color title="Test Color" color="#F0F0F1" rating={3} />, ); expect(toJSON(wrapperOutput)).toMatchSnapshot(); }); });
describe('<Cart/>', () => { it('renders and matches snappy', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <Cart /> </MockedProvider> ); await wait(); wrapper.update(); expect(toJSON(wrapper.find('header'))).toMatchSnapshot(); expect(wrapper.find('CartItem')).toHaveLength(1); }); });
describe('', () => { let mountedComponent; let ComposedComponent; it('should return a Component', () => { ComposedComponent = withLoadingIcon(BasicComponent); React.isValidElement(ComposedComponent); }) it('should mount', () => { mountedComponent = mount( <ComposedComponent {...mockLoadedState} />, ); expect(mountedComponent).toBeTruthy(); }); it('Should match loaded snapshot', () => { expect(toJSON(mountedComponent)).toMatchSnapshot(); }); it('Should match loading snapshot', () => { mountedComponent.setProps(mockLoadingState); expect(toJSON(mountedComponent)).toMatchSnapshot(); }); });
describe('<Item/>', () => { it('renders and matches the snapshot', () => { const wrapper = shallow(<ItemComponent item={fakeItem} />); expect(toJSON(wrapper)).toMatchSnapshot(); }); it('renders the image properly', () => { const wrapper = shallow(<ItemComponent item={fakeItem} />); const img = wrapper.find('img'); expect(img.props().src).toBe(fakeItem.image); expect(img.props().alt).toBe(fakeItem.title); }); it('renders the pricetag and title', () => { const wrapper = shallow(<ItemComponent item={fakeItem} />); const PriceTag = wrapper.find('PriceTag'); expect(PriceTag.children().text()).toBe('$40'); expect(wrapper.find('Title a').text()).toBe(fakeItem.title); }); it('renders out the buttons properly', () => { const wrapper = shallow(<ItemComponent item={fakeItem} />); const buttonList = wrapper.find('.buttonList'); expect(buttonList.children()).toHaveLength(3); expect(buttonList.find('Link')).toHaveLength(1); expect(buttonList.find('AddToCart').exists()).toBe(true); expect(buttonList.find('DeleteItem').exists()).toBe(true); }); });
describe('<RequestReset/>', () => { it('renders and matches snapshot', async () => { const wrapper = mount( <MockedProvider> <RequestReset /> </MockedProvider> ); const form = wrapper.find('form[data-test="form"]'); expect(toJSON(form)).toMatchSnapshot(); }); it('calls the mutation', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <RequestReset /> </MockedProvider> ); // simulate typing an email wrapper .find('input') .simulate('change', { target: { name: 'email', value: 'wesbos@gmail.com' } }); // submit the form wrapper.find('form').simulate('submit'); await wait(); wrapper.update(); expect(wrapper.find('p').text()).toContain('Success! Check your email for a reset link!'); }); });
describe('<CartCount/>', () => { it('renders', () => { shallow(<CartCount count={10} />); }); it('matches the snapshot', () => { const wrapper = shallow(<CartCount count={11} />); expect(toJSON(wrapper)).toMatchSnapshot(); }); it('updates via props', () => { const wrapper = shallow(<CartCount count={50} />); expect(toJSON(wrapper)).toMatchSnapshot(); wrapper.setProps({ count: 10 }); expect(toJSON(wrapper)).toMatchSnapshot(); }); });
</MockedProvider> ); expect(toJSON(wrapper.find('button'))).toMatchSnapshot(); });
describe('<Order/>', () => { it('renders the order', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <Order id="ord123" /> </MockedProvider> ); await wait(); wrapper.update(); const order = wrapper.find('div[data-test="order"]'); expect(toJSON(order)).toMatchSnapshot(); }); });
describe('<Order/>', () => { it('renders the order', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <Order id="ord123" /> </MockedProvider> ); await wait(); wrapper.update(); const order = wrapper.find('div[data-test="order"]'); expect(toJSON(order)).toMatchSnapshot(); }); });
describe('<Cart/>', () => { it('renders and matches snappy', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <Cart /> </MockedProvider> ); await wait(); wrapper.update(); expect(toJSON(wrapper.find('header'))).toMatchSnapshot(); expect(wrapper.find('CartItem')).toHaveLength(1); }); });
describe('<CartCount/>', () => { it('renders', () => { shallow(<CartCount count={10} />); }); it('matches the snapshot', () => { const wrapper = shallow(<CartCount count={11} />); expect(toJSON(wrapper)).toMatchSnapshot(); }); it('updates via props', () => { const wrapper = shallow(<CartCount count={50} />); expect(toJSON(wrapper)).toMatchSnapshot(); wrapper.setProps({ count: 10 }); expect(toJSON(wrapper)).toMatchSnapshot(); }); });
describe('<Item/>', () => { it('renders and matches the snapshot', () => { const wrapper = shallow(<ItemComponent item={fakeItem} />); expect(toJSON(wrapper)).toMatchSnapshot(); }); it('renders the image properly', () => { const wrapper = shallow(<ItemComponent item={fakeItem} />); const img = wrapper.find('img'); expect(img.props().src).toBe(fakeItem.image); expect(img.props().alt).toBe(fakeItem.title); }); it('renders the pricetag and title', () => { const wrapper = shallow(<ItemComponent item={fakeItem} />); const PriceTag = wrapper.find('PriceTag'); expect(PriceTag.children().text()).toBe('$40'); expect(wrapper.find('Title a').text()).toBe(fakeItem.title); }); it('renders out the buttons properly', () => { const wrapper = shallow(<ItemComponent item={fakeItem} />); const buttonList = wrapper.find('.buttonList'); expect(buttonList.children()).toHaveLength(3); expect(buttonList.find('Link')).toHaveLength(1); expect(buttonList.find('AddToCart').exists()).toBe(true); expect(buttonList.find('DeleteItem').exists()).toBe(true); }); });
</MockedProvider> ); expect(toJSON(wrapper.find('button'))).toMatchSnapshot(); });
describe('<RequestReset/>', () => { it('renders and matches snapshot', async () => { const wrapper = mount( <MockedProvider> <RequestReset /> </MockedProvider> ); const form = wrapper.find('form[data-test="form"]'); expect(toJSON(form)).toMatchSnapshot(); }); it('calls the mutation', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <RequestReset /> </MockedProvider> ); // simulate typing an email wrapper .find('input') .simulate('change', { target: { name: 'email', value: 'cedric+emart@invictusbyte.com' } }); // submit the form wrapper.find('form').simulate('submit'); await wait(); wrapper.update(); expect(wrapper.find('p').text()).toContain('Success! Check your email for a reset link!'); }); });