-
Notifications
You must be signed in to change notification settings - Fork 2.2k
/
storybook.test.ts
145 lines (130 loc) · 4.38 KB
/
storybook.test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import {
checkFilesExist,
cleanupProject,
killPorts,
listFiles,
newProject,
readFile,
runCLI,
runCommandUntil,
tmpProjPath,
uniq,
updateFile,
} from '@nx/e2e/utils';
import { writeFileSync } from 'fs';
import { createFileSync } from 'fs-extra';
describe('Storybook generators and executors for monorepos', () => {
const reactStorybookApp = uniq('react-app');
let proj;
beforeAll(async () => {
proj = newProject({
packages: ['@nx/react'],
unsetProjectNameAndRootFormat: false,
});
runCLI(
`generate @nx/react:app ${reactStorybookApp} --bundler=webpack --project-name-and-root-format=as-provided --no-interactive`
);
runCLI(
`generate @nx/react:storybook-configuration ${reactStorybookApp} --generateStories --no-interactive --bundler=webpack`
);
});
afterAll(() => {
cleanupProject();
});
// TODO: enable this when Storybook webpack server becomes a bit faster
xdescribe('serve storybook', () => {
afterEach(() => killPorts());
it('should serve a React based Storybook setup that uses webpack', async () => {
const p = await runCommandUntil(
`run ${reactStorybookApp}:storybook`,
(output) => {
return /Storybook.*started/gi.test(output);
}
);
p.kill();
}, 600_000);
});
describe('build storybook', () => {
it('should build a React based storybook setup that uses webpack', () => {
// build
runCLI(`run ${reactStorybookApp}:build-storybook --verbose`);
checkFilesExist(`${reactStorybookApp}/storybook-static/index.html`);
}, 300_000);
// This test makes sure path resolution works
it('should build a React based storybook that references another lib and uses rollup', () => {
runCLI(
`generate @nx/react:lib my-lib --bundler=rollup --unitTestRunner=none --project-name-and-root-format=as-provided --no-interactive`
);
// create a component in the first lib to reference the cmp from the 2nd lib
createFileSync(
tmpProjPath(`${reactStorybookApp}/src/app/test-button.tsx`)
);
writeFileSync(
tmpProjPath(`${reactStorybookApp}/src/app/test-button.tsx`),
`
import { MyLib } from '@${proj}/my-lib';
export function TestButton() {
return (
<div>
<MyLib />
</div>
);
}
export default TestButton;
`
);
// create a story in the first lib to reference the cmp from the 2nd lib
createFileSync(
tmpProjPath(`${reactStorybookApp}/src/app/test-button.stories.tsx`)
);
writeFileSync(
tmpProjPath(`${reactStorybookApp}/src/app/test-button.stories.tsx`),
`
import type { Meta } from '@storybook/react';
import { TestButton } from './test-button';
const Story: Meta<typeof TestButton> = {
component: TestButton,
title: 'TestButton',
};
export default Story;
export const Primary = {
args: {},
};
`
);
// build React lib
runCLI(`run ${reactStorybookApp}:build-storybook --verbose`);
checkFilesExist(`${reactStorybookApp}/storybook-static/index.html`);
}, 300_000);
it('should bundle in non-sensitive NX_ environment variables', () => {
updateFile(
`${reactStorybookApp}/.storybook/main.ts`,
(content) => `
${content}
console.log(process.env);
`
);
runCLI(`run ${reactStorybookApp}:build-storybook --verbose`, {
env: {
NX_CLOUD_ENCRYPTION_KEY: 'secret',
NX_CLOUD_ACCESS_TOKEN: 'secret',
NX_PUBLIC_TEST: 'foobar',
},
});
// Check all output chunks for bundled environment variables
const outDir = `${reactStorybookApp}/storybook-static`;
const files = listFiles(outDir);
let nxPublicKeyFound = false;
for (const file of files) {
if (!file.endsWith('.js')) continue;
const content = readFile(`${outDir}/${file}`);
expect(content).not.toMatch(/NX_CLOUD_ENCRYPTION_KEY/);
expect(content).not.toMatch(/NX_CLOUD_ACCESS_TOKEN/);
if (content.match(/NX_PUBLIC_TEST/)) {
nxPublicKeyFound = true;
}
}
expect(nxPublicKeyFound).toBe(true);
}, 300_000);
});
});