Chore/add component library #126
Annotations
6 errors
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-ycmkp3"
href="/"
/>
Name "Login":
<a
class="chakra-link css-1kre11v"
href="/login"
/>
Name "Register":
<a
class="chakra-link css-1kre11v"
href="/register"
/>
--------------------------------------------------
button:
Name "":
<button
class="chakra-button css-4xx2wk"
type="button"
/>
--------------------------------------------------
heading:
Name "Home":
<h1 />
--------------------------------------------------
paragraph:
Name "":
<p />
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="css-11h9hc7"
>
<div
class="css-1e8m7dk"
>
<a
class="chakra-link css-ycmkp3"
href="/"
>
Home
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-1kre11v"
href="/login"
>
Login
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-1kre11v"
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-1w44gew"
>
<h1>
Home
</h1>
<p>
Welcome to Gilmore Devs Pet Clinic!
</p>
</div>
<div
class="css-k008qs"
>
Footer
</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:24:16
|
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-ycmkp3"
href="/"
/>
Name "Login":
<a
class="chakra-link css-1kre11v"
href="/login"
/>
Name "Register":
<a
class="chakra-link css-1kre11v"
href="/register"
/>
--------------------------------------------------
button:
Name "":
<button
class="chakra-button css-4xx2wk"
type="button"
/>
--------------------------------------------------
heading:
Name "Home":
<h1 />
--------------------------------------------------
paragraph:
Name "":
<p />
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="css-11h9hc7"
>
<div
class="css-1e8m7dk"
>
<a
class="chakra-link css-ycmkp3"
href="/"
>
Home
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-1kre11v"
href="/login"
>
Login
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-1kre11v"
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-1w44gew"
>
<h1>
Home
</h1>
<p>
Welcome to Gilmore Devs Pet Clinic!
</p>
</div>
<div
class="css-k008qs"
>
Footer
</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:31:13
❯ Proxy.act node_modules/react/cjs/react.development.js:2512:16
❯ src/App.test.tsx:30:9
|
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-ycmkp3"
href="/"
/>
Name "Login":
<a
class="chakra-link css-1kre11v"
href="/login"
/>
Name "Register":
<a
class="chakra-link css-1kre11v"
href="/register"
/>
--------------------------------------------------
button:
Name "":
<button
class="chakra-button css-4xx2wk"
type="button"
/>
--------------------------------------------------
heading:
Name "Home":
<h1 />
--------------------------------------------------
paragraph:
Name "":
<p />
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="css-11h9hc7"
>
<div
class="css-1e8m7dk"
>
<a
class="chakra-link css-ycmkp3"
href="/"
>
Home
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-1kre11v"
href="/login"
>
Login
</a>
<div
class="css-17xejub"
/>
<a
class="chakra-link css-1kre11v"
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-1w44gew"
>
<h1>
Home
</h1>
<p>
Welcome to Gilmore Devs Pet Clinic!
</p>
</div>
<div
class="css-k008qs"
>
Footer
</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:43:16
|
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 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>
<h1>
Register
</h1>
<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-0"
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-4xx2wk"
type="submit"
>
Register
</button>
</form>
</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.
|