Acceptance Test POC and Setup

.gitignore

@@ -2,4 +2,8 @@
 *.log
 node_modules
 aws-exports.js
-aws-exports.ts
+aws-exports.ts
+
+# testing
+acceptance-tests/cypress/screenshots
+acceptance-tests/cypress/videos

acceptance-tests/cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:3000/",
+  "testFiles": ["**/*.{feature,features}"],
+  "integrationFolder": "cypress/tests"
+}

acceptance-tests/cypress/plugins/index.js

@@ -0,0 +1,26 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// 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
+// ***********************************************************
+
+const cucumber = require("cypress-cucumber-preprocessor").default;
+const resolve = require("resolve");
+
+// 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) => {
+  const options = {
+    typescript: resolve.sync("typescript", { baseDir: config.projectRoot })
+  };
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  on("file:preprocessor", cucumber(options));
+};

acceptance-tests/cypress/support/commands.js

@@ -0,0 +1,22 @@
+// ***********************************************
+// 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) => { ... })
+import "@testing-library/cypress/add-commands";

acceptance-tests/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')

acceptance-tests/cypress/tests/acceptance/SignIn.feature

@@ -0,0 +1,12 @@
+Feature: Authentication
+
+  Amplify's Authenticator is a wrapper for a developer's application.
+  It provides an application with authentication features using AWS Cognito.
+  Its features include sign in, sign up, and sign out.
+
+  Scenario: Sign in with invalid credentials
+    Given I'm at the sign in page
+    When I type an invalid email address "fake@email.com"
+    And I type an invalid password "fakepassword"
+    And I attempt to sign in
+    Then I see the error "User does not exist."

acceptance-tests/cypress/tests/acceptance/SignIn/SignIn.ts

@@ -0,0 +1,21 @@
+import { And, Given, Then, When } from "cypress-cucumber-preprocessor/steps";
+
+Given("I'm at the sign in page", () => {
+  cy.visit("/auth");
+});
+
+When("I type an invalid email address {string}", (email: string) => {
+  cy.findByRole("textbox", { name: /username/i }).type(email);
+});
+
+And("I type an invalid password {string}", (password: string) => {
+  cy.findByLabelText(/password/i).type(password);
+});
+
+And("I attempt to sign in", () => {
+  cy.findByRole("button", { name: "Sign In" }).click();
+});
+
+Then("I see the error {string}", (errorMessage: string) => {
+  cy.findByRole("alert", { name: /error/i }).should("contain", errorMessage);
+});

acceptance-tests/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "cypress",
+  "version": "0.0.1",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "cypress:open": "TZ=UTC cypress open",
+    "cypress:run": "TZ=UTC cypress run"
+  },
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true,
+    "stepDefinitions": "cypress/tests"
+  },
+  "devDependencies": {
+    "@testing-library/cypress": "^7.0.6",
+    "@types/cypress-cucumber-preprocessor": "^4.0.0",
+    "cypress": "^7.5.0",
+    "cypress-cucumber-preprocessor": "^4.1.2",
+    "typescript": "^4.3.2"
+  }
+}

acceptance-tests/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "@testing-library/cypress"]
+  },
+  "include": ["**/*.ts"]
+}

package.json

@@ -12,7 +12,8 @@
     "docs",
     "vue-docs",
     "angular-docs",
-    "packages/*"
+    "packages/*",
+    "acceptance-tests"
   ],
   "resolutions": {
     "@mdx-js/mdx/**/trim": "^0.0.3",