-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ConnectWithProject: Remove enzyme and convert tests to RTL (#5227)
- Loading branch information
Showing
10 changed files
with
149 additions
and
173 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
98 changes: 98 additions & 0 deletions
98
packages/app-project/src/shared/components/ConnectWithProject/ConnectWithProject.mock.js
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 |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| export const ConnectWithProjectMock = { | ||
| project: { | ||
| display_name: 'Test Project', | ||
| urls: [ | ||
| { | ||
| name: 'Bitbucket', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'bitbucket.com', | ||
| url: 'https://bitbucket.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Facebook', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'facebook.com', | ||
| url: 'https://facebook.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Github', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'github.com', | ||
| url: 'https://github.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Instagram', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'instagram.com', | ||
| url: 'https://instagram.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Medium', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'medium.com', | ||
| url: 'https://medium.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Pinterest', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'pinterest.com', | ||
| url: 'https://pinterest.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Reddit', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'reddit.com', | ||
| url: 'https://reddit.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Tumblr', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'tumblr.com', | ||
| url: 'https://tumblr.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Twitter', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'twitter.com', | ||
| url: 'https://twitter.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Weibo', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'weibo.com', | ||
| url: 'https://weibo.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Wordpress', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'wordpress.com', | ||
| url: 'https://wordpress.com/test-project', | ||
| }, | ||
| { | ||
| name: 'Youtube', | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'youtube.com', | ||
| url: 'https://youtube.com/test-project', | ||
| } | ||
| ] | ||
| } | ||
| } | ||
|
|
||
| export const ConnectWithProjectEmptyMock = { | ||
| project: { | ||
| display_name: 'Test Project', | ||
| urls: [] | ||
| } | ||
| } |
57 changes: 32 additions & 25 deletions
57
packages/app-project/src/shared/components/ConnectWithProject/ConnectWithProject.spec.js
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,31 +1,38 @@ | ||
| import { shallow } from 'enzyme' | ||
|
|
||
| import ConnectWithProject from './ConnectWithProject' | ||
| import ProjectLink from './components/ProjectLink' | ||
|
|
||
| let wrapper | ||
| const PROJECT_NAME = 'project' | ||
| const URLS = [ | ||
| { | ||
| label: 'foo', | ||
| url: 'bar' | ||
| } | ||
| ] | ||
| import { render, screen, within } from '@testing-library/react' | ||
| import { composeStory } from '@storybook/react' | ||
| import Meta, { ConnectWithProject, ConnectWithProjectEmpty } from './ConnectWithProject.stories.js' | ||
| import { ConnectWithProjectMock } from './ConnectWithProject.mock' | ||
|
|
||
| describe('Component > ConnectWithProject', function () { | ||
| before(function () { | ||
| wrapper = shallow(<ConnectWithProject | ||
| projectName={PROJECT_NAME} | ||
| urls={URLS} | ||
| />) | ||
| }) | ||
|
|
||
| it('should render without crashing', function () { | ||
| expect(wrapper).to.be.ok() | ||
| describe('when the project has links', function() { | ||
| beforeEach(function () { | ||
| const ConnectWithProjectStory = composeStory(ConnectWithProject, Meta) | ||
| render(<ConnectWithProjectStory />) | ||
| }) | ||
|
|
||
| ConnectWithProjectMock.project.urls.forEach(function (urlObject) { | ||
| it(`should render the ${urlObject.name} icon`, async function () { | ||
| screen.debug() | ||
| await expect(screen.getByLabelText(urlObject.name)).to.be.ok() | ||
| }) | ||
|
|
||
| it(`should render the ${urlObject.name} link`, function () { | ||
| const el = document.getElementsByClassName(`connect-with-project-${urlObject.site}`)[0] | ||
| expect(within(el).getByRole('link')).to.have.property('href') | ||
| }) | ||
|
|
||
| it(`should render the ${urlObject.name} label`, function () { | ||
| const el = document.getElementsByClassName(`connect-with-project-${urlObject.site}`)[0] | ||
| expect(within(el).getByText(`ConnectWithProject.ProjectLink.types.${urlObject.name.toLowerCase()}`)).to.exist() | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| it('should render a `ProjectLink` for each url', function () { | ||
| const projectLinks = wrapper.find(ProjectLink) | ||
| expect(projectLinks).to.have.lengthOf(1) | ||
| describe('when the project has no links', function() { | ||
| it('should render as nothing', function () { | ||
| const ConnectWithProjectStory = composeStory(ConnectWithProjectEmpty, Meta) | ||
| render(<ConnectWithProjectStory />) | ||
| expect(screen.queryAllByRole('link').length).to.equal(0) | ||
| }) | ||
| }) | ||
| }) |
94 changes: 15 additions & 79 deletions
94
packages/app-project/src/shared/components/ConnectWithProject/ConnectWithProject.stories.js
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,84 +1,20 @@ | ||
| import { Box } from 'grommet' | ||
| import ConnectWithProject from './ConnectWithProject' | ||
|
|
||
| const mockUrls = [ | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'bitbucket.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'facebook.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'github.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'instagram.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'medium.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'pinterest.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'reddit.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'tumblr.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'twitter.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'weibo.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'wordpress.com' | ||
| }, | ||
| { | ||
| label: '', | ||
| path: 'test-project', | ||
| site: 'youtube.com' | ||
| } | ||
| ] | ||
|
|
||
| const args = { | ||
| projectName: 'Test Project', | ||
| urls: mockUrls | ||
| } | ||
| import { Provider } from 'mobx-react' | ||
| import ConnectWithProjectComponent from './index' | ||
| import { ConnectWithProjectMock, ConnectWithProjectEmptyMock } from './ConnectWithProject.mock' | ||
|
|
||
| export default { | ||
| title: 'Project App / Shared / ConnectWithProject', | ||
| component: ConnectWithProject, | ||
| args | ||
| component: ConnectWithProjectComponent, | ||
| } | ||
|
|
||
| export const Default = ({ projectName, urls }) => { | ||
| return ( | ||
| <Box pad='xsmall'> | ||
| <ConnectWithProject projectName={projectName} urls={urls} /> | ||
| </Box> | ||
| ) | ||
| } | ||
| export const ConnectWithProject = () => ( | ||
| <Provider store={ConnectWithProjectMock}> | ||
| <ConnectWithProjectComponent /> | ||
| </Provider> | ||
| ) | ||
|
|
||
| export const ConnectWithProjectEmpty = () => ( | ||
| <Provider store={ConnectWithProjectEmptyMock}> | ||
| <ConnectWithProjectComponent /> | ||
| </Provider> | ||
| ) |
40 changes: 0 additions & 40 deletions
40
.../app-project/src/shared/components/ConnectWithProject/ConnectWithProjectContainer.spec.js
This file was deleted.
Oops, something went wrong.
26 changes: 0 additions & 26 deletions
26
...oject/src/shared/components/ConnectWithProject/components/ProjectLink/ProjectLink.spec.js
This file was deleted.
Oops, something went wrong.
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
2 changes: 1 addition & 1 deletion
2
...ed/components/ConnectWithProject/components/ProjectLink/components/WeiboIcon/WeiboIcon.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
Empty file.