Building HTML & CSS Tutorials with LearnPack

LearnPack with HTML/CSS

If you want to create an HTML/CSS coding tutorial, you have to use the @learnpack/html plugin in order to compile and test your exercises. Go to Compiler Plugins to see how to install the plugin.

In addition, 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 the version "24.8.0". You can install it by running the following command: npm install jest@24.8.0 -g

If you are not so familiar with Jest, here are the most common tests that you will use when testing an HTML/CSS exercise tutorial:

Testing a tag exists

1// tests.js
2
3const fs = require("fs");
4const path = require('path');
5
6const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
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 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})

Examples

The following links are HTML and CSS coding tutorials:

• ​https://github.com/breatheco-de/exercise-postcard​

• ​https://github.com/4GeeksAcademy/html-tutorial-exercises-course​

• ​https://github.com/4GeeksAcademy/css-tutorial-exercises-course​

• ​https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial​