Skip to content

Commit

Permalink
fix(storybook): update and enable e2e test for standalone (#17217)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mandarini
mandarini authored May 26, 2023
1 parent 1efde20 commit 8999993
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 82 deletions.
36 changes: 6 additions & 30 deletions e2e/storybook/src/storybook-nested.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,46 +70,22 @@ describe('Storybook generators and executors for standalone workspaces - using R
checkFilesExist(`dist/storybook/${appName}/index.html`);
}, 100_000);

// This needs fixing on the Storybook side
// vite paths resolution is not working on standalone
xit('should build a React based storybook that references another lib and uses Vite', () => {
const anotherReactLib = uniq('test-another-lib-react');
runCLI(`generate @nx/react:lib ${anotherReactLib} --no-interactive`);
// create a React component we can reference
createFileSync(tmpProjPath(`${anotherReactLib}/src/lib/mytestcmp.tsx`));
writeFileSync(
tmpProjPath(`${anotherReactLib}/src/lib/mytestcmp.tsx`),
`
export function MyTestCmp() {
return (
<div>
<h1>Welcome to OtherLib!</h1>
</div>
);
}
export default MyTestCmp;
`
);
// update index.ts and export it
writeFileSync(
tmpProjPath(`${anotherReactLib}/src/index.ts`),
`
export * from './lib/mytestcmp';
`
it('should build a React based storybook that references another lib and uses Vite', () => {
runCLI(
`generate @nx/react:lib my-lib --bundler=vite --unitTestRunner=none --no-interactive`
);

// create a component and a story in the first lib to reference the cmp from the 2nd lib
createFileSync(tmpProjPath(`src/app/test-button.tsx`));
writeFileSync(
tmpProjPath(`src/app/test-button.tsx`),
`
import { MyTestCmp } from '@${wsName}/${anotherReactLib}';
import { MyLib } from '@${wsName}/my-lib';
export function TestButton() {
return (
<div>
<MyTestCmp />
<MyLib />
</div>
);
}
Expand Down Expand Up @@ -141,6 +117,6 @@ describe('Storybook generators and executors for standalone workspaces - using R
// build React lib
runCLI(`run ${appName}:build-storybook --verbose`);
checkFilesExist(`dist/storybook/${appName}/index.html`);
}, 100_000);
}, 150_000);
});
});
108 changes: 57 additions & 51 deletions e2e/storybook/src/storybook.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,95 +9,101 @@ import {
uniq,
} from '@nx/e2e/utils';
import { writeFileSync } from 'fs';
import { createFileSync } from 'fs-extra';

// TODO: re-enable once the issue is fixed with long build times
describe.skip('Storybook generators and executors for monorepos', () => {
const reactStorybookLib = uniq('test-ui-lib-react');
describe('Storybook generators and executors for monorepos', () => {
const reactStorybookApp = uniq('react-app');
let proj;
beforeAll(() => {
proj = newProject();
runCLI(`generate @nx/react:lib ${reactStorybookLib} --no-interactive`);
runCLI(
`generate @nx/react:storybook-configuration ${reactStorybookLib} --generateStories --no-interactive --bundler=webpack`
`generate @nx/react:app ${reactStorybookApp} --bundler=webpack --no-interactive`
);
runCLI(
`generate @nx/react:storybook-configuration ${reactStorybookApp} --generateStories --no-interactive --bundler=webpack`
);
});

afterAll(() => {
cleanupProject();
});

describe('serve and build storybook', () => {
// 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 () => {
// serve the storybook
it('should serve a React based Storybook setup that uses Vite', async () => {
const p = await runCommandUntil(
`run ${reactStorybookLib}:storybook`,
`run ${reactStorybookApp}:storybook`,
(output) => {
return /Storybook.*started/gi.test(output);
}
);
p.kill();
}, 60000);
}, 600_000);
});

describe('build storybook', () => {
it('should build a React based storybook setup that uses webpack', () => {
// build
runCLI(`run ${reactStorybookLib}:build-storybook --verbose`);
checkFilesExist(`dist/storybook/${reactStorybookLib}/index.html`);
}, 60000);
runCLI(`run ${reactStorybookApp}:build-storybook --verbose`);
checkFilesExist(`dist/storybook/${reactStorybookApp}/index.html`);
}, 300_000);

// This test makes sure path resolution works
it('should build a React based storybook that references another lib and uses webpack', () => {
const anotherReactLib = uniq('test-another-lib-react');
runCLI(`generate @nx/react:lib ${anotherReactLib} --no-interactive`);
// create a React component we can reference
writeFileSync(
tmpProjPath(`libs/${anotherReactLib}/src/lib/mytestcmp.tsx`),
`
export function MyTestCmp() {
return (
<div>
<h1>Welcome to OtherLib!</h1>
</div>
);
}
export default MyTestCmp;
`
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 --no-interactive`
);

// create a component in the first lib to reference the cmp from the 2nd lib
createFileSync(
tmpProjPath(`apps/${reactStorybookApp}/src/app/test-button.tsx`)
);
// update index.ts and export it
writeFileSync(
tmpProjPath(`libs/${anotherReactLib}/src/index.ts`),
tmpProjPath(`apps/${reactStorybookApp}/src/app/test-button.tsx`),
`
export * from './lib/mytestcmp';
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(`apps/${reactStorybookApp}/src/app/test-button.stories.tsx`)
);
writeFileSync(
tmpProjPath(
`libs/${reactStorybookLib}/src/lib/myteststory.stories.tsx`
`apps/${reactStorybookApp}/src/app/test-button.stories.tsx`
),
`
import type { Meta } from '@storybook/react';
import { MyTestCmp } from '@${proj}/${anotherReactLib}';
const Story: Meta<typeof MyTestCmp> = {
component: MyTestCmp,
title: 'MyTestCmp',
};
export default Story;
export const Primary = {
args: {},
};
`
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 ${reactStorybookLib}:build-storybook --verbose`);
checkFilesExist(`dist/storybook/${reactStorybookLib}/index.html`);
}, 60000);
runCLI(`run ${reactStorybookApp}:build-storybook --verbose`);
checkFilesExist(`dist/storybook/${reactStorybookApp}/index.html`);
}, 300_000);
});
});
11 changes: 10 additions & 1 deletion packages/storybook/src/generators/init/init.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ import { initGenerator as jsInitGenerator } from '@nx/js';
import {
litVersion,
nxVersion,
reactNativeStorybookLoader,
reactVersion,
storybookVersion,
storybookReactNativeVersion,
viteVersion,
} from '../../utils/versions';
import { Schema } from './schema';
import {
Expand Down Expand Up @@ -109,6 +109,15 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
devDependencies['@storybook/addon-ondevice-notes'] =
storybookReactNativeVersion;
}

if (schema.uiFramework.endsWith('-vite')) {
if (
!packageJson.dependencies['vite'] &&
!packageJson.devDependencies['vite']
) {
devDependencies['vite'] = viteVersion;
}
}
}

return addDependenciesToPackageJson(host, dependencies, devDependencies);
Expand Down
1 change: 1 addition & 0 deletions packages/storybook/src/utils/versions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ export const tsNodeVersion = '10.9.1';

export const storybookVersion = '^7.0.9';
export const reactVersion = '^18.2.0';
export const viteVersion = '^4.3.4';

1 comment on commit 8999993

@vercel
Copy link

@vercel vercel bot commented on 8999993 May 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nx-dev – ./

nx-five.vercel.app
nx-dev-nrwl.vercel.app
nx.dev
nx-dev-git-master-nrwl.vercel.app

Please sign in to comment.