@@ -30,7 +30,7 @@ describe('c-view-and-edit-form', () => {
30
30
expect ( additionalEditButtons ) . not . toBe ( null ) ;
31
31
} ) ;
32
32
33
- it ( 'When visible card and not inEditMode, has an edit button, but no save or cancel' , ( ) => {
33
+ it ( 'When visible card and not inEditMode, has an edit button, but no save or cancel' , ( ) => {
34
34
const element = createElement ( 'c-view-and-edit-form' , {
35
35
is : ViewAndEditForm
36
36
} ) ;
@@ -51,7 +51,7 @@ describe('c-view-and-edit-form', () => {
51
51
expect ( additionalEditButtons ) . toBe ( null ) ;
52
52
} ) ;
53
53
54
- it ( 'When visible card and inEditMode, has an editForm slot but no viewForm slot' , ( ) => {
54
+ it ( 'When visible card and inEditMode, has an editForm, title and info slot but no viewForm slot' , ( ) => {
55
55
const element = createElement ( 'c-view-and-edit-form' , {
56
56
is : ViewAndEditForm
57
57
} ) ;
@@ -64,9 +64,15 @@ describe('c-view-and-edit-form', () => {
64
64
65
65
const editForm = element . shadowRoot . querySelector ( 'slot[name="edit-form"]' ) ;
66
66
expect ( editForm ) . not . toBe ( null ) ;
67
- } ) ;
68
67
69
- it ( 'When visible card and not inEditMode, has a viewForm slot but no editForm slot' , ( ) => {
68
+ const title = element . shadowRoot . querySelector ( 'slot[name="title"]' ) ;
69
+ expect ( title ) . not . toBe ( null ) ;
70
+
71
+ const info = element . shadowRoot . querySelector ( 'slot[name="info"]' ) ;
72
+ expect ( info ) . not . toBe ( null ) ;
73
+ } ) ;
74
+
75
+ it ( 'When visible card and not inEditMode, has a viewForm, title and info slot but no editForm slot' , ( ) => {
70
76
const element = createElement ( 'c-view-and-edit-form' , {
71
77
is : ViewAndEditForm
72
78
} ) ;
@@ -79,6 +85,12 @@ describe('c-view-and-edit-form', () => {
79
85
80
86
const editForm = element . shadowRoot . querySelector ( 'slot[name="edit-form"]' ) ;
81
87
expect ( editForm ) . toBe ( null ) ;
88
+
89
+ const title = element . shadowRoot . querySelector ( 'slot[name="title"]' ) ;
90
+ expect ( title ) . not . toBe ( null ) ;
91
+
92
+ const info = element . shadowRoot . querySelector ( 'slot[name="info"]' ) ;
93
+ expect ( info ) . not . toBe ( null ) ;
82
94
} ) ;
83
95
84
96
it ( 'When visible card, and inEditMode, clicking save will issue a save event' , ( ) => {
@@ -144,6 +156,21 @@ describe('c-view-and-edit-form', () => {
144
156
} )
145
157
} ) ;
146
158
159
+ it ( 'When visible card, inEditMode, and save and cancel button labels specified, will display those labels' , ( ) => {
160
+ const element = createElement ( 'c-view-and-edit-form' , {
161
+ is : ViewAndEditForm
162
+ } ) ;
163
+ element . visible = true ;
164
+ element . inEditMode = true ;
165
+ element . saveLabel = 'overridden-save' ;
166
+ element . cancelLabel = 'overridden-cancel' ;
167
+ document . body . appendChild ( element ) ;
168
+
169
+ const saveButtons = element . shadowRoot . querySelector ( 'c-save-buttons' ) ;
170
+ expect ( saveButtons . saveLabel ) . toBe ( 'overridden-save' ) ;
171
+ expect ( saveButtons . cancelLabel ) . toBe ( 'overridden-cancel' ) ;
172
+ } ) ;
173
+
147
174
it ( 'When visible modal and inEditMode, has a save and cancel button, but no edit' , ( ) => {
148
175
const element = createElement ( 'c-view-and-edit-form' , {
149
176
is : ViewAndEditForm
@@ -188,7 +215,7 @@ describe('c-view-and-edit-form', () => {
188
215
expect ( additionalEditButtons ) . toBe ( null ) ;
189
216
} ) ;
190
217
191
- it ( 'When visible modal and inEditMode, has an editForm slot but no viewForm slot' , ( ) => {
218
+ it ( 'When visible modal and inEditMode, has an editForm, title and info slot but no viewForm slot' , ( ) => {
192
219
const element = createElement ( 'c-view-and-edit-form' , {
193
220
is : ViewAndEditForm
194
221
} ) ;
@@ -202,9 +229,15 @@ describe('c-view-and-edit-form', () => {
202
229
203
230
const editForm = element . shadowRoot . querySelector ( 'slot[name="edit-form"]' ) ;
204
231
expect ( editForm ) . not . toBe ( null ) ;
205
- } ) ;
206
232
207
- it ( 'When visible modal and not inEditMode, has a viewForm slot but no editForm slot' , ( ) => {
233
+ const title = element . shadowRoot . querySelector ( 'slot[name="title"]' ) ;
234
+ expect ( title ) . not . toBe ( null ) ;
235
+
236
+ const info = element . shadowRoot . querySelector ( 'slot[name="info"]' ) ;
237
+ expect ( info ) . not . toBe ( null ) ;
238
+ } ) ;
239
+
240
+ it ( 'When visible modal and not inEditMode, has a viewForm, title and info slot but no editForm slot' , ( ) => {
208
241
const element = createElement ( 'c-view-and-edit-form' , {
209
242
is : ViewAndEditForm
210
243
} ) ;
@@ -218,6 +251,12 @@ describe('c-view-and-edit-form', () => {
218
251
219
252
const editForm = element . shadowRoot . querySelector ( 'slot[name="edit-form"]' ) ;
220
253
expect ( editForm ) . toBe ( null ) ;
254
+
255
+ const title = element . shadowRoot . querySelector ( 'slot[name="title"]' ) ;
256
+ expect ( title ) . not . toBe ( null ) ;
257
+
258
+ const info = element . shadowRoot . querySelector ( 'slot[name="info"]' ) ;
259
+ expect ( info ) . not . toBe ( null ) ;
221
260
} ) ;
222
261
223
262
it ( 'When visible modal, and inEditMode, clicking save will issue a save event' , ( ) => {
@@ -286,6 +325,22 @@ describe('c-view-and-edit-form', () => {
286
325
} )
287
326
} ) ;
288
327
328
+ it ( 'When visible modal, inEditMode, and save and cancel button labels specified, will display those labels' , ( ) => {
329
+ const element = createElement ( 'c-view-and-edit-form' , {
330
+ is : ViewAndEditForm
331
+ } ) ;
332
+ element . mode = 'modal' ;
333
+ element . visible = true ;
334
+ element . inEditMode = true ;
335
+ element . saveLabel = 'overridden-save' ;
336
+ element . cancelLabel = 'overridden-cancel' ;
337
+ document . body . appendChild ( element ) ;
338
+
339
+ const saveButtons = element . shadowRoot . querySelector ( 'c-save-buttons' ) ;
340
+ expect ( saveButtons . saveLabel ) . toBe ( 'overridden-save' ) ;
341
+ expect ( saveButtons . cancelLabel ) . toBe ( 'overridden-cancel' ) ;
342
+ } ) ;
343
+
289
344
it ( 'When configured with an invalid mode, will throw an error' , ( ) => {
290
345
const element = createElement ( 'c-view-and-edit-form' , {
291
346
is : ViewAndEditForm
0 commit comments