Cypress UI testing & verify template tests

.gitignore

@@ -4,3 +4,5 @@ coverage/
 package-lock.json
 .env
 .DS_Store
+cypress/screenshots/
+cypress/videos/

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3002",
+  "video": false
+}

cypress/fixtures/README.md

@@ -0,0 +1,5 @@
+# The Cypress fixtures directory
+
+This directory is used by Cypress to store static data for mock network requests
+in tests.[See the Cypress fixture file documentation](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Fixture-Files)
+for more information on how to use this directory.

cypress/integration/verify/ui.spec.js

@@ -0,0 +1,81 @@
+/// <reference types="Cypress" />
+
+// `verify` function template UI-only tests
+
+const testNumber = "+18448144627";
+const testEmail = "[email protected]";
+
+describe('verify Template UI', () => {
+    beforeEach(() => {
+        cy.visit('/verify/index.html');
+    });
+
+    it('should identify itself as the Verify example', () => {
+        cy.contains('Twilio Verify');
+    });
+
+    it('should accept a number to verify via SMS by default', () => {
+        cy
+            .get('[data-cy=input-phone]')
+            .type(testNumber)
+            .get('[data-cy=submit]')
+            .click();
+
+        // NOTE: This response will change when Cypress integration tests are incorporated
+        cy.contains('Error');
+    });
+
+    it('should support verifying via a phone call', () => {
+        cy
+            .get('[data-cy=radio-call]')
+            .click()
+            .get('[data-cy=input-phone]')
+            .type(testNumber)
+            .get('[data-cy=submit]')
+            .click();
+
+        // NOTE: This response will change when Cypress integration tests are incorporated
+        cy.contains('Error');
+    });
+
+    it('should support verifying via email', () => {
+        cy
+            .get('[data-cy=radio-email]')
+            .click()
+            .get('[data-cy=input-email]')
+            .type(testEmail)
+            .get('[data-cy=submit]')
+            .click();
+
+        // NOTE: This response will change when Cypress integration tests are incorporated
+        cy.contains('Error');
+    });
+
+    it('should contain an EDIT_CODE tag and no APP_INFO', () => {
+        const collectComments = (doc, contents) => {
+            let commentWalker = doc.createTreeWalker(
+                doc.body,
+                NodeFilter.SHOW_COMMENT,
+                { acceptNode: (node) => node.nodeValue.trim() === contents ?
+                  NodeFilter.FILTER_ACCEPT :
+                  NodeFilter.FILTER_REJECT },
+                false
+            );
+
+            const comments = [];
+            let currentNode;
+
+            while(currentNode = commentWalker.nextNode()) {
+                comments.push(currentNode);
+                currentNode = commentWalker.nextNode();
+            }
+
+            return comments;
+        };
+
+        cy.document().then((doc) => {
+            expect(collectComments(doc, "EDIT_CODE").length).to.be.greaterThan(0);
+            expect(collectComments(doc, "APP_INFO").length).to.equal(0);
+        });
+    });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

docs/CONTRIBUTING.md

@@ -122,6 +122,37 @@ or alternatively:
 npx jest --watch
 ```
 
+### UI and Integration Testing with Cypress
+
+You can use [Cypress](https://www.cypress.io/) to run automated browser testing for your function.
+To test with Cypress, first set up a development server by running:
+
+```bash
+npm start
+```
+
+With the development server running, launch the Cypress UI with:
+
+```bash
+npx cypress open
+```
+
+To launch a single Cypress test from the command line, run:
+
+```bash
+npx cypress run --spec "path/to/test.spec.js"
+```
+
+The above command also accepts a `--record` flag, which causes the Cypress UI
+to record the test run. To learn about the other flags `cypress run` accepts,
+[see the Cyprus CLI documentation](https://docs.cypress.io/guides/guides/command-line.html#cypress-run).
+
+If you want to run Cypress tests for all of the function templates in your terminal, use:
+
+```bash
+npm cypress
+```
+
 ## Testing your template
 
 If you want to test how your new template works with the Twilio CLI, make sure you have the latest version of [`@twilio-labs/plugin-serverless`](https://npm.im/@twilio-labs/plugin-serverless) installed.