@@ -141,6 +141,79 @@ describe('atomic-popover', () => {
141141 expect ( valueCount ?. classList . contains ( 'hidden' ) ) . toBe ( true ) ;
142142 } ) ;
143143
144+ describe ( 'when button is clicked' , ( ) => {
145+ it ( 'should open the popover' , async ( ) => {
146+ const { popoverButton, parts, element} = await renderPopover ( ) ;
147+
148+ await userEvent . click ( popoverButton ) ;
149+ await element . updateComplete ;
150+
151+ const facet = parts ( element ) . facet ;
152+ expect ( facet ) . toBeTruthy ( ) ;
153+ expect ( facet ?. classList . contains ( 'hidden' ) ) . toBe ( false ) ;
154+ } ) ;
155+
156+ it ( 'should display backdrop when open' , async ( ) => {
157+ const { popoverButton, parts, element} = await renderPopover ( ) ;
158+
159+ await userEvent . click ( popoverButton ) ;
160+ await element . updateComplete ;
161+
162+ await expect . element ( parts ( element ) . backdrop ) . toBeInTheDocument ( ) ;
163+ } ) ;
164+
165+ it ( 'should set aria-expanded to true' , async ( ) => {
166+ const { popoverButton, element} = await renderPopover ( ) ;
167+
168+ await userEvent . click ( popoverButton ) ;
169+ await element . updateComplete ;
170+
171+ await expect
172+ . element ( popoverButton )
173+ . toHaveAttribute ( 'aria-expanded' , 'true' ) ;
174+ } ) ;
175+ } ) ;
176+
177+ describe ( 'when backdrop is clicked' , ( ) => {
178+ it ( 'should close the popover' , async ( ) => {
179+ const { popoverButton, parts, element} = await renderPopover ( ) ;
180+
181+ // Open popover
182+ await userEvent . click ( popoverButton ) ;
183+ await element . updateComplete ;
184+
185+ // Click backdrop
186+ const backdrop = parts ( element ) . backdrop ;
187+ expect ( backdrop ) . toBeTruthy ( ) ;
188+ await userEvent . click ( backdrop ! ) ;
189+ await element . updateComplete ;
190+
191+ // Verify closed
192+ const facet = parts ( element ) . facet ;
193+ expect ( facet ) . toBeTruthy ( ) ;
194+ expect ( facet ?. classList . contains ( 'hidden' ) ) . toBe ( true ) ;
195+ } ) ;
196+ } ) ;
197+
198+ describe ( 'when Escape key is pressed' , ( ) => {
199+ it ( 'should close the popover' , async ( ) => {
200+ const { popoverButton, parts, element} = await renderPopover ( ) ;
201+
202+ // Open popover
203+ await userEvent . click ( popoverButton ) ;
204+ await element . updateComplete ;
205+
206+ // Press Escape
207+ await page . keyboard . press ( 'Escape' ) ;
208+ await element . updateComplete ;
209+
210+ // Verify closed
211+ const facet = parts ( element ) . facet ;
212+ expect ( facet ) . toBeTruthy ( ) ;
213+ expect ( facet ?. classList . contains ( 'hidden' ) ) . toBe ( true ) ;
214+ } ) ;
215+ } ) ;
216+
144217 describe ( 'when search has error' , ( ) => {
145218 it ( 'should render nothing' , async ( ) => {
146219 vi . mocked ( buildSearchStatus ) . mockReturnValue (
@@ -228,77 +301,4 @@ describe('atomic-popover', () => {
228301 ) ;
229302 } ) ;
230303 } ) ;
231-
232- describe ( '#togglePopover (when button is clicked)' , ( ) => {
233- it ( 'should open the popover' , async ( ) => {
234- const { popoverButton, parts, element} = await renderPopover ( ) ;
235-
236- await userEvent . click ( popoverButton ) ;
237- await element . updateComplete ;
238-
239- const facet = parts ( element ) . facet ;
240- expect ( facet ) . toBeTruthy ( ) ;
241- expect ( facet ?. classList . contains ( 'hidden' ) ) . toBe ( false ) ;
242- } ) ;
243-
244- it ( 'should display backdrop when open' , async ( ) => {
245- const { popoverButton, parts, element} = await renderPopover ( ) ;
246-
247- await userEvent . click ( popoverButton ) ;
248- await element . updateComplete ;
249-
250- await expect . element ( parts ( element ) . backdrop ) . toBeInTheDocument ( ) ;
251- } ) ;
252-
253- it ( 'should set aria-expanded to true' , async ( ) => {
254- const { popoverButton, element} = await renderPopover ( ) ;
255-
256- await userEvent . click ( popoverButton ) ;
257- await element . updateComplete ;
258-
259- await expect
260- . element ( popoverButton )
261- . toHaveAttribute ( 'aria-expanded' , 'true' ) ;
262- } ) ;
263-
264- describe ( 'when popover is open and backdrop is clicked' , ( ) => {
265- it ( 'should close the popover' , async ( ) => {
266- const { popoverButton, parts, element} = await renderPopover ( ) ;
267-
268- // Open popover
269- await userEvent . click ( popoverButton ) ;
270- await element . updateComplete ;
271-
272- // Click backdrop
273- const backdrop = parts ( element ) . backdrop ;
274- expect ( backdrop ) . toBeTruthy ( ) ;
275- await userEvent . click ( backdrop ! ) ;
276- await element . updateComplete ;
277-
278- // Verify closed
279- const facet = parts ( element ) . facet ;
280- expect ( facet ) . toBeTruthy ( ) ;
281- expect ( facet ?. classList . contains ( 'hidden' ) ) . toBe ( true ) ;
282- } ) ;
283- } ) ;
284-
285- describe ( 'when popover is open and Escape key is pressed' , ( ) => {
286- it ( 'should close the popover' , async ( ) => {
287- const { popoverButton, parts, element} = await renderPopover ( ) ;
288-
289- // Open popover
290- await userEvent . click ( popoverButton ) ;
291- await element . updateComplete ;
292-
293- // Press Escape
294- await page . keyboard . press ( 'Escape' ) ;
295- await element . updateComplete ;
296-
297- // Verify closed
298- const facet = parts ( element ) . facet ;
299- expect ( facet ) . toBeTruthy ( ) ;
300- expect ( facet ?. classList . contains ( 'hidden' ) ) . toBe ( true ) ;
301- } ) ;
302- } ) ;
303- } ) ;
304304} ) ;
0 commit comments