Skip to content
This repository has been archived by the owner on Jun 17, 2021. It is now read-only.

Test DependencyManagementPane component #363

Merged
merged 11 commits into from
Mar 26, 2019
8 changes: 8 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,12 @@ module.exports = {
'flowtype/generic-spacing': 0,
'jest/no-large-snapshots': ['warn', { maxSize: 100 }],
},
overrides: [
{
files: ['*.test.js', '*.spec.js'],
rules: {
'flowtype/require-valid-file-annotation': 0,
},
},
],
};
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 0 additions & 2 deletions src/components/AddDependencyInitialScreen/index.js

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/AddDependencyModal/index.js

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/AddDependencySearchBox/index.js

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/AddDependencySearchProvider/index.js

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/AddDependencySearchResult/index.js

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/DeleteDependencyButton/index.js

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/DependencyDetails/index.js

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/DependencyDetailsTable/index.js

This file was deleted.

3 changes: 0 additions & 3 deletions src/components/DependencyInfoFromNpm/index.js

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/DependencyInstalling/index.js

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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]};
`;
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -21,7 +21,7 @@ type Props = {
},
};

class AddDependencyModal extends Component<Props> {
export class AddDependencyModal extends Component<Props> {
render() {
const { isVisible, onDismiss, searchResults } = this.props;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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';
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
`;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
32 changes: 18 additions & 14 deletions src/components/DependencyManagementPane/DependencyManagementPane.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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-/)
Expand All @@ -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'
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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;
Expand Down Expand Up @@ -293,7 +297,7 @@ const DependencyButton = styled.button`
}
`;

const AddDependencyButton = styled.button`
export const AddDependencyButton = styled.button`
width: 100%;
height: 42px;
padding: 8px 10px;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// @flow
export const mockReactHit = {
name: 'React',
version: '16.0.0',
license: 'MIT',
modified: 1549828927372,
humanDownloadsLast30Days: 1000000,
};
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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);
});
});
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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();
});
});
Loading