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