Merge pull request #184 from gengo/feature/browser-example

Add browser examples

.travis.yml

@@ -9,21 +9,26 @@ go:
 cache:
   directories:
   - $HOME/local
+  - ${TRAVIS_BUILD_DIR}/examples/browser/node_modules
 before_install:
 - ./.travis/build-protoc.sh 3.0.0-beta-3
 - ./.travis/install-swagger-codegen.sh 2.1.6
+- nvm install v6.1 && nvm use v6.1 && node --version
 - go get github.com/golang/lint/golint
 - go get github.com/dghubble/sling
 install:
 - go get github.com/gengo/grpc-gateway/protoc-gen-grpc-gateway
 - go get github.com/gengo/grpc-gateway/runtime
 - go get github.com/gengo/grpc-gateway/examples
 - go get github.com/gengo/grpc-gateway/examples/server
+before_script:
+- sh -c 'cd examples/browser && npm install'
 script:
 - make realclean && make examples SWAGGER_CODEGEN="java -jar $HOME/local/swagger-codegen-cli.jar"
 - if ! go version | grep devel; then test -z "$(git status --porcelain)" || (git status; git diff; exit 1); fi
 - env GLOG_logtostderr=1 go test -race -v github.com/gengo/grpc-gateway/...
 - make lint
+- sh -c 'cd examples/browser && gulp'
 env:
   global:
   - "PATH=$PATH:$HOME/local/bin"

examples/browser/.gitignore

@@ -0,0 +1,2 @@
+/bower_components
+/node_modules

examples/browser/README.md

@@ -0,0 +1,31 @@
+# Browser example
+
+This directory contains an example use of grpc-gateway with web browsers.
+The following commands automatically runs integration tests with phantomjs.
+
+```shell-session
+$ npm install -g gulp-cli
+$ npm install
+$ gulp
+```
+
+## Other examples
+
+### Very simple example
+Run
+```shell-session
+$ gulp bower
+$ gulp backends
+```
+
+then, open `index.html`.
+
+
+### Integration test with your browser
+
+Run
+```shell-session
+$ gulp serve
+```
+
+then, open `http://localhost:8000` with your browser.

examples/browser/a_bit_of_everything_service.spec.js

@@ -0,0 +1,185 @@
+'use strict';
+
+var SwaggerClient = require('swagger-client');
+
+describe('ABitOfEverythingService', function() {
+  var client;
+
+  beforeEach(function(done) {
+    new SwaggerClient({
+      url: "http://localhost:8080/swagger/a_bit_of_everything.swagger.json",
+      usePromise: true,
+    }).then(function(c) {
+      client = c;
+    }).catch(function(err) {
+      done.fail(err);
+    }).then(done);
+  });
+
+  describe('Create', function() {
+    var created;
+    var expected = {
+      float_value: 1.5,
+      double_value: 2.5,
+      int64_value: "4294967296",
+      uint64_value: "9223372036854775807",
+      int32_value: -2147483648,
+      fixed64_value: "9223372036854775807",
+      fixed32_value: 4294967295,
+      bool_value: true,
+      string_value: "strprefix/foo",
+      uint32_value: 4294967295,
+      sfixed32_value: 2147483647,
+      sfixed64_value: "-4611686018427387904",
+      sint32_value: 2147483647,
+      sint64_value: "4611686018427387903",
+      nonConventionalNameValue: "camelCase",
+    };
+
+    beforeEach(function(done) {
+      client.ABitOfEverythingService.Create(expected).then(function(resp) {
+        created = resp.obj;
+      }).catch(function(err) {
+        done.fail(err);
+      }).then(done);
+    });
+
+    it('should assign id', function() {
+      expect(created.uuid).not.toBe("");
+    });
+
+    it('should echo the request back', function() {
+      delete created.uuid;
+      expect(created).toEqual(expected);
+    });
+  });
+
+  describe('CreateBody', function() {
+    var created;
+    var expected = {
+      float_value: 1.5,
+      double_value: 2.5,
+      int64_value: "4294967296",
+      uint64_value: "9223372036854775807",
+      int32_value: -2147483648,
+      fixed64_value: "9223372036854775807",
+      fixed32_value: 4294967295,
+      bool_value: true,
+      string_value: "strprefix/foo",
+      uint32_value: 4294967295,
+      sfixed32_value: 2147483647,
+      sfixed64_value: "-4611686018427387904",
+      sint32_value: 2147483647,
+      sint64_value: "4611686018427387903",
+      nonConventionalNameValue: "camelCase",
+
+      nested: [
+       { name: "bar", amount: 10 },
+       { name: "baz", amount: 20 },
+      ],
+      repeated_string_value: ["a", "b", "c"],
+      oneof_string: "x",
+      // TODO(yugui) Support enum by name
+      map_value: { a: 1, b: 2 },
+      mapped_string_value: { a: "x", b: "y" },
+      mapped_nested_value: {
+        a: { name: "x", amount: 1 },
+        b: { name: "y", amount: 2 },
+      },
+    };
+
+    beforeEach(function(done) {
+      client.ABitOfEverythingService.CreateBody({
+        body: expected,
+      }).then(function(resp) {
+        created = resp.obj;
+      }).catch(function(err) {
+        done.fail(err);
+      }).then(done);
+    });
+
+    it('should assign id', function() {
+      expect(created.uuid).not.toBe("");
+    });
+
+    it('should echo the request back', function() {
+      delete created.uuid;
+      expect(created).toEqual(expected);
+    });
+  });
+
+  describe('lookup', function() {
+    var created;
+    var expected = {
+      bool_value: true,
+      string_value: "strprefix/foo",
+    };
+
+    beforeEach(function(done) {
+      client.ABitOfEverythingService.CreateBody({
+        body: expected,
+      }).then(function(resp) {
+        created = resp.obj;
+      }).catch(function(err) {
+        fail(err);
+      }).finally(done);
+    });
+
+    it('should look up an object by uuid', function(done) {
+      client.ABitOfEverythingService.Lookup({
+        uuid: created.uuid
+      }).then(function(resp) {
+        expect(resp.obj).toEqual(created);
+      }).catch(function(err) {
+        fail(err.errObj);
+      }).finally(done);
+    });
+
+    it('should fail if no such object', function(done) {
+      client.ABitOfEverythingService.Lookup({
+        uuid: 'not_exist',
+      }).then(function(resp) {
+        fail('expected failure but succeeded');
+      }).catch(function(err) {
+        expect(err.status).toBe(404);
+      }).finally(done);
+    });
+  });
+
+  describe('Delete', function() {
+    var created;
+    var expected = {
+      bool_value: true,
+      string_value: "strprefix/foo",
+    };
+
+    beforeEach(function(done) {
+      client.ABitOfEverythingService.CreateBody({
+        body: expected,
+      }).then(function(resp) {
+        created = resp.obj;
+      }).catch(function(err) {
+        fail(err);
+      }).finally(done);
+    });
+
+    it('should delete an object by id', function(done) {
+      client.ABitOfEverythingService.Delete({
+        uuid: created.uuid
+      }).then(function(resp) {
+        expect(resp.obj).toEqual({});
+      }).catch(function(err) {
+        fail(err.errObj);
+      }).then(function() {
+        return client.ABitOfEverythingService.Lookup({
+          uuid: created.uuid
+        });
+      }).then(function(resp) {
+        fail('expected failure but succeeded');
+      }). catch(function(err) {
+        expect(err.status).toBe(404);
+      }).finally(done);
+    });
+  });
+});
+

examples/browser/bin/.gitignore

@@ -0,0 +1,2 @@
+/*
+!/.gitignore

examples/browser/bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "grpc-gateway-example-browser",
+  "description": "Example use of grpc-gateway from browser",
+  "main": "index.js",
+  "authors": [
+    "Yuki Yugui Sonoda <yugui@gengo.com>"
+  ],
+  "license": "SEE LICENSE IN LICENSE file",
+  "homepage": "https://github.com/gengo/grpc-gateway",
+  "private": true,
+  "dependencies": {
+    "swagger-js": "~> 2.1"
+  },
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

examples/browser/echo_service.spec.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var SwaggerClient = require('swagger-client');
+
+describe('EchoService', function() {
+  var client;
+
+  beforeEach(function(done) {
+    new SwaggerClient({
+      url: "http://localhost:8080/swagger/echo_service.swagger.json",
+      usePromise: true,
+    }).then(function(c) {
+      client = c;
+      done();
+    });
+  });
+
+  describe('Echo', function() {
+    it('should echo the request back', function(done) {
+      client.EchoService.Echo(
+          {id: "foo"},
+          {responseContentType: "application/json"}
+      ).then(function(resp) {
+        expect(resp.obj).toEqual({id: "foo"});
+      }).catch(function(err) {
+        done.fail(err);
+      }).then(done);
+    });
+  });
+
+  describe('EchoBody', function() {
+    it('should echo the request back', function(done) {
+      client.EchoService.EchoBody(
+          {body: {id: "foo"}},
+          {responseContentType: "application/json"}
+      ).then(function(resp) {
+        expect(resp.obj).toEqual({id: "foo"});
+      }).catch(function(err) {
+        done.fail(err);
+      }).then(done);
+    });
+  });
+});

examples/browser/gulpfile.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var gulp = require('gulp');
+
+var path = require('path');
+
+var bower = require('gulp-bower');
+var exit = require('gulp-exit');
+var gprocess = require('gulp-process');
+var shell = require('gulp-shell');
+var jasmineBrowser = require('gulp-jasmine-browser');
+var webpack = require('webpack-stream');
+
+gulp.task('bower', function(){
+  return bower();
+});
+
+gulp.task('server', shell.task([
+  'go build -o bin/example-server github.com/gengo/grpc-gateway/examples/server',
+]));
+
+gulp.task('gateway', shell.task([
+  'go build -o bin/example-gw github.com/gengo/grpc-gateway/examples',
+]));
+
+gulp.task('serve-server', ['server'], function(){
+  gprocess.start('server-server', 'bin/example-server', [
+      '--logtostderr',
+  ]);
+  gulp.watch('bin/example-server', ['serve-server']);
+});
+
+gulp.task('serve-gateway', ['gateway', 'serve-server'], function(){
+  gprocess.start('gateway-server', 'bin/example-gw', [
+      '--logtostderr', '--swagger_dir', path.join(__dirname, "../examplepb"),
+  ]);
+  gulp.watch('bin/example-gateway', ['serve-gateway']);
+});
+
+gulp.task('backends', ['serve-gateway', 'serve-server']);
+
+var specFiles = ['*.spec.js'];
+gulp.task('test', ['backends'], function(done) {
+  return gulp.src(specFiles)
+    .pipe(webpack({output: {filename: 'spec.js'}}))
+    .pipe(jasmineBrowser.specRunner({
+      console: true,
+      sourceMappedStacktrace: true,
+    }))
+    .pipe(jasmineBrowser.headless({
+      findOpenPort: true,
+      catch: true,
+      throwFailures: true,
+    }))
+    .on('error', function(err) {
+      done(err);
+      process.exit(1);
+    })
+    .pipe(exit());
+});
+
+gulp.task('serve', ['backends'], function(done) {
+  var JasminePlugin = require('gulp-jasmine-browser/webpack/jasmine-plugin');
+  var plugin = new JasminePlugin();
+
+  return gulp.src(specFiles)
+    .pipe(webpack({
+      output: {filename: 'spec.js'},
+      watch: true,
+      plugins: [plugin],
+    }))
+    .pipe(jasmineBrowser.specRunner({
+      sourceMappedStacktrace: true,
+    }))
+    .pipe(jasmineBrowser.server({
+      port: 8000,
+      whenReady: plugin.whenReady,
+    }));
+});
+
+gulp.task('default', ['test']);