/cypress-web

.

Primary LanguageJavaScript

test/deploy e2e coverage coverage

Miro Test Assignment

DEMO

Stack:

  • Webpack as dev server
  • Babel to support ES6 features in IE11
  • Jest as framework to run Unit testing
  • Husky to execute git hooks
  • Eslint + Prettier
  • LESS to add extra functionalities to CSS
  • Github actions as CI/CD to deploy (build, lint, test, deploy) to Github Pages

Features:

All the bussiness requirements described in the test assignment are validated with Automation test, it is integrate in the CI workflow E2E

  • Can be use as module in any form or app independently ✅
  • Add email typing COMMA, ENTER or lossing the input focus ✅
  • Pasted emails are converted to formatted blocks inmediatly ✅
  • Input dimensions depends on parent dimensions ✅
  • Scrollable ✅
  • It is possible to create multiple elements in the same page without conflicts ✅
  • Detect repeated email, preventing to add the same email twice ✅
  • Block elements can be deleted ✅

How to use?

import EmailInput from '.src/lib'

const $container = document.querySelector('#my-email-input-container')

const emailInput = EmailInput($container)

or

<head>
  <script src="./app.bundle.js"></script>
</head>

<script>
  const $container = document.querySelector('#my-email-input-container')
  var emailsInput = new EmailsInput($container)
</script>

Options:

import EmailInput from '.src/lib'
const $container = document.querySelector('#my-email-input-container')

const options = {
  placeholder: 'my new placeholder', //default: add more people
}

const emailInput = EmailInput($container)

API

const emailInput = EmailInput($container)

// Add email method
emailInput.addEmail('myemail@email.com')

// Count valid emails
const number = emailInput.countValidEmails()

// Get full Object element
const $el = emailInput.getElement()

Scripts

Run Dev Server

yarn dev #or npm run dev

Build to production

yarn build

Run Unit testing

yarn test

run test coverage

yarn test:coverage

run test automation

yarn test:e2e

Run test watch

yarn test:watch

Run linter

yarn lint

Folder Structure

  • /build static web build
  • /coverage Test coverage report
  • /cypress Cypress automation tests
  • /src code
    • /app/ App to DEMO, it includes the main index.html, index.js, app.test.js, and style.less
    • /src/lib/ Email input as exportable library
      • index.js Initial app, factory to encapsulate data and expose just the needed methods from EmailInput
      • /utils/ application utils
      • /constants/ application constants
      • /components/ "components", those are factories for DOM Element who respect the same pattern (exept main email-input)
        • /block-email, /close-icon, /input, /wrapper. Element factories that follow the same pattern. All of them receive the params props and events in order to create the respective HTML element and attach the events.
        • /email-input Constructor function for EmailInput, it includes all the data state logic, operations and event delegation to the other Elements.

Git Hooks

pre-commit

It check the linter until commit

pre-push

It run the unit testing until push