ref(angular): rename config inputs to componentProperties

Author: jordanpowell88

npm/angular/src/mount.ts

@@ -34,11 +34,11 @@ export interface TestBedConfig<T extends object> extends TestModuleMetadata {
    * @example
    * import { ButtonComponent } from 'button/button.component'
    * it('renders a button with Save text', () => {
-   *  cy.mount(ButtonComponent, { inputs: { text: 'Save' }})
+   *  cy.mount(ButtonComponent, { componentProperties: { text: 'Save' }})
    *  cy.get('button').contains('Save')
    * })
    */
-  inputs?: Partial<{ [P in keyof T]: T[P] }>
+  componentProperties?: Partial<{ [P in keyof T]: T[P] }>
 }
 
 /**
@@ -82,7 +82,7 @@ function bootstrapModule<T extends object> (
   component: Type<T>,
   config: TestBedConfig<T>,
 ): TestBedConfig<T> {
-  const { inputs, ...testModuleMetaData } = config
+  const { componentProperties, ...testModuleMetaData } = config
 
   if (!testModuleMetaData.declarations) {
     testModuleMetaData.declarations = []
@@ -164,7 +164,7 @@ function setupFixture<T extends object> (
 }
 
 /**
- * Gets the componentInstance and Object.assigns any inputs() passed in the TestBedConfig
+ * Gets the componentInstance and Object.assigns any componentProperties() passed in the TestBedConfig
  *
  * @param {TestBedConfig} config TestBed configuration passed into the mount function
  * @param {ComponentFixture<T>} fixture Fixture for debugging and testing a component.
@@ -176,8 +176,8 @@ function setupComponent<T extends object> (
 ): T {
   let component: T = fixture.componentInstance
 
-  if (config?.inputs) {
-    component = Object.assign(component, config.inputs)
+  if (config?.componentProperties) {
+    component = Object.assign(component, config.componentProperties)
   }
 
   return component

npm/webpack-dev-server/cypress/e2e/angular.cy.ts

@@ -75,7 +75,7 @@ for (const project of WEBPACK_REACT) {
 
       cy.contains('mount.cy.ts').click()
       cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 5)
+      cy.get('.passed > .num').should('contain', 6)
     })
   })
 }

system-tests/project-fixtures/angular/src/app/components/button-output.component.ts

@@ -0,0 +1,8 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+
+@Component({
+  template: `<button (click)="clicked.emit(true)">Click Me</button>`
+})
+export class ButtonOutputComponent {
+  @Output() clicked: EventEmitter<boolean> = new EventEmitter()
+}

system-tests/project-fixtures/angular/src/app/mount.cy.ts

@@ -4,6 +4,7 @@ import { CounterComponent } from "./components/counter.component";
 import { CounterService } from "./components/counter.service";
 import { ChildComponent } from "./components/child.component";
 import { WithDirectivesComponent } from "./components/with-directives.component";
+import { ButtonOutputComponent } from "./components/button-output.component";
 
 describe("angular mount", () => {
   it("pushes CommonModule into component", () => {
@@ -32,7 +33,7 @@ describe("angular mount", () => {
   });
 
   it("detects changes", () => {
-    cy.mount(ChildComponent, { inputs: { msg: "Hello World from Spec" } })
+    cy.mount(ChildComponent, { componentProperties: { msg: "Hello World from Spec" } })
       .then(({ fixture }) =>
         cy.contains("h1", "Hello World from Spec").wrap(fixture)
       )
@@ -42,4 +43,12 @@ describe("angular mount", () => {
         cy.contains("h1", "I just changed!");
       });
   });
+
+  it('can spy on EventEmitters', () => {
+    cy.mount(ButtonOutputComponent).then(({ component }) => {
+      cy.spy(component.clicked, 'emit').as('mySpy')
+      cy.get('button').click()
+      cy.get('@mySpy').should('have.been.calledWith', true)
+    })
+  })
 });