feat: component test, close #11

Author: bahmutov

README.md

@@ -70,13 +70,16 @@ it('shows hello', () => {
 
 * Testing a value in [value-spec.js](cypress/integration/value-spec.js)
 * [filter](cypress/src/reverse.js) and [filter-spec.js](cypress/integration/filter-spec.js)
+* [component](cypress/src/hero-detail.js) and [component-spec.js](cypress/integration/component-spec.js)
 
 ## Notes
 
 * `npm run cy` opens Cypress end-to-end test runner in GUI mode
 * `npm test` runs Cypress in headless mode
 * `mount` uses [`angular.bootstrap`](https://docs.angularjs.org/api/ng/function/angular.bootstrap) to mount code inside the test iframe.
 
+Cypress can do everything [you can do from DevTools console](https://glebbahmutov.com/blog/angular-from-browser-console/) when dealing with Angular.js application.
+
 ### Small print
 
 Author: Gleb Bahmutov <gleb.bahmutov@gmail.com> © 2018

cypress/integration/component-spec.js

@@ -0,0 +1,46 @@
+/// <reference types="cypress" />
+import { mount } from '../..'
+import angular from 'angular'
+import '../src/hero-detail'
+
+// component example taken from
+// https://docs.angularjs.org/guide/component
+
+/* eslint-env mocha */
+describe('Component', () => {
+  const template = `
+    <!-- components match only elements -->
+    <div ng-controller="MainCtrl as ctrl">
+      <b>Hero</b><br>
+      <hero-detail hero="ctrl.hero"></hero-detail>
+    </div>
+  `
+
+  it('shows passed name', () => {
+    // note that module "heroApp" should already exist (in src/hero-detail)
+    angular.module('heroApp').controller('MainCtrl', function MainCtrl () {
+      this.hero = {
+        name: 'Spawn'
+      }
+    })
+
+    mount(template, ['heroApp'])
+    cy.contains('Name: Spawn')
+  })
+
+  it('renders when data changes', () => {
+    angular.module('heroApp').controller('MainCtrl', function MainCtrl () {
+      this.hero = {
+        name: 'Spawn'
+      }
+    })
+
+    mount(template, ['heroApp'])
+    cy.contains('Name: Spawn').then($el => {
+      const ngElement = angular.element($el)
+      ngElement.controller().hero.name = 'Batman'
+      ngElement.scope().$apply()
+    })
+    cy.contains('Name: Batman')
+  })
+})

cypress/src/hero-detail.js

@@ -0,0 +1,9 @@
+import angular from 'angular'
+
+// from https://docs.angularjs.org/guide/component
+angular.module('heroApp', []).component('heroDetail', {
+  template: '<span>Name: {{$ctrl.hero.name}}</span>',
+  bindings: {
+    hero: '='
+  }
+})