The document provides an introduction to testing for front-end developers. It discusses why testing is important, common test types like unit, integration and functional tests, popular testing frameworks like Jest and Mocha, and how to set up a basic testing environment and write tests using Jest. It also covers test concepts like assertions, spies and stubs. An example movie app is used to demonstrate setting up Jest and writing tests to validate functions.
106. function listMovies(list) {
return list.reduce((acc, item) => {
return `${acc} ${item.name} at ${item.showTime} has $
{item.ticketsRemaining} tickets left n`;
}, '');
}
107. function listMovies(list) {
return list.reduce((acc, item) => {
return `${acc} ${item.name} at ${item.showTime} has $
{item.ticketsRemaining} tickets left n`;
}, '');
}
Jurassic World 2 at 7:00pm has 47 tickets left
Star Wars: The Last Jedi at 10:00pm has 22 tickets left
134. it('should return true when tickets are available', () => {
const testMovie = {
ticketsRemaining: 27,
};
const result = app.ticketsLeft(testMovie);
const expected = true;
expect(result).toEqual(expected);
});
135.
136.
137. function listMovies(list) {
return list.reduce((acc, item) => {
return `${acc} ${item.name} at ${item.showTime} has $
{item.ticketsRemaining} tickets left n`;
}, '');
}
138. describe('listMovies', () => {
it('should list movies, showtimes and tickets', () => {
var list = [
{
name: 'Jurassic World 2’, showTime: ‘7:00pm', ticketsRemaining: 47,
},
{
name: 'Star Wars: The Last Jedi’, showTime: ’10:00pm', ticketsRemaining: 22,
}
];
const result = app.listMovies(list);
const expected = 'Jurassic World 2 at 7:00pm has 47 tickets left nStar Wars:
The Last Jedi at 10:00pm has 22 tickets left n';
expect(result).toEqual(expected);
});
});
139.
140. Difference:
- Expected
+ Received
- Jurassic World 2 at 7:00pm has 47 tickets left
- Star Wars: The Last Jedi at 10:00pm has 22 tickets left
+ Jurassic World 2 at 7:00pm has 47 tickets left
+ Star Wars: The Last Jedi at 10:00pm has 22 tickets left
141. Difference:
- Expected
+ Received
- Jurassic World 2 at 7:00pm has 47 tickets left
- Star Wars: The Last Jedi at 10:00pm has 22 tickets left
+ Jurassic World 2 at 7:00pm has 47 tickets left
+ Star Wars: The Last Jedi at 10:00pm has 22 tickets left
142. function listMovies(list) {
return list.reduce((acc, item) => {
return `${acc} ${item.name} at ${item.showTime} has $
{item.ticketsRemaining} tickets left n`;
}, '');
}
143. function listMovies(list) {
return list.reduce((acc, item) => {
return `${acc}${item.name} at ${item.showTime} has $
{item.ticketsRemaining} tickets left n`;
}, '');
}
144.
145. describe('addMovieToList', () => {
it('adds a movie to the movie list', () => {
const list = [
{ name: 'Jurassic World 2’, showTime: ‘7:00pm', ticketsRemaining: 47 }
];
const results = app.addMovieToList(list, 'Thor', '4:30pm');
const expected = [
{ name: 'Jurassic World 2’, showTime: ‘7:00pm’, ticketsRemaining: 47 },
{ name: ‘Thor', showTime: ‘4:30pm', ticketsRemaining: 100 }
];
expect(results).toBe(expected);
});
});
148. Compared values have no visual difference. Looks like you
wanted to test for object/array equality with strict `toBe`
matcher. You probably need to use `toEqual` instead.
149. describe('addMovieToList', () => {
it('adds a movie to the movie list', () => {
const list = [
{ name: 'Jurassic World 2’, showTime: ‘7:00pm', ticketsRemaining: 47 }
];
const results = app.addMovieToList(list, 'Thor', '4:30pm');
const expected = [
{ name: 'Jurassic World 2’, showTime: ‘7:00pm’, ticketsRemaining: 47 },
{ name: ‘Thor', showTime: ‘4:30pm', ticketsRemaining: 100 }
];
expect(results).toBe(expected);
expect(results).toEqual(expected);
});
});