feature: post export modal #313
peelarAnnotations
10 errors
|
tests/ui/feedback-modal.test.tsx > FeedbackModal > includes screenshot in submission when present:
apps/app/tests/ui/feedback-modal.test.tsx#L203
TestingLibraryElementError: Unable to find a label with the text of: /What are you trying to do, and what would make dopeshot better for you/i
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
style="pointer-events: auto;"
/>
<div
aria-describedby="radix-_r_1a_"
aria-labelledby="radix-_r_19_"
class="fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-lg sm:rounded-lg w-[calc(100%-2rem)] sm:max-w-[440px] gap-0"
data-state="open"
id="radix-_r_18_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<div
class="flex flex-col space-y-1.5 text-center sm:text-left"
>
<h2
class="tracking-tight text-base font-semibold"
id="radix-_r_19_"
>
Share your feedback
</h2>
</div>
<div
class="mt-4 flex gap-3 border-l-2 border-primary bg-muted/50 py-3 pl-3 pr-4"
>
<div
class="relative inline-flex items-center justify-center overflow-hidden rounded-full border border-border/20 h-11 w-11 shrink-0"
>
<img
alt="Adrian from dopeshot"
class="h-full w-full scale-150 object-cover object-[center_15%]"
src="/me.jpg"
/>
</div>
<p
class="text-sm text-muted-foreground"
>
I'm
<a
class="font-medium text-foreground hover:text-primary"
href="https://twitter.com/gaba6ool"
rel="noopener noreferrer"
target="_blank"
>
Adrian
</a>
, building dopeshot for builders like you. Help me decide what to ship next.
</p>
</div>
<form
class="space-y-4 mt-4"
>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-message"
>
What would make dopeshot better for you?
</label>
<textarea
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] resize-none"
data-slot="textarea"
id="feedback-message"
placeholder="Share your thoughts, ideas, or issues..."
required=""
/>
</div>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-email"
>
Email
<span
class="text-muted-foreground font-norm
|
|
tests/ui/feedback-modal.test.tsx > FeedbackModal > includes email in submission when provided:
apps/app/tests/ui/feedback-modal.test.tsx#L169
TestingLibraryElementError: Unable to find a label with the text of: /What are you trying to do, and what would make dopeshot better for you/i
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
style="pointer-events: auto;"
/>
<div
aria-describedby="radix-_r_16_"
aria-labelledby="radix-_r_15_"
class="fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-lg sm:rounded-lg w-[calc(100%-2rem)] sm:max-w-[440px] gap-0"
data-state="open"
id="radix-_r_14_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<div
class="flex flex-col space-y-1.5 text-center sm:text-left"
>
<h2
class="tracking-tight text-base font-semibold"
id="radix-_r_15_"
>
Share your feedback
</h2>
</div>
<div
class="mt-4 flex gap-3 border-l-2 border-primary bg-muted/50 py-3 pl-3 pr-4"
>
<div
class="relative inline-flex items-center justify-center overflow-hidden rounded-full border border-border/20 h-11 w-11 shrink-0"
>
<img
alt="Adrian from dopeshot"
class="h-full w-full scale-150 object-cover object-[center_15%]"
src="/me.jpg"
/>
</div>
<p
class="text-sm text-muted-foreground"
>
I'm
<a
class="font-medium text-foreground hover:text-primary"
href="https://twitter.com/gaba6ool"
rel="noopener noreferrer"
target="_blank"
>
Adrian
</a>
, building dopeshot for builders like you. Help me decide what to ship next.
</p>
</div>
<form
class="space-y-4 mt-4"
>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-message"
>
What would make dopeshot better for you?
</label>
<textarea
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] resize-none"
data-slot="textarea"
id="feedback-message"
placeholder="Share your thoughts, ideas, or issues..."
required=""
/>
</div>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-email"
>
Email
<span
class="text-muted-foreground font-norm
|
|
tests/ui/feedback-modal.test.tsx > FeedbackModal > handles submission errors gracefully:
apps/app/tests/ui/feedback-modal.test.tsx#L147
TestingLibraryElementError: Unable to find a label with the text of: /What are you trying to do, and what would make dopeshot better for you/i
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
style="pointer-events: auto;"
/>
<div
aria-describedby="radix-_r_12_"
aria-labelledby="radix-_r_11_"
class="fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-lg sm:rounded-lg w-[calc(100%-2rem)] sm:max-w-[440px] gap-0"
data-state="open"
id="radix-_r_10_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<div
class="flex flex-col space-y-1.5 text-center sm:text-left"
>
<h2
class="tracking-tight text-base font-semibold"
id="radix-_r_11_"
>
Share your feedback
</h2>
</div>
<div
class="mt-4 flex gap-3 border-l-2 border-primary bg-muted/50 py-3 pl-3 pr-4"
>
<div
class="relative inline-flex items-center justify-center overflow-hidden rounded-full border border-border/20 h-11 w-11 shrink-0"
>
<img
alt="Adrian from dopeshot"
class="h-full w-full scale-150 object-cover object-[center_15%]"
src="/me.jpg"
/>
</div>
<p
class="text-sm text-muted-foreground"
>
I'm
<a
class="font-medium text-foreground hover:text-primary"
href="https://twitter.com/gaba6ool"
rel="noopener noreferrer"
target="_blank"
>
Adrian
</a>
, building dopeshot for builders like you. Help me decide what to ship next.
</p>
</div>
<form
class="space-y-4 mt-4"
>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-message"
>
What would make dopeshot better for you?
</label>
<textarea
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] resize-none"
data-slot="textarea"
id="feedback-message"
placeholder="Share your thoughts, ideas, or issues..."
required=""
/>
</div>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-email"
>
Email
<span
class="text-muted-foreground font-norm
|
|
tests/ui/feedback-modal.test.tsx > FeedbackModal > submits feedback successfully:
apps/app/tests/ui/feedback-modal.test.tsx#L120
TestingLibraryElementError: Unable to find a label with the text of: /What are you trying to do, and what would make dopeshot better for you/i
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
style="pointer-events: auto;"
/>
<div
aria-describedby="radix-_r_u_"
aria-labelledby="radix-_r_t_"
class="fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-lg sm:rounded-lg w-[calc(100%-2rem)] sm:max-w-[440px] gap-0"
data-state="open"
id="radix-_r_s_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<div
class="flex flex-col space-y-1.5 text-center sm:text-left"
>
<h2
class="tracking-tight text-base font-semibold"
id="radix-_r_t_"
>
Share your feedback
</h2>
</div>
<div
class="mt-4 flex gap-3 border-l-2 border-primary bg-muted/50 py-3 pl-3 pr-4"
>
<div
class="relative inline-flex items-center justify-center overflow-hidden rounded-full border border-border/20 h-11 w-11 shrink-0"
>
<img
alt="Adrian from dopeshot"
class="h-full w-full scale-150 object-cover object-[center_15%]"
src="/me.jpg"
/>
</div>
<p
class="text-sm text-muted-foreground"
>
I'm
<a
class="font-medium text-foreground hover:text-primary"
href="https://twitter.com/gaba6ool"
rel="noopener noreferrer"
target="_blank"
>
Adrian
</a>
, building dopeshot for builders like you. Help me decide what to ship next.
</p>
</div>
<form
class="space-y-4 mt-4"
>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-message"
>
What would make dopeshot better for you?
</label>
<textarea
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] resize-none"
data-slot="textarea"
id="feedback-message"
placeholder="Share your thoughts, ideas, or issues..."
required=""
/>
</div>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-email"
>
Email
<span
class="text-muted-foreground font-normal"
|
|
tests/ui/feedback-modal.test.tsx > FeedbackModal > enables submit button when feedback is provided:
apps/app/tests/ui/feedback-modal.test.tsx#L101
TestingLibraryElementError: Unable to find a label with the text of: /What are you trying to do, and what would make dopeshot better for you/i
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
style="pointer-events: auto;"
/>
<div
aria-describedby="radix-_r_q_"
aria-labelledby="radix-_r_p_"
class="fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-lg sm:rounded-lg w-[calc(100%-2rem)] sm:max-w-[440px] gap-0"
data-state="open"
id="radix-_r_o_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<div
class="flex flex-col space-y-1.5 text-center sm:text-left"
>
<h2
class="tracking-tight text-base font-semibold"
id="radix-_r_p_"
>
Share your feedback
</h2>
</div>
<div
class="mt-4 flex gap-3 border-l-2 border-primary bg-muted/50 py-3 pl-3 pr-4"
>
<div
class="relative inline-flex items-center justify-center overflow-hidden rounded-full border border-border/20 h-11 w-11 shrink-0"
>
<img
alt="Adrian from dopeshot"
class="h-full w-full scale-150 object-cover object-[center_15%]"
src="/me.jpg"
/>
</div>
<p
class="text-sm text-muted-foreground"
>
I'm
<a
class="font-medium text-foreground hover:text-primary"
href="https://twitter.com/gaba6ool"
rel="noopener noreferrer"
target="_blank"
>
Adrian
</a>
, building dopeshot for builders like you. Help me decide what to ship next.
</p>
</div>
<form
class="space-y-4 mt-4"
>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-message"
>
What would make dopeshot better for you?
</label>
<textarea
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] resize-none"
data-slot="textarea"
id="feedback-message"
placeholder="Share your thoughts, ideas, or issues..."
required=""
/>
</div>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-email"
>
Email
<span
class="text-muted-foreground font-normal"
|
|
tests/ui/feedback-modal.test.tsx > FeedbackModal > disables submit button when feedback is empty:
apps/app/tests/ui/feedback-modal.test.tsx#L94
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/Send Feedback/i`
Here are the accessible roles:
dialog:
Name "Share your feedback":
<div
aria-describedby="radix-_r_m_"
aria-labelledby="radix-_r_l_"
class="fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-lg sm:rounded-lg w-[calc(100%-2rem)] sm:max-w-[440px] gap-0"
data-state="open"
id="radix-_r_k_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
/>
--------------------------------------------------
heading:
Name "Share your feedback":
<h2
class="tracking-tight text-base font-semibold"
id="radix-_r_l_"
/>
--------------------------------------------------
img:
Name "Adrian from dopeshot":
<img
alt="Adrian from dopeshot"
class="h-full w-full scale-150 object-cover object-[center_15%]"
src="/me.jpg"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="text-sm text-muted-foreground"
/>
Name "":
<p
class="text-xs text-muted-foreground"
/>
--------------------------------------------------
link:
Name "Adrian":
<a
class="font-medium text-foreground hover:text-primary"
href="https://twitter.com/gaba6ool"
rel="noopener noreferrer"
target="_blank"
/>
Name "let's chat":
<a
class="inline-flex items-center gap-0.5 border-b border-current hover:text-foreground"
href="https://cal.com/adrian-pilarczyk-cs0y69/30min"
rel="noopener noreferrer"
target="_blank"
/>
--------------------------------------------------
textbox:
Name "What would make dopeshot better for you?":
<textarea
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] resize-none"
data-slot="textarea"
id="feedback-message"
placeholder="Share your thoughts, ideas, or issues..."
required=""
/>
Name "Email (optional, for follow-up)":
<input
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
data-slot="input"
id="feedback-email"
placeholder="your@email.com"
type="email"
value=""
/>
--------------------------------------------------
button:
Name "Send":
<button
class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none bg-pr
|
|
tests/ui/feedback-modal.test.tsx > FeedbackModal > allows toggling screenshot inclusion:
apps/app/tests/ui/feedback-modal.test.tsx#L76
TestingLibraryElementError: Unable to find an accessible element with the role "switch" and name `/Include screenshot/i`
Here are the accessible roles:
dialog:
Name "Share your feedback":
<div
aria-describedby="radix-_r_i_"
aria-labelledby="radix-_r_h_"
class="fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-lg sm:rounded-lg w-[calc(100%-2rem)] sm:max-w-[440px] gap-0"
data-state="open"
id="radix-_r_g_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
/>
--------------------------------------------------
heading:
Name "Share your feedback":
<h2
class="tracking-tight text-base font-semibold"
id="radix-_r_h_"
/>
--------------------------------------------------
img:
Name "Adrian from dopeshot":
<img
alt="Adrian from dopeshot"
class="h-full w-full scale-150 object-cover object-[center_15%]"
src="/me.jpg"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="text-sm text-muted-foreground"
/>
Name "":
<p
class="text-xs text-muted-foreground"
/>
--------------------------------------------------
link:
Name "Adrian":
<a
class="font-medium text-foreground hover:text-primary"
href="https://twitter.com/gaba6ool"
rel="noopener noreferrer"
target="_blank"
/>
Name "let's chat":
<a
class="inline-flex items-center gap-0.5 border-b border-current hover:text-foreground"
href="https://cal.com/adrian-pilarczyk-cs0y69/30min"
rel="noopener noreferrer"
target="_blank"
/>
--------------------------------------------------
textbox:
Name "What would make dopeshot better for you?":
<textarea
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] resize-none"
data-slot="textarea"
id="feedback-message"
placeholder="Share your thoughts, ideas, or issues..."
required=""
/>
Name "Email (optional, for follow-up)":
<input
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
data-slot="input"
id="feedback-email"
placeholder="your@email.com"
type="email"
value=""
/>
--------------------------------------------------
button:
Name "Send":
<button
class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none
|
|
tests/ui/feedback-modal.test.tsx > FeedbackModal > shows screenshot toggle when screenshotDataUrl is provided:
apps/app/tests/ui/feedback-modal.test.tsx#L63
TestingLibraryElementError: Unable to find an element with the text: Include screenshot. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
style="pointer-events: auto;"
/>
<div
aria-describedby="radix-_r_e_"
aria-labelledby="radix-_r_d_"
class="fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-lg sm:rounded-lg w-[calc(100%-2rem)] sm:max-w-[440px] gap-0"
data-state="open"
id="radix-_r_c_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<div
class="flex flex-col space-y-1.5 text-center sm:text-left"
>
<h2
class="tracking-tight text-base font-semibold"
id="radix-_r_d_"
>
Share your feedback
</h2>
</div>
<div
class="mt-4 flex gap-3 border-l-2 border-primary bg-muted/50 py-3 pl-3 pr-4"
>
<div
class="relative inline-flex items-center justify-center overflow-hidden rounded-full border border-border/20 h-11 w-11 shrink-0"
>
<img
alt="Adrian from dopeshot"
class="h-full w-full scale-150 object-cover object-[center_15%]"
src="/me.jpg"
/>
</div>
<p
class="text-sm text-muted-foreground"
>
I'm
<a
class="font-medium text-foreground hover:text-primary"
href="https://twitter.com/gaba6ool"
rel="noopener noreferrer"
target="_blank"
>
Adrian
</a>
, building dopeshot for builders like you. Help me decide what to ship next.
</p>
</div>
<form
class="space-y-4 mt-4"
>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-message"
>
What would make dopeshot better for you?
</label>
<textarea
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] resize-none"
data-slot="textarea"
id="feedback-message"
placeholder="Share your thoughts, ideas, or issues..."
required=""
/>
</div>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-emai
|
|
tests/ui/feedback-modal.test.tsx > FeedbackModal > displays the feedback textarea with correct label:
apps/app/tests/ui/feedback-modal.test.tsx#L47
TestingLibraryElementError: Unable to find a label with the text of: /What are you trying to do, and what would make dopeshot better for you/i
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
style="pointer-events: auto;"
/>
<div
aria-describedby="radix-_r_6_"
aria-labelledby="radix-_r_5_"
class="fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-lg sm:rounded-lg w-[calc(100%-2rem)] sm:max-w-[440px] gap-0"
data-state="open"
id="radix-_r_4_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<div
class="flex flex-col space-y-1.5 text-center sm:text-left"
>
<h2
class="tracking-tight text-base font-semibold"
id="radix-_r_5_"
>
Share your feedback
</h2>
</div>
<div
class="mt-4 flex gap-3 border-l-2 border-primary bg-muted/50 py-3 pl-3 pr-4"
>
<div
class="relative inline-flex items-center justify-center overflow-hidden rounded-full border border-border/20 h-11 w-11 shrink-0"
>
<img
alt="Adrian from dopeshot"
class="h-full w-full scale-150 object-cover object-[center_15%]"
src="/me.jpg"
/>
</div>
<p
class="text-sm text-muted-foreground"
>
I'm
<a
class="font-medium text-foreground hover:text-primary"
href="https://twitter.com/gaba6ool"
rel="noopener noreferrer"
target="_blank"
>
Adrian
</a>
, building dopeshot for builders like you. Help me decide what to ship next.
</p>
</div>
<form
class="space-y-4 mt-4"
>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-message"
>
What would make dopeshot better for you?
</label>
<textarea
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] resize-none"
data-slot="textarea"
id="feedback-message"
placeholder="Share your thoughts, ideas, or issues..."
required=""
/>
</div>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-email"
>
Email
<span
class="text-muted-foreground font-normal"
|
|
tests/ui/feedback-modal.test.tsx > FeedbackModal > renders when open is true:
apps/app/tests/ui/feedback-modal.test.tsx#L33
TestingLibraryElementError: Unable to find an element with the text: Share Your Feedback. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
style="pointer-events: auto;"
/>
<div
aria-describedby="radix-_r_2_"
aria-labelledby="radix-_r_1_"
class="fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-lg sm:rounded-lg w-[calc(100%-2rem)] sm:max-w-[440px] gap-0"
data-state="open"
id="radix-_r_0_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<div
class="flex flex-col space-y-1.5 text-center sm:text-left"
>
<h2
class="tracking-tight text-base font-semibold"
id="radix-_r_1_"
>
Share your feedback
</h2>
</div>
<div
class="mt-4 flex gap-3 border-l-2 border-primary bg-muted/50 py-3 pl-3 pr-4"
>
<div
class="relative inline-flex items-center justify-center overflow-hidden rounded-full border border-border/20 h-11 w-11 shrink-0"
>
<img
alt="Adrian from dopeshot"
class="h-full w-full scale-150 object-cover object-[center_15%]"
src="/me.jpg"
/>
</div>
<p
class="text-sm text-muted-foreground"
>
I'm
<a
class="font-medium text-foreground hover:text-primary"
href="https://twitter.com/gaba6ool"
rel="noopener noreferrer"
target="_blank"
>
Adrian
</a>
, building dopeshot for builders like you. Help me decide what to ship next.
</p>
</div>
<form
class="space-y-4 mt-4"
>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-message"
>
What would make dopeshot better for you?
</label>
<textarea
class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] resize-none"
data-slot="textarea"
id="feedback-message"
placeholder="Share your thoughts, ideas, or issues..."
required=""
/>
</div>
<div
class="space-y-2"
>
<label
class="gap-2 font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed text-sm"
data-slot="label"
for="feedback-ema
|