Chore/add component library #129
markkovariAnnotations
9 errors
|
src/App.test.tsx > App > should render the main page:
frontend/src/App.test.tsx#L15
TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name `/Home/i`
Here are the accessible roles:
link:
Name "Home":
<a
class="chakra-link css-0"
href="/"
/>
Name "Login":
<a
class="chakra-link css-0"
href="/login"
/>
Name "Register":
<a
class="chakra-link css-0"
href="/register"
/>
--------------------------------------------------
button:
Name "":
<button
class="chakra-button css-4xx2wk"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="css-11h9hc7"
>
<div
class="css-1e8m7dk"
>
<a
class="chakra-link css-0"
href="/"
>
Home
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-0"
href="/login"
>
Login
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-0"
href="/register"
>
Register
</a>
<div
class="css-17xejub"
/>
<button
class="chakra-button css-4xx2wk"
type="button"
>
<svg
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<circle
cx="12"
cy="12"
r="5"
/>
<path
d="M12 1v2"
/>
<path
d="M12 21v2"
/>
<path
d="M4.22 4.22l1.42 1.42"
/>
<path
d="M18.36 18.36l1.42 1.42"
/>
<path
d="M1 12h2"
/>
<path
d="M21 12h2"
/>
<path
d="M4.22 19.78l1.42-1.42"
/>
<path
d="M18.36 5.64l1.42-1.42"
/>
</g>
</svg>
</button>
</div>
<div
class="css-lzbak9"
>
<div
class="css-0"
>
Home
</div>
<div
class="css-0"
>
Welcome to Gilmore Devs Pet Clinic!
</div>
</div>
<div
class="css-k008qs"
>
<div
class="css-0"
>
Footer
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ getByRole node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/App.test.tsx:15:16
|
|
src/App.test.tsx > App > should render the login page after clicked on the login link:
frontend/src/App.test.tsx#L24
TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name `/login/i`
Here are the accessible roles:
link:
Name "Home":
<a
class="chakra-link css-0"
href="/"
/>
Name "Login":
<a
class="chakra-link css-0"
href="/login"
/>
Name "Register":
<a
class="chakra-link css-0"
href="/register"
/>
--------------------------------------------------
button:
Name "":
<button
class="chakra-button css-4xx2wk"
type="button"
/>
Name "Show":
<button
class="chakra-button css-xsdlqf"
type="button"
/>
Name "Login":
<button
class="chakra-button css-4xx2wk"
type="submit"
/>
--------------------------------------------------
textbox:
Name "Email:":
<input
aria-required="true"
class="chakra-input css-0"
id="email"
name="email"
required=""
type="email"
value=""
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="css-11h9hc7"
>
<div
class="css-1e8m7dk"
>
<a
class="chakra-link css-0"
href="/"
>
Home
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-0"
href="/login"
>
Login
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-0"
href="/register"
>
Register
</a>
<div
class="css-17xejub"
/>
<button
class="chakra-button css-4xx2wk"
type="button"
>
<svg
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<circle
cx="12"
cy="12"
r="5"
/>
<path
d="M12 1v2"
/>
<path
d="M12 21v2"
/>
<path
d="M4.22 4.22l1.42 1.42"
/>
<path
d="M18.36 18.36l1.42 1.42"
/>
<path
d="M1 12h2"
/>
<path
d="M21 12h2"
/>
<path
d="M4.22 19.78l1.42-1.42"
/>
<path
d="M18.36 5.64l1.42-1.42"
/>
</g>
</svg>
</button>
</div>
<div
class="css-lzbak9"
>
<div
class="css-0"
>
Login
</div>
<div
class="css-1i46bf8"
>
<form>
<label
class="chakra-form__label css-uvho5g"
for="email"
>
Email:
</label>
<input
aria-required="true"
class="chakra-input css-0"
id="email"
name="email"
required=""
type="email"
value=""
/>
<label
class="chakra-form__label css-uvho5g"
for="password"
>
Password:
</label>
<div
class="chakra-input__group css-2gvt1p"
data-group="true"
>
<input
aria-required="true"
class="chakra-input css-0"
id="password"
name="password"
required=""
type="password"
value=""
/>
<div
class="chakra-input__right-element css-vcnsx7"
>
<button
class="chakra-button css-xsdlqf"
|
|
src/App.test.tsx > App > should render the main page after visited the register page and clicked on the home link:
frontend/src/App.test.tsx#L31
TestingLibraryElementError: Unable to find an accessible element with the role "link" and name `/main/i`
Here are the accessible roles:
link:
Name "Home":
<a
class="chakra-link css-0"
href="/"
/>
Name "Login":
<a
class="chakra-link css-0"
href="/login"
/>
Name "Register":
<a
class="chakra-link css-0"
href="/register"
/>
--------------------------------------------------
button:
Name "":
<button
class="chakra-button css-4xx2wk"
type="button"
/>
Name "Show":
<button
class="chakra-button css-xsdlqf"
type="button"
/>
Name "Login":
<button
class="chakra-button css-4xx2wk"
type="submit"
/>
--------------------------------------------------
textbox:
Name "Email:":
<input
aria-required="true"
class="chakra-input css-0"
id="email"
name="email"
required=""
type="email"
value=""
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="css-11h9hc7"
>
<div
class="css-1e8m7dk"
>
<a
class="chakra-link css-0"
href="/"
>
Home
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-0"
href="/login"
>
Login
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-0"
href="/register"
>
Register
</a>
<div
class="css-17xejub"
/>
<button
class="chakra-button css-4xx2wk"
type="button"
>
<svg
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<circle
cx="12"
cy="12"
r="5"
/>
<path
d="M12 1v2"
/>
<path
d="M12 21v2"
/>
<path
d="M4.22 4.22l1.42 1.42"
/>
<path
d="M18.36 18.36l1.42 1.42"
/>
<path
d="M1 12h2"
/>
<path
d="M21 12h2"
/>
<path
d="M4.22 19.78l1.42-1.42"
/>
<path
d="M18.36 5.64l1.42-1.42"
/>
</g>
</svg>
</button>
</div>
<div
class="css-lzbak9"
>
<div
class="css-0"
>
Login
</div>
<div
class="css-1i46bf8"
>
<form>
<label
class="chakra-form__label css-uvho5g"
for="email"
>
Email:
</label>
<input
aria-required="true"
class="chakra-input css-0"
id="email"
name="email"
required=""
type="email"
value=""
/>
<label
class="chakra-form__label css-uvho5g"
for="password"
>
Password:
</label>
<div
class="chakra-input__group css-2gvt1p"
data-group="true"
>
<input
aria-required="true"
class="chakra-input css-0"
id="password"
name="password"
required=""
type="password"
value=""
/>
<div
class="chakra-input__right-element css-vcnsx7"
>
<button
class="chakra-button css-xsdlqf"
|
|
src/App.test.tsx > App > should render the register page after clicked on the register link:
frontend/src/App.test.tsx#L43
TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name `/register/i`
Here are the accessible roles:
link:
Name "Home":
<a
class="chakra-link css-0"
href="/"
/>
Name "Login":
<a
class="chakra-link css-0"
href="/login"
/>
Name "Register":
<a
class="chakra-link css-0"
href="/register"
/>
--------------------------------------------------
button:
Name "":
<button
class="chakra-button css-4xx2wk"
type="button"
/>
Name "Register":
<button
class="chakra-button css-uxt1e8"
type="submit"
/>
--------------------------------------------------
textbox:
Name "firstName":
<input
aria-label="firstName"
aria-required="true"
autocomplete="given-name"
class="chakra-input css-0"
name="firstName"
required=""
type="text"
value=""
/>
Name "lastName":
<input
aria-label="lastName"
aria-required="true"
autocomplete="family-name"
class="chakra-input css-0"
name="lastName"
required=""
type="text"
value=""
/>
Name "email":
<input
aria-describedby="field-:r0:-feedback"
aria-invalid="true"
aria-label="email"
aria-required="true"
autocomplete="email"
class="chakra-input css-0"
id="field-:r0:"
name="email"
required=""
type="email"
value=""
/>
--------------------------------------------------
group:
Name "":
<div
class="chakra-form-control css-0"
data-invalid=""
role="group"
/>
Name "":
<div
class="chakra-form-control css-19idom"
data-invalid=""
role="group"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="css-11h9hc7"
>
<div
class="css-1e8m7dk"
>
<a
class="chakra-link css-0"
href="/"
>
Home
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-0"
href="/login"
>
Login
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-0"
href="/register"
>
Register
</a>
<div
class="css-17xejub"
/>
<button
class="chakra-button css-4xx2wk"
type="button"
>
<svg
class="chakra-icon css-onkibi"
focusable="false"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<circle
cx="12"
cy="12"
r="5"
/>
<path
d="M12 1v2"
/>
<path
d="M12 21v2"
/>
<path
d="M4.22 4.22l1.42 1.42"
/>
<path
d="M18.36 18.36l1.42 1.42"
/>
<path
d="M1 12h2"
/>
<path
d="M21 12h2"
/>
<path
d="M4.22 19.78l1.42-1.42"
/>
<path
d="M18.36 5.64l1.42-1.42"
/>
</g>
</svg>
</button>
</div>
<div
class="css-lzbak9"
>
<div
class="css-0"
>
Register
</div>
<div
class="css-1i46bf8"
>
<form>
<label
class="chakra-form__label css-uvho5g"
for="firstName"
>
First Name:
</label>
<input
aria-label="firstName"
aria-required="true"
autocomplete="given-name"
class="chakra-input css-0"
name="firstName"
r
|
|
src/pages/Login.test.tsx > Register component > has a heading 'Register':
frontend/src/pages/Login.test.tsx#L20
TestingLibraryElementError: Unable to find an accessible element with the role "heading"
Here are the accessible roles:
textbox:
Name "Email:":
<input
aria-required="true"
class="chakra-input css-0"
id="email"
name="email"
required=""
type="email"
value=""
/>
--------------------------------------------------
button:
Name "Show":
<button
class="chakra-button css-xsdlqf"
type="button"
/>
Name "Login":
<button
class="chakra-button css-4xx2wk"
type="submit"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="css-0"
>
Login
</div>
<div
class="css-1i46bf8"
>
<form>
<label
class="chakra-form__label css-uvho5g"
for="email"
>
Email:
</label>
<input
aria-required="true"
class="chakra-input css-0"
id="email"
name="email"
required=""
type="email"
value=""
/>
<label
class="chakra-form__label css-uvho5g"
for="password"
>
Password:
</label>
<div
class="chakra-input__group css-2gvt1p"
data-group="true"
>
<input
aria-required="true"
class="chakra-input css-0"
id="password"
name="password"
required=""
type="password"
value=""
/>
<div
class="chakra-input__right-element css-vcnsx7"
>
<button
class="chakra-button css-xsdlqf"
type="button"
>
Show
</button>
</div>
</div>
<button
class="chakra-button css-4xx2wk"
type="submit"
>
Login
</button>
</form>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ getByRole node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/pages/Login.test.tsx:20:23
|
|
src/pages/Login.test.tsx > Register component > sends an HTTP request, when Submit is clicked:
frontend/src/pages/Login.test.tsx#L46
AssertionError: expected "spy" to be called at least once
❯ src/pages/Login.test.tsx:46:21
|
|
src/pages/Register.test.tsx > Register component > has a heading 'Register':
frontend/src/pages/Register.test.tsx#L19
TestingLibraryElementError: Unable to find an accessible element with the role "heading"
Here are the accessible roles:
textbox:
Name "firstName":
<input
aria-label="firstName"
aria-required="true"
autocomplete="given-name"
class="chakra-input css-0"
name="firstName"
required=""
type="text"
value=""
/>
Name "lastName":
<input
aria-label="lastName"
aria-required="true"
autocomplete="family-name"
class="chakra-input css-0"
name="lastName"
required=""
type="text"
value=""
/>
Name "email":
<input
aria-describedby="field-:r0:-feedback"
aria-invalid="true"
aria-label="email"
aria-required="true"
autocomplete="email"
class="chakra-input css-0"
id="field-:r0:"
name="email"
required=""
type="email"
value=""
/>
--------------------------------------------------
group:
Name "":
<div
class="chakra-form-control css-0"
data-invalid=""
role="group"
/>
Name "":
<div
class="chakra-form-control css-19idom"
data-invalid=""
role="group"
/>
--------------------------------------------------
button:
Name "Register":
<button
class="chakra-button css-uxt1e8"
type="submit"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="css-0"
>
Register
</div>
<div
class="css-1i46bf8"
>
<form>
<label
class="chakra-form__label css-uvho5g"
for="firstName"
>
First Name:
</label>
<input
aria-label="firstName"
aria-required="true"
autocomplete="given-name"
class="chakra-input css-0"
name="firstName"
required=""
type="text"
value=""
/>
<label
class="chakra-form__label css-uvho5g"
for="lastName"
>
Last Name:
</label>
<input
aria-label="lastName"
aria-required="true"
autocomplete="family-name"
class="chakra-input css-0"
name="lastName"
required=""
type="text"
value=""
/>
<div
class="chakra-form-control css-0"
data-invalid=""
role="group"
>
<label
class="chakra-form__label css-uvho5g"
data-invalid=""
for="email"
id="field-:r0:-label"
>
Email:
</label>
<input
aria-describedby="field-:r0:-feedback"
aria-invalid="true"
aria-label="email"
aria-required="true"
autocomplete="email"
class="chakra-input css-0"
id="field-:r0:"
name="email"
required=""
type="email"
value=""
/>
<div
aria-live="polite"
class="chakra-form__error-message css-ttob5j"
id="field-:r0:-feedback"
>
Please, enter a valid email!
</div>
</div>
<div
class="chakra-form-control css-19idom"
data-invalid=""
role="group"
>
<label
class="chakra-form__label css-uvho5g"
data-invalid=""
for="password"
id="field-:r1:-label"
>
Password:
</label>
<input
aria-describedby="field-:r1:-feedback"
aria-invalid="true"
aria-label="pass"
class="chakra-input css-0"
id="field-:r1:"
name="password"
type="password"
value=""
/>
<div
aria-live="polite"
class="chakra-form__error-message css-ttob5j"
id="field-:r1:-feedback"
>
must be at least 8 characters long
</div>
<div
aria-live="polite"
class="chakra-form__
|
|
src/pages/Register.test.tsx > Register component > has initial password errors if nothing is added as password:
frontend/src/pages/Register.test.tsx#L29
TestingLibraryElementError: Unable to find a label with the text of: passworderrors
Ignored nodes: comments, script, style
<body>
<div>
<div
class="css-0"
>
Register
</div>
<div
class="css-1i46bf8"
>
<form>
<label
class="chakra-form__label css-uvho5g"
for="firstName"
>
First Name:
</label>
<input
aria-label="firstName"
aria-required="true"
autocomplete="given-name"
class="chakra-input css-0"
name="firstName"
required=""
type="text"
value=""
/>
<label
class="chakra-form__label css-uvho5g"
for="lastName"
>
Last Name:
</label>
<input
aria-label="lastName"
aria-required="true"
autocomplete="family-name"
class="chakra-input css-0"
name="lastName"
required=""
type="text"
value=""
/>
<div
class="chakra-form-control css-0"
data-invalid=""
role="group"
>
<label
class="chakra-form__label css-uvho5g"
data-invalid=""
for="email"
id="field-:r2:-label"
>
Email:
</label>
<input
aria-describedby="field-:r2:-feedback"
aria-invalid="true"
aria-label="email"
aria-required="true"
autocomplete="email"
class="chakra-input css-0"
id="field-:r2:"
name="email"
required=""
type="email"
value=""
/>
<div
aria-live="polite"
class="chakra-form__error-message css-ttob5j"
id="field-:r2:-feedback"
>
Please, enter a valid email!
</div>
</div>
<div
class="chakra-form-control css-19idom"
data-invalid=""
role="group"
>
<label
class="chakra-form__label css-uvho5g"
data-invalid=""
for="password"
id="field-:r3:-label"
>
Password:
</label>
<input
aria-describedby="field-:r3:-feedback"
aria-invalid="true"
aria-label="pass"
class="chakra-input css-0"
id="field-:r3:"
name="password"
type="password"
value=""
/>
<div
aria-live="polite"
class="chakra-form__error-message css-ttob5j"
id="field-:r3:-feedback"
>
must be at least 8 characters long
</div>
<div
aria-live="polite"
class="chakra-form__error-message css-ttob5j"
id="field-:r3:-feedback"
>
must contain at least one digit
</div>
<div
aria-live="polite"
class="chakra-form__error-message css-ttob5j"
id="field-:r3:-feedback"
>
must contain at least one uppercase letter
</div>
<div
aria-live="polite"
class="chakra-form__error-message css-ttob5j"
id="field-:r3:-feedback"
>
must contain at least one lowercase letter
</div>
</div>
<button
class="chakra-button css-uxt1e8"
type="submit"
>
Register
</button>
</form>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ getAllByLabelText node_modules/@testing-library/dom/dist/query-helpers.js:109:15
❯ src/pages/Register.test.tsx:29:39
|
|
build
Process completed with exit code 1.
|