Skip to content

Commit 2a23310

Browse files
TomdangoTomdango
committed
Fix tests & storybook
1 parent 857b76c commit 2a23310

File tree

11 files changed

+101
-45
lines changed

11 files changed

+101
-45
lines changed

‎.storybook/storybook.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
@import '../node_modules/nhsuk-frontend/dist/nhsuk.css';
1+
// Also import styles for deprecated Panel and Promo
2+
@import '../node_modules/nhsuk-frontend-legacy/packages/core/all.scss';
3+
@import '../node_modules/nhsuk-frontend-legacy/packages/components/panel/panel';
4+
@import '../node_modules/nhsuk-frontend-legacy/packages/components/promo/promo';
5+
6+
// Allow current nhsuk styles to override legacy
7+
@import '../node_modules/nhsuk-frontend/packages/nhsuk.scss';
28

39
.tag-wrapper {
410
display: flex;

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"jest": "^26.6.1",
4848
"jest-axe": "^3.4.0",
4949
"nhsuk-frontend": "^4.1.0",
50+
"nhsuk-frontend-legacy": "npm:[email protected]",
5051
"node-sass": "^4.14.1",
5152
"prettier": "^1.18.2",
5253
"react": "^16.9.3",

‎src/deprecated/components/panel/Panel.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React, { HTMLProps, isValidElement, useEffect } from 'react';
1+
import React, { HTMLProps, isValidElement } from 'react';
22
import classNames from 'classnames';
33
import { Row, Col } from '../../../components/layout';
44
import PanelContext, { PanelContextType } from './PanelContext';
5-
import isDev from '../../../util/IsDev';
5+
import useDevWarning from '../../../util/hooks/UseDevWarning';
6+
import { PanelDeprecationWarning } from '../../warnings';
67

78
interface PanelProps extends HTMLProps<HTMLDivElement> {
89
grey?: boolean;
@@ -22,14 +23,7 @@ const BasePanel: React.FC<PanelProps> = ({
2223
children,
2324
...rest
2425
}) => {
25-
useEffect(() => {
26-
if (isDev()) {
27-
// eslint-disable-next-line no-console
28-
console.warn(
29-
'The Panel component is deprecated, and will be removed in the next major version of nhsuk-react-components. The Card component is the intended replacement.',
30-
);
31-
}
32-
}, []);
26+
useDevWarning(PanelDeprecationWarning);
3327

3428
return (
3529
<div

‎src/deprecated/components/panel/__tests__/Panel.test.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
11
import React from 'react';
22
import { mount } from 'enzyme';
33
import Panel from '..';
4+
import { PanelDeprecationWarning } from '../../../warnings';
5+
6+
jest.spyOn(console, 'warn').mockImplementation();
47

58
describe('Panel', () => {
9+
it('prints console deprecation warning', () => {
10+
const element = mount(<Panel />);
11+
12+
// eslint-disable-next-line no-console
13+
expect(console.warn).toHaveBeenCalled();
14+
// eslint-disable-next-line no-console
15+
expect((console.warn as jest.Mock).mock.calls[0][0]).toBe(PanelDeprecationWarning);
16+
17+
element.unmount();
18+
});
19+
620
it('matches snapshot', () => {
721
const element = mount(<Panel />);
822
expect(element).toMatchSnapshot('Panel');

‎src/deprecated/components/promo/Promo.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React, { HTMLProps, useContext, isValidElement, useEffect } from 'react';
1+
import React, { HTMLProps, useContext, isValidElement } from 'react';
22
import classNames from 'classnames';
33
import PromoContext, { PromoContextType } from './PromoContext';
44
import { Col, Row } from '../../../components/layout';
55
import type { AsElementLink } from '../../../util/types/LinkTypes';
6-
import isDev from '../../../util/IsDev';
6+
import useDevWarning from '../../../util/hooks/UseDevWarning';
7+
import { PromoDeprecationWarning } from '../../warnings';
78

89
interface ImageProps extends HTMLProps<HTMLImageElement> {
910
crossOrigin?: '' | 'anonymous' | 'use-credentials';
@@ -24,18 +25,9 @@ const BasePromo: React.FC<BasePromoProps> = ({
2425
asElement: Component = 'a',
2526
...rest
2627
}) => {
28+
useDevWarning(PromoDeprecationWarning);
2729
const { className: imageClassName, ...restImageProps } = imageProps || {};
2830

29-
useEffect(() => {
30-
if (isDev()) {
31-
// eslint-disable-next-line no-console
32-
console.warn(`
33-
The Promo component is deprecated, and will be removed in the next major version of nhsuk-react-components.
34-
The Card component is the intended replacement.
35-
`);
36-
}
37-
}, []);
38-
3931
return (
4032
<div className={classNames('nhsuk-promo', { 'nhsuk-promo--small': small }, className)}>
4133
<Component className="nhsuk-promo__link-wrapper" {...rest}>

‎src/deprecated/components/promo/__tests__/Promo.test.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react';
22
import Promo from '..';
33
import { mount, shallow } from 'enzyme';
4+
import { PromoDeprecationWarning } from '../../../warnings';
5+
6+
jest.spyOn(console, 'warn').mockImplementation();
47

58
describe('Promo', () => {
69
it('matches snapshot', () => {
7-
const element = mount(<Promo></Promo>);
10+
const element = mount(<Promo />);
811
expect(element).toMatchSnapshot('Promo');
912
element.unmount();
1013
});
@@ -13,14 +16,28 @@ describe('Promo', () => {
1316
const imageProps = {
1417
className: 'className',
1518
};
16-
const element = mount(<Promo imageProps={imageProps} imageSrc="image.png"></Promo>);
19+
const element = mount(<Promo imageProps={imageProps} imageSrc="image.png" />);
1720
const renderedElement = element.render();
1821
expect(renderedElement.find('.nhsuk-promo__img').hasClass('className')).toBeTruthy();
1922
expect(renderedElement.find('.nhsuk-promo__img').prop('src')).toBe('image.png');
2023

2124
element.unmount();
2225
});
2326

27+
it('prints console deprecation warning', () => {
28+
const imageProps = {
29+
className: 'className',
30+
};
31+
const element = mount(<Promo imageProps={imageProps} imageSrc="image.png" />);
32+
33+
// eslint-disable-next-line no-console
34+
expect(console.warn).toHaveBeenCalled();
35+
// eslint-disable-next-line no-console
36+
expect((console.warn as jest.Mock).mock.calls[0][0]).toBe(PromoDeprecationWarning);
37+
38+
element.unmount();
39+
});
40+
2441
describe('Promo.Heading', () => {
2542
it('matches snapshot', () => {
2643
const element = shallow(<Promo.Heading>Heading</Promo.Heading>);

‎stories/Grid.stories.tsx‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,49 @@
11
import React from 'react';
2-
import { Row, Col, Panel, Container } from '../src';
3-
2+
import { Row, Col, Card, Container } from '../src';
43

54
export const Grid = () => (
65
<Container>
76
<Row>
8-
<Col width="full"><Panel>full column</Panel></Col>
7+
<Col width="full">
8+
<Card>full column</Card>
9+
</Col>
910
</Row>
1011
<Row>
11-
<Col width="one-half"><Panel>one-half column</Panel></Col>
12-
<Col width="one-half"><Panel>one-half column</Panel></Col>
12+
<Col width="one-half">
13+
<Card>one-half column</Card>
14+
</Col>
15+
<Col width="one-half">
16+
<Card>one-half column</Card>
17+
</Col>
1318
</Row>
1419
<Row>
15-
<Col width="one-third"><Panel>one-third column</Panel></Col>
16-
<Col width="one-third"><Panel>one-third column</Panel></Col>
17-
<Col width="one-third"><Panel>one-third column</Panel></Col>
20+
<Col width="one-third">
21+
<Card>one-third column</Card>
22+
</Col>
23+
<Col width="one-third">
24+
<Card>one-third column</Card>
25+
</Col>
26+
<Col width="one-third">
27+
<Card>one-third column</Card>
28+
</Col>
1829
</Row>
1930
<Row>
20-
<Col width="one-quarter"><Panel>one-quarter column</Panel></Col>
21-
<Col width="one-quarter"><Panel>one-quarter column</Panel></Col>
22-
<Col width="one-quarter"><Panel>one-quarter column</Panel></Col>
23-
<Col width="one-quarter"><Panel>one-quarter column</Panel></Col>
31+
<Col width="one-quarter">
32+
<Card>one-quarter column</Card>
33+
</Col>
34+
<Col width="one-quarter">
35+
<Card>one-quarter column</Card>
36+
</Col>
37+
<Col width="one-quarter">
38+
<Card>one-quarter column</Card>
39+
</Col>
40+
<Col width="one-quarter">
41+
<Card>one-quarter column</Card>
42+
</Col>
2443
</Row>
2544
</Container>
2645
);
2746

2847
export default {
2948
title: 'Components/Grid',
30-
3149
};

‎stories/Panel.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable import/no-extraneous-dependencies */
22
import React from 'react';
3-
import { Panel } from '../src';
3+
import { Panel } from '../src/deprecated';
44

55
export const Standard = () => (
66
<Panel>
@@ -52,6 +52,6 @@ export const PanelGroup = () => (
5252
);
5353

5454
export default {
55-
title: 'Components/Panel',
55+
title: 'Deprecated/Panel',
5656
component: Panel,
5757
};

‎stories/Promo.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* eslint-disable import/no-extraneous-dependencies */
22
import React from 'react';
3-
import { Promo } from '../src';
3+
import { Promo } from '../src/deprecated';
44

55
export const Standard = () => (
6-
<Promo href="https://www.nhs.uk">
6+
<Promo href="#">
77
<Promo.Heading>Save a life: give blood</Promo.Heading>
88
<Promo.Description>
99
Please register today. Donating blood is easy, and saves lives.
@@ -98,6 +98,6 @@ export const PromoGroup = () => (
9898
);
9999

100100
export default {
101-
title: 'Components/Promo',
101+
title: 'Deprecated/Promo',
102102
component: Promo,
103103
};

‎stories/WarningCallout.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { WarningCallout } from '../src';
33

4-
export const WarningCallout = () => (
4+
export const StandardWarningCallout = () => (
55
<WarningCallout>
66
<WarningCallout.Label>School, nursery or work</WarningCallout.Label>
77
<p>
@@ -10,6 +10,7 @@ export const WarningCallout = () => (
1010
</p>
1111
</WarningCallout>
1212
);
13+
StandardWarningCallout.storyName = 'WarningCallout';
1314

1415
export const WarningCalloutWithCustomVisuallyHiddenText = () => (
1516
<WarningCallout>

0 commit comments

Comments
 (0)