Working with the provided sample codes

In this course we won't be building an app from scratch, but fixing existing examples and apps containing errors. We need to download and setup the provided sample codes to be able to work with them in the corresponding lessons.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Master Testing Library with ESLint Plugin course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Master Testing Library with ESLint Plugin, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Master Testing Library with ESLint Plugin
  • [00:00 - 00:10] In most courses, you will start some project from scratch and iterate through it across all the lessons. That's not the case for this course.

    [00:11 - 00:28] Since we want to visit many common errors and mistakes when writing tests, we are providing several demo apps for many lessons that already contain tests with specific issues for the lesson. We can download the complex set of sample codes for the course in this link below this video.

    [00:29 - 00:33] When downloaded, you will see this zip file. You need to unzip it.

    [00:34 - 00:41] You will see a new folder with the same name of the zip file. If you go inside, you will see many other zip files.

    [00:42 - 00:51] Each one of them contain the sample code related to one lesson. We are going to extract one of them and inspect their content.

    [00:52 - 00:59] Now we open this folder with our code editor. The most relevant parts for the project are this.

    [01:00 - 01:10] The readme file where you will find documentation about the provided scripts. Pack a JSON where you will find also custom scripts.

    [01:11 - 01:19] ESlink config where you will find all the enabled rules. You will have to modify this file when you want to tweak the ESline rules enabled.

    [01:20 - 01:28] This is the file we will be testing and it will slightly change from one lesson to another. Lesson for them.

    [01:29 - 01:38] It will contain three main files or they could contain other extra files. The important ones here are example, fix a sample and practice.

    [01:39 - 01:47] We will use them through each rule lesson. Let's see how to work with a provided demo app by using this lesson as an example.

    [01:48 - 01:54] Each zip file in here is named after a number and a title. They are related to the lesson they belong to.

    [01:55 - 02:05] In our case, we are working in the model one, lesson two. So we need to look for the 1.2 which is this zip file.

    [02:06 - 02:14] We extract it and we see this new folder. Now we can open this folder in our code editor.

    [02:15 - 02:23] For being able to run any of these comments, we need to install the dependencies. You always need to do this when you start working in a new demo app.

    [02:24 - 02:41] For doing this, we need to go to our terminal and navigate to the folder where the demo app is located. Now in here, we can run npm install.

    [02:42 - 02:46] When this is finished, we are ready to work within this demo app. Let's try a few comments.

    [02:47 - 02:57] The library is already set up in this project, so we can start running some tests. You should see something like this.

    [02:58 - 03:04] Then the most important comment for the course will be linking our files. We can run this also with npm run lint.

    [03:05 - 03:10] Yes, lint was run, but there was no specific output. That means there is no error reported.

    [03:11 - 03:19] If everything works fine until here, we can do a final check. Let's force an easily error to make sure it's being reported properly in the terminal.

    [03:20 - 03:32] We go to the demo app in our code editor and open the app.js file. Now we go to the very bottom of the file and just add a new and use bar.

    [03:33 - 03:42] Save it, go back to the terminal and run lint again. We will see a new error.

    [03:43 - 03:46] If this is the case, we are ready to go and go ahead to the next lesson.