import React from 'react'; import { shallow, configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import LeftNav from '../src/renderer/components/LeftNav'; import Title from '../src/renderer/components/Title'; import FileSelector from '../src/renderer/components/FileSelector'; import ServiceInfo from '../src/renderer/components/ServiceInfo'; import renderer from 'react-test-renderer'; configure({ adapter: new Adapter() }); const props = { fileOpen: jest.fn(() => {}), fileOpened: false, selectedContainer: '', service: {}, }; describe('test the functionality of LeftNav component', () => { // Test Snapshot it('renders correctly', () => { const snapProps = Object.assign({}, props, { service: { image: 'postgres', environment: [ 'POSTGRES_MULTIPLE_DATABASES=dpc_attribution,dpc_queue,dpc_auth,dpc_consent', 'POSTGRES_USER=postgres', 'POSTGRES_PASSWORD=dpc-safe', ], ports: ['5432:5432'], volumes: ['./docker/postgres:/docker-entrypoint-initdb.d'], }, selectedContainer: 'db', fileOpened: true, }); const component = renderer.create(<LeftNav {...snapProps} />).toJSON(); expect(component).toMatchSnapshot(); }); // Test Outer div it('Should render a div with the class of `left-nav`', () => { const wrapper = shallow(<LeftNav {...props} />); expect(wrapper.find('div.left-nav')).toHaveLength(1); }); // Test top-half div it('Should render a div inside of `div.left-nav` with a class of `top-half`', () => { const wrapper = shallow(<LeftNav {...props} />); expect(wrapper.find('div.left-nav').find('div.top-half')).toHaveLength(1); }); // Test Title it('Should render a Title component inside of `div.top-half`', () => { const wrapper = shallow(<LeftNav {...props} />); expect(wrapper.find('div.top-half').find(Title)).toHaveLength(1); }); // Test FileOpened it('`div.top-half` should only have one child if fileOpened is false', () => { const wrapper = shallow(<LeftNav {...props} />); expect(wrapper.find('div.top-half').children()).toHaveLength(1); }); it('`div.top-half` should have two children if fileOpened is true', () => { const wrapper = shallow(<LeftNav {...props} fileOpened={true} />); expect(wrapper.find('div.top-half').children()).toHaveLength(2); }); it('Should render a file selector if fileOpened is true', () => { const wrapper = shallow(<LeftNav {...props} fileOpened={true} />); expect(wrapper.find('div.top-half').find(FileSelector)).toHaveLength(1); }); // Test ServiceInfo it('Should render an ServiceInfo component inside of `div.left-nav`', () => { const wrapper = shallow(<LeftNav {...props} />); expect(wrapper.find('div.left-nav').find(ServiceInfo)).toHaveLength(1); }); });