feat: testing filter

Author: bahmutov

README.md

@@ -66,8 +66,15 @@ it('shows hello', () => {
 })
 ```
 
+## Examples
+
+* 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)
+
 ## 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.
 
 ### Small print

cypress/integration/filter-spec.js

@@ -0,0 +1,54 @@
+/// <reference types="cypress" />
+import { mount } from '../..'
+import angular from 'angular'
+import '../src/reverse'
+
+/* eslint-env mocha */
+describe('Filter', () => {
+  const getFilter$ = () => angular.injector(['ng']).get('$filter')
+
+  it('returns $filter', () => {
+    const $filter = getFilter$()
+    expect($filter).to.be.a('function')
+  })
+
+  it('returns built-in lowercase filter', () => {
+    const lowercase = getFilter$()('lowercase')
+    expect(lowercase).to.be.a('function')
+    expect(lowercase('FOOBar')).to.equal('foobar')
+  })
+
+  it('has user filter', () => {
+    // we don't even need to mount module "myReverseFilterApp"
+    // to get back the reverse filter
+    const $filter = angular
+      .injector(['ng', 'myReverseFilterApp'])
+      .get('$filter')
+    const reverse = $filter('reverse')
+    expect(reverse).to.be.a('function')
+    expect(reverse('foo-')).to.equal('-oof')
+    expect(reverse('foo-', true)).to.equal('-OOF')
+
+    // but we can mount template to see it in action
+    const template = `<div ng-controller="MyController">
+      <input ng-model="greeting" type="text"><br>
+      No filter: {{greeting}}<br>
+      Reverse: {{greeting|reverse}}<br>
+      Reverse + uppercase: {{greeting|reverse:true}}<br>
+      Reverse, filtered in controller: {{filteredGreeting}}<br>
+    </div>`
+    mount(template, ['myReverseFilterApp'])
+
+    cy.log('checking initial values')
+    cy.contains('div', 'Reverse: olleh')
+    cy.contains('div', 'Reverse + uppercase: OLLEH')
+
+    cy.log('changing values')
+    cy
+      .get('input')
+      .clear()
+      .type('Cypress')
+    cy.contains('div', 'Reverse: sserpyC')
+    cy.contains('div', 'Reverse + uppercase: SSERPYC')
+  })
+})

cypress/src/reverse.js

@@ -0,0 +1,27 @@
+import angular from 'angular'
+
+// this example comes from https://docs.angularjs.org/guide/filter
+angular
+  .module('myReverseFilterApp', [])
+  .filter('reverse', function () {
+    return function (input, uppercase) {
+      input = input || ''
+      var out = ''
+      for (var i = 0; i < input.length; i++) {
+        out = input.charAt(i) + out
+      }
+      // conditional based on optional argument
+      if (uppercase) {
+        out = out.toUpperCase()
+      }
+      return out
+    }
+  })
+  .controller('MyController', [
+    '$scope',
+    'reverseFilter',
+    function ($scope, reverseFilter) {
+      $scope.greeting = 'hello'
+      $scope.filteredGreeting = reverseFilter($scope.greeting)
+    }
+  ])

package.json

@@ -69,10 +69,10 @@
     "deps": "deps-ok && dependency-check --no-dev .",
     "issues": "git-issues",
     "license": "license-checker --production --onlyunknown --csv",
-    "lint": "standard --verbose --fix 'src/*.js' 'cypress/integration/*.js'",
+    "lint": "standard --verbose --fix 'src/*.js' 'cypress/**/*.js'",
     "prelint": "npm run pretty",
     "pretest": "npm run lint",
-    "pretty": "prettier-standard 'src/*.js' 'cypress/integration/*.js'",
+    "pretty": "prettier-standard 'src/*.js' 'cypress/**/*.js'",
     "secure": "nsp check",
     "size": "t=\"$(npm pack .)\"; wc -c \"${t}\"; tar tvf \"${t}\"; rm \"${t}\";",
     "test": "cypress run",