Adding Film support to ForceVue

src/App.vue

@@ -10,6 +10,7 @@
       <view-person v-if="selected == 'Person'"></view-person>
       <view-planet v-if="selected == 'Planet'"></view-planet>
       <view-starship v-if="selected == 'Starship'"></view-starship>
+      <view-film v-if="selected == 'Film'"></view-film>
     </div>
   </div>
 </template>
@@ -18,17 +19,19 @@
 import ViewPerson from './components/ViewPerson';
 import ViewPlanet from './components/ViewPlanet';
 import ViewStarship from './components/ViewStarship';
+import ViewFilm from './components/ViewFilm';
 
 export default {
   components: {
     ViewPerson,
     ViewPlanet,
     ViewStarship,
+    ViewFilm,
   },
   data() {
     return {
 
-      apiSelect: ['Person', 'Planet', 'Starship', 'Vehicle'],
+      apiSelect: ['Person', 'Planet', 'Starship', 'Vehicle', 'Film'],
       selected: 'Person',
 
     };

src/api/film.js

@@ -0,0 +1,28 @@
+import Vue from 'vue';
+
+import { EventEmitter } from 'events';
+import { Promise } from 'es6-promise';
+import { ApiCache } from './api-cache.js';
+
+const filmCache = new ApiCache();
+const film = new EventEmitter();
+const filmBaseUrl = 'films/';
+export default film;
+
+film.fetch = id => {
+  if (!id) {
+    return Promise.resolve('');
+  }
+  return new Promise((resolve, reject) => {
+    const filmToGet = `${filmBaseUrl}${id}/`;
+
+    if (filmCache.get(filmToGet)) {
+      resolve(filmCache.get(filmToGet));
+    }
+    Vue.http.get(filmToGet).then(response => {
+      const filmData = response.data;
+      filmCache.put(filmToGet, filmData);
+      resolve(filmData);
+    }, reject);
+  });
+};

src/components/ViewFilm.vue

@@ -0,0 +1,69 @@
+ <template>
+  <div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card">
+    <mdl-button class="randFilmBtn" v-mdl-ripple-effect colored icon raised v-on:click="fetchRandomFilm">
+      <i class="material-icons">movie</i> Random Film
+    </mdl-button>
+    <mdl-textfield data-qa="titleTextbox" floating-label="Title" :value.sync="filmData.title"></mdl-textfield>
+    <mdl-textfield data-qa="episodeIdTextbox" floating-label="Episode ID" :value.sync="filmData.episode_id"></mdl-textfield>
+    <mdl-textfield data-qa="openingCrawlTextbox" floating-label="Opening Crawl" :value.sync="filmData.opening_crawl"></mdl-textfield>
+    <mdl-textfield data-qa="directorTextbox" floating-label="Director" :value.sync="filmData.director"></mdl-textfield>
+    <mdl-textfield data-qa="producerTextbox" floating-label="Producer" :value.sync="filmData.producer"></mdl-textfield>
+    <mdl-textfield data-qa="releaseDateTextbox" floating-label="Release Date" :value.sync="filmData.release_date"></mdl-textfield>
+  </div>
+  <div class="mdl-cell mdl-card mdl-shadow--4dp">
+    <figure class="mdl-card__media">
+      <div v-show="loading" class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
+    </figure>
+  </div>
+</template>
+
+<script>
+import { MdlButton, MdlTextfield, directives } from 'vue-mdl';
+import film from '../api/film';
+
+export default {
+  components: {
+    MdlButton,
+    MdlTextfield,
+  },
+  directives,
+  data() {
+    return {
+      filmData: {
+        title: '',
+        episode_id: '',
+        opening_crawl: '',
+        director: '',
+        producer: '',
+        release_date: '',
+        created: '',
+        edited: '',
+        url: '',
+      },
+    };
+  },
+  methods: {
+    fetchRandomFilm() {
+      this.loading = true;
+      this.imageShow = false;
+      const randomFilmId = Math.floor((Math.random() * 7) + 1);
+      film.fetch(randomFilmId).then((filmData) => {
+        this.filmData = Object.assign(this.filmData, filmData);
+      });
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+  color: black;
+}
+figure img {
+  width: 285px;
+}
+.mdl-card__media {
+  background-color: #FFF;
+}
+</style>

test/e2e/pages/film.js

@@ -0,0 +1,11 @@
+module.exports = {
+  elements: {
+    randomFilmButton: '.randFilmBtn',
+    titleTextbox: '[data-qa=titleTextbox] > div > input',
+    episodeIdTextbox: '[data-qa=episodeIdTextbox] > div > input',
+    openingCrawlTextbox: '[data-qa=openingCrawlTextbox] > div > input',
+    directorTextbox: '[data-qa=directorTextbox] > div > input',
+    producerTextbox: '[data-qa=producerTextbox] > div > input',
+    releaseDateTextbox: '[data-qa=releaseDateTextbox] > div > input',
+  }
+};

test/e2e/specs/test.js

@@ -5,6 +5,7 @@ var ui = require('../ui-properties/ui-locators.js')
 var personPage = require('../pages/person.js')
 var planetPage = require('../pages/planet.js')
 var starshipPage = require('../pages/starship.js')
+var filmPage = require('../pages/film.js')
 
 module.exports = {
   'default e2e tests': function (browser) {
@@ -114,5 +115,59 @@ module.exports = {
         this.assert.notEqual(result,'')
       })
       .end()
+  },
+
+  'verify film record has six table records': function (browser) {
+	  browser
+      .url(browser.launchUrl)
+      	.waitForElementVisible(ui.dev.app, 5000)
+      	.setValue(ui.dev.select,ui.dev.selectValue.film)
+      	.click(ui.dev.select)
+      	.pause(1000)
+      	.keys(['\uE006'])
+      	.pause(3000)
+      	.assert.elementPresent(filmPage.elements.randomFilmButton)
+      	.assert.elementCount(ui.dev.tableRecord, 6)
+      	.waitForElementVisible(filmPage.elements.titleTextbox, 5000) 
+      	.assert.elementPresent(filmPage.elements.titleTextbox)
+      	.assert.elementPresent(filmPage.elements.episodeIdTextbox)
+      	.assert.elementPresent(filmPage.elements.openingCrawlTextbox)
+      	.assert.elementPresent(filmPage.elements.directorTextbox)
+      	.assert.elementPresent(filmPage.elements.producerTextbox)
+      	.assert.elementPresent(filmPage.elements.releaseDateTextbox)
+      	.pause(5000)
+      	.end()
+  },
+
+  'verify film button has expected value: movie RANDOM FILM': function (browser) {
+	  browser
+      .url(browser.launchUrl)
+      	.waitForElementVisible(ui.dev.app, 5000)
+      	.setValue(ui.dev.select,ui.dev.selectValue.film)
+      	.click(ui.dev.select)
+      	.pause(1000)
+      	.keys(['\uE006'])
+      	.pause(3000)
+      	.assert.elementPresent(filmPage.elements.randomFilmButton)
+      	.getText(filmPage.elements.randomFilmButton, function(result) {
+      		this.assert.equal(result.value,'movie RANDOM FILM')
+      	})
+      	.end()
+  },
+
+  'verify selecting random film: title field not empty': function (browser) {
+	  browser
+      .url(browser.launchUrl)
+      	.waitForElementVisible(ui.dev.app, 5000)
+      	.setValue(ui.dev.select,ui.dev.selectValue.film)
+      	.click(ui.dev.select)
+      	.pause(1000)
+      	.keys(['\uE006'])
+      	.pause(3000)
+      	.assert.elementPresent(filmPage.elements.randomFilmButton)
+      	.getText(ui.dev.tableRecord, function(result) {
+      		this.assert.notEqual(result,'')
+      	})
+      	.end()
   }
 }

test/e2e/ui-properties/randplanetBtn

@@ -9,12 +9,14 @@ module.exports = {
         selectValue: {
             person: 'Person',
             starship: 'Starship',
-            planet: 'Planet'
+            planet: 'Planet',
+            film: 'Film'
         },
         randomBtn: {
             person: '.randPersonBtn',
             starship: '.randStarshipBtn',
-            planet: '.randPlanetBtn'
+            planet: '.randPlanetBtn',
+            film: '.randFilmBtn'
         },
         tableRecord: '.mdl-textfield__input',
     },

test/e2e/ui-properties/ui-locators.js

@@ -9,7 +9,8 @@ module.exports = {
         selectValue: {
             person: 'Person',
             starship: 'Starship',
-            planet: 'Planet'
+            planet: 'Planet',
+            film: 'Film'
         },
         tableRecord: '.mdl-textfield__input'
     },

test/unit/specs/ViewFilm.spec.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import ViewFilm from 'src/components/ViewFilm';
+
+describe('ViewFilm.vue', () => {
+  it('should render correct contents', () => {
+    const vm = new Vue({
+      template: '<div><view-film></view-film></div>',
+      components: { ViewFilm },
+    }).$mount();
+    expect(vm.$el.querySelector('.randFilmBtn').textContent).to.contain('Random Film');
+  });
+});