Skip to content

Commit 7e5b89a

Browse files
hahnbeeleeNicoZweifel
hahnbeelee
and
NicoZweifel
authored
Bump to 0.3.12 (#73)
* Bump to 0.3.12 * Hotfix/interaction-tests (#74) * code group, code block forwardref * Update CodeGroup.tsx * add interaction tests * comments * Update CodeBlock.stories.tsx * fix test, add interactions debugger * prettier * Merge main (#75) Husky/lint staged (#72) --------- Co-authored-by: Nico Zweifel <34443492+NicoZweifel@users.noreply.github.com>
1 parent 5cf79c3 commit 7e5b89a

File tree

5 files changed

+4722
-2472
lines changed

5 files changed

+4722
-2472
lines changed

‎.storybook/main.js

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ const path = require('path');
33
module.exports = {
44
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
55
framework: '@storybook/react',
6+
features: {
7+
interactionsDebugger: true,
8+
},
69
core: {
710
builder: '@storybook/builder-webpack5',
811
},

‎package.json

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@mintlify/components",
3-
"version": "0.3.11",
3+
"version": "0.3.12",
44
"description": "Open-source library of UI components made with React and TailwindCSS.",
55
"main": "./dist/index.js",
66
"types": "./dist/index.d.ts",
@@ -21,6 +21,7 @@
2121
"prepare": "husky install && yarn build",
2222
"storybook": "start-storybook -p 6006",
2323
"build-storybook": "build-storybook",
24+
"test-storybook": "test-storybook",
2425
"lint": "eslint src --cache"
2526
},
2627
"author": "Mintlify",
@@ -47,13 +48,16 @@
4748
"@storybook/addon-links": "^6.5.13",
4849
"@storybook/addon-postcss": "^2.0.0",
4950
"@storybook/builder-webpack5": "^6.5.13",
51+
"@storybook/jest": "^0.0.10",
5052
"@storybook/manager-webpack5": "^6.5.13",
5153
"@storybook/react": "^6.5.13",
54+
"@storybook/test-runner": "^0.9.4",
5255
"@storybook/testing-library": "^0.0.13",
5356
"@tailwindcss/typography": "^0.5.7",
5457
"@trivago/prettier-plugin-sort-imports": "3.x",
5558
"@types/lodash.set": "^4.3.7",
5659
"@types/react": "^18.0.21",
60+
"@types/uuid": "^9.0.0",
5761
"@typescript-eslint/eslint-plugin": "^5.52.0",
5862
"@typescript-eslint/parser": "^5.52.0",
5963
"autoprefixer": "^10.4.8",
@@ -86,11 +90,9 @@
8690
"trim-newlines": "^4.0.2",
8791
"ts-loader": "^9.3.1",
8892
"typescript": "^4.9.4",
89-
"webpack": "^5.75.0",
90-
"webpack-cli": "^4.10.0",
91-
"@storybook/jest": "^0.0.10",
9293
"uuid": "^9.0.0",
93-
"@types/uuid": "^9.0.0"
94+
"webpack": "^5.75.0",
95+
"webpack-cli": "^4.10.0"
9496
},
9597
"dependencies": {
9698
"assert": "^2.0.0",

‎src/stories/Interactive/Code/CodeBlock.stories.tsx

+32-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { expect } from '@storybook/jest';
1+
import { expect, jest } from '@storybook/jest';
22
import { ComponentStory, ComponentMeta } from '@storybook/react';
33
import { userEvent, within } from '@storybook/testing-library';
44
import * as React from 'react';
@@ -72,28 +72,47 @@ CodeBlockInteractions.args = {
7272
filename: fileName,
7373
};
7474
CodeBlockInteractions.play = async ({ canvasElement }) => {
75+
let clipboardData: unknown = '';
76+
77+
jest.spyOn(window, 'navigator', 'get').mockImplementation(() => {
78+
return {
79+
clipboard: {
80+
writeText: jest.fn((data) => {
81+
clipboardData = data;
82+
}),
83+
readText: jest.fn(() => {
84+
return clipboardData;
85+
}),
86+
},
87+
} as never;
88+
});
89+
7590
const canvas = within(canvasElement);
76-
// 👇 Assert DOM structure.
91+
await expect(window.navigator.clipboard).toBeDefined();
92+
7793
await delay(20);
78-
await expect(canvas.getByText(fileName)).toBeInTheDOM();
79-
await expect(canvas.getByText(testString)).toBeInTheDOM();
80-
await expect(canvas.getByText('Copy')).toBeInTheDOM();
81-
await expect(canvas.getByText(testString)).toBeInTheDOM;
94+
await userEvent.hover(await within(canvasElement).getByRole('button'));
95+
96+
// 👇 Assert DOM structure.
97+
await expect(canvas.getByText(fileName)).toBeInTheDocument();
98+
await expect(canvas.getByText(testString)).toBeInTheDocument();
99+
await expect(canvas.getByText('Copy')).toBeInTheDocument();
100+
await expect(canvas.getByText(testString)).toBeInTheDocument;
82101
await expect(canvas.getByText('Copy')).not.toBeVisible();
83102

84103
// 👇 Simulate copy to clipboard.
85-
await userEvent.click(canvas.getByText('Copy'));
104+
await userEvent.click(canvas.getByRole('button'));
105+
await delay(500);
106+
86107
// 👇 Assert DOM structure.
87-
await delay(20);
88-
await expect(canvas.getByText('Copied')).toBeVisible();
89-
await expect(canvas.getByText('Copied')).toBeInTheDOM();
108+
await expect(canvas.queryByText('Copied')).toBeVisible();
109+
await expect(canvas.queryByText('Copied')).toBeInTheDocument();
90110

91111
// 👇 Assert if copied to clipboard.
92-
await expect(await navigator.clipboard.readText()).toEqual(testString);
93-
112+
await expect(await window.navigator.clipboard.readText()).toEqual(testString);
94113
// 👇 Wait for Tooltip to close.
95114
await delay(3000);
96-
97115
// 👇 Expect Tooltip to be hidden.
116+
98117
await expect(canvas.getByText('Copy')).not.toBeVisible();
99118
};

‎src/stories/Interactive/Code/CodeGroup.stories.tsx

+40-18
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { expect } from '@storybook/jest';
1+
import { expect, jest } from '@storybook/jest';
22
import { ComponentStory, ComponentMeta } from '@storybook/react';
33
import { userEvent, within } from '@storybook/testing-library';
44
import * as React from 'react';
@@ -96,44 +96,66 @@ CodeGroupInteractions.args = {
9696
</CodeBlock>,
9797
],
9898
};
99+
99100
CodeGroupInteractions.play = async ({ canvasElement }) => {
101+
let clipboardData: unknown = '';
102+
103+
jest.spyOn(window, 'navigator', 'get').mockImplementation(() => {
104+
return {
105+
clipboard: {
106+
writeText: jest.fn((data) => {
107+
clipboardData = data;
108+
}),
109+
readText: jest.fn(() => {
110+
return clipboardData;
111+
}),
112+
},
113+
} as never;
114+
});
115+
100116
const canvas = within(canvasElement);
101-
// 👇 Assert DOM structure
117+
await expect(window.navigator.clipboard).toBeDefined();
118+
102119
await delay(20);
103-
await expect(canvas.getByText(filename)).toBeInTheDOM();
104-
await expect(canvas.getByText('Copy')).toBeInTheDOM();
120+
await userEvent.hover(await within(canvasElement).getByRole('button'));
121+
122+
// 👇 Assert DOM structure.
123+
await expect(canvas.getByText(filename)).toBeInTheDocument();
124+
await expect(canvas.getByText(testString)).toBeInTheDocument();
125+
await expect(canvas.getByText('Copy')).toBeInTheDocument();
126+
await expect(canvas.getByText(testString)).toBeInTheDocument;
105127
await expect(canvas.getByText('Copy')).not.toBeVisible();
106-
await expect(canvas.getByText(testString)).toBeInTheDOM;
128+
107129
// 👇 Simulate copy to clipboard.
108-
await userEvent.click(canvas.getByText('Copy'));
130+
await userEvent.click(canvas.getByRole('button'));
109131

110132
// 👇 Assert DOM structure.
111-
await delay(20);
112-
await expect(canvas.getByText('Copied')).toBeInTheDOM();
133+
await delay(100);
134+
await expect(canvas.getByText('Copied')).toBeInTheDocument();
113135
await expect(canvas.getByText('Copied')).toBeVisible();
114136
// 👇 Assert if copied to clipboard.
115-
await expect(await navigator.clipboard.readText()).toEqual(testString);
137+
await expect(await window.navigator.clipboard.readText()).toEqual(testString);
116138

117139
// 👇 Simulate tab switch.
118140
await userEvent.click(canvas.getByText(filename2));
119-
await delay(20);
120-
await expect(canvas.getByText(filename2)).toBeInTheDOM();
121-
await expect(canvas.getByText(testString2)).toBeInTheDOM();
141+
await delay(100);
142+
await expect(canvas.getByText(filename2)).toBeInTheDocument();
143+
await expect(canvas.getByText(testString2)).toBeInTheDocument();
122144

123145
// 👇 Simulate copy to clipboard click.
124-
await userEvent.click(canvas.getByText('Copied'));
146+
await userEvent.click(canvas.getByRole('button'));
147+
await delay(500);
125148

126149
// 👇 Assert DOM structure.
127-
await delay(20);
128-
await expect(canvas.getByText('Copied')).toBeInTheDOM();
129-
await expect(canvas.getByText('Copied')).toBeVisible();
150+
await expect(canvas.queryByText('Copied')).toBeInTheDocument();
151+
await expect(canvas.queryByText('Copied')).toBeVisible();
130152

131153
// 👇 Assert if copied to clipboard.
132-
await expect(await navigator.clipboard.readText()).toEqual(testString2);
154+
await expect(await window.navigator.clipboard.readText()).toEqual(testString2);
133155

134156
// 👇 Wait for Tooltip to close.
135157
await delay(3000);
136158

137159
// 👇 Expect Tooltip to be hidden.
138-
await expect(canvas.getByText('Copy')).not.toBeVisible();
160+
await expect(canvas.queryByText('Copy')).not.toBeVisible();
139161
};

0 commit comments

Comments
 (0)