1616 */
1717
1818import { expect , test } from '@playwright/test' ;
19- import { each , getPropOrAttr , weight } from './util' ;
19+ import { getPropOrAttr , weight } from './util' ;
2020
2121
22- each ( ( ) => {
23- test . describe ( "basic support" , weight ( 3 ) , ( ) => {
24- test . describe ( "no children" , ( ) => {
25- test ( "can display a Custom Element with no children" , async ( { page} ) => {
26- await expect ( page . locator ( '#ce-without-children' ) ) . toBeAttached ( ) ;
27- } ) ;
22+ test . beforeEach ( async ( { page} ) => {
23+ await page . goto ( '/' ) ;
24+ } )
2825
29- test . describe ( 'with children' , ( ) => {
30- const expectHasChildren = async ( wc ) => {
31- await expect ( wc . locator ( 'h1' ) ) . toHaveText ( 'Test h1' ) ;
32- await expect ( wc . locator ( 'p' ) ) . toHaveText ( 'Test p' ) ;
33- }
26+ test . describe ( "basic support" , weight ( 3 ) , ( ) => {
27+ test . describe ( "no children" , ( ) => {
28+ test ( "can display a Custom Element with no children" , async ( { page} ) => {
29+ await expect ( page . locator ( '#ce-without-children' ) ) . toBeAttached ( ) ;
30+ } ) ;
31+
32+ test . describe ( 'with children' , ( ) => {
33+ const expectHasChildren = async ( wc ) => {
34+ await expect ( wc . locator ( 'h1' ) ) . toHaveText ( 'Test h1' ) ;
35+ await expect ( wc . locator ( 'p' ) ) . toHaveText ( 'Test p' ) ;
36+ }
3437
35- test ( "can display a Custom Element with children in a Shadow Root" , async ( { page} ) => {
36- await expectHasChildren ( page . locator ( '#ce-with-children' ) )
37- } )
38+ test ( "can display a Custom Element with children in a Shadow Root" , async ( { page} ) => {
39+ await expectHasChildren ( page . locator ( '#ce-with-children' ) )
40+ } )
3841
39- test ( "can display a Custom Element with children in a Shadow Root and pass in Light DOM children" , async ( { page} ) => {
40- const ce = page . locator ( '#ce-with-children-renderer' ) ;
41- await expectHasChildren ( ce ) ;
42- await expect ( ce ) . toHaveText ( / 2 / ) ;
43- } )
42+ test ( "can display a Custom Element with children in a Shadow Root and pass in Light DOM children" , async ( { page} ) => {
43+ const ce = page . locator ( '#ce-with-children-renderer' ) ;
44+ await expectHasChildren ( ce ) ;
45+ await expect ( ce ) . toHaveText ( / 2 / ) ;
46+ } )
4447
45- test ( 'can display a Custom Element with children in the Shadow DOM and handle hiding and showing the element' , async ( { page} ) => {
46- const ce = page . locator ( '#ce-with-different-views' )
47- const toggle = page . getByRole ( 'button' , { name : / t o g g l e v i e w s / i} ) ;
48+ test ( 'can display a Custom Element with children in the Shadow DOM and handle hiding and showing the element' , async ( { page} ) => {
49+ const ce = page . locator ( '#ce-with-different-views' )
50+ const toggle = page . getByRole ( 'button' , { name : / t o g g l e v i e w s / i} ) ;
4851
49- await expectHasChildren ( ce ) ;
52+ await expectHasChildren ( ce ) ;
5053
51- await toggle . click ( ) ;
52- await expect ( ce ) . toHaveText ( / d u m m y v i e w / i) ;
54+ await toggle . click ( ) ;
55+ await expect ( ce ) . toHaveText ( / d u m m y v i e w / i) ;
5356
54- await toggle . click ( ) ;
55- await expectHasChildren ( ce ) ;
56- } )
57+ await toggle . click ( ) ;
58+ await expectHasChildren ( ce ) ;
5759 } )
60+ } )
61+ } ) ;
62+
63+ test . describe ( 'attributes and properties' , ( ) => {
64+ test ( "will pass boolean data as either an attribute or a property" , async ( { page} ) => {
65+ const ce = page . locator ( '#ce-with-properties' ) ;
66+ expect ( await getPropOrAttr ( ce , 'bool' ) ) . toEqual ( true )
5867 } ) ;
5968
60- test . describe ( 'attributes and properties' , ( ) => {
61- test ( "will pass boolean data as either an attribute or a property" , async ( { page} ) => {
62- const ce = page . locator ( '#ce-with-properties' ) ;
63- expect ( await getPropOrAttr ( ce , 'bool' ) ) . toEqual ( true )
64- } ) ;
65-
66- test ( "will pass numeric data as either an attribute or a property" , async ( { page} ) => {
67- const ce = page . locator ( '#ce-with-properties' ) ;
68- expect ( parseInt ( await getPropOrAttr ( ce , 'num' ) ) ) . toEqual ( 42 )
69- } ) ;
70-
71- test ( "will pass string data as either an attribute or a property" , async ( { page} ) => {
72- const ce = page . locator ( '#ce-with-properties' ) ;
73- expect ( await getPropOrAttr ( ce , 'str' ) ) . toEqual ( "custom" )
74- } ) ;
69+ test ( "will pass numeric data as either an attribute or a property" , async ( { page} ) => {
70+ const ce = page . locator ( '#ce-with-properties' ) ;
71+ expect ( parseInt ( await getPropOrAttr ( ce , 'num' ) ) ) . toEqual ( 42 )
7572 } ) ;
7673
77- test . describe ( 'events' , ( ) => {
78- test ( "can imperatively listen to a DOM event dispatched by a Custom Element" , async ( { page} ) => {
79- const ce = page . locator ( '#ce-with-imperative-event' ) ;
80- const result = page . locator ( '#ce-with-imperative-event-handled' ) ;
81- await expect ( result ) . toHaveText ( / f a l s e / i) ;
82- await ce . click ( ) ;
83- await expect ( result ) . toHaveText ( / t r u e / i) ;
84- } )
74+ test ( "will pass string data as either an attribute or a property" , async ( { page} ) => {
75+ const ce = page . locator ( '#ce-with-properties' ) ;
76+ expect ( await getPropOrAttr ( ce , 'str' ) ) . toEqual ( "custom" )
77+ } ) ;
78+ } ) ;
79+
80+ test . describe ( 'events' , ( ) => {
81+ test ( "can imperatively listen to a DOM event dispatched by a Custom Element" , async ( { page} ) => {
82+ const ce = page . locator ( '#ce-with-imperative-event' ) ;
83+ const result = page . locator ( '#ce-with-imperative-event-handled' ) ;
84+ await expect ( result ) . toHaveText ( / f a l s e / i) ;
85+ await ce . click ( ) ;
86+ await expect ( result ) . toHaveText ( / t r u e / i) ;
8587 } )
88+ } )
8689
87- } ) ;
8890} ) ;
0 commit comments