Unverified Commit 02f44cdc authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel Committed by GitHub

Update popular species button behaviour (#371)

Clicking on a popular species button for a committed species will open the species homepage instead of removing the species.
parent 81766bcd
Pipeline #104182 passed with stages
in 7 minutes and 30 seconds
......@@ -17,6 +17,9 @@
import React from 'react';
import { mount, render } from 'enzyme';
import set from 'lodash/fp/set';
import { push } from 'connected-react-router';
import * as urlFor from 'src/shared/helpers/urlHelper';
import { PopularSpeciesButton } from './PopularSpeciesButton';
......@@ -25,10 +28,12 @@ import { createPopularSpecies } from 'tests/fixtures/popular-species';
import styles from './PopularSpeciesButton.scss';
jest.mock('src/shared/components/inline-svg/InlineSvg', () => () => <div />);
jest.mock('connected-react-router', () => ({
push: jest.fn(() => ({ type: 'push' }))
}));
const handleSelectedSpecies = jest.fn();
const clearSelectedSpecies = jest.fn();
const deleteCommittedSpecies = jest.fn();
const commonProps = {
species: createPopularSpecies(),
......@@ -36,7 +41,7 @@ const commonProps = {
isCommitted: false,
handleSelectedSpecies,
clearSelectedSpecies,
deleteCommittedSpecies
push
};
describe('<PopularSpeciesButton />', () => {
......@@ -104,7 +109,7 @@ describe('<PopularSpeciesButton />', () => {
expect(clearSelectedSpecies).toHaveBeenCalled();
expect(handleSelectedSpecies).not.toHaveBeenCalled();
expect(deleteCommittedSpecies).not.toHaveBeenCalled();
expect(push).not.toHaveBeenCalled();
});
});
......@@ -118,13 +123,19 @@ describe('<PopularSpeciesButton />', () => {
);
});
it('deletes committed species when clicked', () => {
it('opens species page when it is clicked', () => {
const wrapper = mount(
<PopularSpeciesButton {...commonProps} isCommitted={true} />
).find('.popularSpeciesButton');
wrapper.simulate('click');
expect(deleteCommittedSpecies).toHaveBeenCalled();
expect(push).toHaveBeenCalledWith(
urlFor.speciesPage({
genomeId: commonProps.species.genome_id
})
);
expect(clearSelectedSpecies).not.toHaveBeenCalled();
expect(handleSelectedSpecies).not.toHaveBeenCalled();
});
......
......@@ -18,34 +18,33 @@ import React from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import find from 'lodash/find';
import { push } from 'connected-react-router';
import analyticsTracking from 'src/services/analytics-service';
import useHover from 'src/shared/hooks/useHover';
import * as urlFor from 'src/shared/helpers/urlHelper';
import {
handleSelectedSpecies,
clearSelectedSearchResult,
deleteSpeciesAndSave
clearSelectedSearchResult
} from 'src/content/app/species-selector/state/speciesSelectorActions';
import {
getCurrentSpeciesGenomeId,
getCommittedSpecies
} from 'src/content/app/species-selector/state/speciesSelectorSelectors';
import { getSpeciesAnalyticsName } from 'src/content/app/species-selector/speciesSelectorHelper';
import Tooltip from 'src/shared/components/tooltip/Tooltip';
import InlineSVG from 'src/shared/components/inline-svg/InlineSvg';
import { RootState } from 'src/store';
import {
CommittedItem,
PopularSpecies
} from 'src/content/app/species-selector/types/species-search';
import analyticsTracking from 'src/services/analytics-service';
import { getSpeciesAnalyticsName } from 'src/content/app/species-selector/speciesSelectorHelper';
import styles from './PopularSpeciesButton.scss';
import { RootState } from 'src/store';
type OwnProps = {
species: PopularSpecies;
};
......@@ -56,7 +55,7 @@ type Props = {
isCommitted: boolean;
handleSelectedSpecies: (species: PopularSpecies) => void;
clearSelectedSpecies: () => void;
deleteCommittedSpecies: (genome_id: string) => void;
push: (url: string) => void;
};
// named export is for testing purposes
......@@ -83,7 +82,11 @@ export const PopularSpeciesButton = (props: Props) => {
label: speciesName
});
} else if (isCommitted) {
props.deleteCommittedSpecies(genome_id);
props.push(
urlFor.speciesPage({
genomeId: species.genome_id
})
);
} else {
// the species is available, not selected and not committed;
// go ahead and select it
......@@ -133,7 +136,7 @@ const mapStateToProps = (state: RootState, ownProps: OwnProps) => ({
const mapDispatchToProps = {
handleSelectedSpecies,
clearSelectedSpecies: clearSelectedSearchResult,
deleteCommittedSpecies: deleteSpeciesAndSave
push
};
export default connect(
......
......@@ -17,17 +17,16 @@
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchPopularSpecies } from 'src/content/app/species-selector/state/speciesSelectorActions';
import { getPopularSpecies } from 'src/content/app/species-selector/state/speciesSelectorSelectors';
import PopularSpeciesButton from 'src/content/app/species-selector/components/popular-species-button/PopularSpeciesButton';
import styles from './PopularSpeciesPanel.scss';
import { fetchPopularSpecies } from 'src/content/app/species-selector/state/speciesSelectorActions';
import { getPopularSpecies } from 'src/content/app/species-selector/state/speciesSelectorSelectors';
import { RootState } from 'src/store';
import { PopularSpecies } from 'src/content/app/species-selector/types/species-search';
import styles from './PopularSpeciesPanel.scss';
type Props = {
fetchPopularSpecies: () => void;
popularSpecies: PopularSpecies[];
......
......@@ -31,6 +31,16 @@ type EntityViewerUrlParams = {
view?: string | null;
};
type SpeciesPageUrlParams = {
genomeId: string;
};
export const speciesPage = (params: SpeciesPageUrlParams) => {
const speciesPageRootPath = '/species';
return `${speciesPageRootPath}/${params.genomeId}`;
};
export const browser = (params?: BrowserUrlParams) => {
const browserRootPath = '/genome-browser';
if (params) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment