Slide 1
-----------
Part 1: Let's now explore how you can run and test your solution on SkillPies!
Slide 2
-----------
Part 1: It is time to try to run your web application! Please run the command "pnpm dev" in the Visual Studio Console. Remember that you can show it by clicking on View and then Console in the top menu.
Part 2: Once you run the command, the new web server will start on the port 3000 and you should see the following message in the console
Slide 3
-----------
Part 1: If you are a confused, please see the animation that shows how we turned on the console and ran our project. We see that our project is running on port 3000, let's open the browser and navigate to http://localhost:3000
Slide 4
-----------
Part 1: When you open the browser ... there is nothing. Boo hoo! So much work for nothing! So what should we do?
Slide 5
-----------
Part 1: We will use unit testing to provide guidance on your goals and automated feedback. Consequently, each assignment is accompanied by one or more automated tests that assure you deliver what is required.
Part 2: The tests check the things you render on the page, check interactions, and ensure that the page does not break when unexpected interactions occur. To complete the assignment, you have to ensure that all automated tests pass.
Part 3: To run your tests please run the following command in the terminal.
Slide 6
-----------
Part 1: Please see how we execute the test using the Visual Studio Code. The execution might take a moment, so please be patient and wait for the test summary to appear on your screen.
Part 2: Once the test command completes, you should see that there are two failing tests. Scroll up in the terminal to see the error messages. In our case, these are the two errors.
Part 3: The first error comes from the file page.test.tsx, and the test name "Show the welcome header" says that it was "unable to find an element with the text: Get Things Done".
Part 4: The second error from the same test file says that it was "Unable to find an element with the text: Task 1". Let's look inside the test file to see how these errors were created.
Part 5: Please open the file page.test.tsx in Visual Studio Code. You can find it in the src/app folder.
Slide 7
-----------
Part 1: Let's take a look at the first test!
Part 2: The show welcome header test first renders the page component in your browser. If this strange syntax is unknown to you, please wait until we explain React's JSX syntax. For now, it is essential to understand that we can render HTML code from JavaScript in React.
Part 3: This is the test line where our test fails, trying to locate the text "Get Things Done" on the screen. If you remember, our screen is blank now, and the test must fail.
Slide 8
-----------
Part 1: Let's take a look at our second test, named "Show the list of tasks", in which we check, whether you are correctly rendering the list of tasks.
Part 2: First, we render the component, same as in the first test.
Part 3: Then, we check for all three texts to appear on the screen, and since our page is empty, none of them are found and our test fails. We will try to fix these errors soon, but in the next section, we will discuss the foundations of React and writing JSX code.
🚀 RUNNING YOUR PROJECT
Time to try to run your web application! Please run the following command in the
console:
pnpm dev
> In Visual Studio console you can hit CTRL+` on windows or CMD+` on mac to open
> a new terminal directly in the editor. The ` is “tilde” the weird backwards
> apostrophe, usually located in the top left of your keyboard, under the escape
> symbol.
Once you run the command, the new web server will start on the port 3000 and you
should see the following message in the console:
> initial-t3@0.1.0 dev /workspaces/introduction-to-react-fullstackblazon
> next dev
▲ Next.js 14.2.2
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.1s
○ Compiling / ...
✓ Compiled / in 5.4s (477 modules)
GET / 200 in 5623ms
LOCAL
If you are running a local copy of your project, open your browser and visit the
following URL http://localhost:3000
CODESPACES
If you are using Github Codespaces, you should see a message popping up at the
bottom of the screen asking you to open the web page in a new tab. If you missed
out on this message, open the command menu by hitting CTRL+SHIFT+P or
CMD+SHIFT+P and start searching for “Open Port In Browser” and select it. It
will allow you to open port 3000 in a separate tab.
[https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/3myFj3C3s45Lw7am7p/sections/UcDgJBMv00Wy2R2uh3/Screenshot%202024-04-19%20at%2013.04.23.png]Figure
4: Opening web application in Github Codepaces
All of this only to see a blank page 😢. Boo hoo!
🧪 TESTING YOUR PROJECT
Each assignment comes accompanied by one or more automated tests that assure
that you are delivering what was required. The tests check on the things you
are rendering on the page, check interactions and make sure that the page does
not break when unexpected interactions occur. To complete the assignment you
have to make sure that all automated tests pass. To run your tests please run
the following command in the terminal:
pnpm test
> You can open multiple terminals in Codepaces or VS Code. You can also stop
> your running application by hitting CTRL+C and typing new commands in the same
> terminal
[https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/3myFj3C3s45Lw7am7p/sections/o74L6FQunzOerXyF8Z/Screenshot%202024-04-19%20at%2016.01.15.png]Test
result with two failed tests
Once the test command completes, you should see that there are two failing
tests. Scroll up in the terminal to see the error messages. In our case, these
are the two errors:
* TestingLibraryElementError: Unable to find an element with the text: Get
Things Done. This could be because the text is broken up by multiple
elements. In this case, you can provide a function for your text matcher to
make your matcher more flexible.
* Unable to find an element with the text: Task 1. This could be because the
text is broken up by multiple elements. In this case, you can provide a
function for your text matcher to make your matcher more flexible.
The good way to see what the test expects is to open the test file. Their
content and structure is self explanatory and follows the Test Driven practices.
Please see the file of the src/app/page.test.tsx test case and think whether you
understand what is expected:
> Please note that the test command continues running and executes every time
> you save your files.
import { render, screen } from "@testing-library/react";
import { Suspense } from "react";
import { describe, it } from "vitest";
import Page from "./page";
describe("Page Test", function () {
it("Show the welcome header", async function () {
render(
<Suspense>
<Page />
</Suspense>
);
expect(await screen.findByText("Get Things Done")).toBeInTheDocument();
});
it("Show the list of tasks", async function () {
render(
<Suspense>
<Page />
</Suspense>
);
expect(await screen.findByText("Task 1")).toBeInTheDocument();
expect(screen.getByText("Task 2")).toBeInTheDocument();
expect(screen.getByText("Task 3")).toBeInTheDocument();
});
});
Time to remove test errors by completing the assignment in the next section!
Maggie is a generative AI that can help you understand the course content better. You can ask her questions about the lecture, and she will try to answer them. You can also see the questions asked by other students and her responses.
Join the discussion to ask questions, share your thoughts, and discuss with other learners
SkillPies