add header toolbar component and move About modal control to App

This commit is contained in:
Jake McDermott
2019-01-02 19:49:34 -05:00
parent 31d0347553
commit 4ccce4cc9e
10 changed files with 345 additions and 353 deletions

View File

@@ -1,8 +1,6 @@
import React from 'react';
import { mount } from 'enzyme';
import { I18nProvider } from '@lingui/react';
import api from '../../src/api';
import { API_CONFIG } from '../../src/endpoints';
import About from '../../src/components/About';
describe('<About />', () => {
@@ -19,16 +17,16 @@ describe('<About />', () => {
aboutWrapper.unmount();
});
test('close button calls onAboutModalClose', () => {
const onAboutModalClose = jest.fn();
test('close button calls onClose handler', () => {
const onClose = jest.fn();
aboutWrapper = mount(
<I18nProvider>
<About isOpen onAboutModalClose={onAboutModalClose} />
<About isOpen onClose={onClose} />
</I18nProvider>
);
closeButton = aboutWrapper.find('AboutModalBoxCloseButton Button');
closeButton.simulate('click');
expect(onAboutModalClose).toBeCalled();
expect(onClose).toBeCalled();
aboutWrapper.unmount();
});
});

View File

@@ -1,68 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import { I18nProvider } from '@lingui/react';
import HelpDropdown from '../../src/components/HelpDropdown';
let questionCircleIcon;
let dropdownWrapper;
let dropdownComponentInstance;
let dropdownToggle;
let dropdownItems;
let dropdownItem;
beforeEach(() => {
dropdownWrapper = mount(
<I18nProvider>
<HelpDropdown />
</I18nProvider>
);
dropdownComponentInstance = dropdownWrapper.find(HelpDropdown).instance();
});
afterEach(() => {
dropdownWrapper.unmount();
});
describe('<HelpDropdown />', () => {
test('initially renders without crashing', () => {
expect(dropdownWrapper.length).toBe(1);
expect(dropdownComponentInstance.state.isOpen).toEqual(false);
expect(dropdownComponentInstance.state.showAboutModal).toEqual(false);
questionCircleIcon = dropdownWrapper.find('QuestionCircleIcon');
expect(questionCircleIcon.length).toBe(1);
});
test('renders two dropdown items', () => {
dropdownComponentInstance.setState({ isOpen: true });
dropdownWrapper.update();
dropdownItems = dropdownWrapper.find('DropdownItem');
expect(dropdownItems.length).toBe(2);
const dropdownTexts = dropdownItems.map(item => item.text());
expect(dropdownTexts).toEqual(['Help', 'About']);
});
test('onToggle sets state.isOpen to opposite', () => {
dropdownComponentInstance.setState({ isOpen: true });
dropdownWrapper.update();
dropdownToggle = dropdownWrapper.find('DropdownToggle > DropdownToggle');
dropdownToggle.simulate('click');
expect(dropdownComponentInstance.state.isOpen).toEqual(false);
});
test('about dropdown item sets state.showAboutModal to true', () => {
dropdownComponentInstance.setState({ isOpen: true });
dropdownWrapper.update();
dropdownItem = dropdownWrapper.find('DropdownItem a').at(1);
dropdownItem.simulate('click');
expect(dropdownComponentInstance.state.showAboutModal).toEqual(true);
});
test('onAboutModalClose sets state.showAboutModal to false', () => {
dropdownComponentInstance.setState({ showAboutModal: true });
dropdownWrapper.update();
const aboutModal = dropdownWrapper.find('AboutModal');
aboutModal.find('AboutModalBoxCloseButton Button').simulate('click');
expect(dropdownComponentInstance.state.showAboutModal).toEqual(false);
});
});

View File

@@ -1,32 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import { I18nProvider } from '@lingui/react';
import LogoutButton from '../../src/components/LogoutButton';
let buttonWrapper;
let buttonElem;
let userIconElem;
const findChildren = () => {
buttonElem = buttonWrapper.find('Button');
userIconElem = buttonWrapper.find('UserIcon');
};
describe('<LogoutButton />', () => {
test('initially renders without crashing', () => {
const onDevLogout = jest.fn();
buttonWrapper = mount(
<I18nProvider>
<LogoutButton onDevLogout={onDevLogout} />
</I18nProvider>
);
findChildren();
expect(buttonWrapper.length).toBe(1);
expect(buttonElem.length).toBe(1);
expect(userIconElem.length).toBe(1);
buttonElem.simulate('keyDown', { keyCode: 40, which: 40 });
expect(onDevLogout).toHaveBeenCalledTimes(0);
buttonElem.simulate('keyDown', { keyCode: 13, which: 13 });
expect(onDevLogout).toHaveBeenCalledTimes(1);
});
});