Skip to content

Commit 41d3b0c

Browse files
imagoiqalizedebray
imagoiq
and
alizedebray
authored
fix(internet-header): compatibility with storybook v7 for e2e (#1857)
Co-authored-by: Alizé Debray <[email protected]>
1 parent 16f0462 commit 41d3b0c

File tree

19 files changed

+190
-113
lines changed

19 files changed

+190
-113
lines changed

‎packages/documentation-v6/src/stories/internet-header/components/header/post-internet-header.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Args, Story } from '@storybook/react';
1+
import { Args, Meta, Story } from '@storybook/react';
22
import { BADGE } from '@geometricpanda/storybook-addon-badges';
33
import { filterArgs } from '../../../utilities/filterArgs';
44
import docsPage from './internet-header.docs.mdx';
@@ -288,7 +288,7 @@ const Template = (args: Args) => {
288288
<swisspost-internet-header {...filteredArgs} />
289289
<main className="container mt-huge-r">
290290
<swisspost-internet-breadcrumbs />
291-
<h1 className="mt-huge-r mb-big-r bold">Design System Internet Header</h1>
291+
<h1 className="mt-huge-r mb-big-r bold">Swiss Post Internet Header</h1>
292292
<p className="fake-content my-big"></p>
293293
<p className="fake-content my-big"></p>
294294
<p className="fake-content my-big"></p>

‎packages/documentation/.storybook/cypress-storybook/client.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Source: https://github.com/NicholasBoll/cypress-storybook
2+
3+
import { addons } from '@storybook/preview-api';
4+
import { FORCE_RE_RENDER } from '@storybook/core-events';
5+
import { changeKnob, setCurrentStory } from './common';
6+
7+
window.__setCurrentStory = function (categorization, story) {
8+
setCurrentStory(categorization, story);
9+
forceReRender();
10+
};
11+
12+
window.__changeKnob = function (changedKnob) {
13+
changeKnob(changedKnob);
14+
15+
// force story to rerender with updated knob
16+
forceReRender();
17+
};
18+
19+
function forceReRender() {
20+
addons.getChannel().emit(FORCE_RE_RENDER);
21+
}

‎packages/documentation/.storybook/cypress-storybook/common.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// Source: https://github.com/NicholasBoll/cypress-storybook
2+
3+
import { addons } from '@storybook/preview-api';
4+
import Events from '@storybook/core-events';
5+
6+
// Collect actions emitted by storybook/addon-actions
7+
window.__actions = {};
8+
// Track current story Id - this means `loadStory` must be used for some commands to work properly
9+
window.__storyId = null;
10+
11+
/**
12+
* Remove punctuation and illegal characters from a story ID.
13+
*
14+
* See https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
15+
*/
16+
function sanitize(string) {
17+
return (
18+
string
19+
.toLowerCase()
20+
// eslint-disable-next-line no-useless-escape
21+
.replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '-')
22+
.replace(/-+/g, '-')
23+
.replace(/^-+/, '')
24+
.replace(/-+$/, '')
25+
);
26+
}
27+
28+
function sanitizeSafe(string, part) {
29+
const sanitized = sanitize(string);
30+
if (sanitized === '') {
31+
throw new Error('Invalid ' + part + " '" + string + "', must include alphanumeric characters");
32+
}
33+
return sanitized;
34+
}
35+
36+
/**
37+
* Generate a storybook ID from a component/kind and story name.
38+
* This is a copy from https://github.com/storybookjs/csf/blob/next/src/index.ts
39+
* to be able to support storybook 6.x since they moved toId from storybook/router to storybook/csf
40+
*/
41+
export function toId(kind, name) {
42+
return sanitizeSafe(kind, 'kind') + '--' + sanitizeSafe(name, 'name');
43+
}
44+
45+
function resetKnobs() {
46+
addons.getChannel().emit('storybookjs/knobs/reset');
47+
}
48+
49+
export function setCurrentStory(categorization, story) {
50+
resetKnobs();
51+
resetActions();
52+
window.__storyId = toId(categorization, story);
53+
addons.getChannel().emit(Events.SET_CURRENT_STORY, {
54+
storyId: window.__storyId,
55+
});
56+
addons.getChannel().emit('storybookjs/knobs/reset');
57+
}
58+
59+
export function changeKnob(changedKnob) {
60+
addons.getChannel().emit('storybookjs/knobs/change', changedKnob);
61+
}
62+
63+
export function changeArg(updatedArgs) {
64+
console.log(updatedArgs);
65+
addons.getChannel().emit(Events.UPDATE_STORY_ARGS, {
66+
storyId: window.__storyId,
67+
updatedArgs: updatedArgs,
68+
});
69+
}
70+
71+
addons.getChannel().addListener('storybook/actions/action-event', function (action) {
72+
if (window.Cypress) {
73+
if (!window.__actions[action.data.name]) {
74+
window.__actions[action.data.name] = window.Cypress.sinon.spy();
75+
}
76+
77+
window.__actions[action.data.name](action.data.args);
78+
}
79+
});
80+
81+
export function resetActions() {
82+
window.__actions = {};
83+
}
84+
85+
window.__changeArg = changeArg;

‎packages/documentation/.storybook/preview-head.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
<link rel="manifest" href="/site.webmanifest" />
1111

1212
<meta name="design-system-settings" data-post-icon-base="/post-icons" />
13+
<meta http-equiv="Content-Security-Policy" content="connect-src 'self' *.coveo.com *.post.ch" />
1314

1415
<script>
1516
window.global = window;
16-
</script>
17+
</script>

‎packages/documentation/.storybook/preview.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Preview } from '@storybook/web-components';
2-
3-
import { extractArgTypes, extractComponentDescription } from '@pxtrn/storybook-addon-docs-stencil';
2+
import './cypress-storybook/client';
3+
import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
44
import { format } from 'prettier';
55
import DocsLayout from './blocks/layout';
66
import { badgesConfig, prettierOptions, resetComponents } from './helpers';
@@ -25,7 +25,13 @@ const preview: Preview = {
2525
['Typography', 'Color', 'Layout', 'Elevation', 'Accessibility'],
2626
'Components',
2727
'Internet Header',
28-
['Getting Started', 'Migration Guide', 'Header Component', 'Breadcrumbs Component', 'Footer Component'],
28+
[
29+
'Getting Started',
30+
'Migration Guide',
31+
'Header Component',
32+
'Breadcrumbs Component',
33+
'Footer Component',
34+
],
2935
'Intranet Header',
3036
['Getting Started'],
3137
'Icons',

‎packages/documentation/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"@storybook/addons": "7.2.3",
4646
"@storybook/blocks": "7.2.3",
4747
"@storybook/components": "7.2.3",
48+
"@storybook/core-events": "7.3.2",
4849
"@storybook/manager-api": "7.2.3",
4950
"@storybook/preview-api": "7.2.3",
5051
"@storybook/testing-library": "0.2.0",

‎packages/documentation/src/stories/internet-header/components/internet-header.stories.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@ const meta: Meta<HTMLSwisspostInternetHeaderElement> = {
1515
},
1616
badges: [BADGE.STABLE],
1717
controls: {
18-
exclude: ['config-proxy']
18+
exclude: ['config-proxy'],
1919
},
2020
},
2121
args: {
22-
'project': 'test'
22+
project: 'test',
23+
language: 'de',
2324
},
2425
argTypes: {
2526
activeRoute: {
@@ -64,12 +65,12 @@ function mockPage(story: any) {
6465
<div class="page-wrapper">
6566
${story()}
6667
<main class="container mt-huge-r">
67-
<swisspost-internet-breadcrumbs/>
68+
<swisspost-internet-breadcrumbs />
6869
<h1 class="mt-huge-r mb-big-r bold">Swiss Post Internet Header</h1>
6970
<p class="fake-content my-big"></p>
7071
<p class="fake-content my-big"></p>
7172
</main>
72-
<swisspost-internet-footer/>
73+
<swisspost-internet-footer />
7374
</div>
7475
`;
7576
}
@@ -86,7 +87,7 @@ function renderInternetHeader(args: HTMLSwisspostInternetHeaderElement) {
8687
type Story = StoryObj<HTMLSwisspostInternetHeaderElement>;
8788

8889
export const Default: Story = {
89-
decorators: [ mockPage ],
90+
decorators: [mockPage],
9091
parameters: {
9192
docs: {
9293
story: {
@@ -98,7 +99,7 @@ export const Default: Story = {
9899
};
99100

100101
export const FullWidth: Story = {
101-
decorators: [ mockPage ],
102+
decorators: [mockPage],
102103
args: {
103104
fullWidth: true,
104105
},
@@ -192,6 +193,7 @@ export const CustomNavigation: Story = {
192193
};
193194

194195
export const CustomOnlineServiceFlyout: Story = {
196+
decorators: [mockPage],
195197
args: {
196198
osFlyoutOverrides: {
197199
title: 'Custom OS Flyout',

‎packages/internet-header/cypress/e2e/header.cy.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ import { prepare } from '../support/prepare-story';
22

33
describe('header', () => {
44
beforeEach(() => {
5-
prepare('Internet Header/Components/Header', 'Default');
5+
prepare('Internet Header/Header Component', 'Default');
66
});
77

88
context('initial state', () => {
99
it('renders', () => {
1010
cy.get('swisspost-internet-header').should('have.class', 'hydrated');
1111
});
1212

13-
it(`has title 'Design System Internet Header'`, () => {
14-
cy.get('h1').should('contain.text', 'Design System Internet Header');
13+
it(`has title 'Swiss Post Internet Header'`, () => {
14+
cy.get('h1').should('contain.text', 'Swiss Post Internet Header');
1515
});
1616

1717
it(`has nav item 'Briefe versenden' selected`, () => {

‎packages/internet-header/cypress/e2e/language-detection.cy.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { prepare } from '../support/prepare-story';
33

44
describe('language detection from storybook', () => {
55
it('should not render the header without languages in the config', () => {
6-
prepare('Internet Header/Components/Header', 'Default', {});
6+
prepare('Internet Header/Header Component', 'Default', {});
77
cy.get('swisspost-internet-header').should('exist');
88
cy.get('.post-internet-header').should('not.exist');
99
});
@@ -15,7 +15,7 @@ describe('language detection from storybook', () => {
1515
delete customConfig.fr;
1616
delete customConfig.en;
1717

18-
prepare('Internet Header/Components/Header', 'Default', customConfig);
18+
prepare('Internet Header/Header Component', 'Default', customConfig);
1919

2020
cy.get('swisspost-internet-header')
2121
.shadow()

‎packages/internet-header/cypress/e2e/language-switch.cy.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe('language-switch', () => {
1111

1212
beforeEach(() => {
1313
cy.viewport(1024, 800);
14-
prepare('Internet Header/Components/Header', 'Default');
14+
prepare('Internet Header/Header Component', 'Default');
1515
});
1616

1717
describe('meta menu', () => {
@@ -144,7 +144,7 @@ describe('language-switch', () => {
144144
url: '',
145145
};
146146
config.en!.header.navLang = [navLangEntry];
147-
prepare('Internet Header/Components/Header', 'Default', config);
147+
prepare('Internet Header/Header Component', 'Default', config);
148148
cy.get('#post-language-switch-desktop').should('not.exist');
149149
});
150150

‎packages/internet-header/cypress/e2e/login.cy.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ describe('login', () => {
66
describe('args', () => {
77
describe('login: true', () => {
88
it(`adds login control`, () => {
9-
prepare('Internet Header/Components/Header', 'Default');
9+
prepare('Internet Header/Header Component', 'Default');
1010
cy.changeArg('login', true);
1111
cy.get('post-klp-login-widget').should('exist').and('be.visible');
1212
});
1313
});
1414

1515
describe('login: false', () => {
1616
it(`removes login control`, () => {
17-
prepare('Internet Header/Components/Header', 'Default');
17+
prepare('Internet Header/Header Component', 'Default');
1818
cy.changeArg('login', false);
1919
cy.get('post-klp-login-widget').should('not.exist');
2020
});
@@ -31,7 +31,7 @@ describe('login', () => {
3131
config.de!.header.loginWidgetOptions = undefined;
3232

3333
// Intercept the request to the config API and return a static response
34-
prepare('Internet Header/Components/Header', 'Default', config);
34+
prepare('Internet Header/Header Component', 'Default', config);
3535

3636
// Assert the header is hydrated
3737
cy.get('swisspost-internet-header').should('have.class', 'hydrated');
@@ -48,7 +48,7 @@ describe('login', () => {
4848
let config: IPortalConfig = JSON.parse(JSON.stringify(testConfiguration));
4949
config.de!.header.showJobsLoginWidget = true;
5050
config.de!.header.isLoginWidgetHidden = false;
51-
prepare('Internet Header/Components/Header', 'Default', config);
51+
prepare('Internet Header/Header Component', 'Default', config);
5252
console.warn(config.de?.header.loginWidgetOptions);
5353
cy.get('swisspost-internet-header').should('have.class', 'hydrated');
5454
cy.get('a.login-button').should('exist').and('be.visible');
@@ -61,7 +61,7 @@ describe('login', () => {
6161
let config: IPortalConfig = JSON.parse(JSON.stringify(testConfiguration));
6262
config.de!.header.showJobsLoginWidget = false;
6363
config.de!.header.isLoginWidgetHidden = false;
64-
prepare('Internet Header/Components/Header', 'Default', config);
64+
prepare('Internet Header/Header Component', 'Default', config);
6565
cy.get('swisspost-internet-header').should('have.class', 'hydrated');
6666
cy.get('.klp-widget-anonymous').should('exist');
6767
});

‎packages/internet-header/cypress/e2e/main-navigation.cy.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { prepare } from '../support/prepare-story';
33

44
describe('main-navigation', () => {
55
beforeEach(() => {
6-
prepare('Internet Header/Components/Header', 'Default');
6+
prepare('Internet Header/Header Component', 'Default');
77
});
88

99
it('should not have any highlight when active route is false', async () => {
@@ -27,7 +27,7 @@ describe('main-navigation', () => {
2727
it('should have an active route when config defines an active route', () => {
2828
const activeConfig = JSON.parse(JSON.stringify(testConfiguration));
2929
activeConfig.de.header.navMain[0].isActive = true;
30-
prepare('Internet Header/Components/Header', 'Default', activeConfig);
30+
prepare('Internet Header/Header Component', 'Default', activeConfig);
3131
cy.get('swisspost-internet-header')
3232
.shadow()
3333
.find('.flyout-link.active, .main-link.active')
@@ -46,7 +46,8 @@ describe('main-navigation', () => {
4646
});
4747

4848
it('Changes active link also in custom config nav links', () => {
49-
prepare('Internet Header/Components/Header', 'Custom Navigation');
49+
prepare('Internet Header/Header Component', 'Custom Navigation');
50+
cy.changeArg('language', 'en');
5051
cy.changeArg('active-route', 'https://maps.google.com');
5152
cy.get('swisspost-internet-header')
5253
.shadow()

‎packages/internet-header/cypress/e2e/meta-navigation.cy.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { prepare } from '../support/prepare-story';
44

55
describe('meta-navigation', () => {
66
beforeEach(() => {
7-
prepare('Internet Header/Components/Header', 'Default');
7+
prepare('Internet Header/Header Component', 'Default');
88
cy.viewport(1024, Cypress.config('viewportHeight'));
99
});
1010

@@ -95,7 +95,7 @@ describe('meta-navigation', () => {
9595
// Clear meta navigation config
9696
config.de!.header.navMeta = undefined;
9797

98-
prepare('Internet Header/Components/Header', 'Default', config);
98+
prepare('Internet Header/Header Component', 'Default', config);
9999

100100
// Assert the header is hydrated
101101
cy.get('swisspost-internet-header').should('have.class', 'hydrated');
@@ -120,7 +120,7 @@ describe('meta-navigation', () => {
120120
},
121121
];
122122

123-
prepare('Internet Header/Components/Header', 'Default', config);
123+
prepare('Internet Header/Header Component', 'Default', config);
124124

125125
// Assert the header is hydrated
126126
cy.get('swisspost-internet-header').should('have.class', 'hydrated');

‎packages/internet-header/cypress/e2e/os-flyout.cy.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { prepare } from '../support/prepare-story';
22

33
describe('os-flyout', () => {
44
beforeEach(() => {
5-
prepare('Internet Header/Components/Header', 'Default');
5+
prepare('Internet Header/Header Component', 'Default');
66
});
77
it('should customize the os flyout title', () => {
88
const title = 'Test OS Flyout';

0 commit comments

Comments
 (0)