add missing tests

test-images/test-dom/Dockerfile

@@ -0,0 +1,6 @@
+FROM buildkite/puppeteer:7.1.0
+
+WORKDIR /app
+COPY dom .
+COPY subjects ./subjects
+ENTRYPOINT ["/app/entrypoint.sh"]

test-images/test-dom/README.md

@@ -0,0 +1,33 @@
+# DOM
+
+Tests that use puppeteer to do browser side exercises
+
+## Run test locally
+
+### Installation
+
+> You need node version 14+
+
+```bash
+# Clone the repo
+git clone https://github.com/01-edu/public.git
+
+# go into the dom directory
+cd public/dom
+
+# install puppeteer
+npm i puppeteer
+```
+
+### Executing a test
+
+```bash
+# run a test
+SOLUTION_PATH=/user/you/piscine-repo node test.js exercise-name
+```
+
+The `SOLUTION_PATH` is the directory where the test should look
+for your solution, usualy your piscine repository.
+
+The `exercise-name` argument should match exactly the name of an
+exercise, not including `.js`

test-images/test-dom/call-it_test.js

@@ -0,0 +1,19 @@
+export const tests = []
+
+tests.push(async ({ page, eq }) => {
+  // check the face
+
+  return eq.$('section#face', { textContent: '' })
+})
+
+tests.push(async ({ page, eq }) => {
+  // check the upper-body
+
+  return eq.$('section#upper-body', { textContent: '' })
+})
+
+tests.push(async ({ page, eq }) => {
+  // check the lower-body, my favorite part
+
+  return eq.$('section#lower-body', { textContent: '' })
+})

test-images/test-dom/class-it_test.js

@@ -0,0 +1,36 @@
+export const tests = []
+
+tests.push(async ({ page, eq }) => {
+  // check the class 'eye' has been declared properly in the CSS
+  eq.css('.eye', {
+    width: '60px',
+    height: '60px',
+    backgroundColor: 'red',
+    borderRadius: '50%',
+  })
+})
+
+tests.push(async ({ page, eq }) => {
+  // check the class 'arm' has been declared properly in the CSS
+  eq.css('.arm', { backgroundColor: 'aquamarine' })
+})
+
+tests.push(async ({ page, eq }) => {
+  // check the class 'leg' has been declared properly in the CSS
+  eq.css('.leg', { backgroundColor: 'dodgerblue' })
+})
+
+tests.push(async ({ page, eq }) => {
+  // check the class 'body-member' has been declared properly in the CSS
+  eq.css('.body-member', { width: '50px', margin: '30px' })
+})
+
+tests.push(async ({ page, eq }) => {
+  // check that the targetted elements have the correct class names
+  await eq.$('p#eye-left', { className: 'eye' })
+  await eq.$('p#eye-right', { className: 'eye' })
+  await eq.$('div#arm-left', { className: 'arm body-member' })
+  await eq.$('div#arm-right', { className: 'arm body-member' })
+  await eq.$('div#leg-left', { className: 'leg body-member' })
+  await eq.$('div#leg-right', { className: 'leg body-member' })
+})

test-images/test-dom/colorful-arms_test.js

@@ -0,0 +1,72 @@
+export const tests = []
+
+tests.push(async ({ eq, page }) => {
+  // Check if the button with id 'arm-color' exists
+  const buttonExists = await page.$('button#arm-color')
+  eq(!!buttonExists, true)
+})
+
+tests.push(async ({ eq, page }) => {
+  // Check if the left and right arms exist
+  const leftArmExists = await page.$('#arm-left')
+  const rightArmExists = await page.$('#arm-right')
+  eq(!!leftArmExists && !!rightArmExists, true)
+})
+
+tests.push(async ({ eq, page }) => {
+  // Get the initial background colors of the arms
+  const initialLeftArmColor = await page.$eval(
+    '#arm-left',
+    node => getComputedStyle(node).backgroundColor,
+  )
+  const initialRightArmColor = await page.$eval(
+    '#arm-right',
+    node => getComputedStyle(node).backgroundColor,
+  )
+
+  // Click the 'arm-color' button
+  const button = await page.$('button#arm-color')
+  await button.click()
+
+  // Get the new background colors of the arms after clicking the button
+  const newLeftArmColor = await page.$eval(
+    '#arm-left',
+    node => getComputedStyle(node).backgroundColor,
+  )
+  const newRightArmColor = await page.$eval(
+    '#arm-right',
+    node => getComputedStyle(node).backgroundColor,
+  )
+
+  // Check if the colors have changed and are now different from the initial colors
+  eq(initialLeftArmColor !== newLeftArmColor, true)
+  eq(initialRightArmColor !== newRightArmColor, true)
+  eq(newLeftArmColor, newRightArmColor) // Check if both arms have the same color
+})
+
+tests.push(async ({ eq, page }) => {
+  // Click the 'arm-color' button multiple times to ensure the colors keep changing
+  const button = await page.$('button#arm-color')
+
+  const armColors = []
+  for (let i = 0; i < 3; i++) {
+    await button.click()
+    const leftArmColor = await page.$eval(
+      '#arm-left',
+      node => getComputedStyle(node).backgroundColor,
+    )
+    const rightArmColor = await page.$eval(
+      '#arm-right',
+      node => getComputedStyle(node).backgroundColor,
+    )
+    armColors.push({ leftArmColor, rightArmColor })
+  }
+
+  // Check if the colors are different in each click
+  eq(new Set(armColors.map(c => c.leftArmColor)).size, armColors.length)
+  eq(new Set(armColors.map(c => c.rightArmColor)).size, armColors.length)
+  // Check if the arms always have the same color after each click
+  armColors.forEach(colorPair =>
+    eq(colorPair.leftArmColor, colorPair.rightArmColor),
+  )
+})

test-images/test-dom/colorful-legs_test.js

@@ -0,0 +1,56 @@
+export const tests = []
+
+tests.push(async ({ eq, page }) => {
+  // Click on the button to change the robot's leg colors
+  const button = await page.$('button#leg-color')
+  await button.click()
+
+  // Get the new colors of both legs
+  const legLeftColor = await page.$eval(
+    '#leg-left',
+    node => getComputedStyle(node).backgroundColor,
+  )
+  const legRightColor = await page.$eval(
+    '#leg-right',
+    node => getComputedStyle(node).backgroundColor,
+  )
+
+  // Check if both legs have been assigned the same new color
+  eq(legLeftColor, legRightColor)
+})
+
+tests.push(async ({ eq, page }) => {
+  // Get the initial colors of the legs before clicking the button
+  const initialLegLeftColor = await page.$eval(
+    '#leg-left',
+    node => getComputedStyle(node).backgroundColor,
+  )
+  const _initialLegRightColor = await page.$eval(
+    '#leg-right',
+    node => getComputedStyle(node).backgroundColor,
+  )
+
+  // Click on the button to change the robot's leg colors
+  const button = await page.$('button#leg-color')
+  await button.click()
+
+  // Get the new colors of both legs
+  const newLegLeftColor = await page.$eval(
+    '#leg-left',
+    node => getComputedStyle(node).backgroundColor,
+  )
+  const newLegRightColor = await page.$eval(
+    '#leg-right',
+    node => getComputedStyle(node).backgroundColor,
+  )
+
+  // Check if both legs have been assigned the same new color
+  eq(newLegLeftColor, newLegRightColor)
+
+  // Ensure the new color is different from the initial color
+  eq(
+    newLegLeftColor !== initialLegLeftColor,
+    true,
+    'The color of the legs should be different from the initial color',
+  )
+})

test-images/test-dom/embedded-organs_test.js

@@ -0,0 +1,90 @@
+export const tests = []
+
+tests.push(async ({ page, eq }) => {
+  // check that the HTML structure is correct & elements are nested properly
+  const elements = await page.$$eval('body', nodes => {
+    const toNode = el => {
+      const node = {}
+      node.tag = el.tagName.toLowerCase()
+      node.id = el.id
+      if (el.children.length) {
+        node.children = [...el.children].map(toNode)
+      }
+      return node
+    }
+    return [...nodes[0].children].map(toNode)
+  })
+  eq(expectedStructure, elements)
+})
+
+tests.push(async ({ page, eq }) => {
+  // check the section selector style has been updated properly
+  eq.css('section', {
+    display: 'flex',
+    justifyContent: 'center',
+  })
+})
+
+tests.push(async ({ page, eq }) => {
+  // check if the provided CSS has been correctly copy pasted
+  eq.css('div, p', {
+    border: '1px solid black',
+    padding: '10px',
+    margin: '0px',
+    borderRadius: '30px',
+  })
+
+  eq.css('#face', { alignItems: 'center' })
+
+  eq.css('#eyes', {
+    display: 'flex',
+    backgroundColor: 'yellow',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: '50px',
+    width: '200px',
+  })
+
+  eq.css('#torso', {
+    width: '200px',
+    backgroundColor: 'violet',
+  })
+})
+
+const expectedStructure = [
+  {
+    tag: 'section',
+
+    id: 'face',
+    children: [
+      {
+        tag: 'div',
+
+        id: 'eyes',
+        children: [
+          { tag: 'p', id: 'eye-left' },
+          { tag: 'p', id: 'eye-right' },
+        ],
+      },
+    ],
+  },
+  {
+    tag: 'section',
+
+    id: 'upper-body',
+    children: [
+      { tag: 'div', id: 'arm-left' },
+      { tag: 'div', id: 'torso' },
+      { tag: 'div', id: 'arm-right' },
+    ],
+  },
+  {
+    tag: 'section',
+
+    id: 'lower-body',
+    children: [
+      { tag: 'div', id: 'leg-left' },
+      { tag: 'div', id: 'leg-right' },
+    ],
+  },
+]

test-images/test-dom/entrypoint.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+set -e
+
+cd /app
+node --no-warnings --unhandled-rejections=strict test.js "${EXERCISE}"

test-images/test-dom/first-hello_test.js

@@ -0,0 +1,56 @@
+export const tests = []
+
+tests.push(async ({ eq, page }) => {
+  // Check if the class 'words' has been added in the CSS
+  await eq.css('.words', { textAlign: 'center', fontFamily: 'sans-serif' })
+})
+
+tests.push(async ({ eq, page }) => {
+  // Check if the torso element is initially empty
+  const isEmpty = await page.$eval('#torso', node => !node.children.length)
+  eq(isEmpty, true)
+})
+
+tests.push(async ({ eq, page }) => {
+  // Click on the button
+  const button = await page.$('button#speak-button')
+  await button.click()
+
+  // Check if a new text element is added in the torso
+  const torsoChildren = await page.$eval('#torso', node =>
+    [...node.children].map(child => ({
+      tag: child.tagName,
+      text: child.textContent,
+      class: child.className,
+    })),
+  )
+  eq(torsoChildren, [textNode])
+})
+
+tests.push(async ({ eq, page }) => {
+  // Click a second time on the button
+  const button = await page.$('button#speak-button')
+  await button.click()
+
+  // Check if the text element is removed from the torso
+  const isEmpty = await page.$eval('#torso', node => !node.children.length)
+  eq(isEmpty, true)
+})
+
+tests.push(async ({ eq, page }) => {
+  // Click the button once more to ensure the text is added again
+  const button = await page.$('button#speak-button')
+  await button.click()
+
+  // Check if a new text element is added in the torso
+  const torsoChildren = await page.$eval('#torso', node =>
+    [...node.children].map(child => ({
+      tag: child.tagName,
+      text: child.textContent,
+      class: child.className,
+    })),
+  )
+  eq(torsoChildren, [textNode])
+})
+
+const textNode = { tag: 'DIV', text: 'Hello World', class: 'words' }