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

@@ -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",

src/components/AddDependencyInitialScreen/AddDependencyInitialScreen.js → src/components/DependencyManagementPane/AddDependencyInitialScreen.js

@@ -33,7 +33,7 @@ class AddDependencyInitialScreen extends Component<Props> {
   }
 }
 
-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;

src/components/AddDependencyModal/AddDependencyModal.js → 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<Props> {
+export class AddDependencyModal extends Component<Props> {
   render() {
     const { isVisible, onDismiss, searchResults } = this.props;
 

src/components/AddDependencySearchResult/AddDependencySearchResult.js → src/components/DependencyManagementPane/AddDependencySearchResult.js

@@ -63,15 +63,21 @@ type Props = {
   },
 };
 
-const StatsItem = ({ icon, children }) => (
+export const StatsItem = ({
+  icon,
+  children,
+}: {
+  icon: React$Node,
+  children: React$Node,
+}) => (
   <StatsItemElem>
     <IconBase icon={icon} size={24} />
     <Spacer size={6} />
     {children}
   </StatsItemElem>
 );
 
-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<Props> {
+export class AddDependencySearchResult extends PureComponent<Props> {
   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;
 `;

src/components/DependencyDetails/DependencyDetails.js → 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<Props> {
                 reason="Optical symmetry between top and left edge of parent"
               >
                 <HeaderText>
-                  <Name size="small"> {dependency.name} </Name>
-                  <Description> {dependency.description} </Description>
+                  <Name size="small">{dependency.name}</Name>
+                  <Description>{dependency.description}</Description>
                 </HeaderText>
               </PixelShifter>
             </Header>

src/components/DependencyDetailsTable/DependencyDetailsTable.js → 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';

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<Props, State> {
+export class DependencyManagementPane extends PureComponent<Props, State> {
   state = {
     selectedDependencyIndex: 0,
     addingNewDependency: false,
@@ -111,7 +111,7 @@ class DependencyManagementPane extends PureComponent<Props, State> {
     });
   };
 
-  renderListAddon = (dependency, isSelected) => {
+  renderListAddon = (dependency: Dependency, isSelected: boolean) => {
     if (
       dependency.status === 'installing' ||
       dependency.status.match(/^queued-/)
@@ -128,7 +128,11 @@ class DependencyManagementPane extends PureComponent<Props, State> {
     );
   };
 
-  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<Props, State> {
                   isSelected={selectedDependencyIndex === index}
                   onClick={() => this.selectDependency(dependency.name)}
                 >
-                  <DependencyName> {dependency.name} </DependencyName>
+                  <DependencyName>{dependency.name}</DependencyName>
                   {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;

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,
+};

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(<AddDependencyInitialScreen />);
+  });
+
+  it('should render instruction paragraphs', () => {
+    expect(wrapper.find(InstructionsParagraph)).toMatchSnapshot();
+  });
+
+  it('should render powered by Algolia link', () => {
+    expect(wrapper.find(PoweredByWrapper)).toMatchSnapshot();
+  });
+});

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(<AddDependencyModal isVisible={true} />);
+  });
+
+  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);
+  });
+});

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(<AddDependencySearchBox />);
+
+  it('should render SearchBox', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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(
+    <AddDependencySearchProvider>
+      <div />
+    </AddDependencySearchProvider>
+  );
+
+  it('should render SearchBox', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});