4Geeks logo
4Geeks logo

Courses

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Coding Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Search from all Lessons

LoginGet Started
← Back to Lessons
  • LearnPack

Edit on Github

Building Tutorials for The DOM with LearnPack

Unit Testing

If you want to create a Javascript/Node coding tutorial, you have to use the @learnpack/dom plugin in order to compile and test your exercises. Go to Compiler Plugins to see how to install the plugin.

The main file should be named index.html and the file for the tests should be named tests.js

Unit Testing

For testing, you should install Jest with version "27.0.6". You can install it by running the following command: npm install jest@27.0.6 -g

Besides Jest, you can use Testing Library which allows you to create events-related tests. You can check the documentation here.

The DOM tests are very similar to HTML/CSS tests, except for the events-related tests, which you should use the Testing Library for it.

If you are not so familiar with Jest or Testing Library, here are the most common tests that you will use when testing a DOM exercise tutorial:

Testing that an HTML tag exists

1//tests.js 2 3const fs = require("fs"); 4const path = require('path'); 5const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 6 7test('The <title> tag should exist', () => { 8 let tag = document.querySelector("title"); 9 expect(tag).toBeTruthy(); 10})

Testing a tag has the expected innerHTML

1// tests.js 2 3const fs = require("fs"); 4const path = require('path'); 5const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 6 7test('The <title> tag exists and the innerHTML should be "Hello World"', () => { 8 let tag = document.querySelector("title"); 9 expect(tag).toBeTruthy(); 10 let file = document.documentElement.innerHTML = html.toString(); 11 expect(tag.innerHTML).toBe("Hello World"); 12})

Testing a tag has a specific number of children

1// tests.js 2 3const fs = require("fs"); 4const path = require('path'); 5const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 6 7test('The <ul> tag exists and has three children', () => { 8 let tag \= document.querySelector("ul"); 9 expect(tag).toBeTruthy(); 10 expect(tag.children.length).toBe(3); 11})

Testing a tag is inside another tag

1// tests.js 2 3const fs = require("fs"); 4const path = require('path'); 5const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 6 7test('The <ul> tag should be inside of the <div>', () => { 8 let div = document.querySelector("div"); 9 expect(div).toBeTruthy(); 10 let ul = div.querySelector("ul"); 11 expect(ul).toBeTruthy(); 12})

Testing the value of a specific HTML tag property

You can use this example for all the properties, they could be: src, href, innerHTML, id, alt, etc.

1// tests.js 2 3const fs = require("fs"); 4const path = require('path'); 5const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 6 7test('The href of the <a> tag should be the expected', () => { 8 let a = document.querySelector("a"); 9 expect(a).toBeTruthy(); 10 expect(a.href).toBe("https://www.learnpack.co"); 11})

Testing a tag has a specific style

1// tests.js 2 3const fs = require("fs"); 4const path = require('path'); 5const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 6 7test('The <p> tag should have a red font color', () => { 8 let p = document.querySelector("p"); 9 expect(p).toBeTruthy(); 10 expect(p.style.color).toBe("red"); 11})

Testing something happened after a click

1// tests.js 2 3const { queryByText, fireEvent, waitFor} = require('@testing-library/dom'); 4const fs = require('fs'); 5const path = require('path'); 6 7test('<li> must be added into the <ul> after <button> is clicked', async () => { 8 const app = require(path.resolve(__dirname, './index.js')) 9 const btn = queryByText(document, 'Click me') 10 fireEvent.click(btn) 11 12 let ul = document.querySelector('#myList') // This <ul> has 3 elements already. 13 await waitFor(() => expect(ul.childElementCount).toBe(4)) 14})

Examples

The following links are DOM coding tutorials: