-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[v15] refactor(app-shell): use react-apollo v3 (#801)
* chore: update to react@16.9 (#966) * chore: update to react@16.9 * fix: update lifecyle methods * chore: temporary resolution for react * chore(deps): update dependency @testing-library/react to v9.1.1 (#956) * chore(deps): update dependency @testing-library/react to v8.0.9 * chore: update testing library to 9.1.1 * fix: remove cleanup-after-each hook (automatical now) * refactor: to remove path for act * refactor(app-shell): use react-apollo v3, use more hooks * refactor(app-shell): do not render hooks conditionally * chore: update react deps consistently * refactor(authenticated): do not render hook conditionally * chore: patch jest setup to avoid logging certain warnings on CI * fix: missing prop ref * fix(navbar): missing prop * refactor(app-connectors): to useQuery for fetching image regex setting * refactor(app-shell): connectors to useQuery * test(app-shell): fix setup * chore: regenerate lockfile * chore: update react-apollo to 3.0.1 * refactor(connectors): image regex tests to RTL * fix: query mocks for project suspended * fix: pin react-test-renderer to 16.9 * fix(quick-access): update state unless component is unmounting * refactor: componentWillUnmount is not a deprecated lifecycle method * test: cleanup * refactor: renaming based on feedback
- Loading branch information
Showing
39 changed files
with
1,339 additions
and
1,246 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
199 changes: 136 additions & 63 deletions
199
...ctors/src/components/project-extension-image-regex/project-extension-image-regex.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,149 @@ | ||
| import React from 'react'; | ||
| import { shallow, ShallowWrapper } from 'enzyme'; | ||
| import { ProjectExtensionProviderForImageRegex } from './project-extension-image-regex'; | ||
| import { | ||
| render, | ||
| RenderResult, | ||
| waitForElementToBeRemoved, | ||
| } from '@testing-library/react'; | ||
| import { | ||
| MockedProvider as ApolloMockProvider, | ||
| MockedProviderProps, | ||
| } from '@apollo/react-testing'; | ||
| import { reportErrorToSentry } from '@commercetools-frontend/sentry'; | ||
| import { | ||
| ProjectExtensionProviderForImageRegex, | ||
| GetProjectExtensionImageRegex, | ||
| TImageRegex, | ||
| } from './project-extension-image-regex'; | ||
| import FetchProjectExtensionImageRegex from './fetch-project-extension-image-regex.graphql'; | ||
| import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants'; | ||
|
|
||
| jest.mock('@commercetools-frontend/sentry'); | ||
|
|
||
| type TestProps = { | ||
| imageRegex: TImageRegex; | ||
| }; | ||
| const TestComponent = (props: TestProps) => ( | ||
| <> | ||
| <div> | ||
| {props.imageRegex && | ||
| props.imageRegex.small && | ||
| props.imageRegex.small.replace} | ||
| </div> | ||
| <div> | ||
| {props.imageRegex && | ||
| props.imageRegex.thumb && | ||
| props.imageRegex.thumb.replace} | ||
| </div> | ||
| </> | ||
| ); | ||
|
|
||
| const renderComponent = (mocks: MockedProviderProps['mocks']) => | ||
| render( | ||
| <ApolloMockProvider mocks={mocks} addTypename={true}> | ||
| <ProjectExtensionProviderForImageRegex> | ||
| <div> | ||
| <GetProjectExtensionImageRegex | ||
| render={imageRegexContext => { | ||
| if (imageRegexContext.isLoading) { | ||
| return <div>{'Loading...'}</div>; | ||
| } | ||
| if (!imageRegexContext.imageRegex) { | ||
| return <div>{'Not found'}</div>; | ||
| } | ||
| return ( | ||
| <TestComponent imageRegex={imageRegexContext.imageRegex} /> | ||
| ); | ||
| }} | ||
| /> | ||
| </div> | ||
| </ProjectExtensionProviderForImageRegex> | ||
| </ApolloMockProvider> | ||
| ); | ||
|
|
||
| describe('rendering', () => { | ||
| let wrapper: ShallowWrapper; | ||
| let rendered: RenderResult; | ||
|
|
||
| describe('Provider', () => { | ||
| describe('when data is not defined yet', () => { | ||
| beforeEach(() => { | ||
| wrapper = shallow( | ||
| <ProjectExtensionProviderForImageRegex> | ||
| <div /> | ||
| </ProjectExtensionProviderForImageRegex> | ||
| ).renderProp('children')({ loading: true, data: undefined }); | ||
| }); | ||
| it('should pass value object with "isLoading" state "true" to Provider', () => { | ||
| expect(wrapper).toHaveProp( | ||
| 'value', | ||
| expect.objectContaining({ isLoading: true }) | ||
| ); | ||
| }); | ||
| it('should pass value object with "imageRegex" undefined to Provider', () => { | ||
| expect(wrapper).toHaveProp( | ||
| 'value', | ||
| expect.objectContaining({ imageRegex: undefined }) | ||
| ); | ||
| }); | ||
| }); | ||
| describe('when data is defined', () => { | ||
| beforeEach(() => { | ||
| wrapper = shallow( | ||
| <ProjectExtensionProviderForImageRegex> | ||
| <div /> | ||
| </ProjectExtensionProviderForImageRegex> | ||
| ).renderProp('children')({ | ||
| loading: false, | ||
| data: { | ||
| projectExtension: { | ||
| imageRegex: { | ||
| thumb: { | ||
| flag: 'gi', | ||
| replace: '-thumb.jpg', | ||
| search: '.[^.]+$', | ||
| describe('when image regex is defined', () => { | ||
| beforeEach(() => { | ||
| rendered = renderComponent([ | ||
| { | ||
| request: { | ||
| query: FetchProjectExtensionImageRegex, | ||
| variables: { | ||
| target: GRAPHQL_TARGETS.SETTINGS_SERVICE, | ||
| }, | ||
| }, | ||
| result: { | ||
| data: { | ||
| projectExtension: { | ||
| __typename: 'ProjectExtension', | ||
| id: 'p1', | ||
| imageRegex: { | ||
| __typename: 'ImageRegex', | ||
| thumb: { | ||
| __typename: 'ImageRegexOptions', | ||
| flag: 'gi', | ||
| replace: '-thumb.jpg', | ||
| search: '.[^.]+$', | ||
| }, | ||
| small: null, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }); | ||
| }); | ||
| it('should pass value object with "isLoading" state "false" to Provider', () => { | ||
| expect(wrapper).toHaveProp( | ||
| 'value', | ||
| expect.objectContaining({ isLoading: false }) | ||
| ); | ||
| }); | ||
| it('should pass value object with "imageRegex" to Provider', () => { | ||
| expect(wrapper).toHaveProp( | ||
| 'value', | ||
| expect.objectContaining({ | ||
| imageRegex: { | ||
| thumb: { | ||
| flag: 'gi', | ||
| replace: '-thumb.jpg', | ||
| search: '.[^.]+$', | ||
| }, | ||
| ]); | ||
| }); | ||
| it('should render regex info', async () => { | ||
| await waitForElementToBeRemoved(() => rendered.getByText('Loading...')); | ||
| expect(rendered.queryByText('-thumb.jpg')).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
| describe('when image regex is not defined', () => { | ||
| beforeEach(() => { | ||
| rendered = renderComponent([ | ||
| { | ||
| request: { | ||
| query: FetchProjectExtensionImageRegex, | ||
| variables: { | ||
| target: GRAPHQL_TARGETS.SETTINGS_SERVICE, | ||
| }, | ||
| }, | ||
| result: { | ||
| data: { | ||
| projectExtension: { | ||
| __typename: 'ProjectExtension', | ||
| id: 'p1', | ||
| imageRegex: null, | ||
| }, | ||
| }, | ||
| }) | ||
| ); | ||
| }); | ||
| }, | ||
| }, | ||
| ]); | ||
| }); | ||
| it('should not render regex info', async () => { | ||
| await waitForElementToBeRemoved(() => rendered.getByText('Loading...')); | ||
| expect(rendered.queryByText('Not found')).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
| describe('when request fails', () => { | ||
| beforeEach(() => { | ||
| rendered = renderComponent([ | ||
| { | ||
| request: { | ||
| query: FetchProjectExtensionImageRegex, | ||
| variables: { | ||
| target: GRAPHQL_TARGETS.SETTINGS_SERVICE, | ||
| }, | ||
| }, | ||
| error: new Error('Oops'), | ||
| }, | ||
| ]); | ||
| }); | ||
| it('should report error to sentry', async () => { | ||
| await waitForElementToBeRemoved(() => rendered.getByText('Loading...')); | ||
| expect(rendered.queryByText('Not found')).toBeInTheDocument(); | ||
| expect(reportErrorToSentry).toHaveBeenCalled(); | ||
| }); | ||
| }); | ||
| // TODO: we can write some functional tests using mount | ||
| // as soon as the new changes of the enzyme adapter are released. | ||
| // https://github.com/airbnb/enzyme/pull/1513 | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.