S
SolidJSโ€ข13mo ago
oneiro

Access native html dialogs show/close methods in clickHandler

Hey folks, I am currently using native html dialogs inside my app and am accessing their show/close methods by using them from window (e.g. window.myModal.show()). However this is pretty error prone and also doesn't play well with testing. Is there a recommended way on how to use these without accessing the window? I thought of using refs but apparently these refs are not set, when my handler functions are created, so they stay undefined. ๐Ÿค” Ideally I would export show/close functions from my component file that could be used everywhere througout the app. Any idea what would be a good way to solve this?
11 Replies
oneiro
oneiroโ€ข13mo ago
ah, It seems to work if I just use as signal setter inside the ref and access the signal. Is this the recommended approach, or does this have any downsides, I am not aware of, yet? for example:
const [myRef, setMyRef] = createSignal<HTMLDialogElement>()

export const showMyDialog = () => {
myRef()?.show()
}

function MyDialog() {
return (
<dialog ref={setMyRef}>Something</dialog>
)
}
const [myRef, setMyRef] = createSignal<HTMLDialogElement>()

export const showMyDialog = () => {
myRef()?.show()
}

function MyDialog() {
return (
<dialog ref={setMyRef}>Something</dialog>
)
}
hm, this still doesn't seem to play well with tests ๐Ÿค”
Alex Lohr
Alex Lohrโ€ข13mo ago
I guess jsdom does not support the dialog tag's extensions.
oneiro
oneiroโ€ข13mo ago
ah damn ๐Ÿ˜ฆ
Alex Lohr
Alex Lohrโ€ข13mo ago
It should be possible to patch this on the prototype. I'm currently not on my PC, so I cannot easily test it myself, though.
oneiro
oneiroโ€ข13mo ago
ah, thanks. Hm - how would I mock the functionality attached to buttons on a dialog, though ๐Ÿค”
Alex Lohr
Alex Lohrโ€ข13mo ago
Give me a moment...
oneiro
oneiroโ€ข13mo ago
(another small issue i noticed with my approach above is, that apparently refs can break on HMR-updates ๐Ÿ˜ฌ ) - so they no longer work after making changes to our codebase
Alex Lohr
Alex Lohrโ€ข13mo ago
I'm not too deep in the whole HMR stuff, so I cannot answer this one. HMR + testing is still mostly broken. You can attach a click listener to the dialog tag on calling open and remove it on close().
oneiro
oneiroโ€ข13mo ago
I still wouldn't have access to the markup inside the dialog, though, right? So I would need a different testing-lib query? Or am I mssing something?
Alex Lohr
Alex Lohrโ€ข13mo ago
You can use the event.target. at least inside the test, dialog is just another HTML element.
oneiro
oneiroโ€ข13mo ago
@lexlohr Ah nice I just realised, that it seems to be easier, than I thought. I got the following code, from this issue: https://github.com/jsdom/jsdom/issues/3294
beforeEach(() => {
resetGlobalStores()

HTMLDialogElement.prototype.show = vi.fn(function mock(this: HTMLDialogElement) {
this.open = true
})

HTMLDialogElement.prototype.showModal = vi.fn(function mock(this: HTMLDialogElement) {
this.open = true
})

HTMLDialogElement.prototype.close = vi.fn(function mock(this: HTMLDialogElement) {
this.open = false
})
})
beforeEach(() => {
resetGlobalStores()

HTMLDialogElement.prototype.show = vi.fn(function mock(this: HTMLDialogElement) {
this.open = true
})

HTMLDialogElement.prototype.showModal = vi.fn(function mock(this: HTMLDialogElement) {
this.open = true
})

HTMLDialogElement.prototype.close = vi.fn(function mock(this: HTMLDialogElement) {
this.open = false
})
})
Now the dialog will actually be shown, and can be queried with testing-library ๐Ÿ‘
GitHub
Any plans to add support for the HTMLDialogElement? ยท Issue #3294 ยท...
Basic info: Node.js version: v16.13.0 jsdom version: 18.1.0 Minimal reproduction case /** * show and showModal don't exist (jsdom + HTMLDialogElement) */ // Suite('can have state toggled...
Want results from more Discord servers?
Add your server
More Posts
Uncaught ReferenceError: createDeepSignal is not definedNot really sure what I'm doing wrong here. I definitely have SolidJS >v1.5 and I'm using a close co__vite_ssr_import_0__.default is not a function only on API endpointsI am getting an error from my api end-points when importing a third party library in my API code. I Why is storageSignal possibly null?I am having trouble understanding why TypeScript thinks that this storageSignal `theme` can be null:Is there a way to debug how callbacks are called, when firing an event with testing-library?[SOLVED]Hey, I am having a hard time testing my code and would like to find out if and how some of my eventUnderstanding Suspense in SolidStart SSRTo understand how Suspense behave in a SolidStart SSR project, I have project created using the SoliSolidStart debugging in VSCodeHow can I debug (mean put breakpoints and step over code) SolidStart project in VSCode? I am currenWhat's the best way to make a docs website?I'm building a SolidJS library and want to make a simple docs website for it. I'm hoping to leveragesolidjs/testing-library using `location` but still getting <Router /> errorHey, I am currently trying to setup on of my solid-apps with solidjs/testing-library. I want to tesAny way to get the status of a multipart/form-data file upload?I would like to be able to give the user some indication of how much of their file has completed uplregex in useMatchIs there a way to use a regex in useMatch? I would like to match `/book/2` ... but not just `/book`