Skip to content

Commit

Permalink
[NOJIRA][BpkLoadingButton|BpkCloseButton]: fix loading console errors (…
Browse files Browse the repository at this point in the history 
…#3430)

* fix loading button console error

* fix close button prop type
  • Loading branch information
@mungodewar
mungodewar authored May 10, 2024
1 parent 1d8d14e commit 5803c9a
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 9 deletions.
8 changes: 8 additions & 0 deletions packages/bpk-component-close-button/src/BpkCloseButton-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,18 @@ import CustomCloseIcon from '../../bpk-component-icon/sm/close-circle';

import BpkCloseButton from './BpkCloseButton';

const error = jest.spyOn(console, "error").mockImplementation(() => {});

describe('BpkCloseButton', () => {
beforeEach(() => {
error.mockReset();
})
it('should render correctly', () => {
const { asFragment } = render(
<BpkCloseButton label="Close" onClick={() => null} />,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a custom icon', () => {
Expand All @@ -41,6 +47,7 @@ describe('BpkCloseButton', () => {
/>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a custom className', () => {
Expand All @@ -52,5 +59,6 @@ describe('BpkCloseButton', () => {
/>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});
});
2 changes: 1 addition & 1 deletion packages/bpk-component-close-button/src/BpkCloseButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ BpkCloseButton.propTypes = {
onClick: PropTypes.func.isRequired,
className: PropTypes.string,
customIcon: PropTypes.func,
onDark: PropTypes.Boolean,
onDark: PropTypes.bool,
};

BpkCloseButton.defaultProps = {
Expand Down
37 changes: 37 additions & 0 deletions packages/bpk-component-loading-button/src/BpkLoadingButton-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,75 +25,90 @@ import BaggageIcon from '../../bpk-component-icon/sm/baggage';

import BpkLoadingButton, { ICON_POSITION } from './BpkLoadingButton';

const error = jest.spyOn(console, "error").mockImplementation(() => {});

describe('BpkLoadingButton', () => {
beforeEach(() => {
error.mockReset();
})
it('should render correctly', () => {
const { asFragment } = render(
<BpkLoadingButton>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

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

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

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

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

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

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

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

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

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

it('should render correctly with a "iconPosition=leading" attribute', () => {
Expand All @@ -103,6 +118,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "iconOnly" attribute', () => {
Expand All @@ -112,27 +128,31 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

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

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

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

it('should render correctly with "large" and "secondary" attributes', () => {
Expand All @@ -142,6 +162,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "secondaryOnDark" attributes', () => {
Expand All @@ -151,6 +172,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "primaryOnDark" attributes', () => {
Expand All @@ -160,6 +182,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "primaryOnLight" attributes', () => {
Expand All @@ -169,6 +192,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "destructive" attributes', () => {
Expand All @@ -178,6 +202,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "link" attributes', () => {
Expand All @@ -187,6 +212,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "linkOnDark" attributes', () => {
Expand All @@ -196,6 +222,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "featured" attributes', () => {
Expand All @@ -205,6 +232,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "iconOnly" attributes', () => {
Expand All @@ -214,6 +242,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "disabled" attributes', () => {
Expand All @@ -223,6 +252,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with "large" and "loading" attributes', () => {
Expand All @@ -232,6 +262,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "icon" attribute', () => {
Expand All @@ -241,6 +272,7 @@ describe('BpkLoadingButton', () => {
<BpkLoadingButton icon={icon}>My button</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "iconDisabled" attribute', () => {
Expand All @@ -252,6 +284,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should render correctly with a "iconLoading" attribute', () => {
Expand All @@ -263,6 +296,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should respect the class names entered as a string', () => {
Expand All @@ -276,6 +310,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

it('should add only bpk specific classes if className prop is set to empty string', () => {
Expand All @@ -285,5 +320,7 @@ describe('BpkLoadingButton', () => {
</BpkLoadingButton>,
);
expect(asFragment()).toMatchSnapshot();
expect(error).not.toHaveBeenCalled();
});

});
24 changes: 16 additions & 8 deletions packages/bpk-component-loading-button/src/BpkLoadingButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,22 @@ type LoadingProps = {
const BpkLoadingButton = (props: LoadingProps) => {
const {
children,
destructive,
disabled,
featured,
icon,
iconDisabled,
iconLoading,
iconOnly,
iconPosition,
large,
link,
linkOnDark,
loading,
primaryOnDark,
primaryOnLight,
secondary,
secondaryOnDark,
...rest
} = props;

Expand All @@ -117,14 +125,14 @@ const BpkLoadingButton = (props: LoadingProps) => {

type ButtonType = typeof BUTTON_TYPES[keyof typeof BUTTON_TYPES]
let type: ButtonType = BUTTON_TYPES.primary;
if(props.link) {type = BUTTON_TYPES.link}
if(props.linkOnDark) {type = BUTTON_TYPES.linkOnDark}
if(props.featured) {type = BUTTON_TYPES.featured}
if(props.destructive) {type = BUTTON_TYPES.destructive}
if(props.secondaryOnDark) {type = BUTTON_TYPES.secondaryOnDark}
if(props.secondary) {type = BUTTON_TYPES.secondary}
if(props.primaryOnLight) {type = BUTTON_TYPES.primaryOnLight}
if(props.primaryOnDark) {type = BUTTON_TYPES.primaryOnDark}
if(link) {type = BUTTON_TYPES.link}
if(linkOnDark) {type = BUTTON_TYPES.linkOnDark}
if(featured) {type = BUTTON_TYPES.featured}
if(destructive) {type = BUTTON_TYPES.destructive}
if(secondaryOnDark) {type = BUTTON_TYPES.secondaryOnDark}
if(secondary) {type = BUTTON_TYPES.secondary}
if(primaryOnLight) {type = BUTTON_TYPES.primaryOnLight}
if(primaryOnDark) {type = BUTTON_TYPES.primaryOnDark}

return (
<BpkButtonV2
Expand Down

0 comments on commit 5803c9a

Please sign in to comment.