test with cypres wip

.gitignore

@@ -8,4 +8,6 @@ coverage
 lib
 stats.json
 dist
-test-report.xml
+test-report.xml
+cypress/videos
+cypress/screenshots

circle.yml

@@ -13,6 +13,8 @@ machine:
 general:
   artifacts:
     - coverage
+    - cypress/video
+    - cypress/screenshots
 
 dependencies:
   pre: 
@@ -33,7 +35,10 @@ deployment:
 test:
   override:
     - npm run test:ci
+    - npm run cypress:ci
   post:
     - cat ./coverage/lcov.info | coveralls
   pre:    
     - npm run build
+    - npm run build:e2e
+    - npm install cypress -g

cypress.json

@@ -0,0 +1,3 @@
+{
+    "baseUrl": "http://localhost:4000"
+}

cypress/fixtures/example.json

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

cypress/integration/movie_spec.js

@@ -0,0 +1,45 @@
+const qa=(val)=> `[data-qa='${val}']`
+const hitStats = () => cy.get(`${qa('hits-stats')} > ${qa('info')}`)    
+const hits = () => cy.get("[data-qa=hits] > div")
+const searchInput = () => cy.get("[data-qa=query]")    
+
+describe('Searchkit movie test', function () {
+
+    beforeEach(()=> {
+        cy.server()
+        cy.route('POST', '/api/movies/_search').as('search')
+        cy.visit('/movie-app')
+        cy.wait("@search")
+    })
+
+    it('Should have correct hit counts', function () {
+        hitStats().should('contain', '4162 results found')    
+        hits().should('have.length', 20)
+    })
+
+    it('should find matrix', ()=> {
+        searchInput().type("matrix")
+        cy.wait("@search")
+        hitStats().should('contain', '3 results found')    
+        hits().should('have.length', 3)
+        hits().first().find(qa('title') + "> em")
+            .should('contain', 'Matrix')
+    })
+
+    it("should refine actors", ()=> {
+        cy.get('.filter--actorsFacet').as("actors")
+            .get('.sk-panel__header')
+            .should('contain', 'Actors')
+        cy.get('@actors').find(qa('option'))
+            .should('have.length', 10)
+        cy.get('@actors').find(qa('option'))
+            .first()
+            .should('have.attr', 'data-key', 'Naveen Andrews')
+            .click()
+
+        hitStats().should('contain', '73 results found')
+        hits().first().find(qa('title'))
+            .should('contain', 'Lost')
+    })
+
+})

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