Setup cypress testing suite, and w3c web platform tests (#197)

* adding tests

* 50% passing

* 28 passing, 12 failing

* 36 pass, 4 fail

* fix compile error

* fix build

* Better comments

* better comments for block: nearest

* tiny adjustment

* just two tests left that are failing

* 1 test left

* all 40 tests are passing

* add support for scrollMode

* compiler error

* retry

Author: stipsan

integration-tests/core/components/Expect.js

@@ -17,6 +17,7 @@ export default class Expect extends Component {
   state = { test: undefined }
 
   componentDidMount() {
+    console.log('interesting')
     const node = this.target.current
     const { setup, options, toBe } = this.props
 
@@ -29,9 +30,8 @@ export default class Expect extends Component {
     return this.props.children({
       target: (
         <div
-          className="bulls-eye"
+          className={`test-assertion test-${this.state.test}`}
           ref={this.target}
-          data-test={this.state.test}
         />
       ),
     })

integration-tests/core/cypress.json

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

integration-tests/core/cypress/fixtures/example.json

@@ -0,0 +1 @@
+{}

integration-tests/core/cypress/integration/block.js

@@ -0,0 +1,17 @@
+describe('ScrollLogicalPosition: block', function() {
+  before(function() {
+    cy.visit('/block')
+  })
+
+  const simplePositions = ['start', 'center', 'end']
+  context('one scrollbox', () => {
+    simplePositions.forEach(position => {
+      it(`should align to ${position} correctly`, () => {
+        cy.get(`#${position}`).click()
+        cy.wait(200)
+        cy.get('.test-assertion').should('have.class', 'test-pass')
+        cy.wait(200)
+      })
+    })
+  })
+})

integration-tests/core/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// 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)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

integration-tests/core/cypress/screenshots/my-image.png

@@ -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) => { ... })

integration-tests/core/cypress/support/commands.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')

integration-tests/core/cypress/support/index.js

@@ -14,5 +14,8 @@
     "next": "5.1.0",
     "react": "16.3.2",
     "react-dom": "16.3.2"
+  },
+  "devDependencies": {
+    "cypress": "2.1.0"
   }
 }

integration-tests/core/package.json

@@ -30,7 +30,7 @@ const tests = {
       options={{ block: 'center' }}
       toBe={node => {
         const clientRect = node.getBoundingClientRect()
-        return clientRect.top === window.innerHeight / 2 - SIZE / 2
+        return clientRect.top === Math.round(window.innerHeight / 2 - SIZE / 2)
       }}
     >
       {({ target }) => (
@@ -63,31 +63,26 @@ const tests = {
 const keys = Object.keys(tests).sort()
 
 export default class extends Component {
-  state = { test: keys[0], mounted: false }
-
-  componentDidMount() {
-    // @TODO Workaround annoying chrome behavior, implement event listeners like window.onload instead
-    setTimeout(() => this.setState({ mounted: true }), 100)
-  }
+  state = { test: false }
 
   render() {
     const buttons = keys
-    const ActiveTest = tests[this.state.test]
+    const ActiveTest = this.state.test ? tests[this.state.test] : false
     return (
       <Fragment>
         <navbar className="test-switcher">
           {buttons.map(name => (
-            <button key={name} onClick={() => this.setState({ test: name })}>
+            <button
+              key={name}
+              onClick={() => this.setState({ test: name })}
+              id={name}
+            >
               {name}
             </button>
           ))}
         </navbar>
 
-        {this.state.mounted ? (
-          <ActiveTest key={this.state.test} />
-        ) : (
-          'mounting…'
-        )}
+        {(ActiveTest && <ActiveTest key={this.state.test} />) || 'Ready!'}
       </Fragment>
     )
   }