├── .editorconfig ├── .gitignore ├── .learn ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── index.js ├── package.json └── test └── index-test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | indent_style = space 6 | insert_final_newline = true 7 | 8 | [*{.java,.py}] 9 | indent_size = 4 10 | 11 | [*.{js,json,rb}] 12 | charset = utf-8 13 | indent_size = 2 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.gitignore.io/api/node 2 | 3 | ### Node ### 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | 9 | # Runtime data 10 | pids 11 | *.pid 12 | *.seed 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # node-waf configuration 27 | .lock-wscript 28 | 29 | # Compiled binary addons (http://nodejs.org/api/addons.html) 30 | build/Release 31 | 32 | # Dependency directories 33 | node_modules 34 | jspm_packages 35 | 36 | # Optional npm cache directory 37 | .npm 38 | 39 | # Optional REPL history 40 | .node_repl_history 41 | 42 | # Learn-specific .results.json 43 | .results.json 44 | -------------------------------------------------------------------------------- /.learn: -------------------------------------------------------------------------------- 1 | tags: 2 | - javascript 3 | languages: 4 | - javascript 5 | resources: 6 | - 1 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Learn.co Curriculum 2 | 3 | We're really excited that you're about to contribute to the [open curriculum](https://learn.co/content-license) on [Learn.co](https://learn.co). If this is your first time contributing, please continue reading to learn how to make the most meaningful and useful impact possible. 4 | 5 | ## Raising an Issue to Encourage a Contribution 6 | 7 | If you notice a problem with the curriculum that you believe needs improvement 8 | but you're unable to make the change yourself, you should raise a Github issue 9 | containing a clear description of the problem. Include relevant snippets of 10 | the content and/or screenshots if applicable. Curriculum owners regularly review 11 | issue lists and your issue will be prioritized and addressed as appropriate. 12 | 13 | ## Submitting a Pull Request to Suggest an Improvement 14 | 15 | If you see an opportunity for improvement and can make the change yourself go 16 | ahead and use a typical git workflow to make it happen: 17 | 18 | * Fork this curriculum repository 19 | * Make the change on your fork, with descriptive commits in the standard format 20 | * Open a Pull Request against this repo 21 | 22 | A curriculum owner will review your change and approve or comment on it in due 23 | course. 24 | 25 | # Why Contribute? 26 | 27 | Curriculum on Learn is publicly and freely available under Learn's 28 | [Educational Content License](https://learn.co/content-license). By 29 | embracing an open-source contribution model, our goal is for the curriculum 30 | on Learn to become, in time, the best educational content the world has 31 | ever seen. 32 | 33 | We need help from the community of Learners to maintain and improve the 34 | educational content. Everything from fixing typos, to correcting 35 | out-dated information, to improving exposition, to adding better examples, 36 | to fixing tests—all contributions to making the curriculum more effective are 37 | welcome. 38 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # Learn.co Educational Content License 2 | 3 | Copyright (c) 2016 Flatiron School, Inc 4 | 5 | The Flatiron School, Inc. owns this Educational Content. However, the Flatiron School supports the development and availability of educational materials in the public domain. Therefore, the Flatiron School grants Users of the Flatiron Educational Content set forth in this repository certain rights to reuse, build upon and share such Educational Content subject to the terms of the Educational Content License set forth [here](http://learn.co/content-license) (http://learn.co/content-license). You must read carefully the terms and conditions contained in the Educational Content License as such terms govern access to and use of the Educational Content. 6 | 7 | Flatiron School is willing to allow you access to and use of the Educational Content only on the condition that you accept all of the terms and conditions contained in the Educational Content License set forth [here](http://learn.co/content-license) (http://learn.co/content-license). By accessing and/or using the Educational Content, you are agreeing to all of the terms and conditions contained in the Educational Content License. If you do not agree to any or all of the terms of the Educational Content License, you are prohibited from accessing, reviewing or using in any way the Educational Content. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Logging Lab 2 | 3 | ## Objectives 4 | 5 | 1. Practice using `console.log()` 6 | 2. Practice using `console.error()` 7 | 3. Practice using `console.warn()` 8 | 9 | 10 | ## Introduction 11 | 12 | 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. 13 | 14 | ### Tests... 15 | 16 | The first new thing you'll notice is tests. 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. 17 | 18 | In programming, tests place the scientific method into computer science. 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. 19 | 20 | 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. 21 | 22 | ### Structure 23 | 24 | The structure of this lab — where its files and folders are located — looks roughly like the following: 25 | 26 | ``` 27 | ├── CONTRIBUTING.md 28 | ├── LICENSE.md 29 | ├── README.md 30 | ├── index.js 31 | ├── node_modules/ 32 | ├── package.json 33 | └── test 34 | └── index-test.js 35 | ``` 36 | 37 | All labs will more or less have the same structure. (And READMEs, for that matter, will still have CONTRIBUTING.md, LICENSE.md, and README.md files.) 38 | 39 | `index.js` might be called something else (something more descriptive) in other labs, and so `test/index-test.js` would be renamed accordingly. But `index.js` is also descriptive in its own right, defining something of an entry point for finding one's way around the app. This is often the file where you will write your code. (Later on, we'll introduce `index.html` and `index.css` — you'll have to update or refer to these files sometimes, too!) 40 | 41 | ### Code-along 42 | 43 | For now, open up `index.js` in your text editor. If you're using the Learn IDE, click the "Open" button on this lesson 44 | 45 | ![learn open](https://curriculum-content.s3.amazonaws.com/skills-based-js/learn_open.png) 46 | 47 | your IDE should open up. You'll see a sidebar like this: 48 | 49 | ![learn IDE sidebar](https://curriculum-content.s3.amazonaws.com/skills-based-js/learn_ide_sidebar.png) 50 | 51 | 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. 52 | 53 | In `index.js`, you should see, well, nothing. We'll fix that soon. 54 | 55 | Now open up `test/index-test.js`. Hey, there's something! What's all of this stuff doing? 56 | 57 | **Note: The `test/index-test.js` has great info that we want to look at, but do not edit this file otherwise you may have extra difficulty passing this lab.** 58 | 59 | At the very top of the file, you'll see 60 | 61 | ```js 62 | const expect = require('expect') 63 | const fs = require('fs') 64 | const jsdom = require('jsdom') 65 | const path = require('path') 66 | ``` 67 | 68 | This might be a bit bewildering, but at this point, we don't need to be able to write any of this code, or even understand every line perfectly. All we need is to understand enough so that we can get a sense of what the test is asking us to accomplish, so that we can make the test pass. Let's go through it. 69 | 70 | In these first lines, all we're doing is referencing different _libraries_ that help us run your tests. A library is code that someone else (usually multiple someone elses) wrote for our use. Note that `require` won't work out of the box in the browser. We're actually running our tests in a different _environment_. (Remember the sandbox analogy from earlier? It's just like that.) 71 | 72 | A little farther down the page, you'll see: 73 | ```js 74 | describe('index', () => { 75 | // there's stuff in here, too 76 | }) 77 | ``` 78 | 79 | `describe` is a function provided by our test runner (in this case, we're using [Mocha](https://mochajs.org/)) — it's basically a container for our tests. 80 | 81 | Then we have a few chunks like 82 | 83 | ```js 84 | it('calls console.error()', () => { 85 | // this is where the tests are! 86 | }) 87 | ``` 88 | 89 | Each of these chunks describes a behavior that we expect the main program to implement. As you can see, they describe that behavior pretty carefully — in this example, we know that our main file should call `console.error()` — pretty simple, right? 90 | 91 | Don't worry too much yet about what's happening inside these chunks. Sometimes we'll need to do some pretty fancy footwork to test some pretty basic things; other times, and as time goes on, you'll be able to read and understand basically what our tests are expecting. 92 | 93 | And that'll be great! These aren't like tests that we all took in school: they're testing behavior, not information. Tests are meant to be as transparent as possible about what they're doing, and as you grow as a programmer, it's important to understand more and more what the aims of tests are. 94 | 95 | In some of our tests, you'll see lines like the following: 96 | 97 | ```js 98 | jsdom({ 99 | src: fs.readFileSync(path.resolve(__dirname, '..', 'index.js'), 'utf-8') 100 | }) 101 | ``` 102 | 103 | This line reads `index.js` (remember how we said we'd modify that?) and adds its code to the _execution environment_. The "execution environment" is simply where our code runs. 104 | 105 | ## Running the Tests 106 | 107 | 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 108 | 109 | ![failures](https://curriculum-content.s3.amazonaws.com/skills-based-js/console_logging_lab_all_failing.png) 110 | 111 | 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.) 112 | 113 | 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. 114 | 115 | 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 116 | 117 | ```js 118 | console.error("HALP!") 119 | ``` 120 | 121 | Because it seems sufficiently dire. Remember to save your file. 122 | 123 | Anyway, let's run the tests again. In the Learn IDE's terminal, run 124 | 125 | ```js 126 | learn test 127 | ``` 128 | 129 | We should now see: 130 | 131 | ![one passing](https://curriculum-content.s3.amazonaws.com/skills-based-js/console_logging_lab_one_passing.png) 132 | 133 | Nice! We got the first one to pass! 134 | 135 | ## A note about spies 136 | 137 | You might often see errors like the ones above: `"Uncaught error: spy was not 138 | called"`. Spies are little bits of code that keep track of whether or not they 139 | were called. We use them to make sure that a function is called when we expect 140 | it to be called. 141 | 142 | We'll try to rewrite these error messages when possible to be more descriptive 143 | about what kinds of calls we expected; but know that sometimes, especially later 144 | on, we leave the errors intentionally ambiguous for you to work out. 145 | 146 | ## Your turn 147 | 148 | Now it's your turn — can you follow a flow similar to the one we followed 149 | together above to get the remaining two tests to pass? 150 | 151 | Imagine that you're building the user interface for a fancy ATM machine. 152 | Because the developers are hip with the latest trends, they're using 153 | JavaScript for the user-facing parts. 154 | 155 | We need a way to send messages to the user: some messages are just updates, 156 | some are warnings (the user should not continue doing what they just did), 157 | and some are errors (something broke, and we need to recover). 158 | 159 | Your job is to identify a way of sending each kind of message. Hint: in 160 | JavaScript, you'll probably find ways of telling users things with `console`. 161 | 162 | And again, remember to save your files before you re-run your tests. 163 | 164 | When all of your tests pass, be sure to run `learn submit` to move on to the 165 | next lesson. 166 | 167 | ## Feeling stuck? 168 | 169 | In the above, when we ran our tests and saw the message "index calls 170 | console.error()", we wrote, 171 | 172 | ```js 173 | console.error("HALP!") 174 | ``` 175 | 176 | Now when we run the tests again and see "index calls console.log()", we should 177 | look at what is the same and what is different between this message and the 178 | previous one. It looks like they're basically the same except for one tells 179 | us to call `console.error()` and the other tells us to call `console.log()`. 180 | So if we go back to `index.js` and write something like... 181 | ```js 182 | console.log("I would be a logger.") // get it? 183 | ``` 184 | ...we're now calling `console.log()` with a different string. Similarly, when we 185 | see the message "index calls console.warn()", we know that we can go back to our 186 | code and write something with `console.warn()`. You've got this! 187 | 188 | ## Resources 189 | 190 | - [npm](https://npmjs.org) 191 | 192 |

View JavaScript Logging Lab on Learn.co and start learning to code for free.

193 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learn-co-students/javascript-logging-lab-js-intro-000/a21be9770762c74283ab72337ccaecb025b8ea29/index.js -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "java-script-logging-lab", 3 | "version": "0.1.0", 4 | "description": "Practice writing a log statement", 5 | "engines": { 6 | "node": "6.x", 7 | "npm": "3.x" 8 | }, 9 | "main": "index.js", 10 | "scripts": { 11 | "test": "mocha -R mocha-multi --reporter-options nyan=-,json=.results.json" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+ssh://git@github.com/learn-co-curriculum/javascript-logging-lab.git" 16 | }, 17 | "keywords": [ 18 | "javascript", 19 | "flatiron", 20 | "learn" 21 | ], 22 | "author": "pletcher", 23 | "license": "SEE LICENSE IN LICENSE.md", 24 | "bugs": { 25 | "url": "https://github.com/learn-co-curriculum/javascript-logging-lab/issues" 26 | }, 27 | "homepage": "https://github.com/learn-co-curriculum/javascript-logging-lab#readme", 28 | "devDependencies": { 29 | "expect": "^1.20.1", 30 | "jsdom": "^9.2.1", 31 | "mocha": "^2.5.3", 32 | "mocha-jsdom": "^1.1.0", 33 | "mocha-multi": "^0.9.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /test/index-test.js: -------------------------------------------------------------------------------- 1 | const expect = require('expect') 2 | const fs = require('fs') 3 | const jsdom = require('jsdom') 4 | const path = require('path') 5 | 6 | 7 | describe('index', () => { 8 | const html = '
' 9 | const src = path.resolve(__dirname, '..', 'index.js') 10 | 11 | it('calls console.error()', done => { 12 | const spy = expect.spyOn(console, 'error').andCallThrough() 13 | 14 | jsdom.env(html, [src], { 15 | virtualConsole: jsdom.createVirtualConsole().sendTo(console) 16 | }, (err, window) => { 17 | expect(spy).toHaveBeenCalled('expected console.error to have been called') 18 | console.error.restore() 19 | done() 20 | }) 21 | }) 22 | 23 | it('calls console.log()', done => { 24 | const spy = expect.spyOn(console, 'log').andCallThrough() 25 | 26 | jsdom.env(html, [src], { 27 | virtualConsole: jsdom.createVirtualConsole().sendTo(console) 28 | }, (err, window) => { 29 | expect(spy).toHaveBeenCalled('expected console.log to have been called') 30 | console.log.restore() 31 | done() 32 | }) 33 | }) 34 | 35 | it('calls console.warn()', done => { 36 | const spy = expect.spyOn(console, 'warn').andCallThrough() 37 | 38 | jsdom.env(html, [src], { 39 | virtualConsole: jsdom.createVirtualConsole().sendTo(console) 40 | }, (err, window) => { 41 | expect(spy).toHaveBeenCalled('expected console.warn to have been called') 42 | console.warn.restore() 43 | done() 44 | }) 45 | }) 46 | }) 47 | --------------------------------------------------------------------------------