redux-devtools/packages/redux-devtools-ui/tests/__snapshots__/Form.test.tsx.snap
Nathan Bierema 57ec0534b2
Replace enzyme with React testing library in ui (#917)
* Replace enzyme with React testing library in ui

* Mock Math.random()
2021-10-22 04:18:03 +00:00

1046 lines
25 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Form renders correctly 1`] = `
<form
class="sc-furwcr elOoGk"
>
<div
class="form-group field field-object"
>
<fieldset
id="root"
>
<legend
id="root__title"
>
Example form
</legend>
<p
class="field-description"
id="root__description"
>
A simple form example.
</p>
<div
class="form-group field field-string"
>
<label
class="control-label"
for="root_name"
>
Full name
<span
class="required"
>
*
</span>
</label>
<input
class="form-control"
id="root_name"
label="Full name"
placeholder=""
required=""
type="text"
value="Chuck Norris"
/>
</div>
<div
class="form-group field field-integer"
>
<label
class="control-label"
for="root_age"
>
Age
</label>
<input
class="form-control"
id="root_age"
label="Age"
placeholder=""
type="number"
value="75"
/>
</div>
<div
class="form-group field field-string"
>
<label
class="control-label"
for="root_bio"
>
Bio
</label>
<textarea
class="form-control"
id="root_bio"
placeholder=""
>
Roundhouse kicking asses since 1940
</textarea>
</div>
<div
class="form-group field field-string"
>
<label
class="control-label"
for="root_password"
>
Password
</label>
<input
class="form-control"
id="root_password"
label="Password"
placeholder=""
type="password"
value="noneed"
/>
<p
class="help-block"
id="root_password__help"
>
Hint: Make it strong!
</p>
</div>
<div
class="form-group field field-array"
>
<label
class="control-label"
for="root_multipleChoicesList"
>
A multiple choices list
</label>
<div
class="checkboxes"
id="root_multipleChoicesList"
>
<div
class="checkbox "
>
<label>
<span>
<input
id="root_multipleChoicesList_0"
type="checkbox"
/>
<span>
foo
</span>
</span>
</label>
</div>
<div
class="checkbox "
>
<label>
<span>
<input
id="root_multipleChoicesList_1"
type="checkbox"
/>
<span>
bar
</span>
</span>
</label>
</div>
<div
class="checkbox "
>
<label>
<span>
<input
id="root_multipleChoicesList_2"
type="checkbox"
/>
<span>
fuzz
</span>
</span>
</label>
</div>
</div>
</div>
<div
class="form-group field field-number"
>
<label
class="control-label"
for="root_numberEnum"
>
Number enum
</label>
<div
class=" css-18o3wl1-container"
id="root_numberEnum"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-2-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class=" css-gdsksj-control"
>
<div
class=" css-1dzc0nd-ValueContainer"
>
<div
class=" css-du77wi-placeholder"
id="react-select-2-placeholder"
/>
<div
class=" css-1qx78vi-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-controls="react-select-2-listbox"
aria-describedby="react-select-2-placeholder"
aria-expanded="false"
aria-haspopup="true"
aria-owns="react-select-2-listbox"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="react-select-2-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-1hb7zxy-IndicatorsContainer"
>
<span
class=" css-1urf5ax-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-aazq4s-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div
class="form-group field field-number"
>
<label
class="control-label"
for="root_numberEnumRadio"
>
Number enum
</label>
<div
class="field-radio-group"
id="root_numberEnumRadio"
>
<label
class="radio-inline "
>
<span>
<input
name="0.25546350798039463"
type="radio"
value="1"
/>
<span>
1
</span>
</span>
</label>
<label
class="radio-inline "
>
<span>
<input
name="0.25546350798039463"
type="radio"
value="2"
/>
<span>
2
</span>
</span>
</label>
<label
class="radio-inline "
>
<span>
<input
name="0.25546350798039463"
type="radio"
value="3"
/>
<span>
3
</span>
</span>
</label>
</div>
</div>
<div
class="form-group field field-integer"
>
<label
class="control-label"
for="root_integerRange"
>
Integer range
</label>
<div
class="sc-gKclnd cELrub"
>
<div
class="sc-iCfMLu HKVV"
>
<input
id="root_integerRange"
max="100"
min="42"
placeholder=""
type="range"
uischema="[object Object]"
value="52"
/>
<div>
52
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div
class="sc-eCImPb gcPrSZ"
>
<button
class="sc-dkPtRN hMJxMJ"
type="submit"
>
Submit
</button>
</div>
</form>
`;
exports[`Form renders with no button 1`] = `
<form
class="sc-furwcr elOoGk"
>
<div
class="form-group field field-object"
>
<fieldset
id="root"
>
<legend
id="root__title"
>
Example form
</legend>
<p
class="field-description"
id="root__description"
>
A simple form example.
</p>
<div
class="form-group field field-string"
>
<label
class="control-label"
for="root_name"
>
Full name
<span
class="required"
>
*
</span>
</label>
<input
class="form-control"
id="root_name"
label="Full name"
placeholder=""
required=""
type="text"
value="Chuck Norris"
/>
</div>
<div
class="form-group field field-integer"
>
<label
class="control-label"
for="root_age"
>
Age
</label>
<input
class="form-control"
id="root_age"
label="Age"
placeholder=""
type="number"
value="75"
/>
</div>
<div
class="form-group field field-string"
>
<label
class="control-label"
for="root_bio"
>
Bio
</label>
<textarea
class="form-control"
id="root_bio"
placeholder=""
>
Roundhouse kicking asses since 1940
</textarea>
</div>
<div
class="form-group field field-string"
>
<label
class="control-label"
for="root_password"
>
Password
</label>
<input
class="form-control"
id="root_password"
label="Password"
placeholder=""
type="password"
value="noneed"
/>
<p
class="help-block"
id="root_password__help"
>
Hint: Make it strong!
</p>
</div>
<div
class="form-group field field-array"
>
<label
class="control-label"
for="root_multipleChoicesList"
>
A multiple choices list
</label>
<div
class="checkboxes"
id="root_multipleChoicesList"
>
<div
class="checkbox "
>
<label>
<span>
<input
id="root_multipleChoicesList_0"
type="checkbox"
/>
<span>
foo
</span>
</span>
</label>
</div>
<div
class="checkbox "
>
<label>
<span>
<input
id="root_multipleChoicesList_1"
type="checkbox"
/>
<span>
bar
</span>
</span>
</label>
</div>
<div
class="checkbox "
>
<label>
<span>
<input
id="root_multipleChoicesList_2"
type="checkbox"
/>
<span>
fuzz
</span>
</span>
</label>
</div>
</div>
</div>
<div
class="form-group field field-number"
>
<label
class="control-label"
for="root_numberEnum"
>
Number enum
</label>
<div
class=" css-18o3wl1-container"
id="root_numberEnum"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-4-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class=" css-gdsksj-control"
>
<div
class=" css-1dzc0nd-ValueContainer"
>
<div
class=" css-du77wi-placeholder"
id="react-select-4-placeholder"
/>
<div
class=" css-1qx78vi-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-controls="react-select-4-listbox"
aria-describedby="react-select-4-placeholder"
aria-expanded="false"
aria-haspopup="true"
aria-owns="react-select-4-listbox"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="react-select-4-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-1hb7zxy-IndicatorsContainer"
>
<span
class=" css-1urf5ax-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-aazq4s-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div
class="form-group field field-number"
>
<label
class="control-label"
for="root_numberEnumRadio"
>
Number enum
</label>
<div
class="field-radio-group"
id="root_numberEnumRadio"
>
<label
class="radio-inline "
>
<span>
<input
name="0.25546350798039463"
type="radio"
value="1"
/>
<span>
1
</span>
</span>
</label>
<label
class="radio-inline "
>
<span>
<input
name="0.25546350798039463"
type="radio"
value="2"
/>
<span>
2
</span>
</span>
</label>
<label
class="radio-inline "
>
<span>
<input
name="0.25546350798039463"
type="radio"
value="3"
/>
<span>
3
</span>
</span>
</label>
</div>
</div>
<div
class="form-group field field-integer"
>
<label
class="control-label"
for="root_integerRange"
>
Integer range
</label>
<div
class="sc-gKclnd cELrub"
>
<div
class="sc-iCfMLu HKVV"
>
<input
id="root_integerRange"
max="100"
min="42"
placeholder=""
type="range"
uischema="[object Object]"
value="52"
/>
<div>
52
</div>
</div>
</div>
</div>
</fieldset>
</div>
<noscript />
</form>
`;
exports[`Form renders with primary button 1`] = `
<form
class="sc-furwcr elOoGk"
>
<div
class="form-group field field-object"
>
<fieldset
id="root"
>
<legend
id="root__title"
>
Example form
</legend>
<p
class="field-description"
id="root__description"
>
A simple form example.
</p>
<div
class="form-group field field-string"
>
<label
class="control-label"
for="root_name"
>
Full name
<span
class="required"
>
*
</span>
</label>
<input
class="form-control"
id="root_name"
label="Full name"
placeholder=""
required=""
type="text"
value="Chuck Norris"
/>
</div>
<div
class="form-group field field-integer"
>
<label
class="control-label"
for="root_age"
>
Age
</label>
<input
class="form-control"
id="root_age"
label="Age"
placeholder=""
type="number"
value="75"
/>
</div>
<div
class="form-group field field-string"
>
<label
class="control-label"
for="root_bio"
>
Bio
</label>
<textarea
class="form-control"
id="root_bio"
placeholder=""
>
Roundhouse kicking asses since 1940
</textarea>
</div>
<div
class="form-group field field-string"
>
<label
class="control-label"
for="root_password"
>
Password
</label>
<input
class="form-control"
id="root_password"
label="Password"
placeholder=""
type="password"
value="noneed"
/>
<p
class="help-block"
id="root_password__help"
>
Hint: Make it strong!
</p>
</div>
<div
class="form-group field field-array"
>
<label
class="control-label"
for="root_multipleChoicesList"
>
A multiple choices list
</label>
<div
class="checkboxes"
id="root_multipleChoicesList"
>
<div
class="checkbox "
>
<label>
<span>
<input
id="root_multipleChoicesList_0"
type="checkbox"
/>
<span>
foo
</span>
</span>
</label>
</div>
<div
class="checkbox "
>
<label>
<span>
<input
id="root_multipleChoicesList_1"
type="checkbox"
/>
<span>
bar
</span>
</span>
</label>
</div>
<div
class="checkbox "
>
<label>
<span>
<input
id="root_multipleChoicesList_2"
type="checkbox"
/>
<span>
fuzz
</span>
</span>
</label>
</div>
</div>
</div>
<div
class="form-group field field-number"
>
<label
class="control-label"
for="root_numberEnum"
>
Number enum
</label>
<div
class=" css-18o3wl1-container"
id="root_numberEnum"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-3-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class=" css-gdsksj-control"
>
<div
class=" css-1dzc0nd-ValueContainer"
>
<div
class=" css-du77wi-placeholder"
id="react-select-3-placeholder"
/>
<div
class=" css-1qx78vi-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-controls="react-select-3-listbox"
aria-describedby="react-select-3-placeholder"
aria-expanded="false"
aria-haspopup="true"
aria-owns="react-select-3-listbox"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="react-select-3-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-1hb7zxy-IndicatorsContainer"
>
<span
class=" css-1urf5ax-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-aazq4s-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div
class="form-group field field-number"
>
<label
class="control-label"
for="root_numberEnumRadio"
>
Number enum
</label>
<div
class="field-radio-group"
id="root_numberEnumRadio"
>
<label
class="radio-inline "
>
<span>
<input
name="0.25546350798039463"
type="radio"
value="1"
/>
<span>
1
</span>
</span>
</label>
<label
class="radio-inline "
>
<span>
<input
name="0.25546350798039463"
type="radio"
value="2"
/>
<span>
2
</span>
</span>
</label>
<label
class="radio-inline "
>
<span>
<input
name="0.25546350798039463"
type="radio"
value="3"
/>
<span>
3
</span>
</span>
</label>
</div>
</div>
<div
class="form-group field field-integer"
>
<label
class="control-label"
for="root_integerRange"
>
Integer range
</label>
<div
class="sc-gKclnd cELrub"
>
<div
class="sc-iCfMLu HKVV"
>
<input
id="root_integerRange"
max="100"
min="42"
placeholder=""
type="range"
uischema="[object Object]"
value="52"
/>
<div>
52
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div
class="sc-eCImPb gcPrSZ"
>
<button
class="sc-dkPtRN bHfEsJ"
type="submit"
>
Custom button
</button>
</div>
</form>
`;