Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Updates version of JSDOM to latest (v11) Fixes "Click" Tests which means 100% Coverage!!! #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iteles merged 7 commits into master from update-jsdom-fixes-click-tests
Jun 11, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ the Elm ("Model Update View") Architecture in "_plain_" JavaScript.
[![codecov](https://codecov.io/gh/dwyl/learn-elm-architecture-in-javascript/branch/master/graph/badge.svg)](https://codecov.io/gh/dwyl/learn-elm-architecture-in-javascript)
[![dependencies Status](https://david-dm.org/dwyl/learn-elm-architecture-in-javascript/status.svg)](https://david-dm.org/dwyl/learn-elm-architecture-in-javascript)
[![devDependencies Status](https://david-dm.org/dwyl/learn-elm-architecture-in-javascript/dev-status.svg)](https://david-dm.org/dwyl/learn-elm-architecture-in-javascript?type=dev)
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues)



> We think Elm is the _future_ of Front End Web Development <br />
Expand Down
13 changes: 9 additions & 4 deletions package.json
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "learn-elm-architecture-in-javascript",
"description": "Learn how to use The Elm Architcture in JavaScript to create functional and fast UI!",
"version": "1.0.0",
"version": "1.0.1",
"homepage": "https://github.com/dwyl/learn-elm-architecture-in-javascript",
"main": "examples/01-counter-basic.html",
"repository": {
Expand All @@ -11,16 +11,18 @@
"author": "@dwyl & friends!",
"devDependencies": {
"istanbul": "^0.4.5",
"jsdom": "^10.1.0",
"jsdom": "^11.0.0",
"live-server": "^1.2.0",
"nodemon": "^1.11.0",
"pre-commit": "^1.2.2",
"qunit-tap": "^1.5.1",
"qunitjs": "^2.3.2"
},
"scripts": {
"start": "live-server --port=8000 --open=./examples",
"test": "istanbul cover test/test.js",
"retest": "PORT=8000 node_modules/.bin/nodemon ./test/*.js"
"retest": "PORT=8000 node_modules/.bin/nodemon ./test/*.js",
"check-coverage": "istanbul cover test/test.js && istanbul check-coverage --statements 100 --functions 100 --lines 100 --branches 100"
},
"keywords": [
"Elm",
Expand All @@ -32,5 +34,8 @@
"tutorial",
"how to"
],
"license": "ISC"
"license": "ISC",
"pre-commit": [
"check-coverage"
]
}
89 changes: 47 additions & 42 deletions test/test.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,21 @@ require('qunit-tap')(QUnit, console.log); // use console.log for test output
var jsdom = require("jsdom"); // https://github.com/tmpvar/jsdom
var { JSDOM } = jsdom;
var path = require('path');
// var html = fs.readFileSync(path.resolve(__dirname,
// '../examples/counter-reset/index.html'));
// var DOM = new JSDOM(html);
var fs = require('fs');
var html = fs.readFileSync(path.resolve(__dirname,
'../examples/counter-reset/index.html'));
var DOM = new JSDOM(html);
var id = 'test-app'
var DOM = new JSDOM(`<!DOCTYPE html><div id="${id}">Hello world</div>`);
// var DOM = new JSDOM(`<!DOCTYPE html><div id="${id}">Hello world</div>`);
var document = DOM.window.document; // shortcut to JSDOM document

test('hello world before mounting app', function(assert){
var actual = document.getElementById(id).textContent; // "Hello world"
var expected = "Hello world";
assert.equal(expected, actual);
test('Mount app expect state to be Zero', function(assert){
var actual = document.getElementById(id).textContent;
var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
var expected = 0;
assert.equal(expected, actual_stripped, "Inital state set to 0.");
});


var counter = require(path.resolve(__dirname,
'../examples/counter-reset/counter.js'));
var { view, mount, update, div, button, empty, init} = counter;
Expand All @@ -41,25 +42,25 @@ btn.addEventListener('click', function() {
console.log('increment button CLICKed!!');
var state = document.getElementById(id)
.getElementsByClassName('count')[0].textContent;
console.log('state:', state);
// console.log('state:', state);
});

// btn.dispatchEvent(evt);


test('Test Update update(0) returns 0 (current state)', function(assert) {
var result = update(0);
assert.equal(result, 0);
assert.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
});

test('Test Update increment: update(1, "inc") returns 2', function(assert) {
var result = update(1, "inc");
assert.equal(result, 2);
assert.equal(result, 2, "Initial state: 1, Increment once, Final state: 2");
});

test('Test Update decrement: update(3, "dec") returns 2', function(assert) {
var result = update(1, "dec");
assert.equal(result, 0);
assert.equal(result, 0, "Initial state: 1, Decrement once, Final state: 0");
});


Expand All @@ -81,50 +82,54 @@ function(assert) {
var state = document.getElementById(id)
.getElementsByClassName('count')[0].innerHTML;
console.log('state:', state);
assert.equal(state, 8); // model was incremented successfully
assert.equal(state, 8,
"End State is 8 after incrementing 7 by 1 (as expected)"); // model was incremented successfully
done();
});

btn.dispatchEvent(evt);
// document.getElementById(id).getElementsByClassName('inc')[0].click();
});

// test('Click reset button resets state to 0', function(assert) {
// mount(7, update, view, id);
// var root = document.getElementById(id);
// assert.equal(root.getElementsByClassName('count')[0].textContent, 7);
// var btn = root.getElementsByClassName("reset")[0]; // click reset button
// btn.click(); // Click the Reset button!
// var state = root.getElementsByClassName('count')[0].textContent;
// assert.equal(state, 0); // state was successfully reset to 0!
// empty(root); // clean up after tests
// // console.log('STATE:', state);
// });
test('Click reset button resets state to 0', function(assert) {
mount(7, update, view, id);
var root = document.getElementById(id);
assert.equal(root.getElementsByClassName('count')[0].textContent, 7);
var btn = root.getElementsByClassName("reset")[0]; // click reset button
btn.click(); // Click the Reset button!
var state = root.getElementsByClassName('count')[0].textContent;
assert.equal(state, 0, "State is 0 (Zero) after reset."); // state was successfully reset to 0!
empty(root); // clean up after tests
// console.log('STATE:', state);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a couple of commented out console.logs but I'm happy to leave them in for the time being as these might actually be useful to beginners when we publicise the tutorial #29

});

// Reset Functionality

// test('Test reset counter when model/state is 6 returns 0', function(assert) {
// var result = update(6, "reset");
// assert.equal(result, 0);
// });
//
test('Test reset counter when model/state is 6 returns 0', function(assert) {
var result = update(6, "reset");
assert.equal(result, 0);
});

// please make this test pass if you know how! thanks! :-)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Worth also opening an issue on this 👍

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please feel free to open that issue. thanks. 👍

// test('reset button should be present on page', function(assert) {
// var reset = document.getElementsByClassName('reset');
// console.log(reset);
// assert.equal(reset.length, 1);
// });



// test('Click reset button resets state to 0', function(assert) {
// mount(7, update, view, id);
// var root = document.getElementById(id);
// assert.equal(root.getElementsByClassName('count')[0].textContent, 7);
// var btn = root.getElementsByClassName("reset")[0]; // click reset button
// btn.click(); // Click the Reset button!
// var state = root.getElementsByClassName('count')[0].textContent;
// assert.equal(state, 0); // state was successfully reset to 0!
// empty(root); // clean up after tests
// });
test('Click reset button resets state to 0', function(assert) {
mount(7, update, view, id);
var root = document.getElementById(id);
assert.equal(root.getElementsByClassName('count')[0].textContent, 7,
"initial state is 7 as expected");
var btn = root.getElementsByClassName("reset")[0]; // click reset button
btn.click(); // Click the Reset button!
var state = root.getElementsByClassName('count')[0].textContent;
assert.equal(state, 0,
"State is 0 (Zero) after reset."); // state was successfully reset to 0!
empty(root); // clean up after tests
});

/* istanbul ignore next */
if (typeof module !== 'undefined' && module.exports) { QUnit.load(); } // run the tests
QUnit.load(); // run the tests

AltStyle によって変換されたページ (->オリジナル) /