3px solid red
. You can try it out by entering text in the input.
GateKeeper
component should render a div
element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('div').length === 1; })(), 'The GateKeeper
component should render a div
element.');
- text: The GateKeeper
component should be initialized with a state key input
set to an empty string.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ''; })(), 'The GateKeeper
component should be initialized with a state key input
set to an empty string.');
- text: The GateKeeper
component should render an h3
tag and an input
tag.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('h3').length === 1 && mockedComponent.find('input').length === 1; })(), 'The GateKeeper
component should render an h3
tag and an input
tag.');
- text: The input
tag should initially have a style of 1px solid black
for the border
property.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('input').props().style.border === '1px solid black'; })(), 'The input
tag should initially have a style of 1px solid black
for the border
property.');
- text: The input
tag should be styled with a border of 3px solid red
if the input value in state is longer than 15 characters.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); const simulateChange = (el, value) => el.simulate(''change'', {target: {value}}); let initialStyle = mockedComponent.find(''input'').props().style.border; const state_1 = () => { mockedComponent.setState({input: ''this is 15 char'' }); return waitForIt(() => mockedComponent.find(''input'').props().style.border )}; const state_2 = () => { mockedComponent.setState({input: ''A very long string longer than 15 characters.'' }); return waitForIt(() => mockedComponent.find(''input'').props().style.border )}; const style_1 = await state_1(); const style_2 = await state_2(); assert(initialStyle === ''1px solid black'' && style_1 === ''1px solid black'' && style_2 === ''3px solid red'', ''The input
tag should be styled with a border of 3px solid red
if the input value in state is longer than 15 characters.''); }; '
```