├── .gitignore
├── LICENSE
├── README.md
├── express-app.html
├── express-config.html
├── express-middleware.html
├── express-param.html
├── express-route.html
├── express-router.html
├── package.json
└── test
    ├── express-app-test
        ├── express-app.test.html
        ├── express-app.test.ts
        └── mocha-loader.js
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /npm-debug.log
2 | /node_modules
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2016 Jordan Last
3 | 
4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
5 | 
6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7 | 
8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # What is this?
  2 | This repo contains web components built with the [Google Polymer library](https://www.polymer-project.org/1.0/) that allow you to create [Express.js](https://github.com/expressjs/express) applications. If you have not heard of web components, then please [start learning today](http://webcomponents.org/). Web components offer a way to modularize and package functionality into reusable components that can be easily shared and composed to create entire applications. Currently they are used mostly for front-end web development. Well, what about the back-end? Web components are not only useful for visual components, as the Polymer project [has shown us](https://elements.polymer-project.org/elements/iron-ajax). Now you can build APIs and other server-side applications, leveraging the same declarativeness of the front-end world. We are one step closer to true Universal JavaScript.
  3 | 
  4 | ## Mini Application
  5 | With boilerplate removed, and using Polymer 2, this is a preview of what you can expect server-side web component code to look like:
  6 | 
  7 | ```HTML
  8 | <express-app port="5000">
  9 |     <express-middleware method="get" path="/" callback="[[indexHandler]]"></express-middleware>
 10 |     <express-middleware callback="[[notFoundHandler]]"></express-middleware>
 11 | </express-app>
 12 | 
 13 | <script>
 14 |     class ExampleApp extends Polymer.Element {
 15 |         static get is() { return 'example-app'; }
 16 |         constructor() { super(); }
 17 | 
 18 |         indexHandler(req, res) {
 19 |             res.send('Hola mundo!');
 20 |         }
 21 |         
 22 |         notFoundHandler(req, res) => {
 23 |             res.status(404).send('not found');
 24 |         }
 25 |     }
 26 | </script>
 27 | ```
 28 | 
 29 | ## Examples
 30 | Here are some example Express.js apps that have been rewritten with these web components:
 31 | * https://github.com/scramjs/rest-api-express
 32 | * https://github.com/scramjs/node-api
 33 | * https://github.com/scramjs/node-todo
 34 | * https://github.com/scramjs/node-tutorial-2-restful-app
 35 | * https://github.com/scramjs/node-tutorial-for-frontend-devs
 36 | 
 37 | Here is a [live example](http://scramjs.org/), built with web components on the front-end and the back-end.
 38 | 
 39 | ## Installation
 40 | These web components are meant to be run using [Scram.js](https://github.com/scramjs/scram-engine), which provides access to the Electron runtime, and Express.js, which is one of the most popular web frameworks running on top of Node.js. You must install these dependencies into your project separately:
 41 | 
 42 | ```bash
 43 | bower install --save express-web-components
 44 | npm install --save express
 45 | npm install --save scram-engine
 46 | ```
 47 | 
 48 | [See here](https://github.com/scramjs/scram-engine) for information on how to use these components with Scram.js.
 49 | 
 50 | ## Usage
 51 | In addition to the documentation below, a great place to learn how to use the components is to view this repo's [example](https://github.com/scramjs/express-web-components/tree/master/example/app/server).
 52 | 
 53 | Also, in the documentation I'm attempting to describe the API using TypeScript types. Not all of the types I'm using are real TypeScript types, I'm just hoping it helps describe what is expected. You do not need to use TypeScript to use these components.
 54 | 
 55 | ### Components
 56 | 
 57 | ## `<express-app></express-app>`
 58 | 
 59 | Creates an Express application and calls the Express [app.listen](http://expressjs.com/en/4x/api.html#app.listen) function.
 60 | This component is the parent of all other components that you inted 
 61 | to be a part of the Express application created. As long as you use different ports,
 62 | you can have multiple Express applications running for each instance of `<express-app></express-app>`.
 63 | You can also nest `<express-app></express-app>` elements to create sub-apps.
 64 | 
 65 | ##### Properties
 66 | 
 67 | `port: string | number`
 68 | 
 69 | The port the Express application will run on, as specified by [app.listen](http://expressjs.com/en/4x/api.html#app.listen).
 70 | 
 71 | `path?: string`
 72 | 
 73 | The path that this application instance will be mounted at on the parent app, used when creating a sub-app.
 74 | 
 75 | `hostname?: string`
 76 | 
 77 | An optional hostname the Express application will run on, as specified by [app.listen](http://expressjs.com/en/4x/api.html#app.listen).
 78 | 
 79 | 
 80 | `backlog?: number`
 81 | 
 82 | An optional backlog the Express application will use, as specified by [app.listen](http://expressjs.com/en/4x/api.html#app.listen), and for more info see [server.listen](https://nodejs.org/api/http.html#http_server_listen_port_hostname_backlog_callback).
 83 | 
 84 | `callback?: (e: NodeListeningEvent) => any`
 85 | 
 86 | An optional callback function to be invoked by app.listen, as specified by [app.listen](http://expressjs.com/en/4x/api.html#app.listen)
 87 | 
 88 | ## `<express-config></express-config>`
 89 | 
 90 | Allows specifying a callback function to be invoked with the current pertinent objects of the parent Express application. This is useful for setting configurations, such as calling `express.static(root, [options])`.
 91 | 
 92 | ##### Properties
 93 | 
 94 | `callback: (app: express.Application, express: Express, router: express.Router, route: express.Route) => any`
 95 | 
 96 | A callback function that will be invoked with the the current Express application, the current Express object (from `require('express')`), the current parent router, and the current parent route.
 97 | 
 98 | ## `<express-middleware></express-middleware>`
 99 | 
100 | Allows hooking up Express middleware, i.e. performs the equivalent of [app.use](http://expressjs.com/en/4x/api.html#app.use), [app.get](http://expressjs.com/en/4x/api.html#app.get.method), [app.post](http://expressjs.com/en/4x/api.html#app.post.method), etc.
101 | 
102 | ##### Properties
103 | 
104 | `method?: string`
105 | 
106 | An optional HTTP method to associate the middleware with, as defined by the Express [app.METHOD](http://expressjs.com/en/4x/api.html#app.METHOD). You must specify a path if you specify a method.
107 | 
108 | `path?: string`
109 | 
110 | The optional URL path that the middleware will be associated with. The path will default to `/` if no method is specified. You must specify a path if you specify a method.
111 | 
112 | `callback: (req: express.Request, res: express.Response, next: express.NextFunction) => any`
113 | 
114 | The callback function to be invoked on a matching request.
115 | 
116 | `callbacks?: (req: express.Request, res: express.Response, next: express.NextFunction) => any[]`
117 | 
118 | An optional list of callback functions to be invoked on a matching request.
119 | 
120 | ## `<express-router></express-router>`
121 | 
122 | Creates an Express [router](http://expressjs.com/en/4x/api.html#router). All child components are hooked up to this router.
123 | 
124 | ##### Properties
125 | 
126 | `path?: string`
127 | 
128 | The optional URL path that the router will be associated with. Defaults to `/`.
129 | 
130 | ## `<express-route></express-route>`
131 | 
132 | Creates an Express [route](http://expressjs.com/en/4x/api.html#router.route). All child components are hooked up to this route.
133 | 
134 | ##### Properties
135 | 
136 | `path: string`
137 | 
138 | The URL path that the route will be associated with.
139 | 
140 | ## `<express-param></express-param>`
141 | 
142 | Equivalent to [app.param()](http://expressjs.com/en/4x/api.html#app.param) or [router.param()](http://expressjs.com/en/4x/api.html#router.param), depending on its immediate parent element.
143 | 
144 | ##### Properties
145 | 
146 | `name: string`
147 | 
148 | The name of the parameter that the callback will be triggered for.
149 | 
150 | `callback: (req: express.Request, res: express.Response, next: express.NextFunction, value: string, name: string): => any`
151 | 
152 | The callback triggered on the corresponding route parameter. The parameters to the callback are the request object, the response object, the next middleware, the value of the route parameter, and the name of the route parameter.
153 | 
154 | Node.js is a trademark of Joyent, Inc. and is used with its permission. We are not endorsed by or affiliated with Joyent.
155 | 


--------------------------------------------------------------------------------
/express-app.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     class ExpressApp extends HTMLElement {
  3 |         constructor() {
  4 |             super();
  5 | 
  6 |             this._port = null;
  7 |             this.path = null;
  8 |             this.hostname = null;
  9 |             this.backlog = null;
 10 |         }
 11 | 
 12 |         static get observedAttributes() {
 13 |             return [
 14 |                 'port',
 15 |                 'path',
 16 |                 'hostname',
 17 |                 'backlog'
 18 |             ];
 19 |         }
 20 | 
 21 |         attributeChangedCallback(name, oldValue, newValue) {
 22 |             switch (name) {
 23 |                 case 'port': {
 24 |                     this.port = newValue;
 25 |                     break;
 26 |                 }
 27 |                 case 'path': {
 28 |                     this.path = newValue;
 29 |                     break;
 30 |                 }
 31 |                 case 'hostname': {
 32 |                     this.hostname = newValue;
 33 |                     break;
 34 |                 }
 35 |                 case 'backlog': {
 36 |                     this.backlog = newValue;
 37 |                     break;
 38 |                 }
 39 |             }
 40 |         }
 41 | 
 42 |         set port(val) {
 43 |             this._port = val;
 44 |             this.listen();
 45 |         }
 46 | 
 47 |         get port() {
 48 |             return this._port;
 49 |         }
 50 | 
 51 |         connectedCallback() {
 52 |             this.prepareApp();
 53 |         }
 54 | 
 55 |         prepareApp() {
 56 |             if (!this.express && !this.app) {
 57 |                 this.express = require('express');
 58 |                 this.app = this.express();
 59 |             }
 60 |         }
 61 | 
 62 |         listen() {
 63 |             this.prepareApp();
 64 |             setTimeout(() => { //TODO this probably is not necessary. This timeout was thought to allow all properties to be set in the host element
 65 |                 const defaultCallback = () => {
 66 |                     console.log(`express app listening on port: ${this._port}`);
 67 |                 };
 68 |                 const theCallback = this._callback || defaultCallback;
 69 | 
 70 |                 this.app.listen(this._port, this.hostname, this.backlog, theCallback);
 71 | 
 72 |                 this.initChildren();
 73 |             });
 74 |         }
 75 | 
 76 |         //TODO I am not sure why this method is here...if it has no useful purpose then remove it
 77 |         expressReadyCallback(app, express, router, route) {
 78 |             if (this.path) {
 79 |                 app.use(this.path, this.app);
 80 |             }
 81 |             else {
 82 |                 app.use(this.app);
 83 |             }
 84 | 
 85 |             this.initChildren();
 86 |         }
 87 | 
 88 |         initChildren() {
 89 |             const _expressInitChildren = (element, app, express, router, route) => {
 90 |                 const children = Array.from(element.shadowRoot ? element.shadowRoot.children : element.children);
 91 |                 children.forEach((child) => {
 92 |                     if (child.expressReadyCallback) {
 93 |                         child.expressReadyCallback(app, express, router, route);
 94 |                     }
 95 | 
 96 |                     child._expressInitChildren = _expressInitChildren;
 97 |                     child._expressInitChildren(child, app, express, router ? router : child.router, route ? route : child.route);
 98 |                 });
 99 |             };
100 |             _expressInitChildren(this, this.app, this.express, null, null);
101 |         }
102 |     }
103 | 
104 |     window.customElements.define('express-app', ExpressApp);
105 | </script>
106 | 


--------------------------------------------------------------------------------
/express-config.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     class ExpressConfig extends HTMLElement {
 3 |         constructor() {
 4 |             super();
 5 | 
 6 |             this.callback = null;
 7 |         }
 8 | 
 9 |         expressReadyCallback(app, express, router, route) {
10 |             this.callback(app, express);
11 |         }
12 |     }
13 | 
14 |     window.customElements.define('express-config', ExpressConfig);
15 | </script>
16 | 


--------------------------------------------------------------------------------
/express-middleware.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     class ExpressMiddleware extends HTMLElement {
  3 |         constructor() {
  4 |             super();
  5 | 
  6 |             this.method = null;
  7 |             this.path = null;
  8 |             this.callback = null;
  9 |             this.callbacks = null;
 10 |             this.app = null;
 11 |             this.router = null;
 12 |             this.route = null;
 13 |         }
 14 | 
 15 |         static get observedAttributes() {
 16 |             return [
 17 |                 'method',
 18 |                 'path'
 19 |             ];
 20 |         }
 21 | 
 22 |         attributeChangedCallback(name, oldValue, newValue) {
 23 |             switch (name) {
 24 |                 case 'method': {
 25 |                     this.method = newValue;
 26 |                     break;
 27 |                 }
 28 |                 case 'path': {
 29 |                     this.path = newValue;
 30 |                     break;
 31 |                 }
 32 |             }
 33 |         }
 34 | 
 35 |         expressReadyCallback(app, express, router, route) {
 36 |             this.app = app;
 37 |             this.router = router;
 38 |             this.route = route;
 39 | 
 40 |             if (this.callback) {
 41 |                 this.initRouteWithCallback();
 42 |                 return;
 43 |             }
 44 | 
 45 |             if (this.callbacks) {
 46 |                 this.initRouteWithCallbacks();
 47 |                 return;
 48 |             }
 49 |         }
 50 | 
 51 |         initRouteWithCallback() {
 52 |             if (this.method) {
 53 | 
 54 |                 if (!this.path) {
 55 |                     throw 'ExpressMiddlewareError: specifying a method requires specifying a path';
 56 |                 }
 57 | 
 58 |                 if (this.route) {
 59 |                     this.route[this.method.toLowerCase()](this.callback);
 60 |                 }
 61 |                 else if (this.router) {
 62 |                     this.router[this.method.toLowerCase()](this.path, this.callback);
 63 |                 }
 64 |                 else {
 65 |                     this.app[this.method.toLowerCase()](this.path, this.callback);
 66 |                 }
 67 | 
 68 |                 return;
 69 |             }
 70 | 
 71 |             if (this.path) {
 72 |                 if (this.router) {
 73 |                     this.router.use(this.path, this.callback);
 74 |                 }
 75 |                 else {
 76 |                     this.app.use(this.path, this.callback);
 77 |                 }
 78 | 
 79 |                 return;
 80 |             }
 81 | 
 82 |             if (this.router) {
 83 |                 this.router.use(this.callback);
 84 |             }
 85 |             else {
 86 |                 this.app.use(this.callback);
 87 |             }
 88 |         }
 89 | 
 90 |         initRouteWithCallbacks() {
 91 | 
 92 |             if (this.method) {
 93 | 
 94 |                 if (this.route) {
 95 |                     this.route[this.method.toLowerCase()](...this.callbacks);
 96 |                 }
 97 |                 else if (this.router) {
 98 |                     this.router[this.method.toLowerCase()](this.path, ...this.callbacks);
 99 |                 }
100 |                 else {
101 |                     this.app[this.method.toLowerCase()](this.path, ...this.callbacks);
102 |                 }
103 | 
104 |                 return;
105 |             }
106 | 
107 |             if (this.path) {
108 | 
109 |                 if (this.router) {
110 |                     this.router.use(this.path, ...this.callbacks);
111 |                 }
112 |                 else {
113 |                     this.app.use(this.path, ...this.callbacks);
114 |                 }
115 | 
116 |                 return;
117 |             }
118 | 
119 |             if (this.router) {
120 |                 this.router.use(...this.callback);
121 |             }
122 |             else {
123 |                 this.app.use(...this.callback);
124 |             }
125 |         }
126 |     }
127 | 
128 |     window.customElements.define('express-middleware', ExpressMiddleware);
129 | </script>
130 | 


--------------------------------------------------------------------------------
/express-param.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     class ExpressParam extends HTMLElement {
 3 |         constructor() {
 4 |             super();
 5 | 
 6 |             this.name = null;
 7 |             this.callback = null;
 8 |         }
 9 | 
10 |         static get observedAttributes() {
11 |             return [
12 |                 'name'
13 |             ];
14 |         }
15 | 
16 |         attributeChangedCallback(name, oldValue, newValue) {
17 |             switch (name) {
18 |                 case 'name': {
19 |                     this.name = newValue;
20 |                     break;
21 |                 }
22 |             }
23 |         }
24 | 
25 |         expressReadyCallback(app, express, router, route) {
26 |             if (router) {
27 |                 prepareWithRouter(this, router);
28 |             }
29 |             else {
30 |                 prepareWithApp(this, app);
31 |             }
32 | 
33 |             function prepareWithRouter(context, router) {
34 | 
35 |                 if (!context.name) {
36 |                     console.log('using router.param() without specifying a name is deprecated as of Express v4.11.0');
37 |                 }
38 | 
39 |                 if (Array.isArray(context.name)) {
40 |                     throw 'ExpressParamError: router.param() does not accept an array of route parameters';
41 |                 }
42 | 
43 |                 router.param(context.name, context.callback);
44 |             }
45 | 
46 |             function prepareWithApp(context, app) {
47 |                 app.param(context.name, context.callback);
48 |             }
49 |         }
50 |     }
51 | 
52 |     window.customElements.define('express-param', ExpressParam);
53 | </script>
54 | 


--------------------------------------------------------------------------------
/express-route.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     class ExpressRouteComponent extends HTMLElement {
 3 |         constructor() {
 4 |             super();
 5 | 
 6 |             this.path = null;
 7 |         }
 8 | 
 9 |         static get observedAttributes() {
10 |             return [
11 |                 'path'
12 |             ];
13 |         }
14 | 
15 |         attributeChangedCallback(name, oldValue, newValue) {
16 |             switch (name) {
17 |                 case 'path': {
18 |                     this.path = newValue;
19 |                     break;
20 |                 }
21 |             }
22 |         }
23 | 
24 |         expressReadyCallback(app, express, router, route) {
25 |             const parent = getParent(app, router);
26 |             const newRoute = parent.route(this.path);
27 | 
28 |             this.route = newRoute;
29 | 
30 |             function getParent(app, router) {
31 |                 if (router) {
32 |                     return router;
33 |                 }
34 |                 else {
35 |                     return app;
36 |                 }
37 |             }
38 |         }
39 |     }
40 | 
41 |     window.customElements.define('express-route', ExpressRoute);
42 | </script>
43 | 


--------------------------------------------------------------------------------
/express-router.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     class ExpressRouter extends HTMLElement {
 3 |         constructor() {
 4 |             super();
 5 | 
 6 |             this.path = null;
 7 |         }
 8 | 
 9 |         static get observedAttributes() {
10 |             return [
11 |                 'path'
12 |             ];
13 |         }
14 | 
15 |         attributeChangedCallback(name, oldValue, newValue) {
16 |             switch (name) {
17 |                 case 'path': {
18 |                     this.path = newValue;
19 |                     break;
20 |                 }
21 |             }
22 |         }
23 | 
24 |         expressReadyCallback(app, express, router, route) {
25 |             const parentRouter = router;
26 |             const newRouter = express.Router();
27 | 
28 |             this.router = newRouter;
29 | 
30 |             if (parentRouter) {
31 |                 parentRouter.use(this.path, newRouter);
32 |             }
33 |             else {
34 |                 app.use(this.path, newRouter);
35 |             }
36 |         }
37 |     }
38 | 
39 |     window.customElements.define('express-router', ExpressRouter);
40 | </script>
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "express-web-components",
 3 |   "version": "0.5.4",
 4 |   "description": "Declaratively build Express applications with web components.",
 5 |   "keywords": [
 6 |     "web-components"
 7 |   ],
 8 |   "scripts": {
 9 |     "test": "electron node_modules/scram-engine/main.js test/index.html -d -p 5052"
10 |   },
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "axios": "^0.12.0",
14 |     "chai": "^3.5.0",
15 |     "cors": "^2.7.1",
16 |     "express": "^4.14.0",
17 |     "mocha": "^2.5.3"
18 |   },
19 |   "dependencies": {
20 |     "express": "^4.15.3"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/test/express-app-test/express-app.test.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../bower_components/polymer/polymer.html">
  2 | 
  3 | <link rel="import" href="../../bower_components/express-web-components/express-app.html">
  4 | <link rel="import" href="../../bower_components/express-web-components/express-config.html">
  5 | <link rel="import" href="../../bower_components/express-web-components/express-middleware.html">
  6 | 
  7 | <dom-module id="express-app-test">
  8 |     <template>
  9 |         <express-app port="2000">
 10 |             <express-middleware callback="[[corsMW]]"></express-middleware>
 11 |             <express-middleware callback="[[portHandler]]"></express-middleware>
 12 |         </express-app>
 13 | 
 14 |         <express-app port="3000">
 15 |             <express-middleware callback="[[corsMW]]"></express-middleware>
 16 |             <express-middleware callback="[[portHandler]]"></express-middleware>
 17 |         </express-app>
 18 | 
 19 |         <express-app port="4000">
 20 |             <express-middleware callback="[[corsMW]]"></express-middleware>
 21 |             <express-middleware callback="[[portHandler]]"></express-middleware>
 22 |         </express-app>
 23 | 
 24 |         <express-app port="5000">
 25 |             <express-middleware callback="[[corsMW]]"></express-middleware>
 26 |             <express-middleware callback="[[portHandler]]"></express-middleware>
 27 |         </express-app>
 28 | 
 29 |         <express-app port="6000">
 30 |             <express-middleware callback="[[corsMW]]"></express-middleware>
 31 |             <express-middleware callback="[[portHandler]]"></express-middleware>
 32 |         </express-app>
 33 | 
 34 |         <express-app port="[[port7000]]">
 35 |             <express-middleware callback="[[corsMW]]"></express-middleware>
 36 |             <express-middleware callback="[[portHandler]]"></express-middleware>
 37 |         </express-app>
 38 | 
 39 |         <express-app port="[[port8000]]">
 40 |             <express-middleware callback="[[corsMW]]"></express-middleware>
 41 |             <express-middleware callback="[[portHandler]]"></express-middleware>
 42 |         </express-app>
 43 | 
 44 |         <express-app port="[[port9000]]">
 45 |             <express-middleware callback="[[corsMW]]"></express-middleware>
 46 |             <express-middleware callback="[[portHandler]]"></express-middleware>
 47 |         </express-app>
 48 | 
 49 |         <express-app port="[[port10000]]">
 50 |             <express-middleware callback="[[corsMW]]"></express-middleware>
 51 |             <express-middleware callback="[[portHandler]]"></express-middleware>
 52 |         </express-app>
 53 | 
 54 |         <express-app port="5100" hostname="localhost"></express-app>
 55 |         <express-app port="5200" hostname="[[hostname]]"></express-app>
 56 | 
 57 |         <express-app port="5300" callback="[[callbackTest]]"></express-app>
 58 | 
 59 |         <express-app port="5400">
 60 |             <express-config callback="[[initChildren1]]"></express-config>
 61 |         </express-app>
 62 | 
 63 |         <express-app port="5500">
 64 |             <express-config callback="[[initChildren2]]"></express-config>
 65 |             <express-config callback="[[initChildren3]]"></express-config>
 66 |             <express-config callback="[[initChildren4]]"></express-config>
 67 |         </express-app>
 68 |     </template>
 69 | 
 70 |     <script>
 71 |         class ExpressAppTestComponent {
 72 |             beforeRegister() {
 73 |                 this.is = 'express-app-test';
 74 |             }
 75 | 
 76 |             ready() {
 77 |                 const cors = require('cors');
 78 | 
 79 |                 this.corsMW = cors();
 80 | 
 81 |                 this.port7000 = 7000;
 82 |                 this.port8000 = 8000;
 83 |                 this.port9000 = 9000;
 84 |                 this.port10000 = 10000;
 85 | 
 86 |                 this.hostname = 'localhost';
 87 | 
 88 |                 this.callbackTest = () => {
 89 |                     window.callbackTestWorked = true;
 90 |                 };
 91 | 
 92 |                 this.portHandler = (req, res) => {
 93 |                     res.status(200).end();
 94 |                 };
 95 | 
 96 |                 this.initChildren1 = () => {
 97 |                     window.initChildren1 = true;
 98 |                 };
 99 | 
100 |                 this.initChildren2 = () => {
101 |                     window.initChildren2 = true;
102 |                 };
103 | 
104 |                 this.initChildren3 = () => {
105 |                     window.initChildren3 = true;
106 |                 };
107 | 
108 |                 this.initChildren4 = () => {
109 |                     window.initChildren4 = true;
110 |                 };
111 | 
112 |                 this.runMocha();
113 |             }
114 | 
115 |             runMocha() {
116 |                 const Mocha = require('mocha');
117 |                 const mocha = new Mocha();
118 | 
119 |                 mocha.addFile('test/express-app-test/mocha-loader.js');
120 |                 mocha.run();
121 |             }
122 |         }
123 | 
124 |         Polymer(ExpressAppTestComponent);
125 |     </script>
126 | </dom-module>
127 | 


--------------------------------------------------------------------------------
/test/express-app-test/express-app.test.ts:
--------------------------------------------------------------------------------
 1 | const assert = require('chai').assert;
 2 | const axios = require('axios');
 3 | 
 4 | describe('express-app tests', function() {
 5 |     describe('Developer can set the port directly in the HTML to any available port.', function() {
 6 |         it('should receive correct responses for each request', async function(done) {
 7 |             const response2000 = await axios.create({
 8 |                 baseURL: 'http://localhost:2000'
 9 |             }).get('/');
10 | 
11 |             const response3000 = await axios.create({
12 |                 baseURL: 'http://localhost:2000'
13 |             }).get('/');
14 | 
15 |             const response4000 = await axios.create({
16 |                 baseURL: 'http://localhost:2000'
17 |             }).get('/');
18 | 
19 |             const response5000 = await axios.create({
20 |                 baseURL: 'http://localhost:2000'
21 |             }).get('/');
22 | 
23 |             const response6000 = await axios.create({
24 |                 baseURL: 'http://localhost:2000'
25 |             }).get('/');
26 | 
27 |             const response7000 = await axios.create({
28 |                 baseURL: 'http://localhost:7000'
29 |             }).get('/');
30 | 
31 |             const response8000 = await axios.create({
32 |                 baseURL: 'http://localhost:8000'
33 |             }).get('/');
34 | 
35 |             const response9000 = await axios.create({
36 |                 baseURL: 'http://localhost:9000'
37 |             }).get('/');
38 | 
39 |             const response10000 = await axios.create({
40 |                 baseURL: 'http://localhost:10000'
41 |             }).get('/');
42 | 
43 |             assert.equal(response2000.status, 200);
44 |             assert.equal(response3000.status, 200);
45 |             assert.equal(response4000.status, 200);
46 |             assert.equal(response5000.status, 200);
47 |             assert.equal(response6000.status, 200);
48 |             assert.equal(response7000.status, 200);
49 |             assert.equal(response8000.status, 200);
50 |             assert.equal(response9000.status, 200);
51 |             assert.equal(response10000.status, 200);
52 | 
53 |             done();
54 |         });
55 |     });
56 | 
57 |     describe('The hostname is set', function() {
58 |         it('should not throw an error when the hostname is passed in as a string literal to the HTML attribute', function() {});
59 |         it('should not throw an error when the hostname is passed in through data binding', function() {});
60 |     });
61 | 
62 |     describe('Bind a function to <express-app>`s callback property and the function runs after the app is initialized', function() {
63 |         it('should set callbackTestWorked to true', function() {
64 |             assert.equal(window.callbackTestWorked, true);
65 |         });
66 |     });
67 | 
68 |     describe('initializes children', function() {
69 |         it('should initialize 1 child', function() {
70 |             assert.equal(window.initChildren1, true);
71 |         });
72 | 
73 |         it('should initialize multiple children', function() {
74 |             assert.equal(window.initChildren2, true);
75 |             assert.equal(window.initChildren3, true);
76 |             assert.equal(window.initChildren4, true);
77 |         });
78 |     });
79 | });
80 | 


--------------------------------------------------------------------------------
/test/express-app-test/mocha-loader.js:
--------------------------------------------------------------------------------
1 | describe('running tests', function() {
2 |     it('should run the tests', function(done) {
3 |         System.import('express-app-test/express-app.test.ts').then(() => {
4 |             done();
5 |         });
6 |     });
7 | });
8 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <script src="../node_modules/systemjs/dist/system.js"></script>
 6 |         <script src="../node_modules/es-no-build/config.js"></script>
 7 | 
 8 |         <link rel="import" href="express-app-test/express-app.test.html">
 9 |     </head>
10 | 
11 |     <body>
12 |         <express-app-test></express-app-test>
13 |     </body>
14 | 
15 | </html>
16 | 


--------------------------------------------------------------------------------