cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
Files
4ff80391f40464f2556eff4505c6c7cecaaa5fa9
jobtrackingapp/docs/i18n/evidence/date-widgets/RED.txt
T

599 lines
23 KiB
Plaintext
Raw Blame History

> job-tracker-ui@0.1.0 test
> jest --runInBand date-picker-localisation.test.tsx
FAIL src/date-picker-localisation.test.tsx
● Bokmål localizes date sections, calendar controls and displayed format
TestingLibraryElementError: Unable to find an accessible element with the role "spinbutton" and name "Dag"
Here are the accessible roles:
textbox:
Name "Unsaved title":
<input
aria-label="Unsaved title"
value="Teacher draft"
/>
--------------------------------------------------
button:
Name "Bokmål":
<button />
Name "English":
<button />
Name "Choose date, selected date is Nov 23, 2026":
<button
aria-label="Choose date, selected date is Nov 23, 2026"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1ysp02-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
/>
--------------------------------------------------
group:
Name "Deadline":
<div
aria-invalid="false"
aria-labelledby="_r_0_-label"
class="MuiPickersInputBase-root MuiPickersOutlinedInput-root MuiPickersInputBase-colorPrimary MuiPickersInputBase-adornedEnd css-189if4m-MuiPickersInputBase-root-MuiPickersOutlinedInput-root"
role="group"
/>
--------------------------------------------------
spinbutton:
Name "Month":
<span
aria-disabled="false"
aria-label="Month"
aria-readonly="false"
aria-valuemax="12"
aria-valuemin="1"
aria-valuenow="11"
aria-valuetext="November"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="0"
/>
Name "Day":
<span
aria-disabled="false"
aria-label="Day"
aria-readonly="false"
aria-valuemax="30"
aria-valuemin="1"
aria-valuenow="23"
aria-valuetext="23rd"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="-1"
/>
Name "Year":
<span
aria-disabled="false"
aria-label="Year"
aria-readonly="false"
aria-valuemax="9999"
aria-valuemin="0"
aria-valuenow="2026"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="-1"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<input
aria-label="Unsaved title"
value="Teacher draft"
/>
<button>
Bokmål
</button>
<button>
English
</button>
<div
class="MuiFormControl-root MuiPickersTextField-root css-eqc3kq-MuiFormControl-root-MuiPickersTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-18yassc-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
for="_r_0_"
id="_r_0_-label"
>
Deadline
</label>
<div
aria-invalid="false"
aria-labelledby="_r_0_-label"
class="MuiPickersInputBase-root MuiPickersOutlinedInput-root MuiPickersInputBase-colorPrimary MuiPickersInputBase-adornedEnd css-189if4m-MuiPickersInputBase-root-MuiPickersOutlinedInput-root"
role="group"
>
<div
class="MuiPickersSectionList-root MuiPickersInputBase-sectionsContainer css-w175m5-MuiPickersSectionList-root-MuiPickersInputBase-sectionsContainer-MuiPickersOutlinedInput-sectionsContainer"
contenteditable="false"
tabindex="0"
>
<span
class="MuiPickersSectionList-section css-joz0rk-MuiPickersSectionList-section-MuiPickersInputBase-section"
data-sectionindex="0"
>
<span
class="MuiPickersInputBase-sectionBefore css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
/>
<span
aria-disabled="false"
aria-label="Month"
aria-readonly="false"
aria-valuemax="12"
aria-valuemin="1"
aria-valuenow="11"
aria-valuetext="November"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="0"
>
11
</span>
<span
class="MuiPickersInputBase-sectionAfter css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
>
/
</span>
</span>
<span
class="MuiPickersSectionList-section css-joz0rk-MuiPickersSectionList-section-MuiPickersInputBase-section"
data-sectionindex="1"
>
<span
class="MuiPickersInputBase-sectionBefore css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
/>
<span
aria-disabled="false"
aria-label="Day"
aria-readonly="false"
aria-valuemax="30"
aria-valuemin="1"
aria-valuenow="23"
aria-valuetext="23rd"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="-1"
>
23
</span>
<span
class="MuiPickersInputBase-sectionAfter css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
>
/
</span>
</span>
<span
class="MuiPickersSectionList-section css-joz0rk-MuiPickersSectionList-section-MuiPickersInputBase-section"
data-sectionindex="2"
>
<span
class="MuiPickersInputBase-sectionBefore css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
/>
<span
aria-disabled="false"
aria-label="Year"
aria-readonly="false"
aria-valuemax="9999"
aria-valuemin="0"
aria-valuenow="2026"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="-1"
>
2026
</span>
<span
class="MuiPickersInputBase-sectionAfter css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
/>
</span>
</div>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-elo8k2-MuiInputAdornment-root"
>
<button
aria-label="Choose date, selected date is Nov 23, 2026"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1ysp02-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
data-testid="CalendarIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
/>
</svg>
</button>
</div>
<fieldset
aria-hidden="true"
class="MuiPickersOutlinedInput-notchedOutline css-lqwr9g-MuiPickersOutlinedInput-notchedOutline"
>
<legend
class="css-kg5swy"
>
<span
class="css-w48gsk"
>
Deadline
</span>
</legend>
</fieldset>
<input
aria-hidden="true"
class="MuiPickersInputBase-input MuiPickersOutlinedInput-input css-31lcvl-MuiPickersInputBase-input"
id="_r_0_"
tabindex="-1"
value="11/23/2026"
/>
</div>
</div>
</div>
</body>
22 | localStorage.setItem("uiLanguage", "nb");
23 | render(<I18nProvider><DateLocalizationProvider><Form /></DateLocalizationProvider></I18nProvider>);
> 24 | expect(screen.getByRole("spinbutton", { name: "Dag", exact: true })).toHaveTextContent("23");
| ^
25 | expect(screen.getByRole("spinbutton", { name: "Måned", exact: true })).toHaveTextContent("11");
26 | expect(screen.getByRole("spinbutton", { name: "År", exact: true })).toHaveTextContent("2026");
27 | expect(screen.getByRole("button", { name: /^Velg dato, valgt dato er/ })).toBeVisible();
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at node_modules/@testing-library/dom/dist/query-helpers.js:95:19
at Object.getByRole (src/date-picker-localisation.test.tsx:24:17)
● live UI language changes retain the selected day and unsaved form draft
TestingLibraryElementError: Unable to find an accessible element with the role "spinbutton" and name "Dag"
Here are the accessible roles:
textbox:
Name "Unsaved title":
<input
aria-label="Unsaved title"
value="Teacher draft"
/>
--------------------------------------------------
button:
Name "Bokmål":
<button />
Name "English":
<button />
Name "Choose date, selected date is Nov 23, 2026":
<button
aria-label="Choose date, selected date is Nov 23, 2026"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1ysp02-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
/>
--------------------------------------------------
group:
Name "Deadline":
<div
aria-invalid="false"
aria-labelledby="_r_3_-label"
class="MuiPickersInputBase-root MuiPickersOutlinedInput-root MuiPickersInputBase-colorPrimary MuiPickersInputBase-adornedEnd css-189if4m-MuiPickersInputBase-root-MuiPickersOutlinedInput-root"
role="group"
/>
--------------------------------------------------
spinbutton:
Name "Month":
<span
aria-disabled="false"
aria-label="Month"
aria-readonly="false"
aria-valuemax="12"
aria-valuemin="1"
aria-valuenow="11"
aria-valuetext="November"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="0"
/>
Name "Day":
<span
aria-disabled="false"
aria-label="Day"
aria-readonly="false"
aria-valuemax="30"
aria-valuemin="1"
aria-valuenow="23"
aria-valuetext="23rd"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="-1"
/>
Name "Year":
<span
aria-disabled="false"
aria-label="Year"
aria-readonly="false"
aria-valuemax="9999"
aria-valuemin="0"
aria-valuenow="2026"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="-1"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<input
aria-label="Unsaved title"
value="Teacher draft"
/>
<button>
Bokmål
</button>
<button>
English
</button>
<div
class="MuiFormControl-root MuiPickersTextField-root css-eqc3kq-MuiFormControl-root-MuiPickersTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-18yassc-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
for="_r_3_"
id="_r_3_-label"
>
Deadline
</label>
<div
aria-invalid="false"
aria-labelledby="_r_3_-label"
class="MuiPickersInputBase-root MuiPickersOutlinedInput-root MuiPickersInputBase-colorPrimary MuiPickersInputBase-adornedEnd css-189if4m-MuiPickersInputBase-root-MuiPickersOutlinedInput-root"
role="group"
>
<div
class="MuiPickersSectionList-root MuiPickersInputBase-sectionsContainer css-w175m5-MuiPickersSectionList-root-MuiPickersInputBase-sectionsContainer-MuiPickersOutlinedInput-sectionsContainer"
contenteditable="false"
tabindex="0"
>
<span
class="MuiPickersSectionList-section css-joz0rk-MuiPickersSectionList-section-MuiPickersInputBase-section"
data-sectionindex="0"
>
<span
class="MuiPickersInputBase-sectionBefore css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
/>
<span
aria-disabled="false"
aria-label="Month"
aria-readonly="false"
aria-valuemax="12"
aria-valuemin="1"
aria-valuenow="11"
aria-valuetext="November"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="0"
>
11
</span>
<span
class="MuiPickersInputBase-sectionAfter css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
>
/
</span>
</span>
<span
class="MuiPickersSectionList-section css-joz0rk-MuiPickersSectionList-section-MuiPickersInputBase-section"
data-sectionindex="1"
>
<span
class="MuiPickersInputBase-sectionBefore css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
/>
<span
aria-disabled="false"
aria-label="Day"
aria-readonly="false"
aria-valuemax="30"
aria-valuemin="1"
aria-valuenow="23"
aria-valuetext="23rd"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="-1"
>
23
</span>
<span
class="MuiPickersInputBase-sectionAfter css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
>
/
</span>
</span>
<span
class="MuiPickersSectionList-section css-joz0rk-MuiPickersSectionList-section-MuiPickersInputBase-section"
data-sectionindex="2"
>
<span
class="MuiPickersInputBase-sectionBefore css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
/>
<span
aria-disabled="false"
aria-label="Year"
aria-readonly="false"
aria-valuemax="9999"
aria-valuemin="0"
aria-valuenow="2026"
autocapitalize="none"
autocorrect="off"
class="MuiPickersSectionList-sectionContent MuiPickersInputBase-sectionContent css-1jpopwz-MuiPickersSectionList-sectionContent-MuiPickersInputBase-sectionContent"
contenteditable="true"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
tabindex="-1"
>
2026
</span>
<span
class="MuiPickersInputBase-sectionAfter css-w1q93y-MuiPickersSectionList-sectionSeparator-MuiPickersInputBase-separator"
/>
</span>
</div>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-elo8k2-MuiInputAdornment-root"
>
<button
aria-label="Choose date, selected date is Nov 23, 2026"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1ysp02-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
data-testid="CalendarIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
/>
</svg>
</button>
</div>
<fieldset
aria-hidden="true"
class="MuiPickersOutlinedInput-notchedOutline css-lqwr9g-MuiPickersOutlinedInput-notchedOutline"
>
<legend
class="css-kg5swy"
>
<span
class="css-w48gsk"
>
Deadline
</span>
</legend>
</fieldset>
<input
aria-hidden="true"
class="MuiPickersInputBase-input MuiPickersOutlinedInput-input css-31lcvl-MuiPickersInputBase-input"
id="_r_3_"
tabindex="-1"
value="11/23/2026"
/>
</div>
</div>
</div>
</body>
35 | expect(screen.getByRole("spinbutton", { name: "Day", exact: true })).toHaveTextContent("23");
36 | fireEvent.click(screen.getByRole("button", { name: "Bokmål", exact: true }));
> 37 | expect(screen.getByRole("spinbutton", { name: "Dag", exact: true })).toHaveTextContent("23");
| ^
38 | expect(title).toHaveValue("Retain this draft");
39 | fireEvent.click(screen.getByRole("button", { name: "English", exact: true }));
40 | expect(screen.getByRole("spinbutton", { name: "Day", exact: true })).toHaveTextContent("23");
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at node_modules/@testing-library/dom/dist/query-helpers.js:95:19
at Object.getByRole (src/date-picker-localisation.test.tsx:37:17)
Test Suites: 1 failed, 1 total
Tests: 2 failed, 2 total
Snapshots: 0 total
Time: 3.687 s
Ran all test suites matching date-picker-localisation.test.tsx.
Reference in New Issue View Git Blame Copy Permalink