dash-components-archetype - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

config/eslint/eslintrc-node.json

 {
+    "extends": "./eslintrc-common.json",
     "env": {
         "node": true
     },
-    "extends": "eslint:recommended",
     "plugins": [
@@ -7,0 +7,0 @@ "import"

config/eslint/eslintrc-react.json

 {
+    "extends": "./eslintrc-common.json",
     "env": {
@@ -7,3 +8,2 @@ "node": false,
     },
-    "extends": "eslint:recommended",
     "parserOptions": {
@@ -10,0 +10,0 @@ "ecmaVersion": 6,

dev/package.json

 {
   "name": "dash-components-archetype-dev",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A [Builder](https://github.com/FormidableLabs/builder) Archetype for Dash components suites (Development)",
@@ -9,7 +9,27 @@ "main": "index.js",
     "babel-preset-es2015-webpack": "^6.4.1",
+    "chai": "^3.5.0",
     "eslint": "^2.8.0",
+    "eslint-import-resolver-webpack": "^0.4.0",
     "eslint-plugin-import": "^1.8.1",
+    "eslint-plugin-mocha": "^4.2.0",
     "eslint-plugin-react": "^5.1.1",
+    "isparta-loader": "^2.0.0",
+    "json-loader": "^0.5.4",
+    "karma": "^1.1.1",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.1.1",
+    "karma-phantomjs-launcher": "^1.0.1",
+    "karma-phantomjs-shim": "^1.4.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^1.7.0",
+    "lodash": "^3.10.1",
+    "mocha": "^2.5.3",
+    "phantomjs-prebuilt": "^2.1.7",
     "react": "^15.1.0",
+    "react-addons-test-utils": "^15.1.0",
     "react-hot-loader": "^1.3.0",
+    "sinon": "^1.17.4",
+    "sinon-chai": "^2.8.0",
     "webpack-dev-server": "^1.14.1"
@@ -16,0 +36,0 @@ },

dev/README.md

@@ -39,2 +39,13 @@ # Dash Components Archetype
 
+### Code quality
+
+To run lint:
+
+```sh
+$ npm test
+```
+
+TODO: ESLint is not reporting problems
+https://github.com/plotly/dash-components-archetype/issues/15
+
 ### Testing your components in Dash
@@ -41,0 +52,0 @@

init/package.json

@@ -27,4 +27,5 @@ {
   "devDependencies": {
-    "dash-components-archetype-dev": "^<%= archetype.devPackage.version || '^0.1.2' %>"
+    "dash-components-archetype-dev": "^<%= archetype.devPackage.version || '^0.1.2' %>",
+    "enzyme": "^2.4.1"
   }
 }

init/README.md

@@ -21,5 +21,59 @@ # <%= packageName %>
 
-We don't yet have a dev server with demo capabilities. The best way to test
-your components is by linking into `dash2` and testing them from there.
+### Demo server
 
+You can start up a demo development server to see a demo of the rendered
+components:
+
+```sh
+$ builder run demo
+$ open http://localhost:9000
+```
+
+You have to maintain the list of components in `demo/Demo.react.js`.
+
+### Code quality and tests
+
+#### To run lint and unit tests:
+
+```sh
+$ npm test
+```
+
+#### To run unit tests and watch for changes:
+
+```sh
+$ npm run test-watch
+```
+
+#### To debug unit tests in a browser (Chrome):
+
+```sh
+$ npm run test-debug
+```
+
+1. Wait until Chrome launches.
+2. Click the "DEBUG" button in the top right corner.
+3. Open up Chrome Devtools (`Cmd+opt+i`).
+4. Click the "Sources" tab.
+5. Find source files
+  - Navigate to `webpack:// -> . -> spec/components` to find your test source files.
+  - Navigate to `webpack:// -> [your/repo/path]] -> <%= packageName %> -> src` to find your component source files.
+6. Now you can set breakpoints and reload the page to hit them.
+7. The test output is available in the "Console" tab, or in any tab by pressing "Esc".
+
+#### To run a specific test
+
+In your test, append `.only` to a `describe` or `it` statement:
+
+```javascript
+describe.only('Foo component', () => {
+    // ...
+})l
+```
+
+### Testing your components in Dash
+
+The best way to test your components in the real Dash context is by linking into
+`dash2` and testing them from there.
+
 1. Prepare module by linking and watching for changes
@@ -36,3 +90,3 @@
         # In the `dash2/renderer` project directory:
-        $ npm link [YOUR-COMPONENT-SUITE-NAME]
+        $ npm link <%= packageName %>
 
@@ -43,3 +97,3 @@ Now you should be able to restart the webpack process (in `dash2/renderer`:
 
-## Installing python module locally
+## Installing python package locally
 
@@ -92,7 +146,15 @@ You don't need publishing access to test the module locally.
 We use [Builder][] to centrally manage build configuration, dependencies, and
-scripts. See the [dash-components-archetype][] repo for more information.
+scripts.
 
+To see all `builder` scripts available:
 
+```sh
+$ builder help
+```
+
+See the [dash-components-archetype][] repo for more information.
+
+
 [Builder]: https://github.com/FormidableLabs/builder
 [Dash]: https://github.com/plotly/dash2
 [dash-components-archetype]: https://github.com/plotly/dash-components-archetype

package.json

 {
   "name": "dash-components-archetype",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A [Builder](https://github.com/FormidableLabs/builder) Archetype for Dash components suites",
@@ -28,3 +28,3 @@ "main": "index.js",
     "build-dev": "webpack --config=node_modules/dash-components-archetype/config/webpack/webpack.config.dev.js",
-    "check": "builder run lint",
+    "check": "builder run lint && builder run test-frontend-cov",
     "clean-lib": "mkdir -p lib && rm -rf lib/*",
@@ -34,2 +34,6 @@ "demo": "webpack-dev-server --hot --port=9000 --content-base demo --config=node_modules/dash-components-archetype/config/webpack/webpack.config.demo.js",
     "lint": "eslint --fix --ignore-path .gitignore .",
+    "test-frontend": "karma start node_modules/dash-components-archetype/config/karma/karma.conf.js",
+    "test-frontend-cov": "karma start node_modules/dash-components-archetype/config/karma/karma.conf.coverage.js",
+    "test-frontend-debug": "karma start --debug --single-run=false node_modules/dash-components-archetype/config/karma/karma.conf.debug.js",
+    "test-frontend-watch": "karma start --single-run=false node_modules/dash-components-archetype/config/karma/karma.conf.js",
     "transpile-dev": "builder run clean-lib && builder run extract-metadata && babel --source-root ./src/ -d lib/ src/",
@@ -36,0 +40,0 @@ "transpile-dev-watch": "builder run clean-lib && builder run extract-metadata && babel --watch --source-root ./src/ -d lib/ src/"

README.md

@@ -39,2 +39,13 @@ # Dash Components Archetype
 
+### Code quality
+
+To run lint:
+
+```sh
+$ npm test
+```
+
+TODO: ESLint is not reporting problems
+https://github.com/plotly/dash-components-archetype/issues/15
+
 ### Testing your components in Dash
@@ -41,0 +52,0 @@

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37759

37.98%

Number of package files

53

32.5%

Lines of code

603

67.97%

Number of lines in readme file

113

10.78%

Worsened metrics

Number of low supply chain risk alerts

2

100%

No dependency changes