You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm running into issues writing a test for a "Media Selector" component. It looks like this:
It's a set of buttons, with each button containing an image.
Here's the component markup:
import{CheckMark}from'../../icons/check-mark';import{MediaSelectorItem}from'./media-selector-item';import'./media-selector.scss';exportfunctionMediaSelector({
selectedItem,
items,
onChange,}: {selectedItem: MediaSelectorItem;items: MediaSelectorItem[];onChange: (value: MediaSelectorItem)=>void;}){return(<divclassName="api-x_c-media-selector">{items.map((item: MediaSelectorItem)=>{// If a custom aspect ratio has been passed in, apply itconstimageStyles=item.aspectRatio
? {'--api-x_media-aspect-ratio': item.aspectRatio}
: {};return(<buttontype="button"className="api-x_c-media-selector__button"aria-pressed={(item.value===selectedItem.value).toString()}data-value={item.value}key={item.value}onClick={()=>onChange(item)}><CheckMarksvgClass="api-x_c-media-selector__check"/><imgstyle={imageStyles}className="api-x_c-media-selector__image"src={item.src}alt={item.alt}/></button>);})}</div>);}
And here's my test:
import{withBrowser,PleasantestUtils}from'pleasantest';asyncfunctionsetup(utils: PleasantestUtils){awaitutils.runJS(` import { render } from 'preact'; import { useState } from 'preact/hooks'; import { Root } from '../root/root'; import { MediaSelector } from './media-selector'; // Preact's render function doesn't clear this properly document.body.innerHTML = ''; function MediaSelectorExample() { const items = [ { src: 'https://cloudinary-marketing-res.cloudinary.com/image/upload/h_160/sneakers-wide.jpg', alt: 'sneakers', value: 'sneakers-wide' }, { src: 'https://cloudinary-marketing-res.cloudinary.com/image/upload/h_160/car.jpg', alt: 'car', value: 'car' } ]; const [option, setOption] = useState(items[0]); return ( <Root> <MediaSelector onChange={setOption} selectedItem={option} items={items} /> </Root> ); } render(( <MediaSelectorExample /> ), document.body); `);}test('Confirm the buttons are pressed correctly',withBrowser(async({ utils, screen, user })=>{awaitsetup(utils);constfirstItem=awaitscreen.getByRole('button',{name: 'sneakers',});constsecondItem=awaitscreen.getByRole('button',{name: 'car',});// We set the first item as selectedawaitexpect(firstItem).toHaveAttribute('aria-pressed','true');awaitexpect(secondItem).toHaveAttribute('aria-pressed','false');// I'm not sure why this is necessary.// I'm opening a Pleasantest issue to discuss.awaitnewPromise((resolve)=>setTimeout(resolve,500));// Clicking the first item should do nothing. It's already selectedawaituser.click(firstItem,{force: true,targetSize: false});// The first item should still be pressedawaitexpect(firstItem).toHaveAttribute('aria-pressed','true');awaitexpect(secondItem).toHaveAttribute('aria-pressed','false');// Clicking the second item should select itawaituser.click(secondItem,{force: true,targetSize: false});// The user clicked the second item. It should be selectedawaitexpect(secondItem).toHaveAttribute('aria-pressed','true');awaitexpect(firstItem).toHaveAttribute('aria-pressed','false');}));
This test is passing, but only because I've put a 500ms timeout in the middle of it. If I remove this, then I can't click the buttons.
I ran into a few different issues:
First off it said the buttons were too small or not visibly.
I figured this was because the image hadn't loaded and the button had no width. I added an aspect ratio to the image CSS but it still didn't work
Then I added { force: true, targetSize: false }. At this point it worked sometimes but failed other times with a different error:
Then it said the buttons are "either not clickable or not an HTMLElement"
At this point I added the timeout and it fixed it.
I'm running into issues writing a test for a "Media Selector" component. It looks like this:
It's a set of buttons, with each button containing an image.
Here's the component markup:
And here's my test:
This test is passing, but only because I've put a 500ms timeout in the middle of it. If I remove this, then I can't click the buttons.
I ran into a few different issues:
{ force: true, targetSize: false }
. At this point it worked sometimes but failed other times with a different error:I'm not sure what's going on. This is a private repo but you should have access. Here's the PR: https://github.com/cloudfour/cld-api-explorer/pull/9
Let me know if you need more info or would like to troubleshoot together.
Thanks!
The text was updated successfully, but these errors were encountered: