https://github.com/jhta/cypress-web
.
https://github.com/jhta/cypress-web
Last synced: 24 days ago
JSON representation
.
- Host: GitHub
- URL: https://github.com/jhta/cypress-web
- Owner: jhta
- Created: 2020-10-23T19:59:36.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-10-25T17:34:23.000Z (over 5 years ago)
- Last Synced: 2025-03-12T16:45:04.675Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://jhta.github.io/miro
- Size: 1.33 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/jhta/miro/actions)
[](https://github.com/jhta/miro/actions)
# Miro Test Assignment
## [DEMO](https://jhta.github.io)
## 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](https://github.com/jhta/miro/blob/main/cypress/integration/bussiness-requirements.spec.js), it is integrate in the CI workflow [E2E](https://github.com/jhta/miro/actions?query=workflow%3Ae2e)
- 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?
```js
import EmailInput from '.src/lib'
const $container = document.querySelector('#my-email-input-container')
const emailInput = EmailInput($container)
```
or
```html
const $container = document.querySelector('#my-email-input-container')
var emailsInput = new EmailsInput($container)
```
Options:
```js
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
```js
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
```bash
yarn dev #or npm run dev
```
### Build to production
```bash
yarn build
```
### Run Unit testing
```bash
yarn test
```
## run test coverage
```bash
yarn test:coverage
```
## run test automation
```bash
yarn test:e2e
```
### Run test watch
```bash
yarn test:watch
```
### Run linter
```bash
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