Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vtex/exercise-tdd-javascript
Problem-solving with Test Driven Development and Javascript
https://github.com/vtex/exercise-tdd-javascript
Last synced: about 1 month ago
JSON representation
Problem-solving with Test Driven Development and Javascript
- Host: GitHub
- URL: https://github.com/vtex/exercise-tdd-javascript
- Owner: vtex
- Created: 2020-05-25T19:00:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T11:02:43.000Z (over 1 year ago)
- Last Synced: 2024-04-14T22:51:54.230Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.15 MB
- Stars: 14
- Watchers: 104
- Forks: 8
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TDD with Javascript
So, let's get familiar with the art of **Test Driven Development**(TDD) using plain-old JavaScript. We'll create a module that implements a simple **queue** and we'll follow you through the cycle of development for this problem!
## Requirements
- Node.js > 6.x
- Yarn or NPM
- IDE _(we'll use VSCode)_
- A terminal
## Initial instructions
1. **Clone this repository** on your local machine.
2. Run `yarn` (or `npm install`) on the downloaded folder.
3. Open the folder using an IDE of your preference.
4. Open a terminal session on that folder _(we'll use VSCode's integrated terminal)_.
## Test Driven Development
Test-driven development is a software development process that relies on the repetition of a very short development cycle: turn requirements into **test cases**, running these tests, and subsequently **improving the code** so tests pass.
We've taken care of writing the test cases (`queue.test.js`). Running `yarn test` on the root folder of this repository will execute the test suite and **re-execute it when detecting some change on the code**, so you only need to run it once.
## The problem
> In computer science, a **queue** is a collection of entities that are maintained in a sequence and can be modified by the addition of entities at one end of the sequence and the removal of entities from the other end of the sequence. By convention, the end of the sequence at which elements are added is called the back, tail, or rear of the queue, and the end at which elements are removed is called the head or front of the queue, analogously to the words used when people line up to wait for goods or services.
We'll create a JavaScript implementation of a queue that will have the following methods:
- `size()` to return the number of elements queued.
- `add(e)` to add an element to the end of the queue.
- `peek()` to look at the front of the queue _(without modifying it)._
- `dequeue()` to get the element at the front of the queue, removing it as well.
## Solution
Open `queue.js`, this is where we'll code.
When first running `yarn test`, you'll see that **all tests fails**. This is OK, since we have not implemented anything yet:
### Creating the queue
Usually, we try to address failed tests in a top-down strategy, since the first are usually the simpler ones. For the first test to succeed, we only need to **return something truthy on our `createQueue` function**. Let's do this:
```javascript
function createQueue() {
return {}
}
```
After saving the file, the tests should run again on the same terminal sessions you've run `yarn test`. Let's see if something changes:
**Oh, nice!** The first test passes, so we're probably on the right track :smile:
> The code in its current state doesn't achieve its goal or make much sense and that's fine! We will solve it step by step and we'll get there.
## `size`
For the next cases, we should **add the size function**. We should also introduce the underlying array that will hold our queue's data. So, let's do all of that, **adding to our existing code:**
```javascript
function createQueue() {
return {
elements: [],
size() {
return this.elements.length
},
}
}
```
After that, we should see the following tests to pass as well:
## `add`
Now, let's implement the `add` function. It should receive an element as an argument and add it to the end of the queue. It should also, accordingly to the test description, return the queue's size afterwards.
```javascript
function createQueue() {
return {
elements: [],
size() {
return this.elements.length
},
add(e) {
return this.elements.push(e)
},
}
}
```
_...running tests again..._
Let's continue with our good work!
### `peek`
The `peek` function is simple: it should return the **item at the front of the queue**.
```javascript
function createQueue() {
return {
elements: [],
size() {
return this.elements.length
},
add(e) {
return this.elements.push(e)
},
peek() {
return this.elements[0]
},
}
}
```
Now, checking our terminal:
**We're almost done!** Let's move on to the next function.
### `dequeue`
The `dequeue` method is where the queue "is consumed". It should **return the element at the front of the queue** and, then, **removing it**. As we can see on the test's description, it should also **thrown an error if the queue is empty**.
At last:
```javascript
function createQueue() {
return {
elements: [],
size() {
return this.elements.length
},
add(e) {
return this.elements.push(e)
},
peek() {
return this.elements[0]
},
dequeue() {
if (this.size() === 0) {
throw new Error()
}
return this.elements.shift()
},
}
}
module.exports = { createQueue }
```
Now, **all of the tests should pass:**
Nice work!