Project Setup LJTT #0
Required Software
Recommended Software
- Visual Studio Code - I would highly recommend using Visual Studio Code as your editor, this will be the editor that I use throughout this series.
Why this series?
This is an opportunity for anyone interested in learning JavaScript with a background in testing, but not necessarily any experience in the automation of testing. Throughout this series, we will learn about the different facets of JavaScript and prove that they work in an automated fashion that will teach both the language as well as how to write tests in it. I know what you are thinking, how can I write tests in JavaScript without knowing JavaScript. Don't worry the goal of this series is to give you the minimum tools that you will need to get started with writing the test and we will use those to build your knowledge of JavaScript.
I am extremely excited to be doing this series and I hope that you learn a lot from progressing through. If you have any questions or feedback feel free to contact me
Getting Started
Install NodeJS
We need to first install NodeJS to provide us with a way to run our JavaScript code. There are countless ways to install NodeJS, the easiest being their home page here where they provide easy installation. If you have a package manager, like Chocolatey or Homebrew, I would highly recommend using it to install NodeJS rather than through their download link. Then just be sure that the binary has been added to your environment variables. For more in-depth instructions for installation check out this post.
TIP
Be sure to get the LTS version of NodeJS when you download it.
Make sure that everything is set up correctly by running the following commands.
node -v
npm -v
2
If you see the version of these output by both commands then you know that you have installed NodeJS correctly
# like so...
$ node -v
v8.16.0
$ npm -v
6.4.1
2
3
4
5
TIP
You may need to restart your terminal to be able to run these commands.
Setting Up A Project
TIP
If you would like to skip the project setup you can download the project here and skip to the before we start section
Setting up a NodeJS project is a simple process, to begin choose a directory for your code to live. My directory will be learn-js-thru-testing, once that directory has been created cd into it. Next, you will need to create a package.json file, this can be done using the command below.
# This will create a package.json file with defaults already assigned
npm init -y
2
TIP
The package.json file serves two purposes, describing your project as well as the dependencies needed to run it. You can read more about the package.json file on npm's documentation here
Next, we need to install our Testing Framework by running the following command inside of the directory with your code.
TIP
It's ok if you don't understand what a Testing Framework is we will discuss it at length throughout this series.
# This will install jest, IntelliSense for jest, and additional jest functions
npm install -D @types/jest jest jest-extended
2
TIP
Jest is a JavaScript Testing Framework that simplifies the process of testing. If you would like to learn more about jest check out their website here. The jest-extended package provides additional functions to jest that make testing even easier, check out their documentation here if you are curious.
Once that is finished you will need to update the package.json test script to run the jest framework, and add the extended jest library.
This means changes the test command in the scripts section
{
...,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}
2
3
4
5
6
To this
{
... ,
"scripts": {
"test": "jest"
},
}
2
3
4
5
6
Then you will need to add the following section to the bottom of your package.json file.
{
... ,
"jest": {
"setupFilesAfterEnv": [
"jest-extended"
]
}
}
2
3
4
5
6
7
8
After all of the changes your package.json should similar to the following:
{
"name": "learn-js-thru-unit-testing",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/jest": "^24.0.17",
"jest": "^24.8.0",
"jest-extended": "^0.11.2"
},
"jest": {
"setupFilesAfterEnv": [
"jest-extended"
]
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
WARNING
Be sure that you have the jest section and the test script inside of the scripts section set up correctly or the tests may not run properly.
Before we start learning
Throughout this series, we will be learning about JavaScript in an assertion based manner. Therefore if there is a concept within JavaScript that we discuss, it must be backed up with a test. For example, if I were to tell you variables exist in JavaScript and can be assigned values, then there must be a test that asserts that is the case. We will continue to dive into the series in this manner so buckle up because this is going to get exciting!
There are a couple of pieces of terminology and code that we need to dive into before we get started. The first term is a Test Case, this is a set of assertions used to determine if a system under test is functioning properly. Therefore we can say that as we write Test Cases we will be asserting that, JavaScript, our system under test is functioning properly. Test Assertions, the next terminology, are statements that should always be true otherwise our system under test is not functioning properly. For example, if I were to assert that 0 is greater than 1, this would be considered a valid assertion otherwise the system of math is not functioning properly. The final piece that we need to cover is creating a Test Case in jest, below is a template that you should use when creating any new Test Case in jest.
TIP
Later in this post, we will show Test Assertions look like in the code.
Create a file that ends in
.spec.jse.g.variables.spec.jsAdd a
Test Case
// test case description goes here
test("", () => {
// assertions go here
})
2
3
4
WARNING
If the two above criteria are not met then the test will not run properly.
When you want to run your Test Cases to validate they are working, you will need to run the command below within a terminal that is in the directory with your tests in it.
npm test
Variables
TIP
To start this section first create a file called variables.spec.js, this will house our test cases.
What is a variable
Variables, in any language, represent a way to store information for later use. For example, if I wanted to store the meaning of life inside of a variable I would first need to start with the keyword var followed by the name of the variable theMeaningOfLife and then it's value 42.
var theMeaningOfLife = 42;
TIP
There are other ways to create variables in JavaScript besides the var keyword, but we will get into those in a later tutorial.
Great! Now that we have a basic understanding of variables let's jump into the beginning of our assertions. Above we just made the statement that theMeaningOfLife has a value of 42, now we are going to assert on that statement.
We first need to start by creating a file to place our test cases in, I will name my file variables.spec.js but feel free to name this file whatever you like as long as it ends in .spec.js. Once you have that file created in your project directory, you will want to add the following code to the file.
//variables.spec.js
// test case description goes here
test("", () => {
// assertions go here
})
2
3
4
5
6
TIP
The above code is a way to create Test Cases in the jest testing framework, later we will discuss in more detail about how this works. I would highly recommend keeping the code above around so that as you want to make more Test Cases it will be as simple as copy-and-paste.
Now that we have an empty Test Case in jest we can start to fill in information about it. Let's start with the description, our previous assertion is that the meaning of life has a value of 42, so that will be the description of our Test Case. To add the description, type in between the double quotes after the word test( the following: the meaning of life is 42 like below.
//variables.spec.js
test("the meaning of life is 42", () => {
// assertions go here
})
2
3
4
5
Great we have a description for our test the next thing on our list is to create our variable and assert that its value is correct. We'll define the variable first using the code that we showed at the beginning of this section.
//variables.spec.js
test("the meaning of life is 42", () => {
// assertions go here
var theMeaningOfLife = 42;
})
2
3
4
5
6
Now we are ready to begin writing a Test Assertion, the format that jest expects our assertions to be in is expect({value}).to{be-expectation}. Therefore in our case we expect theMeaningOfLife toEqual 42, the way that assertion will appear in the code is expect(theMeaningOfLife).toEqual(42) and that's it! Let's add this code to our Test Case and prove our assertion.
//variables.spec.js
test("the meaning of life is 42", () => {
// assertions go here
var theMeaningOfLife = 42;
expect(theMeaningOfLife).toEqual(42);
})
2
3
4
5
6
7
TIP
As you type out expect(theMeaningOfLife) and press . I would recommend looking through the options that your editor presents to you. It's fine if you don't understand them for now, we will get into them as we continue throughout the series.
Now that we have created our assertion of theMeaningOfLife we now need to run it. To do that you will need to Open a Terminal then Navigate to the directory with your code and finally run the npm test command as shown below.
npm test
TIP
This command will run the test script that is listed inside of the package.json file. In our case, this will run the jest test runner.
Once you have run the command you should see the following output from your terminal.
PASS ./variable.spec.js
✓ the meaning of life is 42 (6ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.919s, estimated 1s
Ran all test suites.
2
3
4
5
6
7
8
Congratulations! You have just created your first Test Case with a Test Assertion pat yourself on the back! Great job making it through the first part of the series, in the next part we will continue by diving even deeper into variables in JavaScript. If you have any questions or feedback feel free to contact me or leave a comment below, and always remember you are the Captain of this Quality Cruise Line.