fix(testing): enable and fix several disabled unit and e2e tests (#5711)

e2e/angular/src/ng-add.test.ts

@@ -3,16 +3,26 @@ process.env.SELECTED_CLI = 'angular';
 import {
   checkFilesExist,
   readJson,
+  removeProject,
   runCLI,
   runCommand,
   runNgAdd,
   runNgNew,
+  uniq,
   updateFile,
 } from '@nrwl/e2e/utils';
 
+// TODO: Check why generated angular app is different
 xdescribe('Nrwl Convert to Nx Workspace', () => {
+  let proj;
+
+  afterEach(() => {
+    removeProject({ onlyOnCI: true });
+  });
+
   it('should generate a workspace', () => {
-    runNgNew();
+    proj = uniq('proj');
+    runNgNew(proj);
 
     // update package.json
     const packageJson = readJson('package.json');
@@ -28,7 +38,7 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
     ).not.toBeDefined();
 
     // update tsconfig.json
-    const tsconfigJson = readJson('tsconfig.base.json');
+    const tsconfigJson = readJson('tsconfig.json');
     tsconfigJson.compilerOptions.paths = { a: ['b'] };
     updateFile('tsconfig.json', JSON.stringify(tsconfigJson, null, 2));
 
@@ -36,23 +46,25 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
 
     // update angular-cli.json
     const angularCLIJson = readJson('angular.json');
-    angularCLIJson.projects.proj.architect.build.options.scripts = angularCLIJson.projects.proj.architect.test.options.scripts = [
-      'src/scripts.ts',
-    ];
-    angularCLIJson.projects.proj.architect.test.options.styles = [
+    angularCLIJson.projects[
+      proj
+    ].architect.build.options.scripts = angularCLIJson.projects[
+      proj
+    ].architect.test.options.scripts = ['src/scripts.ts'];
+    angularCLIJson.projects[proj].architect.test.options.styles = [
       'src/styles.css',
     ];
     updateFile('angular.json', JSON.stringify(angularCLIJson, null, 2));
 
     // run the command
-    runNgAdd('--npmScope projscope');
+    runNgAdd('--npm-scope projscope');
 
     // check that prettier config exits and that files have been moved!
     checkFilesExist(
       '.vscode/extensions.json',
       '.prettierrc',
-      'apps/proj/src/main.ts',
-      'apps/proj/src/app/app.module.ts'
+      `apps/${proj}/src/main.ts`,
+      `apps/${proj}/src/app/app.module.ts`
     );
 
     expect(readJson('.vscode/extensions.json').recommendations).toEqual([
@@ -106,10 +118,10 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
         'nx.json': '*',
       },
       projects: {
-        proj: {
+        [`${proj}`]: {
           tags: [],
         },
-        'proj-e2e': {
+        [`${proj}-e2e`]: {
           tags: [],
         },
       },
@@ -117,30 +129,30 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
 
     // check if angular-cli.json get merged
     const updatedAngularCLIJson = readJson('angular.json');
-    expect(updatedAngularCLIJson.projects.proj.root).toEqual('apps/proj');
-    expect(updatedAngularCLIJson.projects.proj.sourceRoot).toEqual(
-      'apps/proj/src'
+    expect(updatedAngularCLIJson.projects[proj].root).toEqual(`apps/${proj}`);
+    expect(updatedAngularCLIJson.projects[proj].sourceRoot).toEqual(
+      `apps/${proj}/src`
     );
 
-    expect(updatedAngularCLIJson.projects.proj.architect.build).toEqual({
+    expect(updatedAngularCLIJson.projects[proj].architect.build).toEqual({
       builder: '@angular-devkit/build-angular:browser',
       options: {
         aot: true,
-        outputPath: 'dist/apps/proj',
-        index: 'apps/proj/src/index.html',
-        main: 'apps/proj/src/main.ts',
-        polyfills: 'apps/proj/src/polyfills.ts',
-        tsConfig: 'apps/proj/tsconfig.app.json',
-        assets: ['apps/proj/src/favicon.ico', 'apps/proj/src/assets'],
-        styles: ['apps/proj/src/styles.css'],
-        scripts: ['apps/proj/src/scripts.ts'],
+        outputPath: `dist/apps/${proj}`,
+        index: `apps/${proj}/src/index.html`,
+        main: `apps/${proj}/src/main.ts`,
+        polyfills: `apps/${proj}/src/polyfills.ts`,
+        tsConfig: `apps/${proj}/tsconfig.app.json`,
+        assets: [`apps/${proj}/src/favicon.ico`, `apps/${proj}/src/assets`],
+        styles: [`apps/${proj}/src/styles.css`],
+        scripts: [`apps/${proj}/src/scripts.ts`],
       },
       configurations: {
         production: {
           fileReplacements: [
             {
-              replace: 'apps/proj/src/environments/environment.ts',
-              with: 'apps/proj/src/environments/environment.prod.ts',
+              replace: `apps/${proj}/src/environments/environment.ts`,
+              with: `apps/${proj}/src/environments/environment.prod.ts`,
             },
           ],
           budgets: [
@@ -166,7 +178,7 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
         },
       },
     });
-    expect(updatedAngularCLIJson.projects.proj.architect.serve).toEqual({
+    expect(updatedAngularCLIJson.projects[proj].architect.serve).toEqual({
       builder: '@angular-devkit/build-angular:dev-server',
       options: {
         browserTarget: 'proj:build',
@@ -178,49 +190,53 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
       },
     });
 
-    expect(updatedAngularCLIJson.projects.proj.architect.test).toEqual({
+    expect(updatedAngularCLIJson.projects[proj].architect.test).toEqual({
       builder: '@angular-devkit/build-angular:karma',
       options: {
-        main: 'apps/proj/src/test.ts',
-        polyfills: 'apps/proj/src/polyfills.ts',
-        tsConfig: 'apps/proj/tsconfig.spec.json',
-        karmaConfig: 'apps/proj/karma.conf.js',
-        styles: ['apps/proj/src/styles.css'],
-        scripts: ['apps/proj/src/scripts.ts'],
-        assets: ['apps/proj/src/favicon.ico', 'apps/proj/src/assets'],
+        main: `apps/${proj}/src/test.ts`,
+        polyfills: `apps/${proj}/src/polyfills.ts`,
+        tsConfig: `apps/${proj}/tsconfig.spec.json`,
+        karmaConfig: `apps/${proj}/karma.conf.js`,
+        styles: [`apps/${proj}/src/styles.css`],
+        scripts: [`apps/${proj}/src/scripts.ts`],
+        assets: [`apps/${proj}/src/favicon.ico`, `apps/${proj}/src/assets`],
       },
     });
 
-    expect(updatedAngularCLIJson.projects.proj.architect.lint).toEqual({
+    expect(updatedAngularCLIJson.projects[proj].architect.lint).toEqual({
       builder: '@angular-devkit/build-angular:tslint',
       options: {
         tsConfig: [
-          'apps/proj/tsconfig.app.json',
-          'apps/proj/tsconfig.spec.json',
+          `apps/${proj}/tsconfig.app.json`,
+          `apps/${proj}/tsconfig.spec.json`,
         ],
         exclude: ['**/node_modules/**'],
       },
     });
 
-    expect(updatedAngularCLIJson.projects['proj-e2e'].root).toEqual(
-      'apps/proj-e2e'
+    expect(updatedAngularCLIJson.projects[`${proj}-e2e`].root).toEqual(
+      `apps/${proj}-e2e`
     );
-    expect(updatedAngularCLIJson.projects['proj-e2e'].architect.e2e).toEqual({
-      builder: '@angular-devkit/build-angular:protractor',
-      configurations: {
-        production: {
-          devServerTarget: 'proj:serve:production',
+    expect(updatedAngularCLIJson.projects[`${proj}-e2e`].architect.e2e).toEqual(
+      {
+        builder: '@angular-devkit/build-angular:protractor',
+        configurations: {
+          production: {
+            devServerTarget: `${proj}:serve:production`,
+          },
         },
-      },
-      options: {
-        protractorConfig: 'apps/proj-e2e/protractor.conf.js',
-        devServerTarget: 'proj:serve',
-      },
-    });
-    expect(updatedAngularCLIJson.projects['proj-e2e'].architect.lint).toEqual({
+        options: {
+          protractorConfig: `apps/${proj}-e2e/protractor.conf.js`,
+          devServerTarget: `${proj}:serve`,
+        },
+      }
+    );
+    expect(
+      updatedAngularCLIJson.projects[`${proj}-e2e`].architect.lint
+    ).toEqual({
       builder: '@angular-devkit/build-angular:tslint',
       options: {
-        tsConfig: 'apps/proj-e2e/tsconfig.json',
+        tsConfig: `apps/${proj}-e2e/tsconfig.json`,
         exclude: ['**/node_modules/**'],
       },
     });
@@ -235,15 +251,15 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
     ]);
 
     runCLI('build --prod --outputHashing none');
-    checkFilesExist('dist/apps/proj/main-es2015.js');
+    checkFilesExist(`dist/apps/${proj}/main-es2015.js`);
   });
 
   it('should generate a workspace and not change dependencies, devDependencies, or vscode extensions if they already exist', () => {
     // create a new AngularCLI app
-    runNgNew();
-    const nxVersion = '9.3.0';
-    const schematicsVersion = '9.3.0';
-    const ngrxVersion = '9.2.0';
+    proj = uniq('proj');
+    runNgNew(proj);
+    const schematicsVersion = '12.0.0';
+    const ngrxVersion = '12.0.0';
     // update package.json
     const existingPackageJson = readJson('package.json');
     existingPackageJson.devDependencies['@nrwl/workspace'] = schematicsVersion;
@@ -260,7 +276,7 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
       })
     );
     // run the command
-    runNgAdd('--npmScope projscope --skip-install');
+    runNgAdd('--npm-scope projscope --skip-install');
 
     // check that dependencies and devDependencies remained the same
     const packageJson = readJson('package.json');
@@ -285,12 +301,13 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
 
   it('should handle different types of errors', () => {
     // create a new AngularCLI app
-    runNgNew();
+    proj = uniq('proj');
+    runNgNew(proj);
 
     // Only remove e2e directory
     runCommand('mv e2e e2e-bak');
     try {
-      runNgAdd('--npmScope projscope --skip-install');
+      runNgAdd('--npm-scope projscope --skip-install');
       fail('Did not handle not having a e2e directory');
     } catch (e) {
       expect(e.stderr.toString()).toContain(
@@ -304,7 +321,7 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
     // Remove package.json
     runCommand('mv package.json package.json.bak');
     try {
-      runNgAdd('--npmScope projscope --skip-install');
+      runNgAdd('--npm-scope projscope --skip-install');
       fail('Did not handle not having a package.json');
     } catch (e) {
       expect(e.stderr.toString()).toContain(
@@ -318,7 +335,7 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
     // Remove src
     runCommand('mv src src-bak');
     try {
-      runNgAdd('--npmScope projscope --skip-install');
+      runNgAdd('--npm-scope projscope --skip-install');
       fail('Did not handle not having a src directory');
     } catch (e) {
       expect(e.stderr.toString()).toContain('Path: src does not exist');
@@ -329,14 +346,15 @@ xdescribe('Nrwl Convert to Nx Workspace', () => {
   });
 
   it('should support preserveAngularCLILayout', () => {
-    runNgNew();
+    proj = uniq('proj');
+    runNgNew(proj);
     runNgAdd('--preserveAngularCLILayout');
 
     const updatedAngularCLIJson = readJson('angular.json');
-    expect(updatedAngularCLIJson.projects.proj.root).toEqual('');
-    expect(updatedAngularCLIJson.projects.proj.sourceRoot).toEqual('src');
+    expect(updatedAngularCLIJson.projects[proj].root).toEqual('');
+    expect(updatedAngularCLIJson.projects[proj].sourceRoot).toEqual('src');
 
     const output = runCLI('build');
-    expect(output).toContain(`> ng run proj:build`);
+    expect(output).toContain(`> ng run ${proj}:build`);
   });
 });

e2e/angular/src/storybook.test.ts

@@ -12,7 +12,7 @@ import {
 } from '@nrwl/e2e/utils';
 import { writeFileSync } from 'fs';
 
-xdescribe('Storybook schematics', () => {
+describe('Storybook schematics', () => {
   let proj: string;
 
   beforeEach(() => (proj = newProject()));
@@ -35,7 +35,7 @@ xdescribe('Storybook schematics', () => {
         module.exports = {
           stories: [],
           addons: ['@storybook/addon-knobs/register'],
-        };      
+        };
 
         console.log('hi there');
       `
@@ -56,7 +56,7 @@ xdescribe('Storybook schematics', () => {
   });
 
   describe('build storybook', () => {
-    it('should execute e2e tests using Cypress running against Storybook', () => {
+    xit('should execute e2e tests using Cypress running against Storybook', () => {
       const myapp = uniq('myapp');
       runCLI(`generate @nrwl/angular:app ${myapp} --no-interactive`);
 
@@ -73,16 +73,16 @@ xdescribe('Storybook schematics', () => {
           import React from 'react';
 
             import './button.css';
-            
+
             export type ButtonStyle = 'default' | 'primary' | 'warning';
-            
+
             /* eslint-disable-next-line */
             export interface ButtonProps {
               text?: string;
               style?: ButtonStyle;
               padding?: number;
             }
-            
+
             export const Button = (props: ButtonProps) => {
               return (
                 <button className={props.style} style={{ padding: \`\${props.padding}px\` }}>
@@ -90,8 +90,8 @@ xdescribe('Storybook schematics', () => {
                 </button>
               );
             };
-            
-            export default Button;            
+
+            export default Button;
             `
       );
       writeFileSync(
@@ -100,9 +100,9 @@ xdescribe('Storybook schematics', () => {
             import React from 'react';
             import { Button, ButtonStyle } from './button';
             import { text, number } from '@storybook/addon-knobs';
-            
+
             export default { title: 'Button' };
-            
+
             export const primary = () => (
               <Button
                 padding={number('Padding', 0)}
@@ -192,7 +192,7 @@ xdescribe('Storybook schematics', () => {
       );
     }, 1000000);
 
-    it('should build an Angular based storybook', () => {
+    xit('should build an Angular based storybook', () => {
       const angularStorybookLib = uniq('test-ui-lib');
       createTestUILib(angularStorybookLib);
       runCLI(
@@ -207,7 +207,7 @@ xdescribe('Storybook schematics', () => {
       ).toContain(`<title>Storybook</title>`);
     }, 1000000);
 
-    it('should build an Angular based storybook that references another lib', () => {
+    xit('should build an Angular based storybook that references another lib', () => {
       const angularStorybookLib = uniq('test-ui-lib');
       createTestUILib(angularStorybookLib);
       runCLI(
@@ -241,9 +241,9 @@ xdescribe('Storybook schematics', () => {
               title: 'My Test Cmp',
               component: MyTestCmpComponent,
             };
-            
+
             let x = 'hi';
-            
+
             export const primary = () => ({
               moduleMetadata: {
                 imports: [],

e2e/node/src/node.test.ts

@@ -19,6 +19,12 @@ import {
   updateWorkspaceConfig,
 } from '@nrwl/e2e/utils';
 import { accessSync, constants } from 'fs-extra';
+import { promisify } from 'util';
+
+const promisifiedTreeKill: (
+  pid: number,
+  signal: string
+) => Promise<void> = promisify(treeKill);
 
 function getData(): Promise<any> {
   return new Promise((resolve) => {
@@ -111,9 +117,11 @@ describe('Node Applications', () => {
     );
     const result = await getData();
     expect(result.message).toEqual(`Welcome to ${nodeapp}!`);
-    treeKill(p.pid, 'SIGTERM', (err) => {
+    try {
+      promisifiedTreeKill(p.pid, 'SIGTERM');
+    } catch (err) {
       expect(err).toBeFalsy();
-    });
+    }
   }, 120000);
 
   xit('should be able to generate a nest application', async () => {
@@ -162,9 +170,11 @@ describe('Node Applications', () => {
     );
     const result = await getData();
     expect(result.message).toEqual(`Welcome to ${nestapp}!`);
-    treeKill(p.pid, 'SIGTERM', (err) => {
+    try {
+      promisifiedTreeKill(p.pid, 'SIGTERM');
+    } catch (err) {
       expect(err).toBeFalsy();
-    });
+    }
   }, 120000);
 });
 

e2e/storybook/src/storybook.test.ts

@@ -14,7 +14,7 @@ describe('Storybook schematics', () => {
   afterEach(() => killPorts());
 
   describe('serve storybook', () => {
-    xit('should run a React based Storybook setup', async () => {
+    it('should run a React based Storybook setup', async () => {
       newProject();
 
       const reactStorybookLib = uniq('test-ui-lib-react');
@@ -82,10 +82,10 @@ describe('Storybook schematics', () => {
         tmpProjPath(`libs/${anotherReactLib}/src/lib/mytestcmp.tsx`),
         `
             import React from 'react';
-            
+
             /* eslint-disable-next-line */
             export interface MyTestCmpProps {}
-            
+
             export const MyTestCmp = (props: MyTestCmpProps) => {
               return (
                 <div>
@@ -93,7 +93,7 @@ describe('Storybook schematics', () => {
                 </div>
               );
             };
-            
+
             export default MyTestCmp;
         `
       );
@@ -112,18 +112,18 @@ describe('Storybook schematics', () => {
         ),
         `
             import React from 'react';
-            
+
             import { MyTestCmp, MyTestCmpProps } from '@${proj}/${anotherReactLib}';
-    
+
             export default {
               component: MyTestCmp,
               title: 'MyTestCmp',
             };
-    
+
             export const primary = () => {
               /* eslint-disable-next-line */
               const props: MyTestCmpProps = {};
-    
+
               return <MyTestCmp />;
             };
         `

e2e/utils/index.ts

@@ -16,6 +16,7 @@ import isCI = require('is-ci');
 import * as path from 'path';
 import { dirSync } from 'tmp';
 import * as killPort from 'kill-port';
+import * as stripJsonComments from 'strip-json-comments';
 
 interface RunCmdOpts {
   silenceError?: boolean;
@@ -115,11 +116,15 @@ export function packageInstall(pkg: string, projName?: string) {
   return install ? install.toString() : '';
 }
 
-export function runNgNew(): string {
-  return execSync(`../../node_modules/.bin/ng new proj --no-interactive`, {
-    cwd: e2eCwd,
-    env: process.env,
-  }).toString();
+export function runNgNew(projectName: string): string {
+  projName = projectName;
+  return execSync(
+    `../../node_modules/.bin/ng new ${projName} --no-interactive`,
+    {
+      cwd: e2eCwd,
+      env: process.env,
+    }
+  ).toString();
 }
 
 export function getSelectedPackageManager(): 'npm' | 'yarn' | 'pnpm' {
@@ -198,8 +203,8 @@ export async function removeProject({ onlyOnCI = false } = {}) {
 }
 
 export function runCypressTests() {
-  // temporary disable
-  return false;
+  // temporary enable
+  return true;
 }
 
 export function runCommandAsync(
@@ -292,13 +297,10 @@ export function runNgAdd(
 ): string {
   try {
     packageInstall('@nrwl/workspace');
-    return execSync(
-      `./node_modules/.bin/ng g @nrwl/workspace:ng-add ${command}`,
-      {
-        cwd: tmpProjPath(),
-        env: { ...(opts.env || process.env), NX_INVOKED_BY_RUNNER: undefined },
-      }
-    )
+    return execSync(`./node_modules/.bin/ng add @nrwl/workspace ${command}`, {
+      cwd: tmpProjPath(),
+      env: { ...(opts.env || process.env), NX_INVOKED_BY_RUNNER: undefined },
+    })
       .toString()
       .replace(
         /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
@@ -462,7 +464,12 @@ export function listFiles(dirName: string) {
 }
 
 export function readJson(f: string): any {
-  return JSON.parse(readFile(f));
+  const content = readFile(f);
+  try {
+    return JSON.parse(content);
+  } catch {
+    return JSON.parse(stripJsonComments(content));
+  }
 }
 
 export function readFile(f: string) {

e2e/workspace/src/workspace-aux-commands.test.ts

@@ -1169,8 +1169,10 @@ describe('Remove Project', () => {
     }
 
     expect(error).toBeDefined();
-    expect(error.stderr.toString()).toContain(
-      `${lib1} is still depended on by the following projects:\n${lib2}`
+    expect(error.stderr.toString()).toMatch(
+      new RegExp(
+        `${lib1} is still depended on by the following projects:\n\s*${lib2}`
+      )
     );
 
     /**

packages/angular/spec/testing-utils.spec.ts

@@ -1,26 +1,22 @@
 import { from } from 'rxjs';
 import { readAll, readFirst } from '../testing/src/testing-utils';
 
-xdescribe('TestingUtils', () => {
+describe('TestingUtils', () => {
   describe('readAll', () => {
-    it('should transform Observable<T> to Promise<Array<T>>', async (done) => {
+    it('should transform Observable<T> to Promise<Array<T>>', async () => {
       const obs = from([1, 2, 3]);
       const result = await readAll(obs);
 
       expect(result).toEqual([1, 2, 3]);
-
-      done();
     });
   });
 
   describe('readFirst', () => {
-    it('should transform first item emitted from Observable<T> to Promise<T>', async (done) => {
+    it('should transform first item emitted from Observable<T> to Promise<T>', async () => {
       const obs = from([1, 2, 3]);
       const result = await readFirst(obs);
 
       expect(result).toBe(1);
-
-      done();
     });
   });
 });

packages/angular/src/schematics/application/application.spec.ts

@@ -145,6 +145,7 @@ describe('app', () => {
       expect(appE2eSpec).toContain('Welcome to my-app!');
     });
 
+    // TODO: this test should be fixed
     xit('should work if the new project root is changed', async () => {
       appTree = await callRule(
         updateJsonInTree('/workspace.json', (json) => ({

packages/react/src/generators/stories/stories-lib.spec.ts

@@ -70,7 +70,7 @@ describe('react:stories for libraries', () => {
     ).toBeTruthy();
   });
 
-  xit('should not overwrite existing stories', () => {});
+  it('should not overwrite existing stories', () => {});
 
   it('should ignore files that do not contain components', async () => {
     // create another component

packages/storybook/jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
   transform: {
     '^.+\\.[tj]sx?$': 'ts-jest',
   },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html', 'json'],
   globals: {
     'ts-jest': { tsconfig: '<rootDir>/tsconfig.spec.json' },
   },

packages/storybook/src/executors/build-storybook/build-storybook.impl.spec.ts

@@ -8,15 +8,14 @@ import * as storybook from '@storybook/core/standalone';
 import storybookBuilder from './build-storybook.impl';
 import * as fileUtils from '@nrwl/workspace/src/core/file-utils';
 
-// TODO: re-enable these tests
-xdescribe('Build storybook', () => {
+describe('Build storybook', () => {
   let context: ExecutorContext;
 
   beforeEach(async () => {
     jest.spyOn(fileUtils, 'readPackageJson').mockReturnValue({
       devDependencies: {
-        '@storybook/addon-essentials': '^6.0.21',
-        '@storybook/angular': '^6.0.21',
+        '@storybook/addon-essentials': '^6.2.7',
+        '@storybook/angular': '^6.2.7',
       },
     });
 

packages/storybook/src/executors/storybook/storybook.impl.spec.ts

@@ -11,15 +11,15 @@ jest.mock('fs', () => require('memfs').fs);
 
 import storybookExecutor, { StorybookExecutorOptions } from './storybook.impl';
 
-// TODO: re-enable these tests
+// TODO: fix this test
 xdescribe('@nrwl/storybook:storybook', () => {
   let context: ExecutorContext;
   let options: StorybookExecutorOptions;
   beforeEach(() => {
     jest.spyOn(fileUtils, 'readPackageJson').mockReturnValue({
       devDependencies: {
-        '@storybook/addon-essentials': '^6.0.21',
-        '@storybook/angular': '^6.0.21',
+        '@storybook/addon-essentials': '^6.2.7',
+        '@storybook/angular': '^6.2.7',
       },
     });