feat(schematic): Schematics for dt-e2e component.

Co-authored-by: Fabian Friedl <ffriedl89@gmail.com>

.prettierignore

@@ -5,6 +5,7 @@
 /apps/demos/src/nav-items.template
 
 /tools/schematics/*/files/**/*
+/libs/workspace/src/schematics/*/files/**/*
 
 /test/**/*
 /tools/stylelint/**/*

angular.json

@@ -908,6 +908,11 @@
                 "input": "./libs/workspace",
                 "glob": "{package,builders,collection}.json",
                 "output": "."
+              },
+              {
+                "input": "./libs/workspace/src",
+                "glob": "schematics/*/files/**/*.{ts,html,json,md,scss}",
+                "output": "./src"
               }
             ]
           },

libs/barista-components/schematics/src/testing/workspace.ts

@@ -21,7 +21,7 @@ import {
   Style,
 } from '@schematics/angular/application/schema';
 import { Schema as WorkspaceOptions } from '@schematics/angular/workspace/schema';
-import { addFixtureToTree } from '.';
+import { addFixtureToTree } from './fixture';
 import { runExternalSchematic } from './run-schematic';
 
 export async function createWorkspace(tree?: Tree): Promise<UnitTestTree> {

libs/workspace/collection.json

@@ -2,5 +2,12 @@
   "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
   "name": "workspace",
   "version": "0.0.1",
-  "schematics": {}
+  "schematics": {
+    "dt-components-e2e": {
+      "description": "Create a new e2e setup in the components-e2e app for a given component name",
+      "factory": "./src/schematics/dt-component-e2e/index",
+      "schema": "./src/schematics/dt-component-e2e/schema.json",
+      "aliases": ["dt-e2e"]
+    }
+  }
 }

libs/workspace/src/schematics/dt-component-e2e/README.md

@@ -0,0 +1,13 @@
+# Shipped schematics
+
+This schematics generates the component for barista e2e tests. The only needed
+parameter is the name of the component.
+
+## Usage
+
+- Please run: `ng build workspace` and after that,
+  `ng g ./dist/libs/workspace:dt-e2e --name={name of your component}`
+
+### Testing
+
+The schematics can be tested with the `ng test workspace` command.

libs/workspace/src/schematics/dt-component-e2e/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Add E2E Component should change files appropriately 1`] = `
+"/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the \\"License\\");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an \\"AS IS\\" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-nocheck
+// Code copy pasted from original app.routing.module
+// Used only for testing purposes
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: 'autocomplete',
+    loadChildren: () =>
+      import('').then((module) => module.DtE2EAutocompleteModule),
+  },
+  {
+    path: 'button',
+    loadChildren: () => import('').then((module) => module.DtE2EButtonModule),
+  },
+  {
+    path: 'alert',
+    loadChildren: () =>
+      import('../components/alert/alert.module').then(
+        (module) => module.DtE2EAlertModule,
+      ),
+  },
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forRoot(routes, {
+      scrollPositionRestoration: 'enabled',
+      anchorScrolling: 'enabled',
+      paramsInheritanceStrategy: 'always',
+      enableTracing: false, // Can be set for debugging the router
+      initialNavigation: 'enabled',
+    }),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
+"
+`;
+
+exports[`Add E2E Component should generate files with the appropriate content 1`] = `
+"/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the \\"License\\");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an \\"AS IS\\" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { alert } from './alert.po';
+
+fixture('Alert').page('http://localhost:4200/alert');
+
+test('should exists', async (testController: TestController) => {
+  await testController.expect(alert.exists).ok();
+});
+"
+`;
+
+exports[`Add E2E Component should generate files with the appropriate content 2`] = `
+"<dt-alert id=\\"test-alert\\"></dt-alert>
+"
+`;
+
+exports[`Add E2E Component should generate files with the appropriate content 3`] = `
+"/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the \\"License\\");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an \\"AS IS\\" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { DtAlertModule } from '@dynatrace/barista-components/alert';
+import { DtE2EAlert } from './alert';
+
+const routes: Route[] = [{ path: '', component: DtE2EAlert }];
+
+@NgModule({
+  declarations: [DtE2EAlert],
+  imports: [CommonModule, RouterModule.forChild(routes), DtAlertModule],
+})
+export class DtE2EAlertModule {}
+"
+`;
+
+exports[`Add E2E Component should generate files with the appropriate content 4`] = `
+"/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the \\"License\\");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an \\"AS IS\\" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Selector } from 'testcafe';
+
+export const alert = Selector('#test-alert');
+"
+`;
+
+exports[`Add E2E Component should generate files with the appropriate content 5`] = `
+"/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the \\"License\\");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an \\"AS IS\\" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'dt-e2e-alert',
+  templateUrl: 'alert.html',
+})
+export class DtE2EAlert {}
+"
+`;

libs/workspace/src/schematics/dt-component-e2e/files/apps/components-e2e/src/components/__name@dasherize__/__name@dasherize__.e2e.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { <%= camelize(name) %> } from './<%= dasherize(name) %>.po';
+
+fixture('<%= capitalize(name) %>').page('http://localhost:4200/<%= dasherize(name) %>');
+
+test('should exists', async (testController: TestController) => {
+  await testController.expect(<%= camelize(name) %>.exists).ok();
+});

libs/workspace/src/schematics/dt-component-e2e/files/apps/components-e2e/src/components/__name@dasherize__/__name@dasherize__.html

@@ -0,0 +1 @@
+<<%= selector %> id="test-<%= dasherize(name) %>"></<%= selector %>>

libs/workspace/src/schematics/dt-component-e2e/files/apps/components-e2e/src/components/__name@dasherize__/__name@dasherize__.module.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { <%= componentModule.name %> } from '<%= componentModule.package %>';
+import { <%= e2eComponent.component %> } from './<%= dasherize(name) %>';
+
+const routes: Route[] = [{ path: '', component: <%= e2eComponent.component %> }];
+
+@NgModule({
+  declarations: [<%= e2eComponent.component %>],
+  imports: [CommonModule, RouterModule.forChild(routes), <%= componentModule.name %>],
+})
+export class <%= e2eComponent.module %> {}

libs/workspace/src/schematics/dt-component-e2e/files/apps/components-e2e/src/components/__name@dasherize__/__name@dasherize__.po.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Selector } from 'testcafe';
+
+export const <%= camelize(name) %> = Selector('#test-<%= dasherize(name) %>');

libs/workspace/src/schematics/dt-component-e2e/files/apps/components-e2e/src/components/__name@dasherize__/__name@dasherize__.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'dt-e2e-<%= dasherize(name) %>',
+  templateUrl: '<%= dasherize(name) %>.html',
+})
+export class <%= e2eComponent.component %> {
+
+}

libs/workspace/src/schematics/dt-component-e2e/fixtures/alert.fixture.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-nocheck
+// this is an empty file for testing purposes