Skip to content

Commit

Permalink
[NO JIRA][BpkLoadingButton]: Updating TS types and removing propTypes…
Browse files Browse the repository at this point in the history 
… ahead of React 18 (#3588)

* [NO JIRA][BpkLoadingButton]: Updating TS types and removing propTypes ahead of React 18

* Address feedback and remove more snapshots
  • Loading branch information
@olliecurtis
olliecurtis authored Aug 16, 2024
1 parent 50c94a4 commit fce5d29
Show file tree
Hide file tree
Showing 5 changed files with 293 additions and 1,378 deletions.
116 changes: 63 additions & 53 deletions ...ading-button/src/BpkLoadingButton-test.js → ...ding-button/src/BpkLoadingButton-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@
* limitations under the License.
*/

/* @flow strict */

import { render } from '@testing-library/react';
import { render, screen } from '@testing-library/react';

import { withButtonAlignment } from '../../bpk-component-icon';
import BaggageIcon from '../../bpk-component-icon/sm/baggage';
Expand All @@ -32,82 +30,83 @@ describe('BpkLoadingButton', () => {
error.mockReset();
})
it('should render correctly', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelector('button')).toBeInTheDocument();
expect(screen.getByText('My button')).toBeInTheDocument();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "href" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton href="#">My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelector('a')).toBeInTheDocument();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "primaryOnDark" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton primaryOnDark>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--primary-on-dark').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "primaryOnLight" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton primaryOnLight>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--primary-on-light').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "secondary" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton secondary>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--secondary').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "secondaryOnDark" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton secondaryOnDark>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--secondary-on-dark').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "destructive" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton destructive>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--destructive').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "link" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton link>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--link').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "linkOnDark" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton linkOnDark>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--link-on-dark').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "featured" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton featured>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--featured').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

Expand All @@ -117,17 +116,18 @@ describe('BpkLoadingButton', () => {
My button
</BpkLoadingButton>,
);

expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "iconOnly" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton iconOnly>
<span className="visually-hidden">Search</span>
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--icon-only').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

Expand All @@ -140,108 +140,117 @@ describe('BpkLoadingButton', () => {
});

it('should render correctly with a "loading" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton loading>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-loading-button__icon').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "large" attribute', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "secondary" attributes', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large secondary>
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(container.querySelectorAll('.bpk-button--secondary').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "secondaryOnDark" attributes', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large secondaryOnDark>
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(container.querySelectorAll('.bpk-button--secondary-on-dark').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "primaryOnDark" attributes', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large primaryOnDark>
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(container.querySelectorAll('.bpk-button--primary-on-dark').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "primaryOnLight" attributes', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large primaryOnLight>
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(container.querySelectorAll('.bpk-button--primary-on-light').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "destructive" attributes', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large destructive>
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(container.querySelectorAll('.bpk-button--destructive').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "link" attributes', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large link>
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(container.querySelectorAll('.bpk-button--link').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "linkOnDark" attributes', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large linkOnDark>
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(container.querySelectorAll('.bpk-button--link-on-dark').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "featured" attributes', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large featured>
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(container.querySelectorAll('.bpk-button--featured').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "iconOnly" attributes', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large iconOnly>
<span className="visually-hidden">Search</span>
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(container.querySelectorAll('.bpk-button--icon-only').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

Expand All @@ -256,12 +265,13 @@ describe('BpkLoadingButton', () => {
});

it('should render correctly with "large" and "loading" attributes', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton large loading>
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-loading-button__icon').length).toBe(1);
expect(container.querySelectorAll('.bpk-button--large').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

Expand Down Expand Up @@ -290,17 +300,17 @@ describe('BpkLoadingButton', () => {
it('should render correctly with a "iconLoading" attribute', () => {
const AlignedIcon = withButtonAlignment(BaggageIcon);
const icon = <AlignedIcon />;
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton loading iconLoading={icon}>
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.bpk-loading-button__icon').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

it('should respect the class names entered as a string', () => {
const { asFragment } = render(
const { container } = render(
<BpkLoadingButton
large
secondary
Expand All @@ -309,7 +319,7 @@ describe('BpkLoadingButton', () => {
My button
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(container.querySelectorAll('.custom-class-1').length).toBe(1);
expect(error).not.toHaveBeenCalled();
});

Expand Down
Loading

0 comments on commit fce5d29

Please sign in to comment.