BadgedButton.test.tsx 2.32 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';
Ridwan Amode's avatar
Ridwan Amode committed
18
import { render } from '@testing-library/react';
19
import faker from 'faker';
Ridwan Amode's avatar
Ridwan Amode committed
20
import BadgedButton, { Props as BadgedButtonProps } from './BadgedButton';
21 22 23 24 25 26 27 28
import Button from '../button/Button';

const onClick = jest.fn();

const defaultProps = {
  badgeContent: faker.lorem.words()
};

Ridwan Amode's avatar
Ridwan Amode committed
29 30 31 32 33 34
const renderButton = (props: Partial<BadgedButtonProps> = {}) =>
  render(
    <BadgedButton {...defaultProps} {...props}>
      <Button onClick={onClick}>{faker.lorem.words()}</Button>
    </BadgedButton>
  );
35 36 37 38 39 40

describe('BadgedButton', () => {
  beforeEach(() => {
    jest.resetAllMocks();
  });
  it('renders the passed in button', () => {
Ridwan Amode's avatar
Ridwan Amode committed
41 42
    const { container } = renderButton();
    expect(container.querySelectorAll('.button')).toHaveLength(1);
43 44 45
  });

  it('assigns the "badgeDefault" class to the badge by default', () => {
Ridwan Amode's avatar
Ridwan Amode committed
46 47
    const { container } = renderButton();
    expect(container.querySelectorAll('.badgeDefault')).toHaveLength(1);
48 49 50 51
  });

  it('extends the badge class', () => {
    const fakeClassName = faker.lorem.word();
Ridwan Amode's avatar
Ridwan Amode committed
52 53 54 55 56
    const { container } = renderButton({ className: fakeClassName });
    expect(
      container
        .querySelector('.badgeDefault')
        ?.classList.contains(fakeClassName)
57
    ).toBeTruthy();
58 59 60
  });

  it('trims the longer strings to three characters', () => {
Ridwan Amode's avatar
Ridwan Amode committed
61 62 63 64
    const { container } = renderButton({ badgeContent: 'abcd' });
    expect(container.querySelector('.badgeDefault')?.textContent).toEqual(
      'abc'
    );
65 66 67
  });

  it('formats number greater than 99 to "99+"', () => {
Ridwan Amode's avatar
Ridwan Amode committed
68 69 70 71
    const { container } = renderButton({ badgeContent: 100 });
    expect(container.querySelector('.badgeDefault')?.textContent).toEqual(
      '99+'
    );
72 73
  });
});