Unverified Commit 3853e259 authored by Jyothish's avatar Jyothish Committed by GitHub
Browse files

disable region naviation selector for production environment (#504)

parent 961c07b9
Pipeline #160058 failed with stages
in 8 minutes
...@@ -33,6 +33,7 @@ import { ChrLocation } from '../browserState'; ...@@ -33,6 +33,7 @@ import { ChrLocation } from '../browserState';
import { EnsObject } from 'src/shared/state/ens-object/ensObjectTypes'; import { EnsObject } from 'src/shared/state/ens-object/ensObjectTypes';
import styles from './BrowserBar.scss'; import styles from './BrowserBar.scss';
import { Environment, isEnvironment } from 'src/shared/helpers/environment';
export type BrowserBarProps = { export type BrowserBarProps = {
chrLocation: ChrLocation | null; chrLocation: ChrLocation | null;
...@@ -60,7 +61,11 @@ export const BrowserBar = (props: BrowserBarProps) => { ...@@ -60,7 +61,11 @@ export const BrowserBar = (props: BrowserBarProps) => {
/> />
)} )}
<div className={styles.browserLocationIndicatorWrapper}> <div className={styles.browserLocationIndicatorWrapper}>
<BrowserLocationIndicator /> <BrowserLocationIndicator
disabled={
props.isDrawerOpened || isEnvironment([Environment.PRODUCTION])
}
/>
</div> </div>
</div> </div>
); );
......
...@@ -17,39 +17,62 @@ ...@@ -17,39 +17,62 @@
import React from 'react'; import React from 'react';
import faker from 'faker'; import faker from 'faker';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import configureMockStore from 'redux-mock-store';
import { getCommaSeparatedNumber } from 'src/shared/helpers/formatters/numberFormatter'; import { getCommaSeparatedNumber } from 'src/shared/helpers/formatters/numberFormatter';
import { BrowserLocationIndicator } from './BrowserLocationIndicator'; import { BrowserLocationIndicator } from './BrowserLocationIndicator';
import { toggleBrowserNav } from '../browserActions';
import { ChrLocation } from '../browserState'; import { ChrLocation } from '../browserState';
jest.mock('../browserActions.ts', () => ({
toggleBrowserNav: jest.fn(() => ({ type: 'toggle-browser-nav' }))
}));
const chrName = faker.lorem.word(); const chrName = faker.lorem.word();
const startPosition = faker.datatype.number({ min: 1, max: 1000000 }); const startPosition = faker.datatype.number({ min: 1, max: 1000000 });
const endPosition = const endPosition =
startPosition + faker.datatype.number({ min: 1000, max: 1000000 }); startPosition + faker.datatype.number({ min: 1000, max: 1000000 });
const props = { const mockState = {
location: [chrName, startPosition, endPosition] as ChrLocation, browser: {
onClick: jest.fn(), browserLocation: {
disabled: false actualChrLocations: {
human: [chrName, startPosition, endPosition] as ChrLocation
}
},
browserEntity: {
activeGenomeId: 'human'
}
}
};
const mockStore = configureMockStore();
const wrapInRedux = (state: typeof mockState = mockState) => {
return render(
<Provider store={mockStore(state)}>
<BrowserLocationIndicator />
</Provider>
);
}; };
describe('BrowserLocationIndicator', () => { describe('BrowserLocationIndicator', () => {
afterEach(() => { afterEach(() => {
jest.resetAllMocks(); jest.clearAllMocks();
}); });
describe('rendering', () => { describe('rendering', () => {
it('displays chromosome name', () => { it('displays chromosome name', () => {
const { container } = render(<BrowserLocationIndicator {...props} />); const { container } = wrapInRedux();
const renderedName = container.querySelector('.chrCode'); const renderedName = container.querySelector('.chrCode');
expect(renderedName?.textContent).toBe(chrName); expect(renderedName?.textContent).toBe(chrName);
}); });
it('displays location', () => { it('displays location', () => {
const { container } = render(<BrowserLocationIndicator {...props} />); const { container } = wrapInRedux();
const renderedLocation = container.querySelector('.chrRegion'); const renderedLocation = container.querySelector('.chrRegion');
expect(renderedLocation?.textContent).toBe( expect(renderedLocation?.textContent).toBe(
`${getCommaSeparatedNumber(startPosition)}-${getCommaSeparatedNumber( `${getCommaSeparatedNumber(startPosition)}-${getCommaSeparatedNumber(
...@@ -59,15 +82,20 @@ describe('BrowserLocationIndicator', () => { ...@@ -59,15 +82,20 @@ describe('BrowserLocationIndicator', () => {
}); });
it('adds disabled class when component is disabled', () => { it('adds disabled class when component is disabled', () => {
const { container, rerender } = render( const { container, rerender } = wrapInRedux();
<BrowserLocationIndicator {...props} />
);
const element = container.firstChild as HTMLDivElement; const element = container.firstChild as HTMLDivElement;
expect( expect(
element.classList.contains('browserLocationIndicatorDisabled') element.classList.contains('browserLocationIndicatorDisabled')
).toBe(false); ).toBe(false);
rerender(<BrowserLocationIndicator {...props} disabled={true} />); const wrappedComponent = (
<Provider store={mockStore(mockState)}>
<BrowserLocationIndicator disabled={true} />
</Provider>
);
rerender(wrappedComponent);
expect( expect(
element.classList.contains('browserLocationIndicatorDisabled') element.classList.contains('browserLocationIndicatorDisabled')
).toBe(true); ).toBe(true);
...@@ -75,22 +103,27 @@ describe('BrowserLocationIndicator', () => { ...@@ -75,22 +103,27 @@ describe('BrowserLocationIndicator', () => {
}); });
describe('behaviour', () => { describe('behaviour', () => {
it('calls the onClick prop when clicked', () => { it('calls toggleBrowserNav when clicked', () => {
const { container } = render(<BrowserLocationIndicator {...props} />); const { container } = wrapInRedux();
const indicator = container.querySelector('.chrLocationView'); const indicator = container.querySelector('.chrLocationView');
userEvent.click(indicator as HTMLDivElement); userEvent.click(indicator as HTMLDivElement);
expect(props.onClick).toHaveBeenCalled(); expect(toggleBrowserNav).toHaveBeenCalled();
}); });
it('does not call the onClick prop if disabled', () => { it('does not call toggleBrowserNav if disabled', () => {
const { container } = render( const { container, rerender } = wrapInRedux();
<BrowserLocationIndicator {...props} disabled={true} />
);
const indicator = container.querySelector('.chrLocationView'); const indicator = container.querySelector('.chrLocationView');
const wrappedComponent = (
<Provider store={mockStore(mockState)}>
<BrowserLocationIndicator disabled={true} />
</Provider>
);
rerender(wrappedComponent);
userEvent.click(indicator as HTMLDivElement); userEvent.click(indicator as HTMLDivElement);
expect(props.onClick).not.toHaveBeenCalled(); expect(toggleBrowserNav).not.toHaveBeenCalled();
}); });
}); });
}); });
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
*/ */
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
import { getCommaSeparatedNumber } from 'src/shared/helpers/formatters/numberFormatter'; import { getCommaSeparatedNumber } from 'src/shared/helpers/formatters/numberFormatter';
...@@ -23,21 +23,18 @@ import { getCommaSeparatedNumber } from 'src/shared/helpers/formatters/numberFor ...@@ -23,21 +23,18 @@ import { getCommaSeparatedNumber } from 'src/shared/helpers/formatters/numberFor
import { toggleBrowserNav } from '../browserActions'; import { toggleBrowserNav } from '../browserActions';
import { getActualChrLocation } from '../browserSelectors'; import { getActualChrLocation } from '../browserSelectors';
import { getIsDrawerOpened } from '../drawer/drawerSelectors';
import { RootState } from 'src/store';
import { ChrLocation } from '../browserState';
import styles from './BrowserLocationIndicator.scss'; import styles from './BrowserLocationIndicator.scss';
type Props = { type Props = {
onClick: () => void; disabled?: boolean;
location: ChrLocation | null;
disabled: boolean;
}; };
export const BrowserLocationIndicator = (props: Props) => { export const BrowserLocationIndicator = (props: Props) => {
const [chrCode, chrStart, chrEnd] = props.location || []; const actualChrLocation = useSelector(getActualChrLocation);
const dispatch = useDispatch();
const [chrCode, chrStart, chrEnd] = actualChrLocation || [];
if (!chrCode || !chrStart || !chrEnd) { if (!chrCode || !chrStart || !chrEnd) {
return null; return null;
} }
...@@ -45,7 +42,9 @@ export const BrowserLocationIndicator = (props: Props) => { ...@@ -45,7 +42,9 @@ export const BrowserLocationIndicator = (props: Props) => {
const className = classNames(styles.browserLocationIndicator, { const className = classNames(styles.browserLocationIndicator, {
[styles.browserLocationIndicatorDisabled]: props.disabled [styles.browserLocationIndicatorDisabled]: props.disabled
}); });
const onClickProps = props.disabled ? {} : { onClick: props.onClick }; const onClickProps = props.disabled
? {}
: { onClick: () => dispatch(toggleBrowserNav()) };
return ( return (
<div className={className}> <div className={className}>
...@@ -62,16 +61,4 @@ export const BrowserLocationIndicator = (props: Props) => { ...@@ -62,16 +61,4 @@ export const BrowserLocationIndicator = (props: Props) => {
); );
}; };
const mapStateToProps = (state: RootState) => ({ export default BrowserLocationIndicator;
location: getActualChrLocation(state),
disabled: getIsDrawerOpened(state)
});
const mapDispatchToProps = {
onClick: toggleBrowserNav
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(BrowserLocationIndicator);
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