с предварительно настроенным тестированием CI / CD и Unit / E2E для разработки стандартных продуктов
Исходный код - https://github.com/prabaprakash/React-Redux-Saga-Boilerplate
Сайт - https://react-redux-saga.herokuapp.com
Введение
Любите ли вы TDD - разработка через тестирование и CI / CD, сразу же используйте этот шаблон для вашего следующего успешного продукта
Настроенные функции
- Модульное тестирование - NYC, Mocha, React Enzyme
> nyc mocha
Application listening on port 3200
actions
√ should trigger the ADD action
√ should trigger the SUB action
√ should trigger the CHANGE action
App Component
√ renders div
√ should render two button
√ verify add click
√ verify sub click
√ should call text box value change event
App Container
√ should render successfully provided by store
calc Reducer
√ for action save, set number
√ for action default, return old state
calc sagatest
initalizeWatcher test
√ should listen to actions.INITALIZE_APPLICATION
√ should be done
addWatcher test
√ should listen to actions.ADD
√ should be done
subWatcher test
√ should listen to actions.SUB
√ should be done
changeWatcher test
√ should listen to actions.CHANGE
√ should be done
addNumber test
√ should put actions.save
√ should be done
subNumber test
√ should put actions.save
√ should be done
changeNumber test
√ should put actions.save
√ should be done
rootSaga
√ should check the number of listeners
Server
get index
√ It should get index
get unknown route
√ It should throw error for unknown route
2. Тестирование функций / автоматизации - Nighwatch, Nightwatch Cucumber, Selenium, Chrome Headless
$ npm run featuretest > [email protected] featuretest C:\Users\paranganat\Desktop\ReactRedux > nightwatch Starting selenium server in parallel mode... started - PID: 10916 Started child process for: calc calc Feature: Google Search calc calc Scenario: Add calc Given I open app calc √ Element <body> was visible after 58 milliseconds. calc And I see textbox with value "100" calc Then I click add button calc And I see textbox with value "101" calc Then I click add button calc And I see textbox with value "102" calc calc Scenario: Sub calc Given I open app calc √ Element <body> was visible after 28 milliseconds. calc And I see textbox with value "100" calc Then I click sub button calc And I see textbox with value "99" calc Then I click sub button calc And I see textbox with value "98" calc calc Scenario: Change calc Given I open app calc √ Element <body> was visible after 27 milliseconds. calc And I see textbox with value "100" calc Then I change the text box value to "1000" calc Then I click add button calc And I see textbox with value "1001" calc Then I click sub button calc And I see textbox with value "1000" calc calc 3 scenarios (3 passed) 19 steps (19 passed) 0m08.620s >> calc finished. INFO Selenium process finished.
3. CI/CD
3.1 Трэвис К.И.
3.2 Круг CI
3.3 Docker и Docker Compose
FROM node:alpine
COPY . /app
WORKDIR /app
RUN mkdir -p logs && \
npm install && \
npm install pm2 -g
EXPOSE 3200
CMD npm run start
4. Покрытие кода
4.1. Комбинезоны
4.2 SonarQube
5. Пакеты
## Dependencies - [react](https://ghub.io/react): React is a JavaScript library for building user interfaces. - [react-bootstrap](https://ghub.io/react-bootstrap): Bootstrap 3 components built with React - [react-dom](https://ghub.io/react-dom): React package for working with the DOM. - [react-redux](https://ghub.io/react-redux): Official React bindings for Redux - [redux](https://ghub.io/redux): Predictable state container for JavaScript apps - [redux-saga](https://ghub.io/redux-saga): Saga middleware for Redux to handle Side Effects - [express](https://ghub.io/express): Fast, unopinionated, minimalist web framework ## Dev Dependencies - [@babel/cli](https://ghub.io/@babel/cli): Babel command line. - [@babel/core](https://ghub.io/@babel/core): Babel compiler core. - [@babel/polyfill](https://ghub.io/@babel/polyfill): Provides polyfills necessary for a full ES2015+ environment - [@babel/preset-env](https://ghub.io/@babel/preset-env): A Babel preset for each environment. - [@babel/preset-react](https://ghub.io/@babel/preset-react): Babel preset for all React plugins. - [@babel/register](https://ghub.io/@babel/register): babel require hook - [babel-eslint](https://ghub.io/babel-eslint): Custom parser for ESLint - [babel-loader](https://ghub.io/babel-loader): babel module loader for webpack - [babel-polyfill](https://ghub.io/babel-polyfill): Provides polyfills necessary for a full ES2015+ environment - [chai](https://ghub.io/chai): BDD/TDD assertion library for node.js and the browser. Test framework agnostic. - [chai-enzyme](https://ghub.io/chai-enzyme): Chai.js assertions for enzyme - [chai-http](https://ghub.io/chai-http): Extend Chai Assertion library with tests for http apis - [chromedriver](https://ghub.io/chromedriver): ChromeDriver for Selenium - [css-loader](https://ghub.io/css-loader): css loader module for webpack - [cucumber](https://ghub.io/cucumber): The official JavaScript implementation of Cucumber. - [cucumber-pretty](https://ghub.io/cucumber-pretty): Cucumber.js Pretty Formatter - [enzyme](https://ghub.io/enzyme): JavaScript Testing utilities for React - [enzyme-adapter-react-16](https://ghub.io/enzyme-adapter-react-16): JavaScript Testing utilities for React - [eslint](https://ghub.io/eslint): An AST-based pattern checker for JavaScript. - [eslint-plugin-json](https://ghub.io/eslint-plugin-json): Lint JSON files - [eslint-plugin-react](https://ghub.io/eslint-plugin-react): React specific linting rules for ESLint - [expect](https://ghub.io/expect): This package exports the `expect` function used in [Jest](https://jestjs.io/). You can find its documentation [on Jest's website](https://jestjs.io/docs/en/expect.html). - [extract-text-webpack-plugin](https://ghub.io/extract-text-webpack-plugin): Extract text from bundle into a file. - [jsdom](https://ghub.io/jsdom): A JavaScript implementation of many web standards - [jsdom-global](https://ghub.io/jsdom-global): Enable DOM in Node.js - [mocha](https://ghub.io/mocha): simple, flexible, fun test framework - [nightwatch](https://ghub.io/nightwatch): Easy to use Node.js based End-to-End testing solution for browser based apps and websites, using the W3C WebDriver API. - [nightwatch-cucumber](https://ghub.io/nightwatch-cucumber): Nightwatch.js plugin for Cucumber.js - [node-sass](https://ghub.io/node-sass): Wrapper around libsass - [nyc](https://ghub.io/nyc): the Istanbul command line interface - [react-addons-test-utils](https://ghub.io/react-addons-test-utils): This package provides the React TestUtils add-on. - [redux-test-utils](https://ghub.io/redux-test-utils): Test utils to simplify testing of containers in redux. - [sass-loader](https://ghub.io/sass-loader): Sass loader for webpack - [selenium-server](https://ghub.io/selenium-server): Selenium in an npm package - [style-loader](https://ghub.io/style-loader): style loader module for webpack - [stylelint](https://ghub.io/stylelint): A mighty, modern CSS linter. - [stylelint-config-standard](https://ghub.io/stylelint-config-standard): Standard shareable config for stylelint - [testdouble](https://ghub.io/testdouble): A minimal test double library for TDD with JavaScript - [uglifyjs-webpack-plugin](https://ghub.io/uglifyjs-webpack-plugin): UglifyJS plugin for webpack - [webpack](https://ghub.io/webpack): Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff. - [webpack-cli](https://ghub.io/webpack-cli): CLI for webpack & friends
