Skip to content

Commit

Permalink
refactor(bannerMessages): ent-4899 align hook components (#926)
Browse files Browse the repository at this point in the history 
* bannerMessages, context, bundle api call, logic into hook
* productView, context, move banner under product columns
* redux, clean up unused hooks for actions, remove selectors
* rhsmTransformers, cloudigradeHasMismatch
  • Loading branch information
@cdcabrera
cdcabrera committed May 25, 2022
1 parent e5f787a commit 7149b50
Show file tree
Hide file tree
Showing 22 changed files with 318 additions and 892 deletions.
164 changes: 5 additions & 159 deletions src/components/bannerMessages/__tests__/__snapshots__/bannerMessages.test.js.snap
View file
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
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
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

0 comments on commit 7149b50

Please sign in to comment.