⇦ Back

WDX-180

Web Development X

Week 32 | Testing

Week 31 ⇦

Updated: 30/5/2025

⇨ Week 33

Week 32 - Day 1 | Testing

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: TypeScript & Testing FTW
  • Part 2: TypeScript & Testing FTW

You can find the lecture code here

Lecture Notes & Questions:

  • TypeScript + React:
    • How to define types for hooks:
      • const r = useState<POSSIBLE_TYPES_HERE>(INITIAL_VALUE)
      • const r = useState<string|null|number>(null)
      • const r = useRef<HTMLFormElement|null>(null)
  • (method) ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)
    • This is the TypeScript signature for the documentQuerySelector()
    • ParentNode: this is the TS type for the Object that contains this method
      • document can be of ParentNode
      • document.querySelector(“.an-element”).querySelector()
    • <Element>: ?
    • Element|null the return type
  • VSCode: Settings => search for auto-save => files.autoSaveWhenNoErrors
  • VSCode: Pretty TypeScript Errors
  • Testing document/DOM-API in Vitest
    • Initially when you use document.* in tests you’ll get “document is not defined” because vitest runs in Node.js environment where DOM is not a thing.
    • One solution would be to:
      • Install jsdom (or happy-dom): npm install --save-dev jsdom
      • Put this comment in your tests:
    /**  
 * @vitest-environment jsdom  
 */
    • Alternatives exist through the configuration files (vite.config.json, vitest.config.json or vitest.config.ts???, ts.config.json, etc.)
  • Vitest: you can either skip certain tests or focus on individual tests by using the following methods on the it(), describe() and test() methods of vitest:
    • it.skip(...)
    • it.only(...)
    • describe.skip() or describe.only()
    • test.skip() or test.only()
  • Be very careful with NaN checks, because NaN === NaN will ALWAYS BE false
    • The safest way is through Number.isNaN( value )
    • CAUTION: There is also a global isNaN(). AVOID IT!
  • utils.ts:10 Uncaught Error means there’s an Error thrown somewhere and you are not explicitly handling it, e.g. try/catch, catch(), etc.
  • For testing React Components we need to bring in React Testing Library
  • When installing npm packages (and if they do not already include TypeScript types) you can use the @types repo:
    • npm i sharp
    • npm i -D @types/sharp
    • npm install react
    • npm install --save-dev @types/react

Exercises

  • Do you know the <picture> elements?
    • Cropping or modifying images for different media (screen sizes) conditions
    • Offering alternative image formats, for cases where certain formats are not supported.
      • You can serve the highly compressed webp image type for browsers that support this format and provide an alternative fallback for older browsers that do no support webp
  • Study open source projects (GitHub, GitLab, Bitbucket) and take a look at how they organize tests
    • sharp (a Node.js module for working with images on the server)
  • Testing Library (which includes React Testing Library): “The @testing-library family of packages helps you test UI components in a user-centric way.”
  • Discover React Testing Library:
    • The methods available for querying the DOM (grabbing HTML elements)
    • The methods for testing whether these selected elements have a particular property, e.g. contain some text, etc.
    • The methods for triggering actions, e.g. enter value in an input, click a button

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week32/progress/progress.draft.w32.d01.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 32 - Day 2 | Practice Day

Schedule

  • Practice on the topics and share your questions

Study Plan

Today is practice day. Practice on the topics covered yesterday and share your thoughts, questions and insights.

Happy hacking!

Week 32 - Day 3 | Async Mysteries

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: Asynchronous code and the HTMLImageElement
  • Part 2: Promises and more asynchronous mysteries

You can find the lecture code here and the diagrams here.

Lecture Notes & Questions:

References & Resources:

Exercises

  • Challenge: make sure to start the game or display a Start Game button or run any code when ALL the images have been loaded. (game.js)
    • Tricky part: how to deal with some errors that might happen. Example: make sure that some image URLs are correct (and therefore loaded) and some URLs are misspelled, instead of image.jpg, write image.jpgZZZ or iiii.jpg
      • In cases like these, we tend to inform the user and act accordingly: retry loading the images that were not loaded, or run the code without using them.
  • CHALLENGE: How can you get access to all the loaded images (when they have loaded) in the callback function?
  • CHALLENGE: Try displaying a percentage loader while the images are loading.
    • When the first one has loaded, show: 33%
    • When the 2nd, show: 66%
    • When all of them show: 100%
    • Or use a loading spinner so that the users know that something is loading.

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week32/progress/progress.draft.w32.d03.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 32 - Day 4 | JS Functions & Practice Day

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Take a few minutes to check out this video about the different types of JS functions and practice by creating at least 2 or 3 examples of your own for each mode.

Week 32 - Day 5 | End-to-End Testing & TDD

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: Handling Streams of incoming data in Node.js
  • Part 2: End-to-End Testing and Test Driven Development (TDD)

You can find the lecture code here and the diagrams here.

Lecture Notes & Questions:

References & Resources:

Exercises

  • Research and study the AAA
  • PRACTICE:
    • Take the node.js file and handle a GET request. When a simple GET request gets in, respond back with a text/html type and send back a simple HTML page with a form (having two input fields, email, password)
    • Once you submit the form an HTTP POST request will be made to the server.
      • Handle this POST request (almost done for you) and send a message back to the user. You can send them back their own information for confirmation.
  • Study and practice based on this article: A really simple example of TDD in JavaScript
  • Try to find and practice on the “99 bottles of beer” song test

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week32/progress/progress.draft.w32.d05.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham