16
16
*/
17
17
18
18
import { createApp , nextTick } from 'vue' ;
19
- import {
20
- ComponentWithoutChildren ,
21
- ComponentWithChildren ,
22
- ComponentWithChildrenRerender ,
23
- ComponentWithDifferentViews ,
24
- ComponentWithProperties ,
25
- ComponentWithUnregistered ,
26
- ComponentWithImperativeEvent ,
27
- ComponentWithDeclarativeEvent
28
- } from "./components" ;
29
- import { expect } from "chai" ;
19
+ import { ComponentWithDeclarativeEvent , ComponentWithProperties } from "./components" ;
20
+ import tests from 'advanced-tests' ;
30
21
31
22
const isCustomElement = ( tagName ) => {
32
23
return window . customElements . get ( tagName ) !== undefined ;
@@ -48,106 +39,25 @@ afterEach(function() {
48
39
scratch = null ;
49
40
} ) ;
50
41
51
- describe ( "advanced support" , function ( ) {
52
42
53
- describe ( "attributes and properties" , function ( ) {
54
- it ( "will pass array data as a property" , function ( ) {
55
- this . weight = 2 ;
56
- const app = createApp ( ComponentWithProperties )
57
- app . config . compilerOptions . isCustomElement = isCustomElement ;
58
- app . mount ( scratch ) ;
59
- const wc = scratch . querySelector ( "#wc" ) ;
60
- const data = wc . arr ;
61
- expect ( data ) . to . eql ( [ "V" , "u" , "e" ] ) ;
62
- } ) ;
63
-
64
- it ( "will pass object data as a property" , function ( ) {
65
- this . weight = 2 ;
66
- const app = createApp ( ComponentWithProperties )
67
- app . config . compilerOptions . isCustomElement = isCustomElement ;
68
- app . mount ( scratch ) ;
69
- const wc = scratch . querySelector ( "#wc" ) ;
70
- const data = wc . obj ;
71
- expect ( data ) . to . eql ( { org : "vuejs" , repo : "vue" } ) ;
72
- } ) ;
73
-
74
- it ( "will pass object data to a camelCase-named property" , function ( ) {
75
- this . weight = 2 ;
76
- const app = createApp ( ComponentWithProperties )
77
- app . config . compilerOptions . isCustomElement = isCustomElement ;
78
- app . mount ( scratch ) ;
79
- const wc = scratch . querySelector ( "#wc" ) ;
80
- const data = wc . camelCaseObj ;
81
- expect ( data ) . to . eql ( { label : "passed" } ) ;
82
- } ) ;
83
-
84
- } ) ;
85
-
86
- describe ( "events" , function ( ) {
87
- it ( "can declaratively listen to a lowercase DOM event dispatched by a Custom Element" , async function ( ) {
88
- this . weight = 2 ;
89
- const app = createApp ( ComponentWithDeclarativeEvent )
90
- app . config . compilerOptions . isCustomElement = isCustomElement ;
91
- app . mount ( scratch ) ;
92
- const wc = scratch . querySelector ( "#wc" ) ;
93
- const handled = scratch . querySelector ( "#lowercase" ) ;
94
- expect ( handled . textContent ) . to . eql ( "false" ) ;
95
- wc . click ( ) ;
96
- await nextTick ( ) ;
97
- expect ( handled . textContent ) . to . eql ( "true" ) ;
98
- } ) ;
99
-
100
- it ( "can declaratively listen to a kebab-case DOM event dispatched by a Custom Element" , async function ( ) {
101
- this . weight = 1 ;
102
- const app = createApp ( ComponentWithDeclarativeEvent )
103
- app . config . compilerOptions . isCustomElement = isCustomElement ;
104
- app . mount ( scratch ) ;
105
- const wc = scratch . querySelector ( "#wc" ) ;
106
- const handled = scratch . querySelector ( "#kebab" ) ;
107
- expect ( handled . textContent ) . to . eql ( "false" ) ;
108
- wc . click ( ) ;
109
- await nextTick ( ) ;
110
- expect ( handled . textContent ) . to . eql ( "true" ) ;
111
- } ) ;
112
-
113
- it ( "can declaratively listen to a camelCase DOM event dispatched by a Custom Element" , async function ( ) {
114
- this . weight = 1 ;
115
- const app = createApp ( ComponentWithDeclarativeEvent )
116
- app . config . compilerOptions . isCustomElement = isCustomElement ;
117
- app . mount ( scratch ) ;
118
- const wc = scratch . querySelector ( "#wc" ) ;
119
- const handled = scratch . querySelector ( "#camel" ) ;
120
- expect ( handled . textContent ) . to . eql ( "false" ) ;
121
- wc . click ( ) ;
122
- await nextTick ( ) ;
123
- expect ( handled . textContent ) . to . eql ( "true" ) ;
124
- } ) ;
125
-
126
- it ( "can declaratively listen to a CAPScase DOM event dispatched by a Custom Element" , async function ( ) {
127
- this . weight = 1 ;
128
- const app = createApp ( ComponentWithDeclarativeEvent )
129
- app . config . compilerOptions . isCustomElement = isCustomElement ;
130
- app . mount ( scratch ) ;
131
- const wc = scratch . querySelector ( "#wc" ) ;
132
- const handled = scratch . querySelector ( "#caps" ) ;
133
- expect ( handled . textContent ) . to . eql ( "false" ) ;
134
- wc . click ( ) ;
135
- await nextTick ( ) ;
136
- expect ( handled . textContent ) . to . eql ( "true" ) ;
137
- } ) ;
43
+ function render ( Component ) {
44
+ const app = createApp ( Component )
45
+ app . config . compilerOptions . isCustomElement = isCustomElement ;
46
+ app . mount ( scratch ) ;
47
+ const wc = scratch . querySelector ( "#wc" ) ;
48
+ return { wc}
49
+ }
138
50
139
- it ( "can declaratively listen to a PascalCase DOM event dispatched by a Custom Element" , async function ( ) {
140
- this . weight = 1 ;
141
- const app = createApp ( ComponentWithDeclarativeEvent )
142
- app . config . compilerOptions . isCustomElement = isCustomElement ;
143
- app . mount ( scratch ) ;
144
- const wc = scratch . querySelector ( "#wc" ) ;
145
- const handled = scratch . querySelector ( "#pascal" ) ;
146
- expect ( handled . textContent ) . to . eql ( "false" ) ;
51
+ tests ( {
52
+ renderComponentWithProperties ( ) {
53
+ return render ( ComponentWithProperties ) ;
54
+ } ,
55
+ renderComponentWithDeclarativeEvent ( ) {
56
+ const { wc } = render ( ComponentWithDeclarativeEvent ) ;
57
+ async function click ( ) {
147
58
wc . click ( ) ;
148
59
await nextTick ( ) ;
149
- expect ( handled . textContent ) . to . eql ( "true" ) ;
150
- } ) ;
151
- } ) ;
152
-
60
+ }
61
+ return { wc, click }
62
+ }
153
63
} ) ;
0 commit comments