feat(testing): support cypress 11 (#13075)

Author: barbados-clemens

packages/angular/src/generators/component-test/__snapshots__/component-test.spec.ts.snap

@@ -1,19 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Angular Cypress Component Test Generator should generate a component test 1`] = `
-"import { MountConfig } from 'cypress/angular';
+"import { TestBed } from '@angular/core/testing';
 import { MyLibComponent } from './my-lib.component';
 
 describe(MyLibComponent.name, () => {
-  const config: MountConfig<MyLibComponent> = {
-    declarations: [],
-    imports: [],
-    providers: []
-  }
+
+  beforeEach(() => {
+    TestBed.overrideComponent(MyLibComponent, {
+      add: { 
+        imports: [],
+        providers: []
+      }
+    }) 
+  })
 
   it('renders', () => {
      cy.mount(MyLibComponent, {
-           ...config,
            componentProperties: {
                type:  'button',
                style:  'default',
@@ -22,42 +25,51 @@ describe(MyLibComponent.name, () => {
           }
        });
   })
+
 })
 "
 `;
 
 exports[`Angular Cypress Component Test Generator should handle component w/o inputs 1`] = `
-"import { MountConfig } from 'cypress/angular';
+"import { TestBed } from '@angular/core/testing';
 import { MyLibComponent } from './my-lib.component';
 
 describe(MyLibComponent.name, () => {
-  const config: MountConfig<MyLibComponent> = {
-    declarations: [],
-    imports: [],
-    providers: []
-  }
+
+  beforeEach(() => {
+    TestBed.overrideComponent(MyLibComponent, {
+      add: { 
+        imports: [],
+        providers: []
+      }
+    }) 
+  })
 
   it('renders', () => {
-     cy.mount(MyLibComponent, config);
+     cy.mount(MyLibComponent,);
   })
+
 })
 "
 `;
 
 exports[`Angular Cypress Component Test Generator should work with standalone components 1`] = `
-"import { MountConfig } from 'cypress/angular';
+"import { TestBed } from '@angular/core/testing';
 import { MyLibComponent } from './my-lib.component';
 
 describe(MyLibComponent.name, () => {
-  const config: MountConfig<MyLibComponent> = {
-    declarations: [],
-    imports: [],
-    providers: []
-  }
+
+  beforeEach(() => {
+    TestBed.overrideComponent(MyLibComponent, {
+      add: { 
+        imports: [],
+        providers: []
+      }
+    }) 
+  })
 
   it('renders', () => {
      cy.mount(MyLibComponent, {
-           ...config,
            componentProperties: {
                type:  'button',
                style:  'default',
@@ -66,6 +78,7 @@ describe(MyLibComponent.name, () => {
           }
        });
   })
+
 })
 "
 `;

packages/angular/src/generators/component-test/component-test.spec.ts

@@ -177,19 +177,24 @@ export class MyLibComponent implements OnInit {
 
     await componentGenerator(tree, { name: 'my-lib', project: 'my-lib' });
 
-    const expected = `import { MountConfig } from 'cypress/angular';
+    const expected = `import { TestBed } from '@angular/core/testing';
 import { MyLibComponent } from './my-lib.component';
 
 describe(MyLibComponent.name, () => {
-  const config: MountConfig<MyLibComponent> = {
-    declarations: [],
-    imports: [],
-    providers: []
-  }
+
+  beforeEach(() => {
+    TestBed.overrideComponent(MyLibComponent, {
+      add: { 
+        imports: [],
+        providers: []
+      }
+    }) 
+  })
 
   it('renders', () => {
-     cy.mount(MyLibComponent, config);
+     cy.mount(MyLibComponent,);
   })
+
 })
 `;
 

packages/angular/src/generators/component-test/files/__componentFileName__.cy.ts__tpl__

@@ -1,19 +1,23 @@
-import { MountConfig } from 'cypress/angular';
+import { TestBed } from '@angular/core/testing';
 import { <%= componentName %> } from './<%= componentFileName %>';
 
 describe(<%= componentName %>.name, () => {
-  const config: MountConfig<<%= componentName %>> = {
-    declarations: [],
-    imports: [],
-    providers: []
-  }
+
+  beforeEach(() => {
+    TestBed.overrideComponent(<%= componentName %>, {
+      add: { 
+        imports: [],
+        providers: []
+      }
+    }) 
+  })
 
   it('renders', () => {
      cy.mount(<%= componentName %>,<% if(props.length > 0) { %> {
-           ...config,
            componentProperties: {<% for (let prop of props) { %>
                <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
           }
-       }<% } else { %> config<% } %>);
+       }<% } %>);
   })
+
 })