Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Redux with vanilla JS Adding Tests">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/expect/1.14.0/expect.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.css">
</head>
<body>
  <div id="counter">
    <button id="inc">+</button>
    <span id="text"></span>
    <button id="dec">-</button>
  </div>
  <div id="test-counter">
    <button id="inc">+</button>
    <span id="text">0</span>
    <button id="dec">-</button>
  </div>
  <div id="mocha"></div>
</body>
</html>
 
console.clear();
const d = document;
const { createStore } = Redux;
​
// reducer 
function counter(state=0, action) {
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    case 'RESET':
      return 0;
    default:
      return state;
  }
}
​
//actions
const increment = () => {
  return {
    type: 'INCREMENT'
  };
};
​
const decrement = () => {
  return {
    type: 'DECREMENT'
  };
};
​
//create store
const store = createStore(counter);
​
class Counter {
  constructor(options) {
    this.$el = options.el;
    this.store = options.store;
    store.subscribe(this.update.bind(this));
    this.$el.querySelector('#inc')
      .addEventListener('click', this.inc.bind(this));
    this.$el.querySelector('#dec')
      .addEventListener('click', this.dec.bind(this));
  }
​
  inc() {
    this.store.dispatch(increment())
  }
​
  dec() {
    this.store.dispatch(decrement())
  }
​
​
  update() {
    this.$el
      .querySelector('#text')
      .innerHTML = store.getState();
  }
​
  render() {
    this.update();
  }
}
​
d.addEventListener("DOMContentLoaded", () => {
  const counter = new Counter({
    el: d.getElementById('counter'),
    store
  });
  counter.render();
});
​
​
// Tests
​
mocha.ui('bdd');
​
const testStore = createStore(counter);
​
​
describe('actions', () => {
  beforeEach(() => {
    testStore.dispatch({type: 'RESET'});
  });
​
  it('inc', () => {
    testStore.dispatch(increment());
    expect(testStore.getState()).toEqual(1);
  });
​
  it('dec', () => {
    testStore.dispatch(decrement());
    expect(testStore.getState()).toEqual(-1);
  })
});
​
describe('Clicks on buttons', () => {
  beforeEach(() => {
    store.dispatch({type: 'RESET'});
  });
​
  it('clicks on inc',() => {
    d.getElementById('inc')
      .click();
    const value = parseInt(
      d.getElementById('text').innerHTML, 10
    );
    expect(value).toEqual(1);
  });
​
  it('clicks on dec', () => {
    d.getElementById('dec')
      .click();
    const value = parseInt(
      d.getElementById('text').innerHTML, 10
    );
    expect(value).toEqual(-1);
  });
});
​
const el = d.getElementById('test-counter');
const c = new Counter({
  el,
  store: testStore
});
describe('Counter', () => {
  beforeEach(() => {
    testStore.dispatch({type: 'RESET'});
​
  });
​
  it('inc', () => {
    c.inc();
    expect(testStore.getState()).toEqual(1);
  });
​
  it('dec', () => {
    c.dec();
    expect(testStore.getState()).toEqual(-1);
  });
});
mocha.run();
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
revathskumarpro
0viewers