slush-react-express - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

CHANGELOG.md

 Changelog - slush-react-express
 ==============
 
+# 3.3.0
+
+* Full templates now have React unit tests using the React shallow renderer.
+
 # 3.2.0
@@ -5,0 +9,0 @@

package.json

 {
   "name": "slush-react-express",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "A generator for a node express web app using react",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -106,5 +106,6 @@ slush-react-express
             ├── config.js                   # Configuration file for jspm
-            ├── index.js/tsx                # Main react component and entry point (TypeScript file in src/)
+            ├── index.js/tsx                # Main entry point (TypeScript file in src/)
             ├── view
-                └── NameLoaderView.js/tsx   # Sample react component (TypeScript file in src/)
+                ├── NameLoader.js/tsx       # Sample react stateful component (TypeScript file in src/)
+                └── NameLoaderView.js/tsx   # Sample react stateless component (TypeScript file in src/)
             └── style
@@ -118,6 +119,16 @@ └── index.css/scss          # Main app stylesheet
             └── index.js/ts                 # Sample route
+        ├── lib                             #
+            └── error-message.js/ts         # Class that describes a server error
+        ├── view                            # Express routes go here
+            ├── error.js/ts                 # Error React component
+            └── layout.js/ts                # Layout React component to generate valid HTML
         ├── app.js/ts                       # Express app definition
         └── server.js/ts                    # Main node entry point
 └── test                                    # Mocha tests go here
-    └── server
+    ├── client                              # Client side tests
+        ├── util                                  
+            └── Wrapper.js/tsx              # React wrapper for stateless components
+        ├── NameLoader-test.js/tsx          # Sample tests for the NameLoader component
+        └── NameLoaderView-test.js/tsx      # Sample tests for the NameLoaderView component
+    └── server                              # Server side tests
         ├── util                                
@@ -124,0 +135,0 @@ └── address.js/ts               # Sample test util

templates/full/javascript/gulpconfig.js

@@ -42,4 +42,8 @@ // This config file enables you to adjust the default locations and plugin
   // default: 'test/server'
-  testDir: 'test/server',
+  testDirServer: 'test/server',
 
+  // Client tests source files location
+  // default: 'test/client'
+  testDirClient: 'test/client',
+
   // Specify which plugins are activated for the production build
@@ -46,0 +50,0 @@ plugins: {

templates/full/javascript/gulpfile.js

@@ -144,6 +144,9 @@ 'use strict';
 
+// Runs all unit test within the test directory with mocha
+gulp.task('test', ['test:client']);
+
 // Copies all server side tests
-gulp.task('copy:tests', ['build'], () => {
+gulp.task('copy:server-tests', ['build'], () => {
   return gulp.src([
-      `${config.testDir}/**/**`,
+      `${config.testDirServer}/**/**`,
     ], { base: './' })
@@ -157,5 +160,5 @@ .pipe(gulp.dest(config.buildOutDir));
 
-// Runs all unit test within the test directory with mocha
-gulp.task('test', ['copy:tests'], () => {
-  return gulp.src(`${path.join(config.buildOutDir, config.testDir)}/**/*.js`, { read: false })
+// Runs all server tests
+gulp.task('test:server', ['copy:server-tests'], () => {
+  return gulp.src(`${path.join(config.buildOutDir, config.testDirServer)}/**/*.js`, { read: false })
     .pipe(gulpMocha({
@@ -168,2 +171,12 @@ require: ['env-test']
 
+// Runs all client side tests
+gulp.task('test:client', ['test:server'], () => {
+  require('babel-core/register') // Use babel to translate client test files
+  return gulp.src(`${config.testDirClient}/**/*.js`, { read: false })
+    .pipe(gulpMocha({
+      compilers: ['js:babel-core/register'],
+      require: ['env-test']
+    }));
+});
+
 // Creates a node server which will be used by 'gulp watch'
@@ -170,0 +183,0 @@ gulp.task('server', () => {

templates/full/javascript/package.json

@@ -6,3 +6,5 @@ {
     "start": "node src/server/server.js",
-    "test": "mocha test/server/ --require=env-test",
+    "test": "npm run test-client && npm run test-server",
+    "test-client": "mocha test/client/ --compilers js:babel-core/register --require=env-test",
+    "test-server": "mocha test/server/ --require=env-test",
     "postinstall": "jspm install"
@@ -18,2 +20,3 @@ },
   "devDependencies": {
+    "babel-core": "^5.8.34",
     "chokidar-socket-emitter": "^0.3.0",
@@ -37,2 +40,3 @@ "del": "^2.1.0",
     "morgan": "^1.6.1",
+    "react-addons-test-utils": "^0.14.3",
     "should": "^7.1.1",
@@ -39,0 +43,0 @@ "superagent": "^1.4.0"

templates/full/javascript/src/client/app/index.js

@@ -1,28 +0,8 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { render } from 'react-dom';
-import NameLoaderView from './view/NameLoaderView';
+import NameLoader from './view/NameLoader';
 
 import './style/index.<%= styleExt %>!';
 
-// React component that handles the button click
-class NameLoader extends Component {
-  constructor(...props) {
-    super(...props);
-
-    this.state = { appName: '' };
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick() {
-    fetch('/api')
-      .then(response => response.text())
-      .then(text => this.setState({ appName: text }));
-  }
-
-  render() {
-    return <NameLoaderView appName={this.state.appName} staticName={this.props.staticName} handleClick={this.handleClick} />;
-  }
-}
-
 // Tell react to render the component
 render(<NameLoader staticName="<%= appname %>" />, document.getElementById('content'));

templates/full/typescript/gulpfile.ts

@@ -223,3 +223,3 @@ 'use strict';
     `${config.serverSourceDir}/**/*.js`,
-    `${config.testDir}/**/*.js`,
+    `test/**/*.js`,
     `gulpfile.js`,
@@ -226,0 +226,0 @@ `gulpconfig.js`

templates/full/typescript/package.json

@@ -6,3 +6,5 @@ {
     "start": "ts-node src/server/server.ts",
-    "test": "gulp test",
+    "test": "npm run test-client && npm run test-server",
+    "test-client": "tsc && mocha --recursive test/client/ && gulp clean",
+    "test-server": "gulp test",
     "postinstall": "tsd install && jspm install"
@@ -38,2 +40,3 @@ },
     "morgan": "^1.6.1",
+    "react-addons-test-utils": "^0.14.3",
     "should": "^7.1.1",
@@ -40,0 +43,0 @@ "superagent": "^1.4.0",

templates/full/typescript/tsd.json

@@ -118,4 +118,7 @@ {
       "commit": "1b669554c2b8a91616cea3f7eb1403238667fd8d"
+    },
+    "react/react-addons-test-utils.d.ts": {
+      "commit": "1b669554c2b8a91616cea3f7eb1403238667fd8d"
     }
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2771222

increased by0.25%

Number of package files

61

increased by15.09%

Lines of code

75068

increased by0.2%

Number of lines in readme file

198

increased by5.88%

No dependency changes