Unverified Commit abb7d080 authored by Imran Salam's avatar Imran Salam Committed by GitHub
Browse files

Fix track panel opened on desktop rather than big desktop (#223)

* fix track panel opened on desktop rather than big desktop

* fix wrong desktop value in BreakpointWidth enum

* close track panel for desktop (not big desktop) and smaller
parent 9f2d8a27
Pipeline #51696 passed with stages
in 5 minutes and 22 seconds
......@@ -33,7 +33,7 @@ describe('<TrackPanel />', () => {
const defaultProps: TrackPanelProps = {
activeGenomeId: null,
browserActivated: false,
breakpointWidth: BreakpointWidth.DESKTOP,
breakpointWidth: BreakpointWidth.LAPTOP,
isDrawerOpened: false,
activeEnsObject: null,
isTrackPanelModalOpened: false,
......@@ -41,19 +41,32 @@ describe('<TrackPanel />', () => {
toggleTrackPanel: jest.fn()
};
const mountBrowserImageComponent = (props?: Partial<TrackPanelProps>) =>
const mountTrackPanel = (props?: Partial<TrackPanelProps>) =>
mount(<TrackPanel {...defaultProps} {...props} />);
describe('rendering', () => {
test('renders track panel when active genome is present', () => {
const wrapper = mountBrowserImageComponent({
const wrapper = mountTrackPanel({
activeGenomeId: faker.lorem.words()
});
expect(wrapper.html()).not.toBe(null);
});
test('shows track panel only if the screen width is desktop or larger', () => {
const wrapper = mountTrackPanel({
breakpointWidth: BreakpointWidth.DESKTOP
});
expect(wrapper.props().toggleTrackPanel).toHaveBeenCalledWith(true);
jest.resetAllMocks();
wrapper.setProps({ breakpointWidth: BreakpointWidth.LAPTOP });
wrapper.update();
expect(wrapper.props().toggleTrackPanel).toHaveBeenCalledWith(false);
});
test('renders track panel bar and track panel list when browser is activated and active feature is selected', () => {
const wrapper = mountBrowserImageComponent({
const wrapper = mountTrackPanel({
activeGenomeId: faker.lorem.words(),
browserActivated: true,
activeEnsObject: createEnsObject()
......@@ -63,7 +76,7 @@ describe('<TrackPanel />', () => {
});
test('renders track panel modal view when a track panel modal is selected', () => {
const wrapper = mountBrowserImageComponent({
const wrapper = mountTrackPanel({
activeGenomeId: faker.lorem.words(),
browserActivated: true,
activeEnsObject: createEnsObject(),
......@@ -73,7 +86,7 @@ describe('<TrackPanel />', () => {
});
test('renders drawer when it is set to open', () => {
const wrapper = mountBrowserImageComponent({
const wrapper = mountTrackPanel({
activeGenomeId: faker.lorem.words(),
browserActivated: true,
activeEnsObject: createEnsObject(),
......
......@@ -42,10 +42,10 @@ export const TrackPanel = (props: TrackPanelProps) => {
const { isDrawerOpened } = props;
useEffect(() => {
if (props.breakpointWidth <= BreakpointWidth.DESKTOP) {
props.toggleTrackPanel(false);
} else {
if (props.breakpointWidth >= BreakpointWidth.DESKTOP) {
props.toggleTrackPanel(true);
} else {
props.toggleTrackPanel(false);
}
}, [props.breakpointWidth, props.toggleTrackPanel]);
......
......@@ -5,7 +5,7 @@ export enum BreakpointWidth {
PHONE = 0,
TABLET = 600,
LAPTOP = 900,
DESKTOP = 1400,
DESKTOP = 1200,
BIG_DESKTOP = 1800
}
......
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