Merge pull request #95 from internet4000/build/poi

Change build and test systems

.babelrc

@@ -1,11 +1,15 @@
 {
 	"presets": [
-		["env", {
-			"modules": false,
+		[
+			"env", {
 				"targets": {
-					"browsers": ["last 2 versions", "safari >= 7"]
+					"browsers": [
+						"last 2 versions",
+						"safari >= 7"
+					]
 				}
-		}]
+			}
+		]
 	]
 }
 

.gitignore

@@ -2,7 +2,6 @@
 node_modules/
 npm-debug.log
 yarn-error.log
-dist/radio4000-player.js
-dist/radio4000-player.js.map
+dist/
+!dist/radio4000-player.min.js
 .vscode
-

.travis.yml

@@ -1,6 +1,5 @@
 language: node_js
-node_js: 7
-dist: trusty
+node_js: 9
 
 install:
   - yarn install

README.md

@@ -116,26 +116,24 @@ Therefore, URLs in the player header won't open new browser window but will just
 ``` bash
 # 1. clone and install dependencies
 git clone [email protected]:internet4000/radio4000-player.git
-yarn install
+yarn
 
-# 2. starts a server at http://localhost:4002 that autobuilds when files change
+# 2. starts a server on http://localhost:4002 that autobuilds when files change
 yarn start
 ```
 
 ## Testing
 
 ```bash
-# run tests using ava
+# run tests once
 yarn test
 
 # watch for changes and run tests
-ava --watch
-
-# update test snapshots
-ava --update-snapshots
+yarn start; yarn cypress open
 ```
 
-## NPM release
+## How to release a new version
 
 - `npm version <newversion>` (try `npm version --help`)
 - `npm publish`
+- `git push --tags`

cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:4002",
+  "videoRecording": false,
+  "screenshotOnHeadlessFailure": false
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/loading.js

@@ -0,0 +1,14 @@
+import { mount } from 'vue-test-utils'
+import Loading from '../../src/Loading.vue'
+
+describe('<Loading> component', function() {
+	it('it shows the loading message', function() {
+		let wrapper = mount(Loading)
+		let vm = wrapper.vm
+		vm.$props.message = 'hello this is dog'
+		// vm.$nextTick(() => {
+		return cy.wait(10).then(() => {
+			assert.equal(wrapper.element.innerText, 'hello this is dog')
+		})
+	})
+})

cypress/integration/player-controls.js

@@ -0,0 +1,33 @@
+describe('player controls', function() {
+	before(() => {
+		cy.visit('/')
+	})
+
+	it('it is not playing', function() {
+		cy.get('.PlayPause-state').should('not.be.checked')
+	})
+
+	it('has all the buttons', () => {
+		cy.get('.Btn--mute').should('have.length', 1)
+		cy.get('.Btn--shuffle').should('have.length', 1)
+		cy.get('.Btn--next').should('have.length', 1)
+		cy.get('.PlayPause').should('have.length', 1)
+	})
+
+	it('first track is selected', function() {
+		cy.get('radio4000-player').find('.TrackItem').first().should('have.class', 'active')
+	})
+
+	it('tapping "next" plays next track', function() {
+		cy.get('.Btn--next').click()
+		cy.get('.TrackItem').eq(0).should('not.have.class', 'active')
+		cy.get('.TrackItem').eq(1).should('have.class', 'active')
+		cy.get('.PlayPause-state', {timeout: 20000}).should('be.checked')
+	})
+
+	it('tapping "pause" pauses', function() {
+		cy.get('.PlayPause-state').should('be.checked')
+		cy.get('.PlayPause-label').click()
+		cy.get('.PlayPause-state').should('not.be.checked')
+	})
+})

cypress/integration/player-data.js

@@ -0,0 +1,13 @@
+describe('<PlayerData> component', function() {
+	beforeEach(function() {
+		cy.visit('/')
+	})
+
+	it('it can change radio', function() {
+		cy.get('radio4000-player').should('have.attr', 'channel-slug', '200ok')
+		cy.get('radio4000-player').then($player => {
+			$player.attr('channel-slug', 'oskar')
+			cy.get('.Header-channel').should('contain', 'Radio Oskar')
+		})
+	})
+})

cypress/integration/radio4000-player.js

@@ -0,0 +1,28 @@
+describe('<radio4000-player> web component', function() {
+	before(() => {
+		cy.visit('/')
+	})
+
+	it('it renders', function() {
+		cy.get('radio4000-player').as('player')
+			.should('have.length', 1)
+			.should('have.attr', 'channel-slug', '200ok')
+	})
+
+	it('marquee shows track title', function() {
+		cy.get('radio4000-player').then($player => {
+			var $track = $player.find('.TrackItem').first().find('.TrackItem-title')
+			cy.get('marquee').should('contain', $track.text())
+		})
+	})
+
+	it('pressing "shuffle" shuffles the track list', function() {
+		cy.get('.TrackItem-title').eq(1).then($el => {
+			var title = $el.text()
+			cy.get('.Btn--shuffle').click()
+			cy.get('.TrackItem-title').eq(1).should('not.contain', title)
+			cy.get('.Btn--shuffle').click()
+			cy.get('.TrackItem-title').eq(1).should('contain', title)
+		})
+	})
+})

cypress/integration/track-list.js

@@ -0,0 +1,30 @@
+import { mount } from 'vue-test-utils'
+import TrackList from '../../src/TrackList.vue'
+
+describe('<TrackList> component', function() {
+	let wrapper = mount(TrackList, {
+		attachToDocument: true
+	})
+
+	it('shows a loader without tracks', function() {
+		// Weird way to check if an element exists.
+		assert.isOk(wrapper.find('.Loading').element)
+		// cy.get('.TrackList').should('exist')
+	})
+
+	it('renders an array in the order it receives', function() {
+		let tracks = [...'abc'].map(title => ({ title }))
+
+		assert.equal(wrapper.findAll('.TrackList-item').length, 0)
+		wrapper.vm.$props.tracks = tracks
+
+		// nextTick doesn't in cypress (yet?)
+		// return wrapper.vm.$nextTick(() => {
+		return cy.wait(10).then(() => {
+			assert.equal(wrapper.findAll('.TrackList-item').length, 3)
+			assert.equal(wrapper.findAll('.TrackItem-title').wrappers[0].element.textContent, 'a')
+			assert.equal(wrapper.findAll('.TrackItem-title').wrappers[1].element.textContent, 'b')
+			assert.equal(wrapper.findAll('.TrackItem-title').wrappers[2].element.textContent, 'c')
+		})
+	})
+})

cypress/integration/youtube-player.js

@@ -0,0 +1,32 @@
+import { mount } from 'vue-test-utils'
+import Component from '../../src/YoutubePlayer.vue'
+
+describe('<YoutubePlayer> component', function() {
+	let wrapper, vm
+
+	beforeEach(() => {
+		wrapper = mount(Component)
+		vm = wrapper.vm
+	})
+
+	it('component is an empty element for the iframe', function() {
+		expect(wrapper.element.classList.value).to.equal('ytplayer')
+		expect(vm.$el.innerHTML).to.equal('')
+	})
+
+	it('autoplay is not enabled', function() {
+		expect(vm.autoplay).to.equal(false)
+	})
+
+	it('didPlay changes to true', function() {
+		expect(vm.$data.didPlay).to.equal(false)
+		vm.$props.videoId = '-Op4D4bkK6Y'
+		// Wrapping in nextTick is some times required.
+		vm.$nextTick(() => {
+			// Three ways of achieving the same.
+			expect(vm.$data.didPlay).to.eq(true)
+			expect(vm.$data.didPlay).to.equal(true)
+			assert.equal(vm.$data.didPlay, true, 'did play changed to true')
+		})
+	})
+})

cypress/plugins/index.js

@@ -0,0 +1,38 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+// 1/2 Tell Cypress how to load .Vue files.
+const webpack = require('@cypress/webpack-preprocessor')
+const webpackOptions = {
+	module: {
+		rules: [
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader'
+			}
+		]
+	}
+}
+const options = {
+	// send options from your webpack.config.js, so it works the same as your app's code
+	webpackOptions,
+	watchOptions: {}
+}
+
+module.exports = (on, config) => {
+	// `on` is used to hook into various events Cypress emits
+	// `config` is the resolved Cypress config
+
+	// 2/2 Tell Cypress how to load .Vue files.
+	on('file:preprocessor', webpack(options))
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

index.html

@@ -36,10 +36,7 @@
 		// })
 	</script>
 
-	<!-- development script-->
-	<script async src="dist/radio4000-player.js"></script>
-	<!--production scripts -->
-	<!-- <script async src="dist/radio4000-player.min.js"></script> -->
+	<!-- script is automatically injected via `poi` -->
 
 </body>
 </html>

src/main.js → index.js

@@ -1,8 +1,9 @@
-import Vue from 'vue'
-import vueCustomElement from 'vue-custom-element'
 // Polyfill "custom elements". See https://github.com/WebReflection/document-register-element.
 import 'document-register-element/build/document-register-element'
-import PlayerData from './PlayerData.vue'
+
+import Vue from 'vue'
+import vueCustomElement from 'vue-custom-element'
+import PlayerData from './src/PlayerData.vue'
 
 Vue.config.devtools = true
 Vue.config.productionTip = false