mirror of https://github.com/01-edu/public.git
action-reaction: fix test & subject
This commit is contained in:
parent
617a61d469
commit
e218615d8d
|
@ -5,8 +5,8 @@ tests.push(async ({ eq, page }) => {
|
|||
const eyeLeft = await page.$eval('#eye-left', (node) => node.className)
|
||||
eq(eyeLeft, 'eye')
|
||||
|
||||
const buttonText = await page.$eval('button', (node) => node.textContent)
|
||||
// check that the text of the button says 'close'
|
||||
const buttonText = await page.$eval('button', (node) => node.textContent)
|
||||
eq(buttonText, 'Click to close the left eye')
|
||||
})
|
||||
|
||||
|
@ -14,11 +14,16 @@ tests.push(async ({ eq, page }) => {
|
|||
// click the button to close the left eye
|
||||
const button = await page.$('button')
|
||||
button.click()
|
||||
await page.waitForTimeout(150)
|
||||
|
||||
// check that the class has been added
|
||||
const eyeLeft = await page.$eval('#eye-left', (node) => node.className)
|
||||
eq(eyeLeft, 'eye eye-closed')
|
||||
await page.waitForSelector('#eye-left.eye.eye-closed', { timeout: 150 })
|
||||
|
||||
// check the background color has changed
|
||||
const eyeLeft = await page.$eval(
|
||||
'#eye-left.eye.eye-closed',
|
||||
(node) => node.style.backgroundColor,
|
||||
)
|
||||
eq(eyeLeft, 'black')
|
||||
|
||||
// check that the text of the button changed to 'open'
|
||||
const buttonText = await page.$eval('button', (node) => node.textContent)
|
||||
|
@ -29,13 +34,18 @@ tests.push(async ({ eq, page }) => {
|
|||
// click the button a second time to open the left eye
|
||||
const button = await page.$('button')
|
||||
button.click()
|
||||
await page.waitForTimeout(150)
|
||||
|
||||
// check that the class has been removed
|
||||
const eyeLeft = await page.$eval('#eye-left', (node) => node.className)
|
||||
eq(eyeLeft, 'eye')
|
||||
await page.waitForSelector('#eye-left.eye:not(.eye-closed)', { timeout: 150 })
|
||||
|
||||
// check the background color has changed
|
||||
const eyeLeft = await page.$eval(
|
||||
'#eye-left.eye:not(.eye-closed)',
|
||||
(node) => node.style.backgroundColor,
|
||||
)
|
||||
eq(eyeLeft, 'red')
|
||||
|
||||
const buttonText = await page.$eval('button', (node) => node.textContent)
|
||||
// check that the text of the button changed to 'close'
|
||||
const buttonText = await page.$eval('button', (node) => node.textContent)
|
||||
eq(buttonText, 'Click to close the left eye')
|
||||
})
|
||||
|
|
|
@ -26,7 +26,7 @@ In the JS file, get the HTML button element with [`querySelector`](https://devel
|
|||
|
||||
- change the [text content](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) of the button: if the eye is open, write "Click to close the left eye", if the eye is closed, write "Click to open the left eye"
|
||||
- [toggle](https://css-tricks.com/snippets/javascript/the-classlist-api/) the class `eye-open` in the `classList` of the `eye-left` HTML element
|
||||
- change the background color of the `eye-left`: if the eye is open, to "orange", if the eye is closed, to "black"
|
||||
- change the background color of the `eye-left`: if the eye is open, to "red", if the eye is closed, to "black"
|
||||
|
||||
### Expected output
|
||||
|
||||
|
|
Loading…
Reference in New Issue