diff --git a/curriculum/challenges/english/blocks/workshop-superhero-application-form/680900675ae3d54ee19590d3.md b/curriculum/challenges/english/blocks/workshop-superhero-application-form/680900675ae3d54ee19590d3.md index 61a97665f30..034f4fbc115 100644 --- a/curriculum/challenges/english/blocks/workshop-superhero-application-form/680900675ae3d54ee19590d3.md +++ b/curriculum/challenges/english/blocks/workshop-superhero-application-form/680900675ae3d54ee19590d3.md @@ -32,7 +32,43 @@ assert.match(code, /<\s*button\s+className\s*=\s*('|")\s*submit-btn\s*\1\s*type\ You should disable the `button` if any of `heroName`, `realName`, and `powerSource` is false, or if the length of `powers` is `0`. ```js -assert.match(code, /disabled\s*=\s*\{\s*(?:!heroName\s*\|\|\s*!realName\s*\|\|\s*!powerSource\s*\|\|\s*powers\.length\s*===\s*0|!heroName\s*\|\|\s*!realName\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!powerSource|!heroName\s*\|\|\s*!powerSource\s*\|\|\s*!realName\s*\|\|\s*powers\.length\s*===\s*0|!heroName\s*\|\|\s*!powerSource\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!realName|!heroName\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!realName\s*\|\|\s*!powerSource|!heroName\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!powerSource\s*\|\|\s*!realName|!realName\s*\|\|\s*!heroName\s*\|\|\s*!powerSource\s*\|\|\s*powers\.length\s*===\s*0|!realName\s*\|\|\s*!heroName\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!powerSource|!realName\s*\|\|\s*!powerSource\s*\|\|\s*!heroName\s*\|\|\s*powers\.length\s*===\s*0|!realName\s*\|\|\s*!powerSource\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!heroName|!realName\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!heroName\s*\|\|\s*!powerSource|!realName\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!powerSource\s*\|\|\s*!heroName|!powerSource\s*\|\|\s*!heroName\s*\|\|\s*!realName\s*\|\|\s*powers\.length\s*===\s*0|!powerSource\s*\|\|\s*!heroName\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!realName|!powerSource\s*\|\|\s*!realName\s*\|\|\s*!heroName\s*\|\|\s*powers\.length\s*===\s*0|!powerSource\s*\|\|\s*!realName\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!heroName|!powerSource\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!heroName\s*\|\|\s*!realName|!powerSource\s*\|\|\s*powers\.length\s*===\s*0\s*\|\|\s*!realName\s*\|\|\s*!heroName|powers\.length\s*===\s*0\s*\|\|\s*!heroName\s*\|\|\s*!realName\s*\|\|\s*!powerSource|powers\.length\s*===\s*0\s*\|\|\s*!heroName\s*\|\|\s*!powerSource\s*\|\|\s*!realName|powers\.length\s*===\s*0\s*\|\|\s*!realName\s*\|\|\s*!heroName\s*\|\|\s*!powerSource|powers\.length\s*===\s*0\s*\|\|\s*!realName\s*\|\|\s*!powerSource\s*\|\|\s*!heroName|powers\.length\s*===\s*0\s*\|\|\s*!powerSource\s*\|\|\s*!heroName\s*\|\|\s*!realName|powers\.length\s*===\s*0\s*\|\|\s*!powerSource\s*\|\|\s*!realName\s*\|\|\s*!heroName)\s*\}/) +// Button should be disabled initially +const btn = document.querySelector("button"); +assert.strictEqual(btn.disabled, true); + +const heroInput = document.querySelector("input[type='text']"); +const realNameInput = document.querySelector("input[type='password']"); +const select = document.querySelector("select"); +const powerCheckbox = document.querySelector("input[type='checkbox']"); + +await React.act(async () => { + const heroHandler = heroInput[Object.keys(heroInput).find(k => k.startsWith("__reactProps"))].onChange; + heroInput.value = "Spiderman"; + heroHandler({ target: heroInput }); +}); +assert.strictEqual(btn.disabled, true); + +await React.act(async () => { + const realHandler = realNameInput[Object.keys(realNameInput).find(k => k.startsWith("__reactProps"))].onChange; + realNameInput.value = "Peter Parker"; + realHandler({ target: realNameInput }); +}); +assert.strictEqual(btn.disabled, true); + +await React.act(async () => { + const selectHandler = select[Object.keys(select).find(k => k.startsWith("__reactProps"))].onChange; + select.value = select.options[1].value; + selectHandler({ target: select }); +}); +assert.strictEqual(btn.disabled, true); + +await React.act(async () => { + const checkboxHandler = powerCheckbox[Object.keys(powerCheckbox).find(k => k.startsWith("__reactProps"))].onChange; + powerCheckbox.checked = true; + checkboxHandler({ target: powerCheckbox }); +}); +assert.strictEqual(btn.disabled, false); + ``` # --seed--