forked from root/public
4 changed files with 208 additions and 26 deletions
@ -0,0 +1,177 @@ |
|||||||
|
export const tests = [] |
||||||
|
|
||||||
|
const between = (expected, min, max) => expected >= min && expected <= max |
||||||
|
|
||||||
|
const random = (min, max) => { |
||||||
|
if (!max) { |
||||||
|
max = min |
||||||
|
min = 0 |
||||||
|
} |
||||||
|
min = Math.ceil(min) |
||||||
|
max = Math.floor(max) |
||||||
|
return Math.floor(Math.random() * (max - min + 1)) + min |
||||||
|
} |
||||||
|
|
||||||
|
const rgbToHsl = (r, g, b) => { |
||||||
|
r = r / 255 |
||||||
|
g = g / 255 |
||||||
|
b = b / 255 |
||||||
|
const max = Math.max(r, g, b) |
||||||
|
const min = Math.min(r, g, b) |
||||||
|
let h |
||||||
|
let s |
||||||
|
const l = (max + min) / 2 |
||||||
|
|
||||||
|
if (max === min) { |
||||||
|
h = s = 0 // achromatic
|
||||||
|
} else { |
||||||
|
const d = max - min |
||||||
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min) |
||||||
|
switch (max) { |
||||||
|
case r: |
||||||
|
h = (g - b) / d + (g < b ? 6 : 0) |
||||||
|
break |
||||||
|
case g: |
||||||
|
h = (b - r) / d + 2 |
||||||
|
break |
||||||
|
case b: |
||||||
|
h = (r - g) / d + 4 |
||||||
|
break |
||||||
|
} |
||||||
|
h /= 6 |
||||||
|
} |
||||||
|
|
||||||
|
return [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)] |
||||||
|
} |
||||||
|
|
||||||
|
export const setup = async ({ page }) => { |
||||||
|
return { |
||||||
|
bodyBgRgb: async () => |
||||||
|
(await page.$eval('body', (body) => body.style.background)) |
||||||
|
.replace(/[^0-9,]+/g, '') |
||||||
|
.split(',') |
||||||
|
.map((e) => Number(e)), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
tests.push(async ({ page, eq }) => { |
||||||
|
// check that the background color is changing on mouse move
|
||||||
|
// by simulating 20 moves, so there must be 20 different background colors
|
||||||
|
let move = 50 |
||||||
|
let bgs = [] |
||||||
|
while (move < 250) { |
||||||
|
move += 10 |
||||||
|
const x = move |
||||||
|
const y = move * 2 |
||||||
|
await page.mouse.move(x, y) |
||||||
|
const bodyBg = await page.$eval('body', (body) => body.style.background) |
||||||
|
const validColor = bodyBg.includes('rgb') |
||||||
|
if (!validColor) continue |
||||||
|
bgs.push(bodyBg) |
||||||
|
} |
||||||
|
const differentBgs = [...new Set(bgs)].length |
||||||
|
eq(differentBgs, 20) |
||||||
|
}) |
||||||
|
|
||||||
|
const coords = () => [ |
||||||
|
[random(125, 500), random(125, 400)], |
||||||
|
[random(125, 500), random(125, 400)], |
||||||
|
[random(125, 500), random(125, 400)], |
||||||
|
] |
||||||
|
|
||||||
|
tests.push(async ({ page, eq, bodyBgRgb }) => { |
||||||
|
// check that the hsl value displayed matches the current background color
|
||||||
|
const moves = coords() |
||||||
|
let step = 0 |
||||||
|
while (step < moves.length) { |
||||||
|
await page.mouse.move(...moves[step]) |
||||||
|
const bgValue = rgbToHsl(...(await bodyBgRgb())) |
||||||
|
const hslValue = await page.$eval('.hsl', (hsl) => |
||||||
|
hsl.textContent |
||||||
|
.replace(/[^0-9,]+/g, '') |
||||||
|
.split(',') |
||||||
|
.map((e) => Number(e)), |
||||||
|
) |
||||||
|
|
||||||
|
const matching = hslValue.map((v, i) => |
||||||
|
between(v, bgValue[i] - 2, bgValue[i] + 2) ? bgValue[i] : v, |
||||||
|
) |
||||||
|
eq(matching, bgValue) |
||||||
|
step++ |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
tests.push(async ({ page, eq, bodyBgRgb }) => { |
||||||
|
// check that the hue value displayed matches the current background color
|
||||||
|
const moves = coords() |
||||||
|
let step = 0 |
||||||
|
while (step < moves.length) { |
||||||
|
await page.mouse.move(...moves[step]) |
||||||
|
const bgValue = rgbToHsl(...(await bodyBgRgb())) |
||||||
|
const hueValue = await page.$eval('.hue', (hue) => |
||||||
|
hue.textContent.replace(/[^0-9,]+/g, ''), |
||||||
|
) |
||||||
|
|
||||||
|
const matching = between(hueValue, bgValue[0] - 2, bgValue[0] + 2) |
||||||
|
? bgValue[0] |
||||||
|
: Number(hueValue) |
||||||
|
eq(matching, bgValue[0]) |
||||||
|
step++ |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
tests.push(async ({ page, eq, bodyBgRgb }) => { |
||||||
|
// check that the luminosity value displayed matches the current background color
|
||||||
|
const moves = coords() |
||||||
|
let step = 0 |
||||||
|
while (step < moves.length) { |
||||||
|
await page.mouse.move(...moves[step]) |
||||||
|
const bgValue = rgbToHsl(...(await bodyBgRgb())) |
||||||
|
const luminosityValue = await page.$eval('.luminosity', (luminosity) => |
||||||
|
luminosity.textContent.replace(/[^0-9,]+/g, ''), |
||||||
|
) |
||||||
|
|
||||||
|
const matching = between(luminosityValue, bgValue[2] - 2, bgValue[2] + 2) |
||||||
|
? bgValue[2] |
||||||
|
: Number(luminosityValue) |
||||||
|
eq(matching, bgValue[2]) |
||||||
|
step++ |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
tests.push(async ({ page, eq, bodyBgRgb }) => { |
||||||
|
// check that the hsl value is copied in the clipboard on click
|
||||||
|
const moves = coords() |
||||||
|
let step = 0 |
||||||
|
while (step < moves.length) { |
||||||
|
await page.mouse.click(...moves[step]) |
||||||
|
const clipboard = await page.evaluate(() => navigator.clipboard.readText()) |
||||||
|
const hslValue = await page.$eval('.hsl', (hsl) => hsl.textContent) |
||||||
|
eq(hslValue, clipboard) |
||||||
|
step++ |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
tests.push(async ({ page, eq, bodyBgRgb }) => { |
||||||
|
// check that each svg axis is following the mouse
|
||||||
|
const moves = coords() |
||||||
|
let step = 0 |
||||||
|
while (step < 1) { |
||||||
|
const [mouseX, mouseY] = moves[step] |
||||||
|
await page.mouse.move(mouseX, mouseY) |
||||||
|
const axisX = await page.$eval('#axisX', (line) => [ |
||||||
|
line.getAttribute('x1'), |
||||||
|
line.getAttribute('x2'), |
||||||
|
]) |
||||||
|
const axisY = await page.$eval('#axisY', (line) => [ |
||||||
|
line.getAttribute('y1'), |
||||||
|
line.getAttribute('y2'), |
||||||
|
]) |
||||||
|
|
||||||
|
const checkAxisCoords = (coords) => Number([...new Set(coords)].join()) |
||||||
|
|
||||||
|
eq(checkAxisCoords(axisX), mouseX) |
||||||
|
eq(checkAxisCoords(axisY), mouseY) |
||||||
|
step++ |
||||||
|
} |
||||||
|
}) |
Loading…
Reference in new issue