JavaScript Homework 12 - Testing

Live Demo

Open the live demo

Repository: andrii-dolzhenko/js-homework-12-testing

Project Overview

This homework focuses on automated testing of JavaScript code with Vitest.

The main.js file implements three functions for working with DOM events:

• handling button clicks;
• tracking mouse coordinates;
• delegating events for list items.

The functions are covered by the tests provided in the course repository and by additional custom test cases.

Implemented Functions

handleButtonClick(buttonId, message)

Finds a button by its id, attaches a click event listener, and logs the provided message to the console.

trackMousePosition()

Listens for the document's mousemove event and logs the cursor coordinates to the console.

setupEventDelegation(selector)

Attaches a single event listener to a list and handles clicks on its <li> elements through event delegation.

Additional Tests

In addition to the tests provided by the instructor, the project includes three custom test cases:

1. handling repeated button clicks;
2. tracking zero mouse coordinates;
3. clicking the list itself rather than one of its items.

Installing Dependencies

npm install

Running All Tests

npm test

Current result:

Test Files  5 passed (5)
Tests       10 passed (10)

Running the Meta-Test

npx vitest run supertest.test.js

Current result:

Test Files  1 passed (1)
Tests       4 passed (4)

Running the Demo Locally

Serve the src directory through a local HTTP server:

python3 -m http.server 8000 --directory src

Then open http://localhost:8000/ in a browser.

Open DevTools and select the Console tab to view the output generated by the DOM events.

Project Structure

js-homework-12-testing/
|-- src/
|   |-- __test__/
|   |   |-- additional.test.js
|   |   |-- prepareTestEnvironment.js
|   |   |-- task1.test.js
|   |   |-- task2.test.js
|   |   `-- task3.test.js
|   |-- demo.js
|   |-- favicon.svg
|   |-- index.html
|   |-- main.js
|   `-- style.css
|-- supertest.test.js
|-- vitest.config.js
|-- vitest.setup.js
|-- package.json
`-- README.md

Main JavaScript Files

• Function implementation
• Additional tests
• Demo integration

Technologies

• JavaScript
• HTML
• CSS
• Vitest
• jsdom
• Git

© Andrii Dolzhenko. All rights reserved. 2026.