TranscriptsListItemInfo.test.tsx 3.57 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
import React from 'react';
18 19
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
20
import { MemoryRouter } from 'react-router';
21

22 23 24 25
import {
  TranscriptsListItemInfo,
  TranscriptsListItemInfoProps
} from './TranscriptsListItemInfo';
26

27
import { createGene } from 'tests/fixtures/entity-viewer/gene';
28 29
import { createTranscript } from 'tests/fixtures/entity-viewer/transcript';

30
jest.mock('src/shared/components/view-in-app/ViewInApp', () => () => (
31
  <div data-test-id="viewInApp">ViewInApp</div>
32 33
));

34
jest.mock('src/shared/components/instant-download', () => ({
35 36 37 38 39
  InstantDownloadTranscript: () => (
    <div data-test-id="instantDownloadTranscript">
      InstantDownloadTranscript
    </div>
  )
40 41
}));

42 43 44
const transcript = createTranscript();
const gene = createGene({ transcripts: [transcript] });
const expandDownload = false;
45
const expandMoreInfo = false;
46 47 48 49 50

const defaultProps = {
  gene,
  transcript,
  expandDownload,
51
  expandMoreInfo,
52
  toggleTranscriptDownload: jest.fn(),
53
  toggleTranscriptMoreInfo: jest.fn(),
54
  onProteinLinkClick: jest.fn()
55 56 57
};

const renderComponent = (props?: Partial<TranscriptsListItemInfoProps>) => {
58
  return render(
59
    <MemoryRouter>
60
      <TranscriptsListItemInfo {...defaultProps} {...props} />
61 62 63 64
    </MemoryRouter>
  );
};

65
describe('<TranscriptsListItemInfo /', () => {
66 67
  it('displays amino acid length when transcript has a protein product', () => {
    const { container } = renderComponent();
68 69
    const expectedProteinLength =
      defaultProps.transcript.product_generating_contexts[0].product?.length;
Jyothish's avatar
Jyothish committed
70 71 72 73 74
    const currentProteinLength = container
      .querySelector('.topMiddle strong')
      ?.textContent?.split(/\s/)[0]
      ?.replace(/,/g, '');
    expect(currentProteinLength).toMatch(`${expectedProteinLength}`);
75 76 77
  });

  it('contains the download link', () => {
78 79
    const { container } = renderComponent();
    expect(container.querySelector('.downloadLink')).toBeTruthy();
80
  });
81 82

  it('renders ViewInApp component', () => {
83 84
    const { queryByTestId } = renderComponent();
    expect(queryByTestId('viewInApp')).toBeTruthy();
85
  });
86 87

  it('hides Download component by default', () => {
88 89
    const { queryByTestId } = renderComponent();
    expect(queryByTestId('instantDownloadTranscript')).toBeFalsy();
90 91
  });

92 93
  it('shows Download component if expandDownload is true', () => {
    const { queryByTestId } = renderComponent({
94 95
      expandDownload: true
    });
96
    expect(queryByTestId('instantDownloadTranscript')).toBeTruthy();
97
  });
98 99

  it('calls correct callback when protein link is clicked', () => {
100
    const { container } = renderComponent();
101 102
    const proteinId =
      defaultProps.transcript.product_generating_contexts[0].product.stable_id;
103 104 105
    const proteinLink = [...container.querySelectorAll('a')].find(
      (link) => link.textContent === proteinId
    ) as HTMLElement;
106

107
    userEvent.click(proteinLink);
108 109
    expect(defaultProps.onProteinLinkClick).toHaveBeenCalled();
  });
110
});