|
| 1 | +JavaScript Logging Lab |
| 2 | +--- |
| 3 | + |
| 4 | +## Objectives |
| 5 | + |
| 6 | +1. Practice using `console.log()` |
| 7 | +2. Practice using `console.error()` |
| 8 | +3. Practice using `console.warn()` |
| 9 | + |
| 10 | + |
| 11 | +## Introduction |
| 12 | + |
| 13 | +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. |
| 14 | + |
| 15 | +### Structure |
| 16 | + |
| 17 | +The structure of this lab — where its files and folders are located — looks roughly like the following: |
| 18 | + |
| 19 | +``` shell |
| 20 | +├── CONTRIBUTING.md |
| 21 | +├── LICENSE.md |
| 22 | +├── README.md |
| 23 | +├── index.js |
| 24 | +├── node_modules/ |
| 25 | +├── package.json |
| 26 | +└── test |
| 27 | + └── index-test.js |
| 28 | +``` |
| 29 | + |
| 30 | +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.) |
| 31 | + |
| 32 | +`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!) |
| 33 | + |
| 34 | +### Code-along |
| 35 | + |
| 36 | +For now, open up `index.js` in your text editor. You should see, well, nothing. We'll fix that soon. |
| 37 | + |
| 38 | +Now upon up `test/index-test.js`. Hey, there's something! What's all of this stuff doing? |
| 39 | + |
| 40 | +At the very top of the file, you'll see |
| 41 | + |
| 42 | +``` javascript |
| 43 | +const expect = require('expect') |
| 44 | +const fs = require('fs') |
| 45 | +const jsdom = require('mocha-jsdom') |
| 46 | +const path = require('path') |
| 47 | +``` |
| 48 | + |
| 49 | +This might be a bit bewildering, but 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.) |
| 50 | + |
| 51 | +A little farther down the page, you'll see |
| 52 | + |
| 53 | +``` javascript |
| 54 | +describe('index', () => { |
| 55 | + // there's stuff in here, too |
| 56 | +}) |
| 57 | +``` |
| 58 | + |
| 59 | +`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. |
| 60 | + |
| 61 | +Then we have a few chunks like |
| 62 | + |
| 63 | +``` javascript |
| 64 | +it('calls console.error()`, () => { |
| 65 | + // this is where the tests are! |
| 66 | +}) |
| 67 | +``` |
| 68 | +
|
| 69 | +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? |
| 70 | +
|
| 71 | +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. |
| 72 | +
|
| 73 | +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. |
| 74 | + |
| 75 | +In some of our tests, you'll see lines like the following: |
| 76 | +
|
| 77 | +``` javascript |
| 78 | +jsdom({ |
| 79 | + src: fs.readFileSync(path.resolve(__dirname, '..', 'index.js'), 'utf-8') |
| 80 | +}) |
| 81 | +``` |
| 82 | +
|
| 83 | +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. |
| 84 | + |
| 85 | +## Running the Tests |
| 86 | + |
| 87 | +To run the tests, simply type `learn test` in the Learn IDE. You should see something like |
| 88 | + |
| 89 | + |
| 90 | + |
| 91 | +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.) |
| 92 | +
|
| 93 | +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()`. |
| 94 | + |
| 95 | +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 |
| 96 | +
|
| 97 | +``` javascript |
| 98 | +console.error("HALP!") |
| 99 | +``` |
| 100 | +
|
| 101 | +Because it seems sufficiently dire. |
| 102 | +
|
| 103 | +Anyway, let's run the tests again. In the Learn IDE's terminal, run |
| 104 | +
|
| 105 | +``` javascript |
| 106 | +learn test |
| 107 | +``` |
| 108 | +
|
| 109 | +We should now see: |
| 110 | +
|
| 111 | + |
| 112 | +
|
| 113 | +Nice! We got the first one to pass! |
| 114 | +
|
| 115 | +## Your turn |
| 116 | +
|
| 117 | +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? |
| 118 | + |
| 119 | +When all of your tests pass, be sure to run `learn submit` to move on to the next lesson. |
| 120 | + |
| 121 | +## Resources |
| 122 | + |
| 123 | +- [npm](https://npmjs.org) |
0 commit comments