Files
jobtrackingapp/docs/ui-modernisation/evidence/career/frontend/a3-letter-tablet-red.log
T

516 lines
19 KiB
Plaintext

> job-tracker-ui@0.1.0 test
> jest --runInBand --watch=false --runTestsByPath src/application-assets.test.tsx --testNamePattern=letter workspace at --json --outputFile=../docs/ui-modernisation/a3-letter-tablet-red.json
FAIL src/application-assets.test.tsx (6.949 s)
● letter workspace at 768px keeps one editor and its preview available without writing
TestingLibraryElementError: Unable to find an accessible element with the role "region" and name "Letter text preview"
Here are the accessible roles:
region:
Name "Cover Letter":
<section
aria-labelledby="_r_3_"
class="MuiBox-root css-rw0fp9"
/>
Name "AI writing assistant":
<section
aria-labelledby="_r_5_"
class="MuiBox-root css-rw0fp9"
/>
Name "Version history":
<section
aria-labelledby="_r_6_"
class="MuiBox-root css-rw0fp9"
/>
--------------------------------------------------
banner:
Name "":
<header
class="MuiBox-root css-163u82n"
/>
Name "":
<header
class="MuiBox-root css-163u82n"
/>
Name "":
<header
class="MuiBox-root css-163u82n"
/>
--------------------------------------------------
heading:
Name "Cover Letter":
<h3
class="MuiTypography-root MuiTypography-sectionTitle css-uf4832-MuiTypography-root"
id="_r_3_"
/>
Name "AI writing assistant":
<h3
class="MuiTypography-root MuiTypography-sectionTitle css-uf4832-MuiTypography-root"
id="_r_5_"
/>
Name "Version history":
<h3
class="MuiTypography-root MuiTypography-sectionTitle css-uf4832-MuiTypography-root"
id="_r_6_"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="MuiTypography-root MuiTypography-pageDescription css-1sqgc3a-MuiTypography-root"
/>
Name "":
<p
class="MuiTypography-root MuiTypography-pageDescription css-1sqgc3a-MuiTypography-root"
/>
Name "":
<p
class="MuiTypography-root MuiTypography-body2 css-ciq0df-MuiTypography-root"
/>
Name "":
<p
class="MuiTypography-root MuiTypography-body2 css-ciq0df-MuiTypography-root"
/>
--------------------------------------------------
group:
Name "Cover Letter":
<div
aria-label="Cover Letter"
class="MuiBox-root css-31l7gp"
role="group"
tabindex="-1"
/>
Name "AI writing assistant":
<div
aria-label="AI writing assistant"
class="MuiBox-root css-31l7gp"
role="group"
tabindex="-1"
/>
Name "Version history":
<div
aria-label="Version history"
class="MuiBox-root css-31l7gp"
role="group"
tabindex="-1"
/>
--------------------------------------------------
status:
Name "":
<span
aria-atomic="true"
aria-live="polite"
class="MuiBox-root css-ty8jgw"
role="status"
/>
Name "":
<span
aria-atomic="true"
aria-live="polite"
class="MuiBox-root css-ty8jgw"
role="status"
/>
Name "":
<span
aria-atomic="true"
aria-live="polite"
class="MuiBox-root css-ty8jgw"
role="status"
/>
--------------------------------------------------
tablist:
Name "Letter workspace":
<div
aria-label="Letter workspace"
class="MuiTabs-list MuiTabs-flexContainer css-hzcega-MuiTabs-list"
role="tablist"
/>
--------------------------------------------------
tab:
Name "Write":
<button
aria-controls="_r_2_-write-panel"
aria-selected="true"
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth Mui-selected css-1yf2fw4-MuiButtonBase-root-MuiTab-root"
id="_r_2_-write"
role="tab"
tabindex="0"
type="button"
/>
Name "Preview":
<button
aria-controls="_r_2_-preview-panel"
aria-selected="false"
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-1yf2fw4-MuiButtonBase-root-MuiTab-root"
id="_r_2_-preview"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "Write":
<div
aria-labelledby="_r_2_-write"
class="MuiBox-root css-31l7gp"
id="_r_2_-write-panel"
role="tabpanel"
/>
--------------------------------------------------
button:
Name "Bold":
<button
aria-label="Bold"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-155wbr6-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
/>
Name "Italic":
<button
aria-label="Italic"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-155wbr6-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
/>
Name "Underline":
<button
aria-label="Underline"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-155wbr6-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
/>
Name "Link":
<button
aria-label="Link"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-155wbr6-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
/>
Name "Improve writing":
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary css-3defe9-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
/>
Name "Suggest content":
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary css-3defe9-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
/>
Name "Grammar check":
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary css-3defe9-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
/>
Name "Shorter":
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary css-3defe9-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
/>
Name "Save":
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-83fk99-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
/>
Name "Discard changes":
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1dn15bh-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
/>
Name "Start from template":
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1dn15bh-MuiButtonBase-root-MuiButton-root"
disabled=""
tabindex="-1"
type="button"
/>
Name "Generate":
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-71rffq-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
/>
Name "Restore version 1":
<button
aria-label="Restore version 1"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-155wbr6-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
/>
--------------------------------------------------
textbox:
Name "Cover letter":
<textarea
aria-invalid="false"
aria-label="Cover letter"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiInputBase-inputSizeSmall css-tkk7tv-MuiInputBase-input-MuiOutlinedInput-input"
id="_r_g_"
placeholder="Write it yourself, start from the template, or generate a tailored draft."
style="height: 0px; overflow: hidden;"
/>
Name "Additional instructions":
<textarea
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1cuox7w-MuiInputBase-input-MuiOutlinedInput-input"
id="_r_r_"
placeholder="For example: Focus on my .NET experience and keep it concise."
style="height: 0px; overflow: hidden;"
/>
--------------------------------------------------
alert:
Name "":
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorSuccess MuiAlert-outlinedSuccess MuiAlert-outlined css-1inriw1-MuiPaper-root-MuiAlert-root"
role="alert"
style="--Paper-shadow: none;"
/>
--------------------------------------------------
combobox:
Name "Action":
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="_r_4_-coverAiAction"
class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-19marfc-MuiNativeSelect-root-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
role="combobox"
tabindex="0"
/>
Name "Tone":
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="_r_4_-coverAiTone"
class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-19marfc-MuiNativeSelect-root-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
role="combobox"
tabindex="0"
/>
Name "Document language":
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="_r_4_-coverAiDocumentLanguage"
class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-19marfc-MuiNativeSelect-root-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
role="combobox"
tabindex="0"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="MuiStack-root css-1sazv7p-MuiStack-root"
>
<section
aria-labelledby="_r_3_"
class="MuiBox-root css-rw0fp9"
>
<header
class="MuiBox-root css-163u82n"
>
<div
class="MuiBox-root css-14m33b5"
>
<h3
class="MuiTypography-root MuiTypography-sectionTitle css-uf4832-MuiTypography-root"
id="_r_3_"
>
Cover Letter
</h3>
<p
class="MuiTypography-root MuiTypography-pageDescription css-1sqgc3a-MuiTypography-root"
>
Every save creates a version, so manually edited text is never overwritten without review.
</p>
</div>
</header>
<div
class="MuiBox-root css-31l7gp"
>
<div
aria-label="Cover Letter"
class="MuiBox-root css-31l7gp"
role="group"
tabindex="-1"
>
<span
aria-atomic="true"
aria-live="polite"
class="MuiBox-root css-ty8jgw"
role="status"
>
Content loaded.
</span>
<div
class="MuiStack-root css-1sazv7p-MuiStack-root"
>
<div
class="MuiTabs-root css-jhczcq-MuiTabs-root"
>
<div
class="MuiTabs-scroller MuiTabs-fixed css-s2t35c-MuiTabs-scroller"
style="overflow: hidden; margin-bottom: 0px;"
>
<div
aria-label="Letter workspace"
class="MuiTabs-list MuiTabs-flexContainer css-hzcega-MuiTabs-list"
role="tablist"
>
<button
aria-controls="_r_2_-write-panel"
aria-selected="true"
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth Mui-selected css-1yf2fw4-MuiButtonBase-root-MuiTab-root"
id="_r_2_-write"
role="tab"
tabindex="0"
type="button"
>
Write
</button>
<button
aria-controls="_r_2_-preview-panel"
aria-selected="false"
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth css-1yf2fw4-MuiButtonBase-root-MuiTab-root"
id="_r_2_-preview"
role="tab"
tabindex="-1"
type="button"
>
Preview
</button>
</div>
<span
class="MuiTabs-indicator css-1qltlow-MuiTabs-indicator"
style="left: 0px; width: 0px;"
/>
</div>
</div>
<div
class="MuiBox-root css-rwoo4c"
>
<div
aria-labelledby="_r_2_-write"
class="MuiBox-root css-31l7gp"
id="_r_2_-write-panel"
role="tabpanel"
>
<div
class="MuiBox-root css-0"
>
<div
class="MuiBox-root css-fn27yc"
>
<span
class=""
data-mui-internal-clone-element="true"
style="display: inline-flex;"
title="Bold"
>
<button
aria-label="Bold"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-155wbr6-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1ckov0h-MuiSvgIcon-root"
data-testid="FormatBoldIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42M10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5"
/>
</svg>
</button>
</span>
<span
class=""
data-mui-internal-clone-element="true"
...
977 | const editor = await screen.findByRole("textbox", { name: copy("jobDetailsCoverLetter") });
978 | fireEvent.change(editor, { target: { value: "Live desktop **draft**" } });
> 979 | expect(screen.getByRole("region", { name: copy("assetsLetterTextPreview") })).toHaveTextContent("Live desktop draft");
| ^
980 | expect(editor).toBeVisible();
981 | expect(screen.getAllByRole("textbox", { name: copy("jobDetailsCoverLetter") })).toHaveLength(1);
982 | expect(screen.queryByRole("tablist", { name: copy("assetsLetterWorkspace") })).not.toBeInTheDocument();
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 getByRole (src/application-assets.test.tsx:979:19)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 52 skipped, 2 passed, 55 total
Snapshots: 0 total
Time: 8.628 s, estimated 26 s
Ran all test suites within paths "src/application-assets.test.tsx".
Test results written to: ..\docs\ui-modernisation\a3-letter-tablet-red.json