chore: Add Mocha option to ng-schematic (#9259)

**What kind of change does this PR introduce?**

Adds Mocha as option for `ng-schematics`

**Did you add tests for your changes?**

Yes

**If relevant, did you update the documentation?**

No

**Summary**

User want a simple solution for the Testing library of their choose 

**Does this PR introduce a breaking change?**

No

**Other information**
There are some improvements around the Babel that we can make so we
don't have duplicate code and files (In a Feature PR)

packages/ng-schematics/src/schematics/ng-add/files/base/e2e/tests/app.e2e.ts.template

@@ -1,12 +1,21 @@
 import * as puppeteer from 'puppeteer';
+<% if(testingFramework == 'mocha') { %>
+import * as assert from 'assert';
+<% } %>
 
 describe('App test', function () {
   let browser: puppeteer.Browser;
   let page: puppeteer.Page;
 
+<% if(testingFramework == 'jasmine' || testingFramework == 'jest') { %>
   beforeAll(async () => {
     browser = await puppeteer.launch();
   });
+<% } %><% if(testingFramework == 'mocha') { %>
+  before(async () => {
+    browser = await puppeteer.launch();
+  });
+<% } %>
 
   beforeEach(async () => {
     page = await browser.newPage();
@@ -17,19 +26,25 @@ describe('App test', function () {
     await page.close();
   });
 
-  <% if(testingFramework == 'jest') { %>
+<% if(testingFramework == 'jest') { %>
   afterAll(async () => {
     await browser.close();
   });
-  <% } %>
+<% } %><% if(testingFramework == 'mocha') { %>
+  after(async () => {
+    await browser.close();
+  });
+<% } %>
 
   it('is running', async function () {
     const element = await page.waitForSelector(
       'text/<%= project %> app is running!'
     );
 
-    <% if(testingFramework == 'jasmine' || testingFramework == 'jest') { %>
+<% if(testingFramework == 'jasmine' || testingFramework == 'jest') { %>
     expect(element).not.toBeNull();
-    <% } %>
+<% } %><% if(testingFramework == 'mocha') { %>
+    assert.ok(element);
+<% } %>
   });
 });

packages/ng-schematics/src/schematics/ng-add/files/mocha/e2e/.mocharc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  file: ['e2e/babel.js'],
+  spec: './e2e/tests/**/*.e2e.ts',
+};

packages/ng-schematics/src/schematics/ng-add/files/mocha/e2e/babel.js

@@ -0,0 +1,4 @@
+require('@babel/register')({
+  extensions: ['.js', '.ts'],
+  presets: ['@babel/preset-env', '@babel/preset-typescript'],
+});

packages/ng-schematics/src/schematics/ng-add/schema.json

@@ -13,7 +13,7 @@
     "testingFramework": {
       "description": "",
       "type": "string",
-      "enum": ["jasmine", "jest"],
+      "enum": ["jasmine", "jest", "mocha"],
       "default": "jasmine",
       "x-prompt": {
         "message": "With what Testing Library do you wish to integrate?",
@@ -26,6 +26,10 @@
           {
             "value": "jest",
             "label": "Use Jest [https://jestjs.io/]"
+          },
+          {
+            "value": "mocha",
+            "label": "Use Mocha [https://mochajs.org/]"
           }
         ]
       }

packages/ng-schematics/src/schematics/utils/files.ts

@@ -127,6 +127,8 @@ export function getScriptFromOptions(options: SchematicsOptions): string {
       return 'jasmine --config=./e2e/support/jasmine.json';
     case TestingFramework.Jest:
       return 'jest -c e2e/jest.config.js';
+    case TestingFramework.Mocha:
+      return 'mocha --config=./e2e/.mocharc.js';
     default:
       throw new SchematicsException('Testing framework not supported.');
   }

packages/ng-schematics/src/schematics/utils/packages.ts

@@ -108,19 +108,23 @@ export function getDependenciesFromOptions(
   options: SchematicsOptions
 ): string[] {
   const dependencies = ['puppeteer'];
-  switch (options.testingFramework) {
-    case TestingFramework.Jasmine:
-      dependencies.push(
-        'jasmine',
+  const babelPackages = [
     '@babel/core',
     '@babel/register',
     '@babel/preset-env',
-        '@babel/preset-typescript'
-      );
+    '@babel/preset-typescript',
+  ];
+
+  switch (options.testingFramework) {
+    case TestingFramework.Jasmine:
+      dependencies.push('jasmine', ...babelPackages);
       break;
     case TestingFramework.Jest:
       dependencies.push('jest', '@types/jest', 'ts-jest');
       break;
+    case TestingFramework.Mocha:
+      dependencies.push('mocha', '@types/mocha', ...babelPackages);
+      break;
     default:
       throw new SchematicsException(`Testing framework not supported.`);
   }

packages/ng-schematics/test/src/index.spec.ts

@@ -122,7 +122,7 @@ describe('@puppeteer/ng-schematics: ng-add', () => {
     expect(devDependencies).toContain('jasmine');
     expect(devDependencies).toContain('@babel/core');
     expect(devDependencies).toContain('@babel/register');
-    expect(devDependencies).toContain('@babel/register');
+    expect(devDependencies).toContain('@babel/preset-typescript');
   });
 
   it('should create Jest files and update "package.json"', async () => {
@@ -137,4 +137,20 @@ describe('@puppeteer/ng-schematics: ng-add', () => {
     expect(devDependencies).toContain('@types/jest');
     expect(devDependencies).toContain('ts-jest');
   });
+
+  it('should create Jasmine files and update "package.json"', async () => {
+    const tree = await buildTestingTree({
+      testingFramework: 'mocha',
+    });
+    const {scripts, devDependencies} = getPackageJson(tree);
+
+    expect(tree.files).toContain(getProjectFile('e2e/.mocharc.js'));
+    expect(tree.files).toContain(getProjectFile('e2e/babel.js'));
+    expect(scripts['e2e']).toBe('mocha --config=./e2e/.mocharc.js');
+    expect(devDependencies).toContain('mocha');
+    expect(devDependencies).toContain('@types/mocha');
+    expect(devDependencies).toContain('@babel/core');
+    expect(devDependencies).toContain('@babel/register');
+    expect(devDependencies).toContain('@babel/preset-typescript');
+  });
 });