BrowserLocationIndicator.test.tsx 3.96 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/**
 * See the NOTICE file distributed with this work for additional information
 * regarding copyright ownership.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

17 18
import React from 'react';
import faker from 'faker';
19
import { render } from '@testing-library/react';
20
import { Provider } from 'react-redux';
21
import userEvent from '@testing-library/user-event';
22
import configureMockStore from 'redux-mock-store';
23

Imran Salam's avatar
Imran Salam committed
24
import { getCommaSeparatedNumber } from 'src/shared/helpers/formatters/numberFormatter';
25 26

import { BrowserLocationIndicator } from './BrowserLocationIndicator';
27
import { toggleBrowserNav } from '../browserActions';
28 29 30

import { ChrLocation } from '../browserState';

31 32 33 34
jest.mock('../browserActions.ts', () => ({
  toggleBrowserNav: jest.fn(() => ({ type: 'toggle-browser-nav' }))
}));

35
const chrName = faker.lorem.word();
Andrey Azov's avatar
Andrey Azov committed
36
const startPosition = faker.datatype.number({ min: 1, max: 1000000 });
37
const endPosition =
Andrey Azov's avatar
Andrey Azov committed
38
  startPosition + faker.datatype.number({ min: 1000, max: 1000000 });
39

40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
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>
  );
60 61 62 63
};

describe('BrowserLocationIndicator', () => {
  afterEach(() => {
64
    jest.clearAllMocks();
65 66 67 68
  });

  describe('rendering', () => {
    it('displays chromosome name', () => {
69
      const { container } = wrapInRedux();
70 71
      const renderedName = container.querySelector('.chrCode');
      expect(renderedName?.textContent).toBe(chrName);
72 73 74
    });

    it('displays location', () => {
75
      const { container } = wrapInRedux();
76 77
      const renderedLocation = container.querySelector('.chrRegion');
      expect(renderedLocation?.textContent).toBe(
78 79 80 81 82 83 84
        `${getCommaSeparatedNumber(startPosition)}-${getCommaSeparatedNumber(
          endPosition
        )}`
      );
    });

    it('adds disabled class when component is disabled', () => {
85
      const { container, rerender } = wrapInRedux();
86
      const element = container.firstChild as HTMLDivElement;
87
      expect(
88 89
        element.classList.contains('browserLocationIndicatorDisabled')
      ).toBe(false);
90

91 92 93 94 95 96 97 98
      const wrappedComponent = (
        <Provider store={mockStore(mockState)}>
          <BrowserLocationIndicator disabled={true} />
        </Provider>
      );

      rerender(wrappedComponent);

99
      expect(
100
        element.classList.contains('browserLocationIndicatorDisabled')
101 102 103 104 105
      ).toBe(true);
    });
  });

  describe('behaviour', () => {
106 107
    it('calls toggleBrowserNav when clicked', () => {
      const { container } = wrapInRedux();
108 109 110
      const indicator = container.querySelector('.chrLocationView');

      userEvent.click(indicator as HTMLDivElement);
111
      expect(toggleBrowserNav).toHaveBeenCalled();
112 113
    });

114 115
    it('does not call toggleBrowserNav if disabled', () => {
      const { container, rerender } = wrapInRedux();
116 117
      const indicator = container.querySelector('.chrLocationView');

118 119 120 121 122 123 124
      const wrappedComponent = (
        <Provider store={mockStore(mockState)}>
          <BrowserLocationIndicator disabled={true} />
        </Provider>
      );

      rerender(wrappedComponent);
125
      userEvent.click(indicator as HTMLDivElement);
126
      expect(toggleBrowserNav).not.toHaveBeenCalled();
127 128 129
    });
  });
});