From 6eaab78bb37512b379afc28d2756580ade3c6059 Mon Sep 17 00:00:00 2001 From: Alexander Wolf Date: Wed, 27 Mar 2019 00:57:18 +0100 Subject: [PATCH] Test DependencyManagementPane component (#363) * moved related components to DependencyManagementPane * added tests * fixed flow * added a constant instead of Date.now() * updated snapshot * removed white-spaces * removed verbose * fixed linting & mocked AlgoliaLogo * move related component files & moved tests to __tests__ folder * Add script for test:dev --- package.json | 1 + .../AddDependencyInitialScreen/index.js | 2 - src/components/AddDependencyModal/index.js | 2 - .../AddDependencySearchBox/index.js | 2 - .../AddDependencySearchProvider/index.js | 2 - .../AddDependencySearchResult/index.js | 2 - .../DeleteDependencyButton/index.js | 2 - src/components/DependencyDetails/index.js | 2 - .../DependencyDetailsTable/index.js | 2 - src/components/DependencyInfoFromNpm/index.js | 3 - src/components/DependencyInstalling/index.js | 2 - .../AddDependencyInitialScreen.js | 4 +- .../AddDependencyModal.js | 8 +- .../AddDependencySearchBox.js | 0 .../AddDependencySearchProvider.js | 0 .../AddDependencySearchResult.js | 18 +- .../AlgoliaLogo.js | 0 .../DeleteDependencyButton.js | 0 .../DependencyDetails.js | 12 +- .../DependencyDetailsTable.js | 2 +- .../DependencyInfoFromNpm.js | 0 .../DependencyInstalling.js | 0 .../DependencyManagementPane.js | 32 ++- .../DependencyUpdateRow.js | 0 .../__mocks__/dependency.js | 8 + .../AddDependencyInitialScreen.test.js | 24 ++ .../__tests__/AddDependencyModal.test.js | 26 ++ .../__tests__/AddDependencySearchBox.test.js | 12 + .../AddDependencySearchProvider.test.js | 16 ++ .../AddDependencySearchResult.test.js | 105 +++++++ .../__tests__/DependencyDetails.test.js | 26 ++ .../__tests__/DependencyInstalling.test.js | 23 ++ .../DependencyManagementPane.test.js | 141 ++++++++++ .../AddDependencyInitialScreen.test.js.snap | 116 ++++++++ .../AddDependencySearchBox.test.js.snap | 10 + .../AddDependencySearchProvider.test.js.snap | 33 +++ .../AddDependencySearchResult.test.js.snap | 256 ++++++++++++++++++ .../DependencyDetails.test.js.snap | 52 ++++ .../DependencyInstalling.test.js.snap | 56 ++++ .../DependencyManagementPane.test.js.snap | 95 +++++++ src/components/DependencyUpdateRow/index.js | 2 - 41 files changed, 1043 insertions(+), 56 deletions(-) delete mode 100644 src/components/AddDependencyInitialScreen/index.js delete mode 100644 src/components/AddDependencyModal/index.js delete mode 100644 src/components/AddDependencySearchBox/index.js delete mode 100644 src/components/AddDependencySearchProvider/index.js delete mode 100644 src/components/AddDependencySearchResult/index.js delete mode 100644 src/components/DeleteDependencyButton/index.js delete mode 100644 src/components/DependencyDetails/index.js delete mode 100644 src/components/DependencyDetailsTable/index.js delete mode 100644 src/components/DependencyInfoFromNpm/index.js delete mode 100644 src/components/DependencyInstalling/index.js rename src/components/{AddDependencyInitialScreen => DependencyManagementPane}/AddDependencyInitialScreen.js (94%) rename src/components/{AddDependencyModal => DependencyManagementPane}/AddDependencyModal.js (85%) rename src/components/{AddDependencySearchBox => DependencyManagementPane}/AddDependencySearchBox.js (100%) rename src/components/{AddDependencySearchProvider => DependencyManagementPane}/AddDependencySearchProvider.js (100%) rename src/components/{AddDependencySearchResult => DependencyManagementPane}/AddDependencySearchResult.js (94%) rename src/components/{AddDependencyInitialScreen => DependencyManagementPane}/AlgoliaLogo.js (100%) rename src/components/{DeleteDependencyButton => DependencyManagementPane}/DeleteDependencyButton.js (100%) rename src/components/{DependencyDetails => DependencyManagementPane}/DependencyDetails.js (85%) rename src/components/{DependencyDetailsTable => DependencyManagementPane}/DependencyDetailsTable.js (98%) rename src/components/{DependencyInfoFromNpm => DependencyManagementPane}/DependencyInfoFromNpm.js (100%) rename src/components/{DependencyInstalling => DependencyManagementPane}/DependencyInstalling.js (100%) rename src/components/{DependencyUpdateRow => DependencyManagementPane}/DependencyUpdateRow.js (100%) create mode 100644 src/components/DependencyManagementPane/__mocks__/dependency.js create mode 100644 src/components/DependencyManagementPane/__tests__/AddDependencyInitialScreen.test.js create mode 100644 src/components/DependencyManagementPane/__tests__/AddDependencyModal.test.js create mode 100644 src/components/DependencyManagementPane/__tests__/AddDependencySearchBox.test.js create mode 100644 src/components/DependencyManagementPane/__tests__/AddDependencySearchProvider.test.js create mode 100644 src/components/DependencyManagementPane/__tests__/AddDependencySearchResult.test.js create mode 100644 src/components/DependencyManagementPane/__tests__/DependencyDetails.test.js create mode 100644 src/components/DependencyManagementPane/__tests__/DependencyInstalling.test.js create mode 100644 src/components/DependencyManagementPane/__tests__/DependencyManagementPane.test.js create mode 100644 src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencyInitialScreen.test.js.snap create mode 100644 src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchBox.test.js.snap create mode 100644 src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchProvider.test.js.snap create mode 100644 src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchResult.test.js.snap create mode 100644 src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyDetails.test.js.snap create mode 100644 src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyInstalling.test.js.snap create mode 100644 src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyManagementPane.test.js.snap delete mode 100644 src/components/DependencyUpdateRow/index.js diff --git a/package.json b/package.json index 13467049..e8e93609 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "publish": "yarn dist --publish always", "publish:all": "yarn dist:all --publish always", "test": "node scripts/test.js --maxWorkers=2 --env=node", + "test:dev": "yarn test --verbose=false", "coverage": "yarn test --coverage", "report-coverage": "yarn coverage && codecov", "flow": "flow", diff --git a/src/components/AddDependencyInitialScreen/index.js b/src/components/AddDependencyInitialScreen/index.js deleted file mode 100644 index ad7d2b61..00000000 --- a/src/components/AddDependencyInitialScreen/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './AddDependencyInitialScreen'; diff --git a/src/components/AddDependencyModal/index.js b/src/components/AddDependencyModal/index.js deleted file mode 100644 index 874d390f..00000000 --- a/src/components/AddDependencyModal/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './AddDependencyModal'; diff --git a/src/components/AddDependencySearchBox/index.js b/src/components/AddDependencySearchBox/index.js deleted file mode 100644 index 24466571..00000000 --- a/src/components/AddDependencySearchBox/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './AddDependencySearchBox'; diff --git a/src/components/AddDependencySearchProvider/index.js b/src/components/AddDependencySearchProvider/index.js deleted file mode 100644 index baf02481..00000000 --- a/src/components/AddDependencySearchProvider/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './AddDependencySearchProvider'; diff --git a/src/components/AddDependencySearchResult/index.js b/src/components/AddDependencySearchResult/index.js deleted file mode 100644 index ff105e4b..00000000 --- a/src/components/AddDependencySearchResult/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './AddDependencySearchResult'; diff --git a/src/components/DeleteDependencyButton/index.js b/src/components/DeleteDependencyButton/index.js deleted file mode 100644 index 4026d335..00000000 --- a/src/components/DeleteDependencyButton/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './DeleteDependencyButton'; diff --git a/src/components/DependencyDetails/index.js b/src/components/DependencyDetails/index.js deleted file mode 100644 index bdbc4d0e..00000000 --- a/src/components/DependencyDetails/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './DependencyDetails'; diff --git a/src/components/DependencyDetailsTable/index.js b/src/components/DependencyDetailsTable/index.js deleted file mode 100644 index 1f826ae1..00000000 --- a/src/components/DependencyDetailsTable/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './DependencyDetailsTable'; diff --git a/src/components/DependencyInfoFromNpm/index.js b/src/components/DependencyInfoFromNpm/index.js deleted file mode 100644 index 25a41bfb..00000000 --- a/src/components/DependencyInfoFromNpm/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// @flow -export { default } from './DependencyInfoFromNpm'; -export type { NpmResult } from './DependencyInfoFromNpm'; diff --git a/src/components/DependencyInstalling/index.js b/src/components/DependencyInstalling/index.js deleted file mode 100644 index 7b4298b5..00000000 --- a/src/components/DependencyInstalling/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './DependencyInstalling'; diff --git a/src/components/AddDependencyInitialScreen/AddDependencyInitialScreen.js b/src/components/DependencyManagementPane/AddDependencyInitialScreen.js similarity index 94% rename from src/components/AddDependencyInitialScreen/AddDependencyInitialScreen.js rename to src/components/DependencyManagementPane/AddDependencyInitialScreen.js index 8aebec0d..5ccd1c60 100644 --- a/src/components/AddDependencyInitialScreen/AddDependencyInitialScreen.js +++ b/src/components/DependencyManagementPane/AddDependencyInitialScreen.js @@ -33,7 +33,7 @@ class AddDependencyInitialScreen extends Component { } } -const InstructionsParagraph = Paragraph.extend` +export const InstructionsParagraph = Paragraph.extend` font-size: 1.4rem; color: ${COLORS.gray[600]}; `; @@ -48,7 +48,7 @@ const EmptyState = styled.div` text-align: center; `; -const PoweredByWrapper = styled.div` +export const PoweredByWrapper = styled.div` position: absolute; left: 0; right: 0; diff --git a/src/components/AddDependencyModal/AddDependencyModal.js b/src/components/DependencyManagementPane/AddDependencyModal.js similarity index 85% rename from src/components/AddDependencyModal/AddDependencyModal.js rename to src/components/DependencyManagementPane/AddDependencyModal.js index d068f52d..2eb9dcdc 100644 --- a/src/components/AddDependencyModal/AddDependencyModal.js +++ b/src/components/DependencyManagementPane/AddDependencyModal.js @@ -8,9 +8,9 @@ import Modal from '../Modal'; import ModalHeader from '../ModalHeader'; import Spacer from '../Spacer'; import FadeOnChange from '../FadeOnChange'; -import AddDependencySearchBox from '../AddDependencySearchBox'; -import AddDependencySearchResult from '../AddDependencySearchResult'; -import AddDependencyInitialScreen from '../AddDependencyInitialScreen'; +import AddDependencySearchBox from './AddDependencySearchBox'; +import AddDependencySearchResult from './AddDependencySearchResult'; +import AddDependencyInitialScreen from './AddDependencyInitialScreen'; type Props = { isVisible: boolean, @@ -21,7 +21,7 @@ type Props = { }, }; -class AddDependencyModal extends Component { +export class AddDependencyModal extends Component { render() { const { isVisible, onDismiss, searchResults } = this.props; diff --git a/src/components/AddDependencySearchBox/AddDependencySearchBox.js b/src/components/DependencyManagementPane/AddDependencySearchBox.js similarity index 100% rename from src/components/AddDependencySearchBox/AddDependencySearchBox.js rename to src/components/DependencyManagementPane/AddDependencySearchBox.js diff --git a/src/components/AddDependencySearchProvider/AddDependencySearchProvider.js b/src/components/DependencyManagementPane/AddDependencySearchProvider.js similarity index 100% rename from src/components/AddDependencySearchProvider/AddDependencySearchProvider.js rename to src/components/DependencyManagementPane/AddDependencySearchProvider.js diff --git a/src/components/AddDependencySearchResult/AddDependencySearchResult.js b/src/components/DependencyManagementPane/AddDependencySearchResult.js similarity index 94% rename from src/components/AddDependencySearchResult/AddDependencySearchResult.js rename to src/components/DependencyManagementPane/AddDependencySearchResult.js index a1489700..2c2efbf0 100644 --- a/src/components/AddDependencySearchResult/AddDependencySearchResult.js +++ b/src/components/DependencyManagementPane/AddDependencySearchResult.js @@ -63,7 +63,13 @@ type Props = { }, }; -const StatsItem = ({ icon, children }) => ( +export const StatsItem = ({ + icon, + children, +}: { + icon: React$Node, + children: React$Node, +}) => ( @@ -71,7 +77,7 @@ const StatsItem = ({ icon, children }) => ( ); -const getColorForDownloadNumber = (num: number) => { +export const getColorForDownloadNumber = (num: number) => { if (num < 5000) { return COLORS.pink[700]; } else if (num < 50000) { @@ -81,7 +87,7 @@ const getColorForDownloadNumber = (num: number) => { } }; -class AddDependencySearchResult extends PureComponent { +export class AddDependencySearchResult extends PureComponent { renderActionArea() { const { hit, projectId, currentStatus, addDependency } = this.props; const isAlreadyInstalled = currentStatus === 'idle'; @@ -173,7 +179,7 @@ const Wrapper = styled.div` padding-top: 25px; `; -const Header = styled.header` +export const Header = styled.header` display: flex; justify-content: space-between; align-items: flex-start; @@ -195,7 +201,7 @@ const Version = styled.span` font-size: 20px; `; -const StatsRow = styled.div` +export const StatsRow = styled.div` display: flex; align-items: center; font-size: 14px; @@ -207,7 +213,7 @@ const StatsItemElem = styled.span` align-items: center; `; -const Description = styled.div` +export const Description = styled.div` font-size: 18px; margin-right: 120px; `; diff --git a/src/components/AddDependencyInitialScreen/AlgoliaLogo.js b/src/components/DependencyManagementPane/AlgoliaLogo.js similarity index 100% rename from src/components/AddDependencyInitialScreen/AlgoliaLogo.js rename to src/components/DependencyManagementPane/AlgoliaLogo.js diff --git a/src/components/DeleteDependencyButton/DeleteDependencyButton.js b/src/components/DependencyManagementPane/DeleteDependencyButton.js similarity index 100% rename from src/components/DeleteDependencyButton/DeleteDependencyButton.js rename to src/components/DependencyManagementPane/DeleteDependencyButton.js diff --git a/src/components/DependencyDetails/DependencyDetails.js b/src/components/DependencyManagementPane/DependencyDetails.js similarity index 85% rename from src/components/DependencyDetails/DependencyDetails.js rename to src/components/DependencyManagementPane/DependencyDetails.js index 9950acf3..99ee3b47 100644 --- a/src/components/DependencyDetails/DependencyDetails.js +++ b/src/components/DependencyManagementPane/DependencyDetails.js @@ -6,12 +6,12 @@ import { COLORS } from '../../constants'; import Heading from '../Heading'; import PixelShifter from '../PixelShifter'; -import DependencyDetailsTable from '../DependencyDetailsTable'; -import DependencyInfoFromNpm from '../DependencyInfoFromNpm'; -import DependencyUpdateRow from '../DependencyUpdateRow'; +import DependencyDetailsTable from './DependencyDetailsTable'; +import DependencyInfoFromNpm from './DependencyInfoFromNpm'; +import DependencyUpdateRow from './DependencyUpdateRow'; import type { Dependency } from '../../types'; -import type { NpmResult } from '../DependencyInfoFromNpm'; +import type { NpmResult } from './DependencyInfoFromNpm'; type Props = { projectId: string, @@ -33,8 +33,8 @@ class DependencyDetails extends PureComponent { reason="Optical symmetry between top and left edge of parent" > - {dependency.name} - {dependency.description} + {dependency.name} + {dependency.description} diff --git a/src/components/DependencyDetailsTable/DependencyDetailsTable.js b/src/components/DependencyManagementPane/DependencyDetailsTable.js similarity index 98% rename from src/components/DependencyDetailsTable/DependencyDetailsTable.js rename to src/components/DependencyManagementPane/DependencyDetailsTable.js index 69ce3750..d976adf0 100644 --- a/src/components/DependencyDetailsTable/DependencyDetailsTable.js +++ b/src/components/DependencyManagementPane/DependencyDetailsTable.js @@ -8,7 +8,7 @@ import { COLORS, GUPPY_REPO_URL } from '../../constants'; import ExternalLink from '../ExternalLink'; import Label from '../Label'; import Middot from '../Middot'; -import DeleteDependencyButton from '../DeleteDependencyButton'; +import DeleteDependencyButton from './DeleteDependencyButton'; import Spinner from '../Spinner'; import License from '../License'; import HelpButton from '../HelpButton'; diff --git a/src/components/DependencyInfoFromNpm/DependencyInfoFromNpm.js b/src/components/DependencyManagementPane/DependencyInfoFromNpm.js similarity index 100% rename from src/components/DependencyInfoFromNpm/DependencyInfoFromNpm.js rename to src/components/DependencyManagementPane/DependencyInfoFromNpm.js diff --git a/src/components/DependencyInstalling/DependencyInstalling.js b/src/components/DependencyManagementPane/DependencyInstalling.js similarity index 100% rename from src/components/DependencyInstalling/DependencyInstalling.js rename to src/components/DependencyManagementPane/DependencyInstalling.js diff --git a/src/components/DependencyManagementPane/DependencyManagementPane.js b/src/components/DependencyManagementPane/DependencyManagementPane.js index f8de7e4a..e373edbb 100644 --- a/src/components/DependencyManagementPane/DependencyManagementPane.js +++ b/src/components/DependencyManagementPane/DependencyManagementPane.js @@ -10,17 +10,17 @@ import { getOnlineState } from '../../reducers/app-status.reducer'; import { COLORS, GUPPY_REPO_URL } from '../../constants'; import Module from '../Module'; -import AddDependencyModal from '../AddDependencyModal'; -import AddDependencySearchProvider from '../AddDependencySearchProvider'; -import DependencyDetails from '../DependencyDetails'; -import DependencyInstalling from '../DependencyInstalling/DependencyInstalling'; +import AddDependencyModal from './AddDependencyModal'; +import AddDependencySearchProvider from './AddDependencySearchProvider'; +import DependencyDetails from './DependencyDetails'; +import DependencyInstalling from './DependencyInstalling'; import Card from '../Card'; import Spacer from '../Spacer'; import Spinner from '../Spinner'; import OnlyOn from '../OnlyOn'; import MountAfter from '../MountAfter'; -import type { Project } from '../../types'; +import type { Dependency, Project } from '../../types'; type Props = { project: Project, @@ -32,7 +32,7 @@ type State = { addingNewDependency: boolean, }; -class DependencyManagementPane extends PureComponent { +export class DependencyManagementPane extends PureComponent { state = { selectedDependencyIndex: 0, addingNewDependency: false, @@ -111,7 +111,7 @@ class DependencyManagementPane extends PureComponent { }); }; - renderListAddon = (dependency, isSelected) => { + renderListAddon = (dependency: Dependency, isSelected: boolean) => { if ( dependency.status === 'installing' || dependency.status.match(/^queued-/) @@ -128,7 +128,11 @@ class DependencyManagementPane extends PureComponent { ); }; - renderMainContents = (selectedDependency, projectId, isOnline) => { + renderMainContents = ( + selectedDependency: Dependency, + projectId: string, + isOnline: boolean + ) => { if ( selectedDependency.status === 'installing' || selectedDependency.status === 'queued-install' @@ -169,7 +173,7 @@ class DependencyManagementPane extends PureComponent { isSelected={selectedDependencyIndex === index} onClick={() => this.selectDependency(dependency.name)} > - {dependency.name} + {dependency.name} {this.renderListAddon( dependency, selectedDependencyIndex === index @@ -232,13 +236,13 @@ const Wrapper = styled.div` max-height: 475px; `; -const DependencyList = Card.extend` +export const DependencyList = Card.extend` flex: 6; display: flex; flex-direction: column; `; -const Dependencies = styled.div` +export const Dependencies = styled.div` overflow: auto; /* flex-shrink is needed to ensure that the list doesn't clobber the @@ -247,7 +251,7 @@ const Dependencies = styled.div` flex-shrink: 8; `; -const DependencyButton = styled.button` +export const DependencyButton = styled.button` display: flex; justify-content: space-between; align-items: center; @@ -293,7 +297,7 @@ const DependencyButton = styled.button` } `; -const AddDependencyButton = styled.button` +export const AddDependencyButton = styled.button` width: 100%; height: 42px; padding: 8px 10px; @@ -335,7 +339,7 @@ const DependencyVersion = styled.span` : COLORS.transparentBlack[400]}}; `; -const MainContent = Card.extend` +export const MainContent = Card.extend` flex: 12; margin-left: 15px; padding: 0; diff --git a/src/components/DependencyUpdateRow/DependencyUpdateRow.js b/src/components/DependencyManagementPane/DependencyUpdateRow.js similarity index 100% rename from src/components/DependencyUpdateRow/DependencyUpdateRow.js rename to src/components/DependencyManagementPane/DependencyUpdateRow.js diff --git a/src/components/DependencyManagementPane/__mocks__/dependency.js b/src/components/DependencyManagementPane/__mocks__/dependency.js new file mode 100644 index 00000000..713a6a45 --- /dev/null +++ b/src/components/DependencyManagementPane/__mocks__/dependency.js @@ -0,0 +1,8 @@ +// @flow +export const mockReactHit = { + name: 'React', + version: '16.0.0', + license: 'MIT', + modified: 1549828927372, + humanDownloadsLast30Days: 1000000, +}; diff --git a/src/components/DependencyManagementPane/__tests__/AddDependencyInitialScreen.test.js b/src/components/DependencyManagementPane/__tests__/AddDependencyInitialScreen.test.js new file mode 100644 index 00000000..09975b0e --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/AddDependencyInitialScreen.test.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import AddDependencyInitialScreen, { + InstructionsParagraph, + PoweredByWrapper, +} from '../AddDependencyInitialScreen'; + +jest.mock('../AlgoliaLogo', () => 'svg'); + +describe('AddDependencyInitialScreen component', () => { + let wrapper; + beforeEach(() => { + wrapper = mount(); + }); + + it('should render instruction paragraphs', () => { + expect(wrapper.find(InstructionsParagraph)).toMatchSnapshot(); + }); + + it('should render powered by Algolia link', () => { + expect(wrapper.find(PoweredByWrapper)).toMatchSnapshot(); + }); +}); diff --git a/src/components/DependencyManagementPane/__tests__/AddDependencyModal.test.js b/src/components/DependencyManagementPane/__tests__/AddDependencyModal.test.js new file mode 100644 index 00000000..49b5974f --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/AddDependencyModal.test.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { InfiniteHits } from 'react-instantsearch/dom'; + +import { AddDependencyModal } from '../AddDependencyModal'; +import AddDependencyInitialScreen from '../AddDependencyInitialScreen'; + +describe('AddDependencyModal component', () => { + let wrapper; + beforeEach(() => { + wrapper = shallow(); + }); + + it('should render initial screen', () => { + expect(wrapper.find(AddDependencyInitialScreen)).toHaveLength(1); + }); + + it('should render hits', () => { + wrapper.setProps({ + searchResults: { + query: 'React', + }, + }); + expect(wrapper.find(InfiniteHits)).toHaveLength(1); + }); +}); diff --git a/src/components/DependencyManagementPane/__tests__/AddDependencySearchBox.test.js b/src/components/DependencyManagementPane/__tests__/AddDependencySearchBox.test.js new file mode 100644 index 00000000..37cd095b --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/AddDependencySearchBox.test.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import AddDependencySearchBox from '../AddDependencySearchBox'; + +describe('AddDependencySearchBox component', () => { + const wrapper = shallow(); + + it('should render SearchBox', () => { + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/components/DependencyManagementPane/__tests__/AddDependencySearchProvider.test.js b/src/components/DependencyManagementPane/__tests__/AddDependencySearchProvider.test.js new file mode 100644 index 00000000..f7a93a35 --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/AddDependencySearchProvider.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import AddDependencySearchProvider from '../AddDependencySearchProvider'; + +describe('AddDependencySearchProvider component', () => { + const wrapper = shallow( + +
+ + ); + + it('should render SearchBox', () => { + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/components/DependencyManagementPane/__tests__/AddDependencySearchResult.test.js b/src/components/DependencyManagementPane/__tests__/AddDependencySearchResult.test.js new file mode 100644 index 00000000..ff72f73b --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/AddDependencySearchResult.test.js @@ -0,0 +1,105 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import Icon from 'react-icons-kit'; +import { u1F4C8 as barGraphIcon } from 'react-icons-kit/noto_emoji_regular/u1F4C8'; +import lolex from 'lolex'; + +import { + StatsItem, + getColorForDownloadNumber, + AddDependencySearchResult, + Header, + Description, + StatsRow, +} from '../AddDependencySearchResult'; +import Divider from '../../Divider'; +import Spacer from '../../Spacer'; +import { StrokeButton } from '../../Button'; +import { mockReactHit } from '../__mocks__/dependency'; + +describe('AddDependencySearchResult component', () => { + lolex.install(); + let wrapper; + const projectId = 'a-project'; + const mockAddDependency = jest.fn(); + + beforeEach(() => { + wrapper = shallow( + + ); + }); + + it('should render a StatsItem', () => { + const StatsItemWrapper = shallow( + }> + 10 downloads a month + + ); + expect(StatsItemWrapper).toMatchSnapshot(); + }); + + // Todo: If we ever refactor the color method it would be good to create a limits constant. + // So we can use it here e.g. like limit[0] - 1 + // Also exporting the color per limit would be good, + // so it's clear what color we expect for each limit + // Cases to test: + // number < 5000 + // number between 5000 & 50000 + // above 50000 + const limits = [4999, 49999, 50000]; + limits.forEach(limit => { + it(`should create a colored download number ${limit}`, () => { + expect(getColorForDownloadNumber(limit)).toMatchSnapshot(); + }); + }); + + it('should add dependency on click', () => { + const button = wrapper.find(Header).find(StrokeButton); + button.simulate('click'); + expect(mockAddDependency).toHaveBeenCalledWith( + projectId, + mockReactHit.name, + mockReactHit.version + ); + }); + + describe('Rendering', () => { + it('should render a header (default)', () => { + expect(wrapper.find(Header)).toMatchSnapshot(); + }); + + it('should render a header (currentStatus idle)', () => { + wrapper.setProps({ + currentStatus: 'idle', + }); + expect(wrapper.find(Header)).toMatchSnapshot(); + }); + + it('should render a header (currentStatus installing)', () => { + wrapper.setProps({ + currentStatus: 'installing', + }); + expect(wrapper.find(Header)).toMatchSnapshot(); + }); + + it('should render a Description', () => { + expect(wrapper.find(Description)).toMatchSnapshot(); + }); + + it('should render a StatsRow', () => { + expect(wrapper.find(StatsRow)).toMatchSnapshot(); + }); + + it('should contain three spacers', () => { + expect(wrapper.find(Spacer)).toHaveLength(3); + }); + + it('should contain one divider', () => { + expect(wrapper.find(Divider)).toHaveLength(1); + }); + }); +}); diff --git a/src/components/DependencyManagementPane/__tests__/DependencyDetails.test.js b/src/components/DependencyManagementPane/__tests__/DependencyDetails.test.js new file mode 100644 index 00000000..a9918c2e --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/DependencyDetails.test.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import lolex from 'lolex'; + +import DependencyDetails from '../DependencyDetails'; +import { mockReactHit } from '../__mocks__/dependency'; + +describe('DependencyDetails component', () => { + lolex.install(); + + const projectId = 'a-project'; + const wrapper = shallow( + + ); + + it('should render', () => { + expect( + wrapper.renderProp('children')({ + name: mockReactHit.name, + latestVersion: '16.8.0', + lastUpdatedAt: Date.now(), + isLoading: false, + }) + ).toMatchSnapshot(); + }); +}); diff --git a/src/components/DependencyManagementPane/__tests__/DependencyInstalling.test.js b/src/components/DependencyManagementPane/__tests__/DependencyInstalling.test.js new file mode 100644 index 00000000..62501748 --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/DependencyInstalling.test.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import DependencyInstalling from '../DependencyInstalling'; +import { mockReactHit } from '../__mocks__/dependency'; + +describe('DependencyInstalling component', () => { + const wrapper = shallow(); + + it('should render (queued)', () => { + wrapper.setProps({ + queued: true, + }); + expect(wrapper).toMatchSnapshot(); + }); + + it('should render (installing)', () => { + wrapper.setProps({ + queued: false, + }); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/components/DependencyManagementPane/__tests__/DependencyManagementPane.test.js b/src/components/DependencyManagementPane/__tests__/DependencyManagementPane.test.js new file mode 100644 index 00000000..cdf4cfa5 --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/DependencyManagementPane.test.js @@ -0,0 +1,141 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; + +import { + DependencyManagementPane, + DependencyButton, + Dependencies, + MainContent, + AddDependencyButton, +} from '../DependencyManagementPane'; +import AddDependencyModal from '../AddDependencyModal'; + +describe('DependencyManagement component', () => { + let wrapper; + let instance; + + const project = { + id: 'projectId', + dependencies: [ + { + name: 'React', + status: 'idle', + location: 'dependencies', + version: '16.0.0', + }, + { + name: 'Redux', + status: 'idle', + location: 'devDependencies', + version: '4.0.0', + }, + ], + }; + + beforeEach(() => { + wrapper = shallow(); + instance = wrapper.instance(); + }); + + describe('Rendering', () => { + it('should render a dependency list with two buttons', () => { + expect(wrapper.find(Dependencies)).toMatchSnapshot(); + }); + + it('should render main content for selected dependency (default)', () => { + expect(wrapper.find(MainContent)).toMatchSnapshot(); + }); + + it('should render main content for selected dependency (installing)', () => { + wrapper.setProps({ + project: { + ...project, + dependencies: [ + { + ...project.dependencies[0], + status: 'installing', + }, + project.dependencies[1], + ], + }, + }); + + expect(wrapper.find(MainContent)).toMatchSnapshot(); + }); + + it('should render list addon for React dependency (not selected)', () => { + expect( + mount(instance.renderListAddon(project.dependencies[0], false)) + ).toMatchSnapshot(); + }); + + it('should render list addon for React dependency (selected)', () => { + expect( + mount(instance.renderListAddon(project.dependencies[0], true)) + ).toMatchSnapshot(); + }); + }); + + describe('Component logic', () => { + it('should select dependency on click', () => { + // We're selecting the last dep. so we're having an index larger than 0 + const button = wrapper.find(DependencyButton).last(); + button.simulate('click'); + expect(instance.state.selectedDependencyIndex).toBe( + project.dependencies.length - 1 + ); + }); + + it('should select the newly added dependency', () => { + const updatedProject = { + project: { + ...project, + dependencies: [ + ...project.dependencies, + { + name: 'Loadash', + status: 'idle', + location: 'dependencies', + }, + ], + }, + }; + wrapper.setProps(updatedProject); + + expect(instance.state.selectedDependencyIndex).toBe( + updatedProject.project.dependencies.length - 1 + ); + }); + + it('should change selection if selectedIndex out of range', () => { + wrapper.setState({ + selectedDependencyIndex: 1, + }); + wrapper.setProps({ + project: { + ...project, + dependencies: [project.dependencies[0]], + }, + }); + + expect(instance.state.selectedDependencyIndex).toBe(0); + }); + + it('should open addingNewDependency modal', () => { + const button = wrapper.find(AddDependencyButton); + button.simulate('click'); + + expect(instance.state.addingNewDependency).toBeTruthy(); + }); + + it('should hide addingNewDependency modal on dismiss', () => { + wrapper.setState({ + addingNewDependency: true, + }); + const modal = wrapper.find(AddDependencyModal); + + modal.prop('onDismiss')(); + expect(instance.state.addingNewDependency).toBeFalsy(); + }); + }); +}); diff --git a/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencyInitialScreen.test.js.snap b/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencyInitialScreen.test.js.snap new file mode 100644 index 00000000..6ea68a90 --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencyInitialScreen.test.js.snap @@ -0,0 +1,116 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AddDependencyInitialScreen component should render instruction paragraphs 1`] = ` +Array [ + .c0 { + font-size: 1.25rem; + margin-bottom: 1.5rem; + font-size: 1.4rem; + color: #666666; +} + + +
+ You can use the input above to search the Node Package Manager (NPM) registry for packages that have been published. +
+ , + .c0 { + font-size: 1.25rem; + margin-bottom: 1.5rem; + font-size: 1.4rem; + color: #666666; +} + + +
+ Search by package name, description, keyword, or author. +
+ , +] +`; + +exports[`AddDependencyInitialScreen component should render powered by Algolia link 1`] = ` +.c1 { + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + color: #304FFE; +} + +.c1:hover { + color: #3f6cff; +} + +.c0 { + position: absolute; + left: 0; + right: 0; + bottom: 25px; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + color: #666666; +} + + +
+ + + + +
+ +
+ + + + +
+ +`; diff --git a/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchBox.test.js.snap b/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchBox.test.js.snap new file mode 100644 index 00000000..b7bca45e --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchBox.test.js.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AddDependencySearchBox component should render SearchBox 1`] = ` + + + +`; diff --git a/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchProvider.test.js.snap b/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchProvider.test.js.snap new file mode 100644 index 00000000..b26668ee --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchProvider.test.js.snap @@ -0,0 +1,33 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AddDependencySearchProvider component should render SearchBox 1`] = ` + + +
+ +`; diff --git a/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchResult.test.js.snap b/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchResult.test.js.snap new file mode 100644 index 00000000..fbf83308 --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/__snapshots__/AddDependencySearchResult.test.js.snap @@ -0,0 +1,256 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AddDependencySearchResult component Rendering should render a Description 1`] = ` + + + +`; + +exports[`AddDependencySearchResult component Rendering should render a StatsRow 1`] = ` + + + + 1000000 + + + downloads a month + + + + + + Published + in 49 years + + +`; + +exports[`AddDependencySearchResult component Rendering should render a header (currentStatus idle) 1`] = ` + + + + + React + + + + + v + 16.0.0 + + + + + + Installed + + +`; + +exports[`AddDependencySearchResult component Rendering should render a header (currentStatus installing) 1`] = ` + + + + + React + + + + + v + 16.0.0 + + + + + + Installing… + + +`; + +exports[`AddDependencySearchResult component Rendering should render a header (default) 1`] = ` + + + + + React + + + + + v + 16.0.0 + + + + Add To Project + + +`; + +exports[`AddDependencySearchResult component should create a colored download number 4999 1`] = `"#cc004a"`; + +exports[`AddDependencySearchResult component should create a colored download number 49999 1`] = `"#FF9100"`; + +exports[`AddDependencySearchResult component should create a colored download number 50000 1`] = `"#00C853"`; + +exports[`AddDependencySearchResult component should render a StatsItem 1`] = ` + + + } + size={24} + /> + + 10 downloads a month + +`; diff --git a/src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyDetails.test.js.snap b/src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyDetails.test.js.snap new file mode 100644 index 00000000..cfb78a41 --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyDetails.test.js.snap @@ -0,0 +1,52 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DependencyDetails component should render 1`] = ` + + + + + + React + + + + + + + + + + + + +`; diff --git a/src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyInstalling.test.js.snap b/src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyInstalling.test.js.snap new file mode 100644 index 00000000..0914dd8f --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyInstalling.test.js.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DependencyInstalling component should render (installing) 1`] = ` + + + + + + Installing + + React + + ... + + + +`; + +exports[`DependencyInstalling component should render (queued) 1`] = ` + + + + + + + React + + is queued for install... + + + +`; diff --git a/src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyManagementPane.test.js.snap b/src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyManagementPane.test.js.snap new file mode 100644 index 00000000..2142f56b --- /dev/null +++ b/src/components/DependencyManagementPane/__tests__/__snapshots__/DependencyManagementPane.test.js.snap @@ -0,0 +1,95 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DependencyManagement component Rendering should render a dependency list with two buttons 1`] = ` + + + + React + + + 16.0.0 + + + + + Redux + + + 4.0.0 + + + +`; + +exports[`DependencyManagement component Rendering should render list addon for React dependency (not selected) 1`] = ` +.c0 { + padding-left: 10px; + font-size: 16px; + color: rgba(0,0,0,0.66); +} + + + + 16.0.0 + + +`; + +exports[`DependencyManagement component Rendering should render list addon for React dependency (selected) 1`] = ` +.c0 { + padding-left: 10px; + font-size: 16px; + color: rgba(255,255,255,0.66); +} + + + + 16.0.0 + + +`; + +exports[`DependencyManagement component Rendering should render main content for selected dependency (default) 1`] = ` + + + +`; + +exports[`DependencyManagement component Rendering should render main content for selected dependency (installing) 1`] = ` + + + +`; diff --git a/src/components/DependencyUpdateRow/index.js b/src/components/DependencyUpdateRow/index.js deleted file mode 100644 index f8659600..00000000 --- a/src/components/DependencyUpdateRow/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './DependencyUpdateRow';