if/else
em JavaScript. Eles não são tão robustos quanto as tradicionais declarações if/else
, mas são muito populares entre os desenvolvedores do React. Uma razão para isso é devido ao modo como o JSX é compilado, if/else
instruções if/else
não puderem ser inseridas diretamente no código JSX. Você deve ter percebido isso há alguns anos atrás - quando uma declaração if/else
era necessária, estava sempre fora da declaração de return
. Expressões ternárias podem ser uma excelente alternativa se você quiser implementar uma lógica condicional no seu JSX. Lembre-se de que um operador ternário possui três partes, mas você pode combinar várias expressões ternárias juntas. Aqui está a sintaxe básica: condição? expressionIfTrue: expressionIfFalse
render()
do componente CheckUserAge
. Eles são chamados de buttonOne
, buttonTwo
e buttonThree
. Cada uma delas é atribuída a uma expressão simples de JSX representando um elemento de botão. Primeiro, inicialize o estado de CheckUserAge
com input
e userAge
ambos configurados para valores de uma string vazia. Depois que o componente estiver renderizando informações para a página, os usuários devem ter uma maneira de interagir com ele. Na instrução de return
do componente, configure uma expressão ternária que implemente a seguinte lógica: quando a página carregar pela primeira vez, renderize o botão de envio, buttonOne
, na página. Em seguida, quando um usuário digitar sua idade e clicar no botão, processe um botão diferente com base na idade. Se um usuário digitar um número menor que 18
, renderize buttonThree
. Se um usuário digitar um número maior ou igual a 18
, buttonTwo
. CheckUserAge
deve renderizar com um único elemento de input
e um único elemento de button
.
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("input").length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("button").length === 1, "The CheckUserAge
component should render with a single input
element and a single button
element.");'
- text: 'O estado do componente CheckUserAge
deve ser inicializado com uma propriedade de userAge
e uma propriedade de input
, ambas configuradas para um valor de uma cadeia vazia.'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === "" && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === "", "The CheckUserAge
component's state should be initialized with a property of userAge
and a property of input
, both set to a value of an empty string.");'
- text: 'Quando o componente CheckUserAge
é renderizado pela primeira vez para o DOM, o texto interno do button
deve ser Enviar.'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("button").text() === "Submit", "When the CheckUserAge
component is first rendered to the DOM, the button
's inner text should be Submit.");'
- text: 'Quando um número menor que 18 é inserido no elemento de input
e o button
é clicado, o texto interno do button
deve ser lido como You Shall Not Pass
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter3AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "3" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter17AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "17" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === "Submit" && userAge3 === "You Shall Not Pass" && userAge17 === "You Shall Not Pass", "When a number of less than 18 is entered into the input
element and the button
is clicked, the button
's inner text should read You Shall Not Pass
."); }; '
- text: 'Quando um número maior ou igual a 18 é inserido no elemento de input
e o button
é clicado, o texto interno do button
deve ler You May Enter
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter35AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "35" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === "Submit" && userAge18 === "You May Enter" && userAge35 === "You May Enter", "When a number greater than or equal to 18 is entered into the input
element and the button
is clicked, the button
's inner text should read You May Enter
."); }; '
- text: 'Quando um número for enviado e o valor da input
for novamente alterado, o button
retornará para a leitura de Submit
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "5" }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter10AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "10" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === "You May Enter" && changeInput1 === "Submit" && userAge10 === "You Shall Not Pass" && changeInput2 === "Submit", "Once a number has been submitted, and the value of the input
is once again changed, the button
should return to reading Submit
."); }; '
- text: Seu código não deve conter nenhuma instrução if/else
.
testString: 'assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, "Your code should not contain any if/else
statements.");'
```