Skip to content

Commit

Permalink
refactor(scanDownload): class to function, hooks (#180)
Browse files Browse the repository at this point in the history
* scanDownload, class to function, apply context hook
* scanJobList, pass scan job object
* scansContext, expand with onDownloadJob
* reportsAction, fixes, allows toast notifications
* reportsReducer, move type to scansReducer
* scansReducer, expand actions with jobs type
* scansSelectors, pass original job object
  • Loading branch information
cdcabrera committed Oct 20, 2022
1 parent 4dc3331 commit da5a8c4
Show file tree
Hide file tree
Showing 17 changed files with 267 additions and 365 deletions.
19 changes: 14 additions & 5 deletions src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -752,6 +752,19 @@ Array [
},
],
},
Object {
"file": "./src/components/scans/scanDownload.js",
"keys": Array [
Object {
"key": "table.label",
"match": "t('table.label', { context: ['action', 'scan', 'download'] })",
},
Object {
"key": "table.label",
"match": "t('table.label', { context: ['action', 'scan', 'download'] })",
},
],
},
Object {
"file": "./src/components/scans/scanJobsList.js",
"keys": Array [
Expand Down Expand Up @@ -857,17 +870,13 @@ Array [
Object {
"file": "./src/components/scans/scansContext.js",
"keys": Array [
Object {
"key": "toast-notifications.description",
"match": "t( 'toast-notifications.description', { context: ['scan-report', scanContext], name: scanName || scanId }, [<strong />] )",
},
Object {
"key": "toast-notifications.title",
"match": "t('toast-notifications.title', { context: [(isWarning && 'warning')",
},
Object {
"key": "toast-notifications.description",
"match": "t('toast-notifications.description', { context: [(isWarning && 'warning')",
"match": "t( 'toast-notifications.description', { context: [isWarning && 'warning', error && 'error', 'scan-report', scanContext], name: scanName || scanId }, [<strong />] )",
},
],
},
Expand Down
171 changes: 17 additions & 154 deletions src/components/scans/__tests__/__snapshots__/scanDownload.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -4,180 +4,43 @@ exports[`ScanDownload Component should handle custom children: custom 1`] = `
<button
aria-disabled="false"
class="pf-c-button pf-m-primary"
data-ouia-component-id="OUIA-Generated-Button-primary-3"
data-ouia-component-id="OUIA-Generated-Button-primary-2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
title="Download"
title="t(table.label_action_scan, {\\"context\\":\\"download\\"})"
type="button"
>
lorem ipsum
</button>
`;

exports[`ScanDownload Component should have an optional tooltip: tooltip 1`] = `
<ScanDownload
downloadId={1}
downloadName={null}
getReportsDownload={[Function]}
tooltip="Lorem ipsum dolor sit"
<Tooltip
content="Lorem ipsum dolor sit"
delayShow={500}
id={null}
isPopover={false}
placement="top"
>
<Tooltip
content="Lorem ipsum dolor sit"
delayShow={500}
id={null}
isPopover={false}
placement="top"
<Button
onClick={[Function]}
title="t(table.label_action_scan, {\\"context\\":\\"download\\"})"
>
<Tooltip
className="quipucords-tooltip"
content="Lorem ipsum dolor sit"
entryDelay={500}
id="generatedid-"
position="top"
>
<Popper
appendTo={[Function]}
distance={15}
enableFlip={true}
flipBehavior={
Array [
"top",
"right",
"bottom",
"left",
"top",
"right",
"bottom",
]
}
isVisible={false}
onBlur={[Function]}
onDocumentClick={false}
onDocumentKeyDown={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onPopperMouseEnter={[Function]}
onPopperMouseLeave={[Function]}
onTriggerEnter={[Function]}
placement="top"
popper={
<div
aria-live="off"
className="pf-c-tooltip quipucords-tooltip"
id="generatedid-"
role="tooltip"
style={
Object {
"maxWidth": null,
"opacity": 0,
"transition": "opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11)",
}
}
>
<TooltipArrow />
<TooltipContent
isLeftAligned={false}
>
Lorem ipsum dolor sit
</TooltipContent>
</div>
}
popperMatchesTriggerWidth={false}
positionModifiers={
Object {
"bottom": "pf-m-bottom",
"bottom-end": "pf-m-bottom-right",
"bottom-start": "pf-m-bottom-left",
"left": "pf-m-left",
"left-end": "pf-m-left-bottom",
"left-start": "pf-m-left-top",
"right": "pf-m-right",
"right-end": "pf-m-right-bottom",
"right-start": "pf-m-right-top",
"top": "pf-m-top",
"top-end": "pf-m-top-right",
"top-start": "pf-m-top-left",
}
}
trigger={
<div
className="quipucords-tooltip__wrapper"
>
<Button
onClick={[Function]}
title="Download"
>
Download
</Button>
</div>
}
zIndex={9999}
>
<FindRefWrapper
onFoundRef={[Function]}
>
<div
className="quipucords-tooltip__wrapper"
>
<Button
onClick={[Function]}
title="Download"
>
<ButtonBase
innerRef={null}
onClick={[Function]}
title="Download"
>
<button
aria-disabled={false}
aria-label={null}
className="pf-c-button pf-m-primary"
data-ouia-component-id="OUIA-Generated-Button-primary-4"
data-ouia-component-type="PF4/Button"
data-ouia-safe={true}
disabled={false}
onClick={[Function]}
role={null}
title="Download"
type="button"
>
Download
</button>
</ButtonBase>
</Button>
</div>
</FindRefWrapper>
</Popper>
</Tooltip>
</Tooltip>
</ScanDownload>
t(table.label_action_scan, {"context":"download"})
</Button>
</Tooltip>
`;

exports[`ScanDownload Component should render a connected component: connected 1`] = `
exports[`ScanDownload Component should render a basic component: basic 1`] = `
<button
aria-disabled="false"
class="pf-c-button pf-m-primary"
data-ouia-component-id="OUIA-Generated-Button-primary-1"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
title="Download"
type="button"
>
Download
</button>
`;

exports[`ScanDownload Component should render a non-connected component: non-connected 1`] = `
<button
aria-disabled="false"
class="pf-c-button pf-m-primary"
data-ouia-component-id="OUIA-Generated-Button-primary-2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
title="Download"
title="t(table.label_action_scan, {\\"context\\":\\"download\\"})"
type="button"
>
Download
t(table.label_action_scan, {"context":"download"})
</button>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -129,18 +129,20 @@ exports[`ScanJobsList Component should render a non-connected component: non-con
},
Object {
"content": <React.Fragment>
<Memo(Connect(ScanDownload))
downloadId={15}
<ScanDownload
icon={
<ContextIcon
size="sm"
symbol="download"
/>
}
t={[Function]}
tooltip={null}
useOnScanAction={[Function]}
variant="link"
>
t(table.label_action_scan, {"context":"download"})
</Memo(Connect(ScanDownload))>
</ScanDownload>
</React.Fragment>,
"isActionCell": true,
"style": Object {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ exports[`ScansContext should handle scan actions with multiple callbacks: callba
Object {
"onCancel": [Function],
"onDownload": [Function],
"onDownloadJob": [Function],
"onPause": [Function],
"onRestart": [Function],
"onStart": [Function],
Expand Down
56 changes: 21 additions & 35 deletions src/components/scans/__tests__/scanDownload.test.js
Original file line number Diff line number Diff line change
@@ -1,56 +1,42 @@
import React from 'react';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { mount, shallow } from 'enzyme';
import { ConnectedScanDownload, ScanDownload } from '../scanDownload';
import { ScanDownload } from '../scanDownload';
import { apiTypes } from '../../../constants/apiConstants';

describe('ScanDownload Component', () => {
const generateEmptyStore = (obj = {}) => configureMockStore()(obj);

it('should render a connected component', () => {
const store = generateEmptyStore({});

it('should render a basic component', async () => {
const props = {
downloadId: 1
job: {
[apiTypes.API_RESPONSE_JOB_ID]: 1,
[apiTypes.API_RESPONSE_JOB_NAME]: 'lorem ipsum'
}
};

const component = shallow(
<Provider store={store}>
<ConnectedScanDownload {...props} />
</Provider>
);

expect(component.render()).toMatchSnapshot('connected');
const component = await shallowHookComponent(<ScanDownload {...props} />);
expect(component.render()).toMatchSnapshot('basic');
});

it('should render a non-connected component', () => {
it('should handle custom children', async () => {
const props = {
downloadId: 1
job: {
[apiTypes.API_RESPONSE_JOB_ID]: 1,
[apiTypes.API_RESPONSE_JOB_NAME]: 'lorem ipsum'
}
};

const component = mount(<ScanDownload {...props} />);

expect(component.render()).toMatchSnapshot('non-connected');
});

it('should handle custom children', () => {
const props = {
downloadId: 1
};

const component = mount(<ScanDownload {...props}>lorem ipsum</ScanDownload>);

const component = await shallowHookComponent(<ScanDownload {...props}>lorem ipsum</ScanDownload>);
expect(component.render()).toMatchSnapshot('custom');
});

it('should have an optional tooltip', () => {
it('should have an optional tooltip', async () => {
const props = {
downloadId: 1,
job: {
[apiTypes.API_RESPONSE_JOB_ID]: 1,
[apiTypes.API_RESPONSE_JOB_NAME]: 'lorem ipsum'
},
tooltip: 'Lorem ipsum dolor sit'
};

const component = mount(<ScanDownload {...props} />);

const component = await shallowHookComponent(<ScanDownload {...props} />);
expect(component).toMatchSnapshot('tooltip');
});
});
Loading

0 comments on commit da5a8c4

Please sign in to comment.