Skip to content

Commit 4cb03c7

Browse files
authored
Merge pull request ironhack-labs#3120 from ironhack-labs/uros/update-use-jasmine
Update LAB - use Jasmine for testing
2 parents ce67bb1 + 8bd8d58 commit 4cb03c7

12 files changed

+6485
-183
lines changed

README.md

Lines changed: 115 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@
66

77
## Introduction
88

9-
Manipulating arrays in code is a very common operation. Whether you are creating a total for a shopping cart, grabbing only the first names out of a list of people, or moving a piece on a chessboard, you are probably going to be modifying or manipulating an array in some way.
9+
Array manipulation is a common task in programming. Whether you are calculating a total for a shopping cart, grabbing only the first names from a list of people, or moving a piece on a chessboard, you are probably modifying or manipulating an array somewhere in the code.
10+
<br>
1011

1112
## Requirements
1213

1314
- Fork this repo
1415
- Clone it to your machine
15-
16+
<br>
1617

1718

1819
## Submission
@@ -26,39 +27,91 @@ git push origin master
2627
```
2728

2829
- Create a Pull Request so that your TAs can check your work.
30+
<br>
31+
32+
33+
34+
## Automated Testing Introduction
2935

36+
### What is automated testing?
37+
38+
Automated software testing is the process of programmatically executing an application in order to validate and verify that it meets the business needs, as well as the technical requirements, and that it behaves as expected.
39+
40+
Testing should be viewed as a continuous process, not a discrete operation or single activity in the development lifecycle. Designing tests at the beginning of the product lifecycle can be help to mitigate common issues that arise when developing complex code bases.
41+
42+
Having a strong *test suite* can provide you ease of mind, since you will be able to confidently improve upon your work while knowing that your not breaking a previously developed feature.
3043
<br>
3144

45+
### Testing labs
3246

47+
This LAB, along with some of the labs you will be working on during the bootcamp, is equipped with unit tests to provide automated feedback on your lab progress.
48+
<br>
3349

34-
## Instructions
50+
### Testing with Jasmine
3551

36-
You will work on the `src/functions-and-arrays.js` file, which is already loaded in the `index.html` file.
52+
Jasmine is an automated testing framework for JavaScript. It is designed to be used in Behavior-driven Development (**BDD**) programming, which focuses more on the business value than on the technical details.
3753

38-
To run the JavaScript code open the `index.html` file use the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) VSCode extension.
54+
We have already included Jasmine in the project you just forked, so let's see how to use it to implement our code.
55+
<br>
3956

40-
To see output of your JavaScript code open the [Console in the Developer Tools](https://developer.chrome.com/docs/devtools/open/#console).
57+
### Usage
4158

42-
While following the instructions for each iteration, make sure to carefully read the instructions to fully understand the task requirements. Do not rush. You should take your time to carefully read every iteration.
59+
Before start coding, we will explain the project structure we have provided you:
4360

61+
```
62+
lab-js-functions-and-arrays
63+
├── README.md
64+
├── SpecRunner.html
65+
├── jasmine
66+
│ └── ...
67+
├── src
68+
│ └── functions-and-arrays.js
69+
└── tests
70+
└── functions-and-arrays.spec.js
71+
```
4472

73+
We will be working with the `src/functions-and-arrays.js`. In the `jasmine` folder you can find all of the files needed to use Jasmine. All these files are already linked with the `SpecRunner.html` file.
4574

46-
### Note about tests
75+
In case you want to check the tests, they are in the `tests/functions-and-arrays.spec.js` file.
4776

48-
This LAB, along with some of the labs you will be working on during the bootcamp, is equipped with unit tests to provide automated feedback on your lab progress.
4977

50-
**After you’ve completed the basic iterations**, go to the **"Test Your Code"** section at the bottom. There you'll be asked to install the testing dependencies and run the tests to check how many tests your code is passing.
78+
#### Run tests
79+
80+
Running automated tests with Jasmine is super easy. All you need to do is open the `SpecRunner.html` file in your browser. You will find something similar to this:
81+
82+
[![image](https://user-images.githubusercontent.com/23629340/33389609-c2f3965c-d533-11e7-9a03-e0a89314dd98.png)](https://user-images.githubusercontent.com/23629340/33389609-c2f3965c-d533-11e7-9a03-e0a89314dd98.png)
83+
84+
85+
#### Pass the tests
86+
87+
You should write your code on the `src/functions-and-arrays.js` file. While following the instructions for each iteration, you should check every test and make sure it's *passing*, before moving on.
5188

89+
Do not rush. You should take your time to carefully read every iteration, and you should address the *breaking* tests as you progress through the exercise.
90+
91+
When coding with tests, it is super important that you carefully read and understand the errors you are getting, this way you will know for sure what's expected from your code.
92+
93+
To see output of your JavaScript code open the [Console in the Developer Tools](https://developer.chrome.com/docs/devtools/open/#console).
5294

5395

96+
97+
**Important:** Note that **you don't need to execute the functions yourself**; the tests will automatically load and execute the functions on each test run. All you need to do is declare the functions, ensure that they handle the parameters passed, and that they return what is indicated in the iteration instructions and the test description. For some iterations we provide you with a sample array, so that you can do some **manual** testing, if you wish.
98+
<br>
99+
100+
101+
## Instructions
102+
103+
While following the instructions for each iteration, make sure to carefully read the instructions and tests descriptions to fully understand the task requirements. Do not rush. You should take your time to carefully read every iteration.
104+
54105
<br>
55106

56107
### Iteration #1: Find the maximum
57108

58-
Implement the function `maxOfTwoNumbers` that takes two numbers as arguments and returns the largest.
109+
Implement the function `maxOfTwoNumbers` that takes two numbers as arguments and returns the bigger number.
59110

60111
<br>
61112

113+
114+
62115
### Iteration #2: Find the longest word
63116

64117
Implement the function `findLongestWord` that takes as an argument an array of words and returns the longest one. If there are 2 with the same length, it should return the first occurrence.
@@ -71,8 +124,14 @@ const words = ['mystery', 'brother', 'aviator', 'crocodile', 'pearl', 'orchard',
71124

72125
<br>
73126

127+
128+
74129
### Iteration #3: Calculate the sum
75130

131+
132+
133+
#### Iteration #3.1: Sum numbers
134+
76135
Calculating a sum can be as simple as iterating over an array and adding each of the elements together.
77136

78137
Implement the function named `sumNumbers` that takes an array of numbers as an argument, and returns the sum of all of the numbers in the array. Later in the course we will learn how to do this by using the `reduce` array method, which will make your work significantly easier. For now, let's practice _"declarative"_ way adding values, using loops.
@@ -85,7 +144,9 @@ const numbers = [6, 12, 1, 18, 13, 16, 2, 1, 8, 10];
85144

86145
<br>
87146

88-
#### Bonus - Iteration #3.1: A generic `sum()` function
147+
148+
149+
#### Bonus - Iteration #3.2: A generic `sum()` function
89150

90151
**The goal: Learn how to refactor your code.** :muscle:
91152

@@ -105,20 +166,24 @@ const mixedArr = [6, 12, 'miami', 1, true, 'barca', '200', 'lisboa', 8, 10];
105166

106167
<br>
107168

169+
170+
108171
### Iteration #4: Calculate the average
109172

110-
Calculating an average is an extremely common task. Let's practice it a bit.
173+
Calculating an average is a very common task. Let's practice it a bit.
111174

112175
**The logic behind this:**
113176

114-
1. Find the sum as we did in the first exercise (or how about reusing that the _sumNumbers()_?)
115-
2. Take that sum and divide it by the number of elements in the list.
177+
1. Find the sum as we did in the first exercise (or how about reusing that the function `sumNumbers()`?)
178+
2. Take that sum and divide it by the number of elements in the array.
116179

117180
<br>
118181

119-
#### Level 1: Array of numbers
120182

121-
Implement the function `averageNumbers` that expects an array of numbers and returns the average of the numbers:
183+
184+
#### Iteration #4.1: Array of numbers
185+
186+
Implement the function `averageNumbers` that expects an array of numbers and returns the average of the numbers.
122187

123188
You can use the following array to test your solution:
124189

@@ -128,7 +193,9 @@ const numbers = [2, 6, 9, 10, 7, 4, 1, 9];
128193

129194
<br>
130195

131-
#### Level 2: Array of strings
196+
197+
198+
#### Iteration #4.2: Array of strings
132199

133200
Implement the function named `averageWordLength` that receives as a single argument an array of words and returns the average length of the words:
134201

@@ -140,7 +207,9 @@ const words = ['seat', 'correspond', 'linen', 'motif', 'hole', 'smell', 'smart',
140207

141208
<br>
142209

143-
#### Bonus - Iteration #4.1: A generic `avg()` function
210+
211+
212+
#### Bonus - Iteration #4.3: A generic `avg()` function
144213

145214
Create function `avg(arr)` that receives any mixed array and calculates average. Consider as mixed array an array filled with numbers and/or strings and/or booleans.
146215

@@ -157,12 +226,16 @@ const mixedArr = [6, 12, 'miami', 1, true, 'barca', '200', 'lisboa', 8, 10];
157226

158227
<br>
159228

229+
230+
160231
### Iteration #5: Unique arrays
161232

162-
Take the following array, remove the duplicates, and return a new array. You are more than likely going to want to check out the [`indexOf`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) Array method.
233+
Take the following array, remove the duplicates, and return a new array. You are more than likely going to want to check out the Array methods [`indexOf`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) and [`includes`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes).
163234

164235
Do this in the form of a function `uniquifyArray` that receives an array of words as a argument.
165236

237+
238+
166239
You can use the following array to test your solution:
167240

168241
```javascript
@@ -183,11 +256,15 @@ const words = [
183256

184257
<br>
185258

259+
260+
186261
### Iteration #6: Find elements
187262

188263
Let's create a simple array search.
189264

190-
Declare a function named `doesWordExist` that will take in an array of words as one argument, and a word to search for as the other. Return `true` if it exists, otherwise, return `false`. **Don't** use `indexOf` for this one.
265+
Declare a function named `doesWordExist` that will take in an array of words as one argument, and a *word to search* for as the other. Return `true` if the word exists in the array, otherwise, return `false`.
266+
267+
191268

192269
You can use the following array to test your solution:
193270

@@ -197,6 +274,8 @@ const words = ['machine', 'subset', 'trouble', 'starting', 'matter', 'eating', '
197274

198275
<br>
199276

277+
278+
200279
### Iteration #7: Count repetition
201280

202281
Declare a function named `howManyTimes` that will take in an array of words as the first argument, and a word to search for as the second argument. The function will return the number of times that word appears in the array.
@@ -221,11 +300,17 @@ const words = [
221300

222301
<br>
223302

224-
### Bonus - Iteration #8: Product of adjacent numbers
225303

226-
What is the greatest product of four adjacent numbers? We consider adjacent any four numbers that are next to each other horizontally or vertically.
227304

228-
For example, if we have a 5x5 Matrix like:
305+
### Bonus - Iteration #8
306+
307+
308+
309+
#### Bonus - Iteration #8.1: Product of adjacent numbers
310+
311+
Given multiple arrays, find the greatest product of four adjacent numbers.
312+
313+
We consider adjacent any four numbers that are next to each other horizontally or vertically. For example, if we have a 5x5 Matrix like:
229314

230315
```bash
231316
[ 1, 2, 3, 4, 5]
@@ -237,6 +322,10 @@ For example, if we have a 5x5 Matrix like:
237322

238323
The greatest product will be the `20`x`20`x`20`x`4` = `32000`.
239324

325+
<br>
326+
327+
328+
240329
Declare a function named `greatestProduct(matrix)` to find it in the 20×20 grid below!
241330

242331
```javascript
@@ -266,54 +355,14 @@ const matrix = [
266355

267356
<br>
268357

269-
### Bonus - Iteration #8.1: Product of diagonals
270-
271-
Following the logic you've used in iteration #8, declare a function called `greatestProductOfDiagonals(matrix)`. It takes a matrix as a parameter and returns the greatest product of any four values layed out diagonally, in either direction.
272-
273-
<br>
274358

275359

360+
#### Bonus - Iteration #8.2: Product of diagonals
276361

277-
## Test Your Code
362+
Following the logic you've used in iteration #8.1, declare a function called `greatestProductOfDiagonals(matrix)`. It takes a matrix as a parameter and returns the greatest product of any four values layed out diagonally, in either direction.
278363

279364
<br>
280365

281-
### Automated Testing
282366

283-
Automated software testing is the process of automatically testing an application in order to verify that it meets the technical requirements, and that it behaves as expected.
284-
285-
Having strong _test suites_ can provide you ease of mind, since you will be able to confidently improve upon your work while knowing that your not breaking a previously developed feature.
286-
287-
288-
289-
<br>
290-
291-
### Testing with Jest
292-
293-
Jest is an automated test-runner for JavaScript.
294-
295-
To run your tests, open your terminal at the root directory of the lab, run `npm install` to install your dependencies and `npm run test:watch` to run the tests and generate the `lab-solution.html` file.
296-
297-
```shell
298-
$ cd lab-javascript-functions-and-arrays
299-
$ npm install
300-
$ npm run test:watch
301-
```
302-
303-
<br>
304-
305-
In case you want to check the tests, they are in the `tests/functions-and-arrays.spec.js` file.
306-
307-
Open the `lab-solution.html` file using the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) VSCode extension.
308-
309-
<br>
310-
311-
#### Pass the tests
312-
313-
When coding with tests, it is super important that you carefully read and understand the errors you are getting, this way you will know for sure what's expected from your code.
314-
315-
Note that **you don't need to execute the functions yourself**, the tests are responsible for doing that. All you should do is declare them, make sure they deal with the parameters passed and that they return what is indicated on the iterations and in the test messages. For some iterations we provide you with a sample array, so that you can do some **manual** testing, if you wish.
316-
317-
<br>
318367

319368
**Happy coding!** :heart:

SpecRunner.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Jasmine Spec Runner v2.8.0</title>
6+
7+
<link rel="shortcut icon" type="image/png" href="jasmine/jasmine-2.8.0/jasmine_favicon.png" />
8+
<link rel="stylesheet" href="jasmine/jasmine-2.8.0/jasmine.css" />
9+
10+
<script src="jasmine/jasmine-2.8.0/jasmine.js"></script>
11+
<script src="jasmine/jasmine-2.8.0/jasmine-html.js"></script>
12+
<script src="jasmine/jasmine-2.8.0/boot.js"></script>
13+
14+
<!-- include source files here... -->
15+
<script src="src/functions-and-arrays.js"></script>
16+
17+
<!-- include spec files here... -->
18+
<script src="tests/functions-and-arrays.spec.js"></script>
19+
</head>
20+
21+
<body></body>
22+
</html>

index.html

Lines changed: 0 additions & 12 deletions
This file was deleted.

0 commit comments

Comments
 (0)