Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(storybook): improve and simplify e2e tests #15734

Merged
merged 1 commit into from
Mar 27, 2023
Merged

fix(storybook): improve and simplify e2e tests #15734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 21 additions & 29 deletions e2e/storybook-angular/src/storybook-angular.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,51 @@
import {
checkFilesExist,
cleanupProject,
getPackageManagerCommand,
killPorts,
newProject,
runCLI,
runCommand,
runCommandUntil,
runCypressTests,
tmpProjPath,
uniq,
updateJson,
} from '@nrwl/e2e/utils';
import { writeFileSync } from 'fs';

describe('Storybook for Angular', () => {
const angularStorybookLib = uniq('test-ui-lib');
describe('Storybook executors for Angular', () => {
const angularStorybookLib = uniq('test-ui-ng-lib');
beforeAll(() => {
newProject();
createTestUILib(angularStorybookLib);
runCLI(
`generate @nrwl/angular:storybook-configuration ${angularStorybookLib} --configureCypress --generateStories --generateCypressSpecs --no-interactive`
);

// TODO(jack): Overriding enhanced-resolve to 5.10.0 now until the package is fixed.
// TODO: Use --storybook7Configuration and remove this
// See: https://github.com/webpack/enhanced-resolve/issues/362
updateJson('package.json', (json) => {
json['overrides'] = {
'enhanced-resolve': '5.10.0',
};

return json;
});
runCommand(getPackageManagerCommand().install);

console.log('Here is the Nx report: ');
runCLI(`report`);
});

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

// TODO: Use --storybook7Configuration and re-enable this
xdescribe('Storybook builder', () => {
it('shoud build storybook', () => {
// TODO: Enable on SB7
xdescribe('serve and build storybook', () => {
afterAll(() => killPorts());

it('should serve an Angular based Storybook setup', async () => {
const p = await runCommandUntil(
`run ${angularStorybookLib}:storybook`,
(output) => {
return /Storybook.*started/gi.test(output);
}
);
p.kill();
}, 200_000);

it('shoud build an Angular based storybook', () => {
runCLI(`run ${angularStorybookLib}:build-storybook --verbose`);
checkFilesExist(`dist/storybook/${angularStorybookLib}/index.html`);
});
}, 200_000);
});

// TODO: Use --storybook7Configuration and re-enable this
// However much I increase the timeout, this takes forever?
xdescribe('run cypress tests using storybook', () => {
it('should execute e2e tests using Cypress running against Storybook', async () => {
if (runCypressTests()) {
Expand Down Expand Up @@ -83,7 +78,7 @@ describe('Storybook for Angular', () => {
expect(e2eResults).toContain('All specs passed!');
expect(await killPorts()).toBeTruthy();
}
}, 1000000);
}, 1000_000);
});
});

Expand Down Expand Up @@ -125,7 +120,4 @@ export function createTestUILib(libName: string): void {
</button>
`
);
runCLI(
`g @nrwl/angular:component test-other --project=${libName} --no-interactive`
);
}
62 changes: 10 additions & 52 deletions e2e/storybook/src/storybook-nested.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,38 @@
import {
checkFilesExist,
cleanupProject,
getPackageManagerCommand,
getSelectedPackageManager,
killPorts,
readJson,
runCLI,
runCommand,
runCommandUntil,
runCreateWorkspace,
tmpProjPath,
uniq,
updateJson,
} from '@nrwl/e2e/utils';
import { writeFileSync } from 'fs';

describe('Storybook generators for nested workspaces', () => {
const previousPM = process.env.SELECTED_PM;
describe('Storybook generators and executors for standalone workspaces - using React + Vite', () => {
const wsName = uniq('react');
const appName = uniq('app');
const packageManager = getSelectedPackageManager() || 'yarn';

beforeAll(() => {
process.env.SELECTED_PM = 'yarn';

// create a workspace with a single react app at the root
runCreateWorkspace(wsName, {
preset: 'react-standalone',
appName,
style: 'css',
packageManager,
bundler: 'vite',
});

runCLI(
`generate @nrwl/react:storybook-configuration ${appName} --generateStories --no-interactive`
);

// TODO(jack): Overriding enhanced-resolve to 5.10.0 now until the package is fixed.
// TODO: Use --storybook7Configuration and remove this
// See: https://github.com/webpack/enhanced-resolve/issues/362
updateJson('package.json', (json) => {
json['overrides'] = {
'enhanced-resolve': '5.10.0',
};

return json;
});

runCommand(getPackageManagerCommand().install);

console.log('Here is the Nx report: ');
runCLI(`report`);
});

afterAll(() => {
cleanupProject();
process.env.SELECTED_PM = previousPM;
});

describe('Storybook generated files', () => {
mandarini marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -72,47 +48,29 @@ describe('Storybook generators for nested workspaces', () => {
const tsconfig = readJson(`tsconfig.json`);
expect(tsconfig['ts-node']?.compilerOptions?.module).toEqual('commonjs');
});

it('should generate correct files for nested app', () => {
const nestedAppName = uniq('other-app');
runCLI(`generate @nrwl/react:app ${nestedAppName} --no-interactive`);
runCLI(
`generate @nrwl/react:storybook-configuration ${nestedAppName} --generateStories --no-interactive`
);
checkFilesExist(
`${nestedAppName}/.storybook/main.js`,
`${nestedAppName}/.storybook/tsconfig.json`
);
});
});

// TODO: Use --storybook7Configuration and re-enable this test
// TODO: Use --storybook7Configuration and re-enable this test - or else it NEEDS NODE 16
xdescribe('serve storybook', () => {
mandarini marked this conversation as resolved.
Show resolved Hide resolved
afterEach(() => killPorts());

it('should run a React based Storybook setup', async () => {
// serve the storybook
it('should serve a React based Storybook setup that uses Vite', async () => {
const p = await runCommandUntil(`run ${appName}:storybook`, (output) => {
return /Storybook.*started/gi.test(output);
});
p.kill();
}, 1000000);
mandarini marked this conversation as resolved.
Show resolved Hide resolved
}, 40000);
});

// TODO: Use --storybook7Configuration and re-enable this test
// TODO: Use --storybook7Configuration and re-enable this test - or else it NEEDS NODE 16
xdescribe('build storybook', () => {
mandarini marked this conversation as resolved.
Show resolved Hide resolved
it('should build and lint a React based storybook', () => {
// build
it('should build a React based storybook that uses Vite', () => {
runCLI(`run ${appName}:build-storybook --verbose`);
checkFilesExist(`dist/storybook/${appName}/index.html`);
}, 40000);

// lint
const output = runCLI(`run ${appName}:lint`);
expect(output).toContain('All files pass linting.');
}, 1000000);

// Not sure how much sense this test makes - maybe it's noise?
xit('should build a React based storybook that references another lib', () => {
// This test makes sure path resolution works
mandarini marked this conversation as resolved.
Show resolved Hide resolved
xit('should build a React based storybook that references another lib and uses Vite', () => {
const reactLib = uniq('test-lib-react');
runCLI(`generate @nrwl/react:lib ${reactLib} --no-interactive`);
// create a React component we can reference
Expand Down Expand Up @@ -168,6 +126,6 @@ describe('Storybook generators for nested workspaces', () => {
// build React lib
runCLI(`run ${reactLib}:build-storybook --verbose`);
checkFilesExist(`dist/storybook/${reactLib}/index.html`);
}, 1000000);
}, 40000);
});
});
38 changes: 16 additions & 22 deletions e2e/storybook/src/storybook.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,18 @@ import {
} from '@nrwl/e2e/utils';
import { writeFileSync } from 'fs';

describe('Storybook generators for non-angular projects', () => {
describe('Storybook generators and executors for monorepos', () => {
const previousPM = process.env.SELECTED_PM;
const reactStorybookLib = uniq('test-ui-lib-react');
let proj;
beforeAll(() => {
proj = newProject();
process.env.SELECTED_PM = 'yarn';
proj = newProject({
packageManager: 'yarn',
mandarini marked this conversation as resolved.
Show resolved Hide resolved
});
runCLI(`generate @nrwl/react:lib ${reactStorybookLib} --no-interactive`);
runCLI(
`generate @nrwl/react:storybook-configuration ${reactStorybookLib} --generateStories --no-interactive`
`generate @nrwl/react:storybook-configuration ${reactStorybookLib} --generateStories --no-interactive --bundler=webpack`
mandarini marked this conversation as resolved.
Show resolved Hide resolved
);

// TODO(jack): Overriding enhanced-resolve to 5.10.0 now until the package is fixed.
Expand All @@ -34,20 +38,17 @@ describe('Storybook generators for non-angular projects', () => {
return json;
});
runCommand(getPackageManagerCommand().install);

console.log('Here is the Nx report: ');
runCLI(`report`);
});

afterAll(() => {
cleanupProject();
process.env.SELECTED_PM = previousPM;
});

// TODO: Use --storybook7Configuration and re-enable this test
xdescribe('serve storybook', () => {
describe('serve and build storybook', () => {
afterEach(() => killPorts());

it('should run a React based Storybook setup', async () => {
it('should serve a React based Storybook setup that uses webpack', async () => {
// serve the storybook
const p = await runCommandUntil(
`run ${reactStorybookLib}:storybook`,
Expand All @@ -56,23 +57,16 @@ describe('Storybook generators for non-angular projects', () => {
}
);
p.kill();
}, 1000000);
});
}, 20000);

// TODO: Use --storybook7Configuration and re-enable this test
xdescribe('build storybook', () => {
it('should build and lint a React based 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`);
}, 40000);

// lint
mandarini marked this conversation as resolved.
Show resolved Hide resolved
const output = runCLI(`run ${reactStorybookLib}:lint`);
expect(output).toContain('All files pass linting.');
}, 1000000);

// I am not sure how much sense this test makes - Maybe it's just adding noise
xit('should build a React based storybook that references another lib', () => {
// 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 @nrwl/react:lib ${anotherReactLib} --no-interactive`);
// create a React component we can reference
Expand Down Expand Up @@ -123,6 +117,6 @@ describe('Storybook generators for non-angular projects', () => {
// build React lib
runCLI(`run ${reactStorybookLib}:build-storybook --verbose`);
checkFilesExist(`dist/storybook/${reactStorybookLib}/index.html`);
}, 1000000);
}, 40000);
});
});