antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-03-01 12:44:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix tests

Browse Source
This commit is contained in:
Ulf Gebhardt 2025-05-28 15:48:27 +02:00
parent 220a465a52
commit aaf25e0fa5
Signed by: ulfgebhardt
GPG Key ID: DA6B843E748679C9
4 changed files with 545 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -39,6 +39,7 @@
"@tailwindcss/postcss": "^4.0.14",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^14.6.1",
"@types/geojson": "^7946.0.14",
"@types/leaflet": "^1.7.11",
"@types/leaflet.markercluster": "^1.5.5",
@ -2344,6 +2345,20 @@
}
}
},
"node_modules/@testing-library/user-event": {
"version": "14.6.1",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
"integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12",
"npm": ">=6"
},
"peerDependencies": {
"@testing-library/dom": ">=7.21.4"
}
},
"node_modules/@trysound/sax": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",

1
package.json
View File

@ -42,6 +42,7 @@
"@tailwindcss/postcss": "^4.0.14",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^14.6.1",
"@types/geojson": "^7946.0.14",
"@types/leaflet": "^1.7.11",
"@types/leaflet.markercluster": "^1.5.5",

12
src/Components/Input/TextAreaInput.spec.tsx
View File

@ -1,4 +1,5 @@
import { render, screen, fireEvent } from '@testing-library/react'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { TextAreaInput } from './TextAreaInput'
@ -18,9 +19,12 @@ describe('<TextAreaInput />', () => {
})
describe('handleChange', () => {
it('calls updateFormValue with new value', () => {
fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
expect(updateFormValue).toBeCalledWith('test')
it('calls updateFormValue with new value', async () => {
// fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
// expect(updateFormValue).toBeCalledWith('test')
const editor = await screen.findByRole('textbox')
await userEvent.type(editor, 'test text')
expect(screen.getByText('test text')).toBeDefined()
})
})

533
src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
<div
class="tw:form-control tw:w-full "
class="tw:form-control "
>
<label
class="tw:label"
@ -11,24 +11,533 @@ exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
class="tw:label-text tw:text-base-content "
>
My Title
(this field is required)
</span>
</label>
<textarea
class="tw:textarea tw:textarea-bordered tw:w-full tw:leading-5 "
placeholder=""
required=""
/>
<div
class=""
id="simplemde-editor-3-wrapper"
>
<textarea
id="simplemde-editor-3"
placeholder=""
required=""
style="display: none;"
/>
<div
class="EasyMDEContainer"
role="application"
>
<div
class="editor-toolbar"
role="toolbar"
>
<button
aria-label="Bold"
class="bold"
title="Bold (Ctrl-B)"
type="button"
>
<i
class="fa fa-bold"
/>
</button>
<button
aria-label="Italic"
class="italic"
title="Italic (Ctrl-I)"
type="button"
>
<i
class="fa fa-italic"
/>
</button>
<button
aria-label="Heading"
class="heading"
title="Heading (Ctrl-H)"
type="button"
>
<i
class="fa fa-header fa-heading"
/>
</button>
<i
class="separator"
>
|
</i>
<button
aria-label="Quote"
class="quote"
title="Quote (Ctrl-')"
type="button"
>
<i
class="fa fa-quote-left"
/>
</button>
<button
aria-label="Generic List"
class="unordered-list"
title="Generic List (Ctrl-L)"
type="button"
>
<i
class="fa fa-list-ul"
/>
</button>
<button
aria-label="Numbered List"
class="ordered-list"
title="Numbered List (Ctrl-Alt-L)"
type="button"
>
<i
class="fa fa-list-ol"
/>
</button>
<i
class="separator"
>
|
</i>
<button
aria-label="Create Link"
class="link"
title="Create Link (Ctrl-K)"
type="button"
>
<i
class="fa fa-link"
/>
</button>
<button
aria-label="Insert Image"
class="image"
title="Insert Image (Ctrl-Alt-I)"
type="button"
>
<i
class="fa fa-image"
/>
</button>
<i
class="separator"
>
|
</i>
<button
aria-label="Toggle Preview"
class="preview no-disable"
title="Toggle Preview (Ctrl-P)"
type="button"
>
<i
class="fa fa-eye"
/>
</button>
<button
aria-label="Toggle Side by Side"
class="side-by-side no-disable no-mobile"
title="Toggle Side by Side (F9)"
type="button"
>
<i
class="fa fa-columns"
/>
</button>
<button
aria-label="Toggle Fullscreen"
class="fullscreen no-disable no-mobile"
title="Toggle Fullscreen (F11)"
type="button"
>
<i
class="fa fa-arrows-alt"
/>
</button>
<i
class="separator"
>
|
</i>
<button
aria-label="Markdown Guide"
class="guide no-disable"
title="Markdown Guide"
type="button"
>
<i
class="fa fa-question-circle"
/>
</button>
</div>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
translate="no"
>
<div
style="overflow: hidden; position: relative; width: 3px; height: 0px;"
>
<textarea
autocapitalize="off"
autocorrect="off"
spellcheck="true"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline-color: none; outline-style: none; outline-width: initial;"
/>
</div>
<div
class="CodeMirror-vscrollbar"
cm-not-content="true"
>
<div
style="min-width: 1px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
>
<div
style="height: 100%; min-height: 1px;"
/>
</div>
<div
class="CodeMirror-scrollbar-filler"
cm-not-content="true"
/>
<div
class="CodeMirror-gutter-filler"
cm-not-content="true"
/>
<div
class="CodeMirror-scroll"
style="min-height: 150px;"
tabindex="-1"
>
<div
class="CodeMirror-sizer"
style="margin-left: 0px;"
>
<div
style="position: relative;"
>
<div
class="CodeMirror-lines"
role="presentation"
>
<div
role="presentation"
style="position: relative; outline-color: none; outline-style: none; outline-width: initial;"
>
<div
class="CodeMirror-measure"
>
<pre
class="CodeMirror-line-like"
>
<span>
xxxxxxxxxx
</span>
</pre>
</div>
<div
class="CodeMirror-measure"
/>
<div
style="position: relative; z-index: 1;"
/>
<div
class="CodeMirror-cursors"
/>
<div
class="CodeMirror-code"
role="presentation"
/>
</div>
</div>
</div>
</div>
<div
style="position: absolute; height: 50px; width: 1px;"
/>
<div
class="CodeMirror-gutters"
style="display: none;"
/>
</div>
</div>
<div
class="editor-preview-side editor-preview"
/>
</div>
</div>
</div>
`;
exports[`<TextAreaInput /> > renders properly 1`] = `
<div
class="tw:form-control tw:w-full "
class="tw:form-control "
>
<textarea
class="tw:textarea tw:textarea-bordered tw:w-full tw:leading-5 "
placeholder=""
required=""
/>
<div
class=""
id="simplemde-editor-1-wrapper"
>
<textarea
id="simplemde-editor-1"
placeholder=""
required=""
style="display: none;"
/>
<div
class="EasyMDEContainer"
role="application"
>
<div
class="editor-toolbar"
role="toolbar"
>
<button
aria-label="Bold"
class="bold"
title="Bold (Ctrl-B)"
type="button"
>
<i
class="fa fa-bold"
/>
</button>
<button
aria-label="Italic"
class="italic"
title="Italic (Ctrl-I)"
type="button"
>
<i
class="fa fa-italic"
/>
</button>
<button
aria-label="Heading"
class="heading"
title="Heading (Ctrl-H)"
type="button"
>
<i
class="fa fa-header fa-heading"
/>
</button>
<i
class="separator"
>
|
</i>
<button
aria-label="Quote"
class="quote"
title="Quote (Ctrl-')"
type="button"
>
<i
class="fa fa-quote-left"
/>
</button>
<button
aria-label="Generic List"
class="unordered-list"
title="Generic List (Ctrl-L)"
type="button"
>
<i
class="fa fa-list-ul"
/>
</button>
<button
aria-label="Numbered List"
class="ordered-list"
title="Numbered List (Ctrl-Alt-L)"
type="button"
>
<i
class="fa fa-list-ol"
/>
</button>
<i
class="separator"
>
|
</i>
<button
aria-label="Create Link"
class="link"
title="Create Link (Ctrl-K)"
type="button"
>
<i
class="fa fa-link"
/>
</button>
<button
aria-label="Insert Image"
class="image"
title="Insert Image (Ctrl-Alt-I)"
type="button"
>
<i
class="fa fa-image"
/>
</button>
<i
class="separator"
>
|
</i>
<button
aria-label="Toggle Preview"
class="preview no-disable"
title="Toggle Preview (Ctrl-P)"
type="button"
>
<i
class="fa fa-eye"
/>
</button>
<button
aria-label="Toggle Side by Side"
class="side-by-side no-disable no-mobile"
title="Toggle Side by Side (F9)"
type="button"
>
<i
class="fa fa-columns"
/>
</button>
<button
aria-label="Toggle Fullscreen"
class="fullscreen no-disable no-mobile"
title="Toggle Fullscreen (F11)"
type="button"
>
<i
class="fa fa-arrows-alt"
/>
</button>
<i
class="separator"
>
|
</i>
<button
aria-label="Markdown Guide"
class="guide no-disable"
title="Markdown Guide"
type="button"
>
<i
class="fa fa-question-circle"
/>
</button>
</div>
<div
class="CodeMirror cm-s-easymde CodeMirror-wrap"
translate="no"
>
<div
style="overflow: hidden; position: relative; width: 3px; height: 0px;"
>
<textarea
autocapitalize="off"
autocorrect="off"
spellcheck="true"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline-color: none; outline-style: none; outline-width: initial;"
/>
</div>
<div
class="CodeMirror-vscrollbar"
cm-not-content="true"
>
<div
style="min-width: 1px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
>
<div
style="height: 100%; min-height: 1px;"
/>
</div>
<div
class="CodeMirror-scrollbar-filler"
cm-not-content="true"
/>
<div
class="CodeMirror-gutter-filler"
cm-not-content="true"
/>
<div
class="CodeMirror-scroll"
style="min-height: 150px;"
tabindex="-1"
>
<div
class="CodeMirror-sizer"
style="margin-left: 0px;"
>
<div
style="position: relative;"
>
<div
class="CodeMirror-lines"
role="presentation"
>
<div
role="presentation"
style="position: relative; outline-color: none; outline-style: none; outline-width: initial;"
>
<div
class="CodeMirror-measure"
>
<pre
class="CodeMirror-line-like"
>
<span>
xxxxxxxxxx
</span>
</pre>
</div>
<div
class="CodeMirror-measure"
/>
<div
style="position: relative; z-index: 1;"
/>
<div
class="CodeMirror-cursors"
/>
<div
class="CodeMirror-code"
role="presentation"
/>
</div>
</div>
</div>
</div>
<div
style="position: absolute; height: 50px; width: 1px;"
/>
<div
class="CodeMirror-gutters"
style="display: none;"
/>
</div>
</div>
<div
class="editor-preview-side editor-preview"
/>
</div>
</div>
</div>
`;