Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(bannerMessages): ent-4899 align hook components #926

Merged
merged 5 commits into from
Apr 28, 2022
Merged

refactor(bannerMessages): ent-4899 align hook components #926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
144b743
refactor(bannerMessages): ent-4899 align hook components
cdcabrera Apr 8, 2022
6c43227
DEV test updates
cdcabrera Apr 25, 2022
921fc35
DEV build output check
cdcabrera Apr 25, 2022
d70c65d
DEV clean up
cdcabrera Apr 25, 2022
c7db2d8
DEV clean up
cdcabrera Apr 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 5 additions & 159 deletions src/components/bannerMessages/__tests__/__snapshots__/bannerMessages.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ exports[`BannerMessages Component should handle closing messages from state: sta
},
]
}
useAppMessages={[Function]}
useRouteDetail={[Function]}
useGetAppMessages={[Function]}
>
<div
className="curiosity-banner-messages"
Expand All @@ -32,7 +31,7 @@ exports[`BannerMessages Component should handle closing messages from state: sta
<div
aria-label="Info Alert"
className="pf-c-alert pf-m-info"
data-ouia-component-id="OUIA-Generated-Alert-info-3"
data-ouia-component-id="OUIA-Generated-Alert-info-2"
data-ouia-component-type="PF4/Alert"
data-ouia-safe={true}
onMouseEnter={[Function]}
Expand Down Expand Up @@ -101,7 +100,7 @@ exports[`BannerMessages Component should handle closing messages from state: sta
aria-disabled={false}
aria-label="Close Info alert: alert: Dolor sit title"
className="pf-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-3"
data-ouia-component-id="OUIA-Generated-Button-plain-2"
data-ouia-component-type="PF4/Button"
data-ouia-safe={true}
disabled={false}
Expand Down Expand Up @@ -149,7 +148,7 @@ exports[`BannerMessages Component should handle closing messages from state: sta
</BannerMessages>
`;

exports[`BannerMessages Component should render a non-connected component: non-connected 1`] = `
exports[`BannerMessages Component should render a basic component: basic 1`] = `
<BannerMessages
messages={
Array [
Expand All @@ -160,8 +159,7 @@ exports[`BannerMessages Component should render a non-connected component: non-c
},
]
}
useAppMessages={[Function]}
useRouteDetail={[Function]}
useGetAppMessages={[Function]}
>
<div
className="curiosity-banner-messages"
Expand Down Expand Up @@ -295,155 +293,3 @@ exports[`BannerMessages Component should render a non-connected component: non-c
</div>
</BannerMessages>
`;

exports[`BannerMessages Component should render specific messages when the appMessages prop is used: specific messages, OFF, ON 1`] = `
<BannerMessages
messages={
Array [
Object {
"id": "loremIpsum",
"message": "Lorem ipsum message",
"title": "Lorem ipsum title",
},
Object {
"id": "dolorSit",
"message": "Dolor sit message",
"title": "Dolor sit title",
},
]
}
useAppMessages={[Function]}
useRouteDetail={[Function]}
>
<div
className="curiosity-banner-messages"
>
<Alert
actionClose={
<AlertActionCloseButton
onClose={[Function]}
/>
}
key="dolorSit"
title="Dolor sit title"
variant="info"
>
<div
aria-label="Info Alert"
className="pf-c-alert pf-m-info"
data-ouia-component-id="OUIA-Generated-Alert-info-2"
data-ouia-component-type="PF4/Alert"
data-ouia-safe={true}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<AlertIcon
variant="info"
>
<div
className="pf-c-alert__icon"
>
<InfoCircleIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
>
<svg
aria-hidden={true}
aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 512 512"
width="1em"
>
<path
d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
/>
</svg>
</InfoCircleIcon>
</div>
</AlertIcon>
<h4
className="pf-c-alert__title"
>
<span
className="pf-u-screen-reader"
>
Info alert:
</span>
Dolor sit title
</h4>
<div
className="pf-c-alert__action"
>
<AlertActionCloseButton
onClose={[Function]}
>
<Button
aria-label="Close Info alert: alert: Dolor sit title"
onClick={[Function]}
variant="plain"
>
<ButtonBase
aria-label="Close Info alert: alert: Dolor sit title"
innerRef={null}
onClick={[Function]}
variant="plain"
>
<button
aria-disabled={false}
aria-label="Close Info alert: alert: Dolor sit title"
className="pf-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-2"
data-ouia-component-type="PF4/Button"
data-ouia-safe={true}
disabled={false}
onClick={[Function]}
role={null}
type="button"
>
<TimesIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
>
<svg
aria-hidden={true}
aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 352 512"
width="1em"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</TimesIcon>
</button>
</ButtonBase>
</Button>
</AlertActionCloseButton>
</div>
<div
className="pf-c-alert__description"
>
Dolor sit message
</div>
</div>
</Alert>
</div>
</BannerMessages>
`;
51 changes: 51 additions & 0 deletions src/components/bannerMessages/__tests__/__snapshots__/bannerMessagesContext.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`BannerMessagesContext should apply a hook for retrieving messages data from a selectors: error response 1`] = `
Object {
"data": Object {
"cloudigradeMismatch": false,
},
"error": true,
"fulfilled": undefined,
"pending": undefined,
}
`;

exports[`BannerMessagesContext should apply a hook for retrieving messages data from a selectors: mock store error response 1`] = `
Object {
"data": Object {
"cloudigradeMismatch": false,
},
"error": true,
"fulfilled": false,
"pending": false,
}
`;

exports[`BannerMessagesContext should apply a hook for retrieving messages data from a selectors: mock store success response 1`] = `
Object {
"data": Object {
"cloudigradeMismatch": true,
},
"error": false,
"fulfilled": true,
"pending": false,
}
`;

exports[`BannerMessagesContext should apply a hook for retrieving messages data from a selectors: success response 1`] = `
Object {
"data": Object {
"cloudigradeMismatch": false,
},
"error": undefined,
"fulfilled": true,
"pending": undefined,
}
`;

exports[`BannerMessagesContext should return specific properties: specific properties 1`] = `
Object {
"useGetAppMessages": [Function],
}
`;
54 changes: 8 additions & 46 deletions src/components/bannerMessages/__tests__/bannerMessages.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { AlertActionCloseButton } from '@patternfly/react-core';
import { BannerMessages } from '../bannerMessages';

describe('BannerMessages Component', () => {
it('should render a non-connected component', async () => {
it('should render a basic component', async () => {
const props = {
messages: [
{
Expand All @@ -12,52 +12,15 @@ describe('BannerMessages Component', () => {
message: 'Lorem ipsum message'
}
],
useAppMessages: () => ({ appMessages: { loremIpsum: true } }),
useRouteDetail: () => ({})
};

const component = await mountHookComponent(<BannerMessages {...props} />);
expect(component).toMatchSnapshot('non-connected');
});

it('should attempt to check reports on product update', async () => {
const props = {
messages: [
{
id: 'loremIpsum',
title: 'Lorem ipsum title',
message: 'Lorem ipsum message'
}
],
useAppMessages: jest.fn(() => ({})),
useRouteDetail: () => ({ productConfig: [{ productId: 'lorem' }] })
};

const component = await shallowHookComponent(<BannerMessages {...props} />);
component.setProps({ useRouteDetail: () => ({ productConfig: [{ productId: 'dolor' }] }) });
expect(props.useAppMessages).toHaveBeenCalledTimes(2);
});

it('should render specific messages when the appMessages prop is used', async () => {
const props = {
messages: [
{
id: 'loremIpsum',
title: 'Lorem ipsum title',
message: 'Lorem ipsum message'
},
{
id: 'dolorSit',
title: 'Dolor sit title',
message: 'Dolor sit message'
useGetAppMessages: () => ({
data: {
loremIpsum: true
}
],
useAppMessages: () => ({ appMessages: { loremIpsum: false, dolorSit: true } }),
useRouteDetail: () => ({})
})
};

const component = await mountHookComponent(<BannerMessages {...props} />);
expect(component).toMatchSnapshot('specific messages, OFF, ON');

expect(component).toMatchSnapshot('basic');
});

it('should handle closing messages from state', async () => {
Expand All @@ -69,8 +32,7 @@ describe('BannerMessages Component', () => {
message: 'Dolor sit message'
}
],
useAppMessages: () => ({ appMessages: { dolorSit: true } }),
useRouteDetail: () => ({})
useGetAppMessages: () => ({ data: { dolorSit: true } })
};

const component = await mountHookComponent(<BannerMessages {...props} />);
Expand Down
Loading