Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Update Testing
  • Loading branch information
dirtyredz committed Sep 13, 2018
1 parent da5cd4e commit 380da37
Show file tree
Hide file tree
Showing 22 changed files with 6,398 additions and 2,309 deletions.
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -2,3 +2,4 @@ lib/
node_modules/
npm-debug.log
coverage/
dist/
4 changes: 3 additions & 1 deletion .travis.yml
Expand Up @@ -3,4 +3,6 @@ node_js:
- "8"
- "7"
- "6.9.4"
after_success: 'npm run coverage'
script:
- npm run test
- npm run test:cypress
6 changes: 6 additions & 0 deletions CHANGELOG.md
@@ -1,3 +1,9 @@
#1.5.12
* **React:** Added catch if tween function tried to set scroll position past the stop position.
* **Test:** Updated all tests, and added e2e testing.
* **Dev:** Added cypress e2e testing and multiple package scripts for development and testing.
* **NPM:** Moved destination directory from lib/ to dist/

#1.5.11
* **React:** Added className overrides to the default button.

Expand Down
41 changes: 24 additions & 17 deletions UITesting/index.js
@@ -1,31 +1,38 @@
import React from 'react';
import ReactDOM from 'react-dom';
import {VerticleButton as ScrollUpButton} from '../src/react-scroll-up-button';
import * as ScrollUpButtons from '../src/react-scroll-up-button';

class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: false};

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
constructor() {
super();
this.state = {
currentBtn: 'default'
};
}

handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
handleClick(btn) {
this.setState({currentBtn: btn});
}

render() {
return (
<div>
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'Mount react-scroll-up-button' : 'Unmount react-scroll-up-button'}
</button>
{this.state.isToggleOn ? null :
<ScrollUpButton />
}
{Object.keys(ScrollUpButtons).map((btn,index)=>{
return (
<div key={btn+'_button'}>
<button style={{position: 'fixed'}} disabled={this.state.currentBtn === btn} onClick={this.handleClick.bind(this,btn)}>
{this.state.currentBtn === btn ? 'Unmount '+btn : 'Mount '+btn}
</button>
<br/>
<br/>
</div>
)
})}
{Object.keys(ScrollUpButtons).map((btn,index)=>{
const CurBtn = ScrollUpButtons[btn]
if(this.state.currentBtn === btn)
return <CurBtn key={btn}/>
})}
</div>
);
}
Expand Down
11 changes: 11 additions & 0 deletions UITesting/testing.js
@@ -0,0 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import ScrollUpButton from '../dist/react-scroll-up-button';

const rootEl = document.getElementById('ReactRoot');
ReactDOM.render(
<div>
<ScrollUpButton/>
</div>
,rootEl
);
33 changes: 27 additions & 6 deletions UITesting/webpack.config.js
@@ -1,9 +1,31 @@
var webpack = require('webpack');
var path = require('path');
const merge = require("webpack-merge");
const commonConfig = require("../webpack.common");

const devConfig = {
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: [
[
"babel-preset-env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
},
}
],
"react"
]
}
}
}
]
},
mode: 'development',
devtool: "source-map",
entry: {
Expand All @@ -21,5 +43,4 @@ const devConfig = {
contentBase: __dirname,
port: 8080,
}
};
module.exports = merge(commonConfig, devConfig, { mode: 'development' });
};
44 changes: 44 additions & 0 deletions UITesting/webpack.testing.js
@@ -0,0 +1,44 @@
var webpack = require('webpack');

module.exports = {
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: [
[
"babel-preset-env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
},
}
],
"react"
]
}
}
}
]
},
entry: {
index: "./UITesting/testing",
},
output: {
path: __dirname,
filename: "react.js",
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
hot: true,
contentBase: __dirname,
port: 8080,
}
};
1 change: 1 addition & 0 deletions cypress.json
@@ -0,0 +1 @@
{}
5 changes: 5 additions & 0 deletions 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"
}
41 changes: 41 additions & 0 deletions cypress/integration/scroll.spec.js
@@ -0,0 +1,41 @@
beforeEach(function () {
cy.visit('http://localhost:8080')
})
describe('E2E testing', function() {

it('Applies Transition class!', function() {
cy.get('[data-testid="react-scroll-up-button"]')
.should('have.class', 'ScrollUpButton__Container')
cy.get('[data-testid="react-scroll-up-button"]')
.should('not.have.class', 'ScrollUpButton__Toggled')
cy.scrollTo('bottom')
cy.get('[data-testid="react-scroll-up-button"]')
.should('have.class', 'ScrollUpButton__Toggled')
})

it('can be clicked!', function() {
cy.scrollTo('bottom')
cy.get('[data-testid="react-scroll-up-button"]')
.should('have.class', 'ScrollUpButton__Toggled')
cy.get('[data-testid="react-scroll-up-button"]').click()
cy.get('[data-testid="react-scroll-up-button"]')
.should('not.have.class', 'ScrollUpButton__Toggled')
cy.window().its('pageYOffset').should('eq',0)
})

it('Transitions to the top after clicking', function() {
cy.window().its('pageYOffset').should('eq',0)
cy.scrollTo('bottom')
cy.window().its('pageYOffset').should('not.eq',0)
cy.get('[data-testid="react-scroll-up-button"]').click()
cy.window().its('pageYOffset').should('eq',0)
})

it('should be visible', function() {
cy.get('[data-testid="react-scroll-up-button"]')
.should('not.be.visible')
cy.scrollTo('bottom')
cy.get('[data-testid="react-scroll-up-button"]')
.should('be.visible')
})
})
17 changes: 17 additions & 0 deletions 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
}
25 changes: 25 additions & 0 deletions 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) => { ... })
20 changes: 20 additions & 0 deletions 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')
Binary file added cypress/videos/scroll.spec.js.mp4
Binary file not shown.
6 changes: 0 additions & 6 deletions dist/react-scroll-up-button.js

This file was deleted.

0 comments on commit 380da37

Please sign in to comment.