🚀 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<span class="hljs-keyword">@0</span>.1.0 dev /workspaces/introduction-to-react-fullstackblazon
> next dev

  ▲ Next.js <span class="hljs-number">14.2</span>.<span class="hljs-number">2</span>
  - <span class="hljs-attribute">Local</span>:        <span class="hljs-attribute">http</span>://<span class="hljs-attribute">localhost</span>:<span class="hljs-number">3000</span>

 ✓ Starting...
 ✓ Ready in <span class="hljs-number">2.1s</span>
 ○ Compiling / ...
 ✓ Compiled / in <span class="hljs-number">5.4s</span> (<span class="hljs-number">477</span> modules)
 GET / <span class="hljs-number">200</span> in <span class="hljs-number">5623ms</span>

Local

If you are running a local copy of your project, open your browser and visit the following URL http:<span class="hljs-comment">//localhost:3000</span>

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+<span class="hljs-selector-tag">P</span> or CMD+SHIFT+<span class="hljs-selector-tag">P</span> and start searching for “Open Port In Browser” and select it. It will allow you to open port 3000 in a separate tab.

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

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 <span class="hljs-attribute">src</span>/app/page<span class="hljs-selector-class">.test</span><span class="hljs-selector-class">.tsx</span> 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.

<span class="hljs-keyword">import</span> { render, screen } <span class="hljs-keyword">from</span> <span class="hljs-string">"@testing-library/react"</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Suspense</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { describe, it } <span class="hljs-keyword">from</span> <span class="hljs-string">"vitest"</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Page</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"./page"</span>;

<span class="hljs-title function_">describe</span>(<span class="hljs-string">"Page Test"</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
  <span class="hljs-title function_">it</span>(<span class="hljs-string">"Show the welcome header"</span>, <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
    <span class="hljs-title function_">render</span>(
      <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">Suspense</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">Page</span> /></span>
      <span class="hljs-tag"></<span class="hljs-name">Suspense</span>></span></span>
    );
    <span class="hljs-title function_">expect</span>(<span class="hljs-keyword">await</span> screen.<span class="hljs-title function_">findByText</span>(<span class="hljs-string">"Get Things Done"</span>)).<span class="hljs-title function_">toBeInTheDocument</span>();
  });

  <span class="hljs-title function_">it</span>(<span class="hljs-string">"Show the list of tasks"</span>, <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
    <span class="hljs-title function_">render</span>(
      <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">Suspense</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">Page</span> /></span>
      <span class="hljs-tag"></<span class="hljs-name">Suspense</span>></span></span>
    );
    <span class="hljs-title function_">expect</span>(<span class="hljs-keyword">await</span> screen.<span class="hljs-title function_">findByText</span>(<span class="hljs-string">"Task 1"</span>)).<span class="hljs-title function_">toBeInTheDocument</span>();
    <span class="hljs-title function_">expect</span>(screen.<span class="hljs-title function_">getByText</span>(<span class="hljs-string">"Task 2"</span>)).<span class="hljs-title function_">toBeInTheDocument</span>();
    <span class="hljs-title function_">expect</span>(screen.<span class="hljs-title function_">getByText</span>(<span class="hljs-string">"Task 3"</span>)).<span class="hljs-title function_">toBeInTheDocument</span>();
  });
});

Time to remove test errors by completing the assignment in the next section!