项目作者: tkivela

项目描述 :
Hyperapp template with Parcel bundler. Small and fast!
高级语言: JavaScript
项目地址: git://github.com/tkivela/hyperapptemplate.git
创建时间: 2018-02-06T19:21:25Z
项目社区:https://github.com/tkivela/hyperapptemplate

开源协议:

下载


Small Hyperapp template with testing included

Hyperapp template with Parcel bundler. Small and fast!
Example unit and end to end test with Jest & Cypress.

JavaScript Style Guide
code style: prettier
tested with jest
Cypress.io tests

What’s inside?

  • hyperapp (Library for building web apps)

and for development time

  • parcel-bundler (Blazing fast, zero configuration web application bundler)
  • hyperapp-redux-devtools (Debugging hyperapp statechanges with Redux devtools)
  • jest (Delightful JavaScript Testing)
  • cypress (Fast, easy and reliable testing for anything that runs in a browser)
  • standard (JavaScript Standard Style)
  • prettier-standard (Code formatter)

Bundling is handled with parcel bundler (https://parceljs.org/) which provides fast bundles.

Getting started

Clone and install deps

  1. git clone https://github.com/tkivela/hyperapptemplate.git
  2. cd hyperapptemplate
  3. yarn
  4. yarn start

Then open http://localhost:1234 and edit ./src/ -files and press save. You must manually refresh browser window after editing sources. Bundling the application this way will generate unoptimized build with sourcemaps to ‘build’ directory.

Directory structure

Majority of code lives in src directory:

  1. src/
  2. ├── actions
  3. ├── components
  4. ├── state
  5. ├── index.js
  • actions: actions which modify the state
  • components: components which can be using jsx
  • state: application’s state tree
  • index.js: main entry point

End to end browser tests are located in cypress -directory.

Building for Production

  1. yarn build

This will compile your JS and copy your assets to the dist folder which
you can deploy wherever as a webpage. dist folder also includes hyperapp-redux-devtools.js, you can delete that file if you don’t run the code in development environment.

Testing

  1. yarn test

Running formats and lints code (Prettier & Standard) and then runs unit tests (Jest) and end to end tests (Cypress). If there are any errors in the end to end tests the script will leave a screenshot of the browser window which reproduces the error to cypress/screenshot folder. Screenshot folder is automatically deleted with each test run. If you want to create a video of the e2e testing run automatically to cypress/videos folder, just change videoRecording=false to videoRecording=true from package.json.

If you want to test steps in the Cypress UI first start the dev server (yarn start) and then run

  1. yarn cy:open

I’ve included example tests for actions, UI snapshot with jest and end to end test with Cypress.

Debugging

By using Redux Devtools extions for Chrome you can debug state changes in development build. Also normal debugging (with sourcemaps) can be done from browser’s devtools.