react-datalist-input/tests/unit/__snapshots__/DataListInput.test.js.snap
Andre Landgraf 2ade3865d1 refactors to functional component
- rewrites DataListInput as a functional component
- changes version to 2.0.0
- describes versioning in README
- adds more unit tests
- adds snapshot tests
- adds better a11y support by adding aria-labels and roles
2020-09-05 15:58:39 -07:00

256 lines
4.9 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataListInput renders the same html based on the same inputs 1`] = `
<body>
<div>
<div
class="datalist-input"
>
<input
aria-label="Search"
class="autocomplete-input "
placeholder="Type something in here..."
type="text"
value=""
/>
</div>
</div>
</body>
`;
exports[`DataListInput renders the same html based on the same inputs 2`] = `
<body>
<div>
<div
class="datalist-input"
>
<input
aria-label="Search"
class="autocomplete-input "
placeholder="Type something in here..."
type="text"
value=""
/>
<div
aria-label="Dropdown menu"
class="datalist-items default-datalist-items"
role="dialog"
>
<div
aria-label="Apple"
class=" datalist-active-item datalist-active-item-default"
role="button"
tabindex="0"
>
Apple
</div>
<div
aria-label="Mango"
class=" "
role="button"
tabindex="0"
>
Mango
</div>
<div
aria-label="Potatoe"
class=" "
role="button"
tabindex="0"
>
Potatoe
</div>
<div
aria-label="Pear"
class=" "
role="button"
tabindex="0"
>
Pear
</div>
<div
aria-label="Peach"
class=" "
role="button"
tabindex="0"
>
Peach
</div>
<div
aria-label="Cherry"
class=" "
role="button"
tabindex="0"
>
Cherry
</div>
<div
aria-label="Grapes"
class=" "
role="button"
tabindex="0"
>
Grapes
</div>
<div
aria-label="Watermelon"
class=" "
role="button"
tabindex="0"
>
Watermelon
</div>
<div
aria-label="Lime"
class=" "
role="button"
tabindex="0"
>
Lime
</div>
<div
aria-label="Peumo"
class=" "
role="button"
tabindex="0"
>
Peumo
</div>
</div>
</div>
</div>
</body>
`;
exports[`DataListInput renders the same html based on the same inputs 3`] = `
<body>
<div>
<div
class="datalist-input"
>
<input
aria-label="Search"
class="autocomplete-input "
placeholder="Type something in here..."
type="text"
value="Pe"
/>
<div
aria-label="Dropdown menu"
class="datalist-items default-datalist-items"
role="dialog"
>
<div
aria-label="Pear"
class=" datalist-active-item datalist-active-item-default"
role="button"
tabindex="0"
>
<strong>
Pe
</strong>
ar
</div>
<div
aria-label="Peach"
class=" "
role="button"
tabindex="0"
>
<strong>
Pe
</strong>
ach
</div>
<div
aria-label="Peumo"
class=" "
role="button"
tabindex="0"
>
<strong>
Pe
</strong>
umo
</div>
</div>
</div>
</div>
</body>
`;
exports[`DataListInput renders the same html based on the same inputs 4`] = `
<body>
<div>
<div
class="datalist-input"
>
<input
aria-label="Search"
class="autocomplete-input "
placeholder="Type something in here..."
type="text"
value="Pe"
/>
</div>
</div>
</body>
`;
exports[`DataListInput renders the same html based on the same inputs 5`] = `
<body>
<div>
<div
class="datalist-input"
>
<input
aria-label="Search"
class="autocomplete-input "
placeholder="Type something in here..."
type="text"
value="Pear"
/>
</div>
</div>
</body>
`;
exports[`DataListInput renders the same html based on the same inputs 6`] = `
<body>
<div>
<div
class="datalist-input"
>
<input
aria-label="Search"
class="autocomplete-input "
placeholder="Type something in here..."
type="text"
value="Pear"
/>
<div
aria-label="Dropdown menu"
class="datalist-items default-datalist-items"
role="dialog"
>
<div
aria-label="Pear"
class=" datalist-active-item datalist-active-item-default"
role="button"
tabindex="0"
>
<strong>
Pear
</strong>
</div>
</div>
</div>
</div>
</body>
`;