Skip to content

Commit

Permalink
fix(storybook): improve and simplify e2e tests (#15734)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mandarini
mandarini committed Mar 27, 2023
1 parent 1f935a7 commit 4e2b07e
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 103 deletions.
50 changes: 21 additions & 29 deletions e2e/storybook-angular/src/storybook-angular.test.ts
View file
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
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', () => {
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', () => {
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);
}, 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', () => {
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
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
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',
});
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`
);

// 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
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);
});
});

0 comments on commit 4e2b07e

Please sign in to comment.