Greenkeeper/initial

.gitignore

@@ -4,4 +4,5 @@ dist/
 npm-debug.log
 yarn-error.log
 .idea
-*.iml
+*.iml
+cypress/videos

.npmrc

@@ -0,0 +1,4 @@
+registry=http://registry.npmjs.org/
+save-exact=true
+progress=false
+package-lock=false

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - '8'
+cache:
+  directories:
+    - ~/.npm
+    - node_modules
+script:
+  - npm run ci:record

README.md

@@ -1,5 +1,7 @@
 # vue-hackernews-2.0
 
+[![Greenkeeper badge](https://badges.greenkeeper.io/bahmutov/vue-hackernews-2.0.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/bahmutov/vue-hackernews-2.0.svg?branch=master)](https://travis-ci.org/bahmutov/vue-hackernews-2.0)
+
 HackerNews clone built with Vue 2.0 + vue-router + vuex, with server-side rendering.
 
 <p align="center">

build/webpack.cypress.config.js

@@ -0,0 +1,13 @@
+const path = require('path')
+const merge = require('webpack-merge')
+const base = require('./webpack.base.config')
+
+const config = merge(base, {
+  resolve: {
+    alias: {
+      'create-api': './create-api-client.js'
+    }
+  }
+})
+
+module.exports = config

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "projectId": "b1sfu5"
+}

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/item-spec.js

@@ -0,0 +1,50 @@
+import VueRouter from 'vue-router'
+import router from '../../src/router'
+import Item from '../../src/components/Item.vue'
+import { timeAgo, host } from '../../src/util/filters'
+import { createRouter } from '../../src/router'
+import mountVue from 'cypress-vue-unit-test'
+
+/* eslint-env mocha */
+/* global cy, Cypress */
+describe('Item', () => {
+  const template = `<news-item :item="item"></news-item>`
+  const components = {
+    'news-item': Item
+  }
+  const data = {
+    item: {
+      title: 'Vue unit testing with Cypress',
+      score: 101,
+      url: 'https://www.cypress.io',
+      id: 'a0x',
+      by: 'bahmutov',
+      time: Cypress.moment('Jan 22 2018').unix(),
+      descendants: 42
+    }
+  }
+
+  const extensions = {
+    plugins: [VueRouter],
+    filters: { timeAgo, host }
+  }
+
+  const options = {
+    extensions
+  }
+
+  const router = createRouter()
+
+  beforeEach(() => {
+    cy.viewport(400, 200)
+  })
+  beforeEach(mountVue({ template, router, components, data }, options))
+
+  it('loads news item', () => {
+    cy.contains('.score', 101)
+  })
+
+  it('has link to comments', () => {
+    cy.contains('.comments-link > a', '42 comments')
+  })
+})

cypress/integration/no-sw-spec.js

@@ -0,0 +1,43 @@
+/* eslint-env mocha */
+/* global cy, Cypress */
+describe('Without ServiceWorker', () => {
+  // cleaning anything cached by the ServiceWorker
+  // and preventing ServiceWorker from registering
+  // https://github.com/cypress-io/cypress/issues/702
+  const clearCache = (name) =>
+    window.caches.delete(name)
+
+  const clearCaches = () =>
+    window.caches.keys().then(cacheNames =>
+      Promise.all(cacheNames.map(clearCache)))
+
+  // prevents new service worker registration
+  const neverRegisterSW = (win) => {
+    // use a promise that never resolves
+    const neverResolves = new Promise(resolve => {})
+    win.navigator.serviceWorker.register = () => neverResolves
+  }
+
+  // unregisters any service workers already registered
+  const unregisterWorkers = (win) =>
+    win.navigator.serviceWorker.getRegistrations()
+    .then(registrations =>
+      Cypress.Promise.map(registrations, sw => sw.unregister())
+    )
+
+  beforeEach(clearCaches)
+
+  beforeEach(() => {
+    const clearSW = win => {
+      neverRegisterSW(win)
+      return unregisterWorkers(win)
+    }
+    cy.visit('/', {
+      onBeforeLoad: clearSW
+    })
+  })
+
+  it('loads news items', () => {
+    cy.get('.news-item').should('have.length.gt', 10)
+  })
+})

cypress/integration/spec.js

@@ -0,0 +1,38 @@
+/* eslint-env mocha */
+/* global cy */
+describe('HackerNews', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+  it('loads', () => {
+    cy.contains('Built with Vue.js')
+  })
+  it('loads news items', () => {
+    cy.get('.news-item').should('have.length.gt', 10)
+  })
+  it('goes to the second page and back', () => {
+    cy.contains('.news-list-nav a', 'more >').click()
+    cy.url().should('contain', '/top/2')
+    cy.go('back')
+    cy.url().should('contain', '/top')
+  })
+  it('cannot go to the previous page', () => {
+    cy.contains('.news-list-nav a', '< prev')
+      .should('have.class', 'disabled')
+  })
+  it('goes to comments and back', () => {
+    // see comments for the first story
+    cy.get('.news-item')
+      .first().find('.meta .comments-link')
+      .click()
+    // loader disappears, and comments are there
+    cy.get('.item-view-comments-header .spinner').should('not.be.visible')
+    // NOTE: there might be zero comments
+    cy.get('.comment')
+      .should('have.length.gte', 0)
+      .and('be.visible')
+    // go to the top news
+    cy.get('nav').contains('Top').click()
+    cy.url().should('contain', '/top')
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,8 @@
+const join = require('path').join
+const {
+  onFilePreprocessor
+} = require('cypress-vue-unit-test/preprocessor/webpack')
+const config = join(__dirname, '../../build/webpack.cypress.config')
+module.exports = on => {
+  on('file:preprocessor', onFilePreprocessor(config))
+}

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')