Merge branch 'master' into solution

Author: pletcher

README.md

@@ -12,6 +12,14 @@ JavaScript Logging Lab
 
 Welcome to your first JavaScript lab! You'll notice a few new things in this lesson that we haven't encountered before. Don't worry, we'll walk you through them.
 
+### Why test?
+
+When we want to run an experiment, we need to develop a hypothesis and we need to test it. So if we want to experiment with whether adding salt to ice water makes it hotter or colder, we need to design an experiment that controls for all of the other variables: we need to _isolate_ our experiment from parts of its environment that aren't relevant to what we hope to test.
+
+In programming, tests pick up on the discipline's computer science background. We run tests to verify that our programs behave the way we think they do. Tests help us identify bugs, and they give us a sense of the health of our applications.
+
+On Learn, we use tests as teaching tools. Just like in a normal coding environment, we use tests to describe the program's behavior. Unlike in a normal coding environment, you, not we, are in charge of getting the tests to pass — that is, making the app behave like we expect it to.
+
 ### Structure
 
 The structure of this lab — where its files and folders are located — looks roughly like the following:
@@ -33,7 +41,17 @@ All labs will more or less have the same structure. (And READMEs, for that matte
 
 ### Code-along
 
-For now, open up `index.js` in your text editor. You should see, well, nothing. We'll fix that soon.
+For now, open up `index.js` in your text editor. If you're using the Learn IDE, click the "Open" button on this lesson
+
+![learn open](https://curriculum-content.s3.amazonaws.com/skills-based-js/learn_open.png)
+
+your IDE should open up. You'll see a sidebar like this:
+
+![learn IDE sidebar](https://curriculum-content.s3.amazonaws.com/skills-based-js/learn_ide_sidebar.png)
+
+If you open up that "javascript-logging-lab..." folder, you'll see a list of files (along with a test/ directory). Click `index.js`, and it will open in the editor.
+
+In `index.js`, you should see, well, nothing. We'll fix that soon.
 
 Now upon up `test/index-test.js`. Hey, there's something! What's all of this stuff doing?
 
@@ -61,7 +79,7 @@ describe('index', () => {
 Then we have a few chunks like
 
 ``` javascript
-it('calls console.error()`, () => {
+it('calls console.error()', () => {
   // this is where the tests are!
 })
 ```
@@ -84,13 +102,13 @@ This line reads `index.js` (remember how we said we'd modify that?) and adds its
 
 ## Running the Tests
 
-To run the tests, simply type `learn test` in the Learn IDE. You should see something like
+To run the tests, simply type `learn test` in the terminal part of the Learn IDE. (The terminal is the part below where you've been coding.) You should see something like
 
-![failures](https://curriculum-content.s3.amazonaws.com/skills-based-js/console_lab_test_failures.png)
+![failures](https://curriculum-content.s3.amazonaws.com/skills-based-js/console_logging_lab_all_failing.png)
 
 For the moment, all of the tests fail. Let's figure out how to get one of them passing! (The rest will be up to you.)
 
-Let's take the first one. The test description says, "index calls console.error()". So it sounds like, pretty straight-forwardly, like we should call `console.error()`.
+Let's take the first one. The test description says, "index calls console.error()". So it sounds like, pretty straight-forwardly, like we should _call_ `console.error()` somewhere in `index.js`. "Calling" a function means invoking it, causing it to act. We call functions with parentheses: `console.error` _is_ a function, but `console.error()` is a _call_ to the function.
 
 In `index.js`, add a call to `console.error()` — you can call it with anything you like (as long as the syntax is valid). We're going to go with
 
@@ -100,22 +118,39 @@ console.error("HALP!")
 
 Because it seems sufficiently dire.
 
-Anyway, let's run the tests again. In the Learn IDE's terminal, run 
+Anyway, let's run the tests again. In the Learn IDE's terminal, run
 
 ``` javascript
 learn test
 ```
 
 We should now see:
 
-![one passing](https://curriculum-content.s3.amazonaws.com/skills-based-js/console_lab_test_one_passing.png)
+![one passing](https://curriculum-content.s3.amazonaws.com/skills-based-js/console_logging_lab_one_passing.png)
 
 Nice! We got the first one to pass!
 
+## A note about spies
+
+You might often see errors like the ones above: `"Uncaught error: spy was not called"`. Spies are little bits of code that keep track of whether or not they were called. We use them to make sure that a function is called when we expect it to be called.
+
+We'll try to rewrite these error messages when possible to be more descriptive about what kinds of calls we expected; but know that sometimes, especially later on, we leave the errors intentionally ambiguous for you to work out.
+
 ## Your turn
 
 Now it's your turn — can you follow a flow similar to the one we followed together above to get the remaining to tests to pass?
 
+Imagine that you're building the user interface for a fancy ATM machine.
+Because the developers are hip with the latest trends, they're using
+JavaScript for the user-facing parts.
+
+We need a way to send messages to the user: some messages are just updates,
+some are warnings (the user should not continue doing what they just did),
+and some are errors (something broke, and we need to recover).
+
+Your job is to identify a way of sending each kind of message. Hint: in
+JavaScript, you'll probably find ways of telling users things with `console`.
+
 When all of your tests pass, be sure to run `learn submit` to move on to the next lesson.
 
 ## Resources

test/index-test.js

@@ -14,7 +14,7 @@ describe('index', () => {
     jsdom.env(html, [src], {
       virtualConsole: jsdom.createVirtualConsole().sendTo(console)
     }, (err, window) => {
-      expect(spy).toHaveBeenCalled()
+      expect(spy).toHaveBeenCalled('expected console.error to have been called')
       console.error.restore()
       done()
     })
@@ -26,7 +26,7 @@ describe('index', () => {
     jsdom.env(html, [src], {
       virtualConsole: jsdom.createVirtualConsole().sendTo(console)
     }, (err, window) => {
-      expect(spy).toHaveBeenCalled()
+      expect(spy).toHaveBeenCalled('expected console.log to have been called')
       console.log.restore()
       done()
     })
@@ -38,7 +38,7 @@ describe('index', () => {
     jsdom.env(html, [src], {
       virtualConsole: jsdom.createVirtualConsole().sendTo(console)
     }, (err, window) => {
-      expect(spy).toHaveBeenCalled()
+      expect(spy).toHaveBeenCalled('expected console.warn to have been called')
       console.warn.restore()
       done()
     })