Skip to content

Commit

Permalink
Merge pull request #3 from justeat/tests
Browse files Browse the repository at this point in the history 
Refactoring test utils.
  • Loading branch information
@ashleynolan
ashleynolan authored Sep 19, 2017
2 parents 45fcaf6 + 4f66773 commit 34c5470
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 80 deletions.
14 changes: 14 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,20 @@
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

v0.2.0
------------------------------
*September 18, 2017*

### Added
- Added `js-test-buddy` package.

### Changed
- Using test helper functions from `js-test-buddy` in unit tests.

### Removed
- Removed dom and test util scripts.


v0.1.0
------------------------------
*September 05, 2017*
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@justeat/f-toggle",
"description": "Fozzie vanilla JS toggle library.",
"version": "0.1.0",
"version": "0.2.0",
"main": "dist/index.js",
"homepage": "https://github.com/justeat/f-toggle",
"contributors": [
Expand All @@ -24,6 +24,7 @@
"babel-preset-babili": "^0.1.4",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"js-test-buddy": "^0.0.3",
"qwery": "^4.0.0"
},
"keywords": [
Expand Down
94 changes: 54 additions & 40 deletions test/index.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import toggle from '../src/index';
import { setHtml, getHtml, dispatchEvent } from './utils';
import TestUtils from 'js-test-buddy';


describe('module', () => {
Expand All @@ -14,64 +14,69 @@ describe('toggle', () => {

it('applies hidden class', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="test"></div>
<button data-toggle-target="test"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
const html = TestUtils.getHtml();
expect(html).toMatchSnapshot();
});

it('removes hidden class', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="test" class="is-hidden"></div>
<button data-toggle-target="test"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

it('can handle multiple targets', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="test"></div>
<div data-toggle-name="test" class="is-hidden"></div>
<button data-toggle-target="test"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

it('can handle multiple specified targets', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="one" class="is-hidden"></div>
<div data-toggle-name="two"></div>
<button data-toggle-target="one two"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

});
Expand All @@ -80,64 +85,68 @@ describe('show', () => {

it('does nothing when element is already shown', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="test"></div>
<button data-toggle-target="show:test"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

it('removes hidden class', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="test" class="is-hidden"></div>
<button data-toggle-target="show:test"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

it('can handle multiple targets', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="test"></div>
<div data-toggle-name="test" class="is-hidden"></div>
<button data-toggle-target="show:test"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

it('can handle multiple specified targets', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="one" class="is-hidden"></div>
<div data-toggle-name="two" class="is-hidden"></div>
<button data-toggle-target="show:one show:two"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

});
Expand All @@ -146,64 +155,68 @@ describe('hide', () => {

it('does nothing when element is already hidden', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="test" class="is-hidden"></div>
<button data-toggle-target="hide:test"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

it('applies hidden class', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="test"></div>
<button data-toggle-target="hide:test"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

it('can handle multiple targets', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="test"></div>
<div data-toggle-name="test" class="is-hidden"></div>
<button data-toggle-target="hide:test"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

it('can handle multiple specified targets', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="one"></div>
<div data-toggle-name="two"></div>
<button data-toggle-target="hide:one hide:two"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

});
Expand All @@ -212,20 +225,21 @@ describe('mixed toggles', () => {

it('shows and hides elements correctly', () => {
// Arrange
setHtml(`
TestUtils.setHtml(`
<div data-toggle-name="one"></div>
<div data-toggle-name="two" class="is-hidden"></div>
<div data-toggle-name="three" class="is-hidden"></div>
<div data-toggle-name="four"></div>
<button data-toggle-target="one two show:three hide:four"></button>
`);
const button = document.querySelector('button');

// Act
toggle();
dispatchEvent('click', { context: document.querySelector('button') });
TestUtils.click(button);

// Assert
expect(getHtml()).toMatchSnapshot();
expect(TestUtils.getHtml()).toMatchSnapshot();
});

});
39 changes: 0 additions & 39 deletions test/utils.js
View file

This file was deleted.

10 changes: 10 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3429,6 +3429,10 @@ doctrine@^2.0.0:
esutils "^2.0.2"
isarray "^1.0.0"

dom-buddy@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/dom-buddy/-/dom-buddy-1.0.2.tgz#c06a61fcb9fd3578d7c1c26e3ab77eead0aa1bc4"

dom-serializer@0, dom-serializer@~0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
Expand Down Expand Up @@ -6461,6 +6465,12 @@ js-base64@^2.1.8, js-base64@^2.1.9:
version "2.1.9"
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"

js-test-buddy@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/js-test-buddy/-/js-test-buddy-0.0.3.tgz#253e5411a2e8fda7ada1cfa91f891587602f53e9"
dependencies:
dom-buddy "^1.0.2"

js-tokens@^3.0.0, js-tokens@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
Expand Down

0 comments on commit 34c5470

Please sign in to comment.