From ea3e5b9e3baca6bbe2dd5f19004f64242f719dca Mon Sep 17 00:00:00 2001 From: Wiktor Mociun Date: Mon, 6 Jul 2015 23:55:54 +0200 Subject: [PATCH] Improve test messages for exercise no. 3. Ref #4 --- koans/es6/03-WhatsYourName.jsx | 4 ++-- test/es6/03-WhatsYourName.js | 15 +++++++-------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/koans/es6/03-WhatsYourName.jsx b/koans/es6/03-WhatsYourName.jsx index 691393c..52b580c 100644 --- a/koans/es6/03-WhatsYourName.jsx +++ b/koans/es6/03-WhatsYourName.jsx @@ -1,8 +1,8 @@ var React = require("react"); -// Let's get to the most important feature of React.js - Reactive State. +// Let's get to the most important feature of React.js - reactive state. // -// Each React component has 2 important hashes: +// Each React component contains 2 important hashes: // * Properties - we pass these values when we create component. They don't // change over entire life of the component. // * State - these values can change over entire life of the component. diff --git a/test/es6/03-WhatsYourName.js b/test/es6/03-WhatsYourName.js index 37f9444..f2740d4 100644 --- a/test/es6/03-WhatsYourName.js +++ b/test/es6/03-WhatsYourName.js @@ -29,14 +29,14 @@ describe("03 - What's Your Name?", () => { var input = _.first(inputs); var paragraph = _.first(paragraphs); - assert.equal(paragraphs.length, 1, "There should be only one paragraph on component"); - assert.equal(inputs.length, 1, "There should be only one input on component"); + assert.equal(paragraphs.length, 1, "There should be only one `p` element rendered by the component"); + assert.equal(inputs.length, 1, "There should be only one `input` rendered by the component"); React.addons.TestUtils.Simulate.change(input, {target: { value: "XYZ" } }); - assert.equal(nameInParagraphEqualsTo(paragraph, 'XYZ'), true, "After changing name in input, we should see the change in paragraph."); + assert.equal(nameInParagraphEqualsTo(paragraph, 'XYZ'), true, "After changing name in input, I should see the change in `p` element's content. In other words: `this.state.name` should change."); React.addons.TestUtils.Simulate.change(input, {target: { value: "ZYX" } }); - assert.equal(nameInParagraphEqualsTo(paragraph, 'ZYX'), true, "After changing name in input for the second time, we should see the change in paragraph."); + assert.equal(nameInParagraphEqualsTo(paragraph, 'ZYX'), true, "After changing name in input for the second time, we should see the change in `p` element. In other words: `this.state.name` should change."); }); }); @@ -46,10 +46,9 @@ describe("03 - What's Your Name?", () => { var paragraph = _.first(paragraphs); React.addons.TestUtils.Simulate.change(input, {target: { value: "" } }); - assert.equal(paragraph.props.children, "Hey there. Enter your name.", "If user didn't enter the name, show \"Hey there. Enter your name.\". See the hint in task's description. The code you need to write is almost the same."); - - React.addons.TestUtils.Simulate.change(input, {target: { value: "XYZ" } }); - assert.equal(nameInParagraphEqualsTo(paragraph, 'XYZ'), true, "When user input name, you should show greeting message in paragraph."); + assert.equal(paragraph.props.children, "Hey there. Enter your name.", + "If user didn't enter the name (`this.state.name` length is 0), show \"Hey there. Enter your name.\". See the hint in task's description." + ); }); }); });