migrate App.jsx to mountwithContext

This commit is contained in:
John Mitchell
2019-04-18 13:10:17 -04:00
parent e1333f5e00
commit 5030eb35b6
2 changed files with 38 additions and 75 deletions

View File

@@ -1,50 +1,36 @@
import React from 'react'; import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { I18nProvider } from '@lingui/react';
import { mount } from 'enzyme'; import { mountWithContexts } from './enzymeHelpers';
import { asyncFlush } from '../jest.setup'; import { asyncFlush } from '../jest.setup';
import { ConfigProvider } from '../src/contexts/Config'; import App from '../src/App';
import { NetworkProvider } from '../src/contexts/Network';
import App, { _App } from '../src/App';
const networkProviderValue = { api: {}, handleHttpError: () => {} };
describe('<App />', () => { describe('<App />', () => {
test('expected content is rendered', () => { test('expected content is rendered', () => {
const appWrapper = mount( const appWrapper = mountWithContexts(
<MemoryRouter> <App
<I18nProvider> routeGroups={[
<NetworkProvider value={networkProviderValue}> {
<ConfigProvider> groupTitle: 'Group One',
<App groupId: 'group_one',
routeGroups={[ routes: [
{ { title: 'Foo', path: '/foo' },
groupTitle: 'Group One', { title: 'Bar', path: '/bar' },
groupId: 'group_one', ],
routes: [ },
{ title: 'Foo', path: '/foo' }, {
{ title: 'Bar', path: '/bar' }, groupTitle: 'Group Two',
], groupId: 'group_two',
}, routes: [
{ { title: 'Fiz', path: '/fiz' },
groupTitle: 'Group Two', ]
groupId: 'group_two', }
routes: [ ]}
{ title: 'Fiz', path: '/fiz' }, render={({ routeGroups }) => (
] routeGroups.map(({ groupId }) => (<div key={groupId} id={groupId} />))
} )}
]} />
render={({ routeGroups }) => (
routeGroups.map(({ groupId }) => (<div key={groupId} id={groupId} />))
)}
/>
</ConfigProvider>
</NetworkProvider>
</I18nProvider>
</MemoryRouter>
); );
// page components // page components
@@ -69,17 +55,7 @@ describe('<App />', () => {
const config = { ansible_version, version }; const config = { ansible_version, version };
const wrapper = mount( const wrapper = mountWithContexts(<App />, { context: { config } });
<MemoryRouter>
<I18nProvider>
<NetworkProvider value={networkProviderValue}>
<ConfigProvider value={config}>
<App />
</ConfigProvider>
</NetworkProvider>
</I18nProvider>
</MemoryRouter>
);
// open about modal // open about modal
const aboutDropdown = 'Dropdown QuestionCircleIcon'; const aboutDropdown = 'Dropdown QuestionCircleIcon';
@@ -106,19 +82,8 @@ describe('<App />', () => {
}); });
test('onNavToggle sets state.isNavOpen to opposite', () => { test('onNavToggle sets state.isNavOpen to opposite', () => {
const appWrapper = mount( const appWrapper = mountWithContexts(<App />).find('App');
<MemoryRouter>
<I18nProvider>
<NetworkProvider value={networkProviderValue}>
<ConfigProvider>
<App />
</ConfigProvider>
</NetworkProvider>
</I18nProvider>
</MemoryRouter>
).find('App');
const { onNavToggle } = appWrapper.instance(); const { onNavToggle } = appWrapper.instance();
[true, false, true, false, true].forEach(expected => { [true, false, true, false, true].forEach(expected => {
expect(appWrapper.state().isNavOpen).toBe(expected); expect(appWrapper.state().isNavOpen).toBe(expected);
onNavToggle(); onNavToggle();
@@ -128,17 +93,9 @@ describe('<App />', () => {
test('onLogout makes expected call to api client', async (done) => { test('onLogout makes expected call to api client', async (done) => {
const logout = jest.fn(() => Promise.resolve()); const logout = jest.fn(() => Promise.resolve());
const appWrapper = mount( const appWrapper = mountWithContexts(<App />, {
<MemoryRouter> context: { network: { api: { logout }, handleHttpError: () => {} } }
<I18nProvider> }).find('App');
<NetworkProvider value={networkProviderValue}>
<ConfigProvider>
<_App api={{ logout }} handleHttpError={() => {}} />
</ConfigProvider>
</NetworkProvider>
</I18nProvider>
</MemoryRouter>
).find('App');
appWrapper.instance().onLogout(); appWrapper.instance().onLogout();
await asyncFlush(); await asyncFlush();

View File

@@ -45,6 +45,12 @@ const defaultContexts = {
push: () => {}, push: () => {},
replace: () => {}, replace: () => {},
createHref: () => {}, createHref: () => {},
location: {
hash: '',
pathname: '',
search: '',
state: '',
}
}, },
route: { route: {
location: { location: {
@@ -58,7 +64,7 @@ const defaultContexts = {
isExact: false, isExact: false,
path: '', path: '',
url: '', url: '',
}, }
}, },
toJSON: () => '/router/', toJSON: () => '/router/',
}, },