Skip to content

Commit 4f0e021

Browse files
author
AlexD
authored
Merge pull request #10 from sir-alex/tech/interaction-testing
Storybook interaction testing basic implementation
2 parents 7e04616 + b79c423 commit 4f0e021

File tree

5 files changed

+185
-21
lines changed

5 files changed

+185
-21
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"@storybook/addon-onboarding": "^8.2.6",
4545
"@storybook/angular": "^8.2.6",
4646
"@storybook/blocks": "^8.2.6",
47+
"@storybook/jest": "^0.2.3",
4748
"@storybook/test": "^8.2.6",
4849
"@types/jasmine": "~5.1.0",
4950
"chromatic": "^11.7.1",

‎projects/lfx-component-lib/documentation.json

+18-18
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,21 @@
2424
"name": "meta",
2525
"ctype": "miscellaneous",
2626
"subtype": "variable",
27-
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
27+
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
2828
"deprecated": false,
2929
"deprecationMessage": "",
30-
"type": "Meta<SectionsComponent>",
31-
"defaultValue": "{\n title: 'LFX Components/Containers/Sections',\n component: SectionsComponent,\n tags: ['autodocs'],\n argTypes: {\n backgroundColor: {\n control: 'color',\n },\n },\n parameters: {\n backgrounds: { default: 'dark' },\n },\n}"
30+
"type": "Meta<ToastComponent>",
31+
"defaultValue": "{\n title: 'LFX Components/Containers/Toast',\n component: ToastComponent,\n tags: ['autodocs'],\n render: (args) => ({\n template: `\n <lfx-toast type=\"${args.type}\">\n <h1>Title</h1>\n <p>Body paragraph</p>\n </lfx-toast>\n `,\n }),\n argTypes: {\n type: {\n control: 'select',\n options: ['notice', 'warning', 'success', 'error'] as IType[],\n },\n },\n args: {\n type: 'notice' as IType,\n },\n}"
3232
},
3333
{
3434
"name": "meta",
3535
"ctype": "miscellaneous",
3636
"subtype": "variable",
37-
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
37+
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
3838
"deprecated": false,
3939
"deprecationMessage": "",
40-
"type": "Meta<ToastComponent>",
41-
"defaultValue": "{\n title: 'LFX Components/Containers/Toast',\n component: ToastComponent,\n tags: ['autodocs'],\n render: (args) => ({\n template: `\n <lfx-toast type=\"${args.type}\">\n <h1>Title</h1>\n <p>Body paragraph</p>\n </lfx-toast>\n `,\n }),\n argTypes: {\n type: {\n control: 'select',\n options: ['notice', 'warning', 'success', 'error'] as IType[],\n },\n },\n args: {\n type: 'notice' as IType,\n },\n}"
40+
"type": "Meta<SectionsComponent>",
41+
"defaultValue": "{\n title: 'LFX Components/Containers/Sections',\n component: SectionsComponent,\n tags: ['autodocs'],\n argTypes: {\n backgroundColor: {\n control: 'color',\n },\n },\n parameters: {\n backgrounds: { default: 'dark' },\n },\n}"
4242
},
4343
{
4444
"name": "Notice",
@@ -48,7 +48,7 @@
4848
"deprecated": false,
4949
"deprecationMessage": "",
5050
"type": "Story",
51-
"defaultValue": "{\n args: {\n type: 'notice' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5198&t=zfHib1d5XSXabYJp-4\",\n },\n },\n}"
51+
"defaultValue": "{\n args: {\n type: 'notice' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5198&t=zfHib1d5XSXabYJp-4\",\n },\n },\n play: async ( {canvasElement} ) => {\n const canvas = within(canvasElement);\n const toastElement = canvas.getByTestId('lfx-toast-container');\n await expect(toastElement.classList).toContain('notice');\n // get current class of the toast in canvas var and check if it is the correct one in expect()\n }\n}"
5252
},
5353
{
5454
"name": "preview",
@@ -97,8 +97,8 @@
9797
"name": "Story",
9898
"ctype": "miscellaneous",
9999
"subtype": "typealias",
100-
"rawtype": "StoryObj<SectionsComponent>",
101-
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
100+
"rawtype": "StoryObj<ToastComponent>",
101+
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
102102
"deprecated": false,
103103
"deprecationMessage": "",
104104
"description": "",
@@ -108,8 +108,8 @@
108108
"name": "Story",
109109
"ctype": "miscellaneous",
110110
"subtype": "typealias",
111-
"rawtype": "StoryObj<ToastComponent>",
112-
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
111+
"rawtype": "StoryObj<SectionsComponent>",
112+
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
113113
"deprecated": false,
114114
"deprecationMessage": "",
115115
"description": "",
@@ -147,7 +147,7 @@
147147
"deprecated": false,
148148
"deprecationMessage": "",
149149
"type": "Story",
150-
"defaultValue": "{\n args: {\n type: 'notice' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5198&t=zfHib1d5XSXabYJp-4\",\n },\n },\n}"
150+
"defaultValue": "{\n args: {\n type: 'notice' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5198&t=zfHib1d5XSXabYJp-4\",\n },\n },\n play: async ( {canvasElement} ) => {\n const canvas = within(canvasElement);\n const toastElement = canvas.getByTestId('lfx-toast-container');\n await expect(toastElement.classList).toContain('notice');\n // get current class of the toast in canvas var and check if it is the correct one in expect()\n }\n}"
151151
},
152152
{
153153
"name": "Success",
@@ -208,26 +208,26 @@
208208
"groupedFunctions": {},
209209
"groupedEnumerations": {},
210210
"groupedTypeAliases": {
211-
"projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts": [
211+
"projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts": [
212212
{
213213
"name": "Story",
214214
"ctype": "miscellaneous",
215215
"subtype": "typealias",
216-
"rawtype": "StoryObj<SectionsComponent>",
217-
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
216+
"rawtype": "StoryObj<ToastComponent>",
217+
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
218218
"deprecated": false,
219219
"deprecationMessage": "",
220220
"description": "",
221221
"kind": 183
222222
}
223223
],
224-
"projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts": [
224+
"projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts": [
225225
{
226226
"name": "Story",
227227
"ctype": "miscellaneous",
228228
"subtype": "typealias",
229-
"rawtype": "StoryObj<ToastComponent>",
230-
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
229+
"rawtype": "StoryObj<SectionsComponent>",
230+
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
231231
"deprecated": false,
232232
"deprecationMessage": "",
233233
"description": "",

‎projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts

+22
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
import { Meta, StoryObj } from '@storybook/angular';
22
import { IType, ToastComponent } from '../toast.component';
3+
import { expect, within } from '@storybook/test';
34

45
type Story = StoryObj<ToastComponent>;
56

7+
function getElement(canvasElement: HTMLElement): HTMLElement {
8+
const canvas = within(canvasElement);
9+
return canvas.getByTestId('lfx-toast-container');
10+
}
11+
612
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
713
const meta: Meta<ToastComponent> = {
814
title: 'LFX Components/Containers/Toast',
@@ -39,6 +45,10 @@ export const Notice: Story = {
3945
url: "https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5198&t=zfHib1d5XSXabYJp-4",
4046
},
4147
},
48+
play: async ( {canvasElement} ) => {
49+
const element = getElement(canvasElement);
50+
await expect(element.classList).toContain('notice');
51+
}
4252
};
4353

4454
export const Warning: Story = {
@@ -51,6 +61,10 @@ export const Warning: Story = {
5161
url: "https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5205&t=zfHib1d5XSXabYJp-4",
5262
},
5363
},
64+
play: async ( {canvasElement} ) => {
65+
const element = getElement(canvasElement);
66+
await expect(element.classList).toContain('warning');
67+
}
5468
};
5569

5670
export const Success: Story = {
@@ -63,6 +77,10 @@ export const Success: Story = {
6377
url: "https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5207&t=zfHib1d5XSXabYJp-4",
6478
},
6579
},
80+
play: async ( {canvasElement} ) => {
81+
const element = getElement(canvasElement);
82+
await expect(element.classList).toContain('success');
83+
}
6684
};
6785

6886
export const Error: Story = {
@@ -75,4 +93,8 @@ export const Error: Story = {
7593
url: "https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5210&t=zfHib1d5XSXabYJp-4",
7694
},
7795
},
96+
play: async ( {canvasElement} ) => {
97+
const element = getElement(canvasElement);
98+
await expect(element.classList).toContain('error');
99+
}
78100
};

‎projects/lfx-component-lib/src/lib/containers/toast/toast.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div [class]="'lfx-toast ' + type()">
1+
<div [class]="'lfx-toast ' + type()" data-testid="lfx-toast-container">
22
<ng-content />
33
</div>

0 commit comments

Comments
 (0)