BrowserBar.test.tsx 5.34 KB
Newer Older
1
import React from 'react';
Andrey Azov's avatar
Andrey Azov committed
2
import { mount } from 'enzyme';
3
import faker from 'faker';
4 5 6 7 8 9
import {
  BrowserBar,
  BrowserInfo,
  BrowserNavigatorButton,
  BrowserBarProps
} from './BrowserBar';
Andrey Azov's avatar
Andrey Azov committed
10

Andrey Azov's avatar
Andrey Azov committed
11 12
import { BreakpointWidth } from 'src/global/globalConfig';

Andrey Azov's avatar
Andrey Azov committed
13 14
import BrowserReset from 'src/content/app/browser/browser-reset/BrowserReset';
import BrowserGenomeSelector from 'src/content/app/browser/browser-genome-selector/BrowserGenomeSelector';
15
import TrackPanelTabs from '../track-panel/track-panel-tabs/TrackPanelTabs';
Andrey Azov's avatar
Andrey Azov committed
16

17
import { ChrLocation } from '../browserState';
18
import { TrackSet } from '../track-panel/trackPanelConfig';
19 20 21

import { createEnsObject } from 'tests/fixtures/ens-object';

Andrey Azov's avatar
Andrey Azov committed
22 23 24 25 26 27 28
jest.mock('src/content/app/browser/browser-reset/BrowserReset', () => () => (
  <div>BrowserReset</div>
));
jest.mock(
  'src/content/app/browser/browser-genome-selector/BrowserGenomeSelector',
  () => () => <div>BrowserGenomeSelector</div>
);
29
jest.mock('../track-panel/track-panel-tabs/TrackPanelTabs', () => () => (
Andrey Azov's avatar
Andrey Azov committed
30 31
  <div>BrowserReset</div>
));
32 33

describe('<BrowserBar />', () => {
Andrey Azov's avatar
Andrey Azov committed
34
  const dispatchBrowserLocation: any = jest.fn();
35
  const selectTrackPanelTab: any = jest.fn();
Andrey Azov's avatar
Andrey Azov committed
36 37 38
  const toggleBrowserNav: any = jest.fn();
  const toggleDrawer: any = jest.fn();
  const toggleGenomeSelector: any = jest.fn();
39

Andrey Azov's avatar
Andrey Azov committed
40
  const defaultProps = {
Andrey Azov's avatar
Andrey Azov committed
41
    activeGenomeId: faker.lorem.word(),
42
    breakpointWidth: BreakpointWidth.DESKTOP,
Andrey Azov's avatar
Andrey Azov committed
43 44
    browserActivated: true,
    browserNavOpened: false,
Andrey Azov's avatar
Andrey Azov committed
45
    chrLocation: ['13', 32275301, 32433493] as ChrLocation,
Andrey Azov's avatar
Andrey Azov committed
46
    actualChrLocation: ['13', 32275301, 32433493] as ChrLocation,
Andrey Azov's avatar
Andrey Azov committed
47
    defaultChrLocation: ['13', 32271473, 32437359] as ChrLocation,
Andrey Azov's avatar
Andrey Azov committed
48 49
    drawerOpened: false,
    genomeSelectorActive: false,
50
    ensObject: createEnsObject(),
51
    selectedTrackPanelTab: TrackSet.GENOMIC,
Andrey Azov's avatar
Andrey Azov committed
52 53 54
    trackPanelModalOpened: false,
    trackPanelOpened: false,
    dispatchBrowserLocation,
55
    selectTrackPanelTab,
Andrey Azov's avatar
Andrey Azov committed
56 57
    toggleBrowserNav,
    toggleDrawer,
58 59 60 61
    toggleGenomeSelector,
    isDrawerOpened: false,
    isTrackPanelModalOpened: false,
    isTrackPanelOpened: false,
62
    isFocusObjectInDefaultPosition: true,
63
    closeDrawer: jest.fn(),
64 65
    toggleTrackPanel: jest.fn(),
    changeFocusObject: jest.fn()
Andrey Azov's avatar
Andrey Azov committed
66 67
  };

68
  const renderBrowserBar = (props?: Partial<BrowserBarProps>) => (
Andrey Azov's avatar
Andrey Azov committed
69 70 71 72 73 74 75 76 77 78 79 80 81
    <BrowserBar {...defaultProps} {...props} />
  );

  describe('general', () => {
    let renderedBrowserBar: any;

    beforeEach(() => {
      renderedBrowserBar = mount(renderBrowserBar());
    });

    test('contains a left bar', () => {
      expect(renderedBrowserBar.find('.browserInfoLeft')).toHaveLength(1);
    });
82

Andrey Azov's avatar
Andrey Azov committed
83 84 85 86 87 88 89 90 91 92 93
    test('contains a right bar', () => {
      expect(renderedBrowserBar.find('.browserInfoRight')).toHaveLength(1);
    });

    test('contains BrowserReset button', () => {
      expect(renderedBrowserBar.find(BrowserReset)).toHaveLength(1);
    });

    test('contains BrowserGenomeSelector', () => {
      expect(renderedBrowserBar.find(BrowserGenomeSelector)).toHaveLength(1);
    });
94 95
  });

Andrey Azov's avatar
Andrey Azov committed
96
  describe('behaviour', () => {
Andrey Azov's avatar
Andrey Azov committed
97
    test('shows BrowserInfo panel by default', () => {
Andrey Azov's avatar
Andrey Azov committed
98
      const renderedBrowserBar = mount(renderBrowserBar());
99
      expect(renderedBrowserBar.find(BrowserInfo).length).toBe(1);
Andrey Azov's avatar
Andrey Azov committed
100 101
    });

Andrey Azov's avatar
Andrey Azov committed
102
    test('hides BrowserInfo panel if default location is not provided', () => {
Andrey Azov's avatar
Andrey Azov committed
103
      const renderedBrowserBar = mount(
Andrey Azov's avatar
Andrey Azov committed
104
        renderBrowserBar({ defaultChrLocation: null })
Andrey Azov's avatar
Andrey Azov committed
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
      );
      expect(renderedBrowserBar.find(BrowserInfo).length).toBe(0);
    });

    test('hides BrowserInfo panel if genome selector becomes active', async () => {
      const renderedBrowserBar = mount(renderBrowserBar());
      renderedBrowserBar.setProps({ genomeSelectorActive: true });

      // ugly hack: fall back to the end of event queue, giving priority to useEffect and useState
      await new Promise((resolve) => setTimeout(resolve, 0));

      renderedBrowserBar.update();
      expect(renderedBrowserBar.find(BrowserInfo).length).toBe(0);
    });

    test('shows BrowserNavigatorButton if genomeSelector is not active', () => {
      const renderedBrowserBar = mount(renderBrowserBar());
      expect(renderedBrowserBar.find(BrowserNavigatorButton).length).toBe(1);
    });

    test('hides BrowserNavigatorButton if genomeSelector is active', () => {
      const renderedBrowserBar = mount(
        renderBrowserBar({ genomeSelectorActive: true })
      );
      expect(renderedBrowserBar.find(BrowserNavigatorButton).length).toBe(0);
    });

132
    test('hides BrowserNavigatorButton if there is no focus object', () => {
Andrey Azov's avatar
Andrey Azov committed
133
      const renderedBrowserBar = mount(renderBrowserBar({ ensObject: null }));
134 135 136
      expect(renderedBrowserBar.find(BrowserNavigatorButton).length).toBe(0);
    });

137
    test('shows TrackPanelTabs if TrackPanel is open', () => {
Andrey Azov's avatar
Andrey Azov committed
138
      const renderedBrowserBar = mount(
Imran Salam's avatar
Imran Salam committed
139
        renderBrowserBar({ isTrackPanelOpened: true })
Andrey Azov's avatar
Andrey Azov committed
140
      );
141
      expect(renderedBrowserBar.find(TrackPanelTabs).length).toBe(1);
Andrey Azov's avatar
Andrey Azov committed
142 143
    });

144
    test('shows TrackPanelTabs on a wide display even if TrackPanel is closed', () => {
Andrey Azov's avatar
Andrey Azov committed
145
      const renderedBrowserBar = mount(renderBrowserBar());
146
      expect(renderedBrowserBar.find(TrackPanelTabs).length).toBe(1);
Andrey Azov's avatar
Andrey Azov committed
147 148
    });

149
    test('hides TrackPanelTabs on small if TrackPanel is closed', () => {
Andrey Azov's avatar
Andrey Azov committed
150
      const renderedBrowserBar = mount(
151
        renderBrowserBar({ breakpointWidth: BreakpointWidth.LAPTOP })
Andrey Azov's avatar
Andrey Azov committed
152
      );
153
      expect(renderedBrowserBar.find(TrackPanelTabs).length).toBe(0);
Andrey Azov's avatar
Andrey Azov committed
154
    });
155 156
  });
});