Skip to content

Commit a47a1ac

Browse files
didoodidoo
authored
Modal and Flyout - Improve test coverage (showcase and integration) (#2966)
1 parent 48b57c3 commit a47a1ac

File tree

6 files changed

+565
-18
lines changed

6 files changed

+565
-18
lines changed

‎showcase/app/controllers/components/flyout.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ export default class FlyoutController extends Controller {
1212
@tracked largeFlyoutActive = false;
1313
@tracked dropdownInitiatedFlyoutActive = false;
1414
@tracked dropdownInitiatedWithReturnedFocusFlyoutActive = false;
15+
@tracked deactivateFlyoutOnCloseActive = false;
16+
@tracked deactivateFlyoutOnDestroyActive = false;
17+
@tracked deactivateFlyoutOnSubmitActive = false;
18+
@tracked deactivateFlyoutOnSubmitValidationError = false;
1519

1620
@action
1721
activateFlyout(Flyout) {
@@ -22,4 +26,18 @@ export default class FlyoutController extends Controller {
2226
deactivateFlyout(Flyout) {
2327
this[Flyout] = false;
2428
}
29+
30+
@action
31+
deactivateFlyoutOnSubmit(event) {
32+
event.preventDefault(); // Prevent page reload
33+
const formData = new FormData(event.target);
34+
const value = formData.get('deactivate-flyout-on-submit__input');
35+
36+
if (!value) {
37+
this.deactivateFlyoutOnSubmitValidationError = true;
38+
} else {
39+
this.deactivateFlyoutOnSubmitValidationError = false;
40+
this.deactivateFlyoutOnSubmitActive = false;
41+
}
42+
}
2543
}

‎showcase/app/controllers/components/modal.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ export default class ModalController extends Controller {
2020
@tracked isDismissDisabled;
2121
@tracked dropdownInitiatedModalActive = false;
2222
@tracked dropdownInitiatedWithReturnedFocusModalActive = false;
23+
@tracked deactivateModalOnCloseActive = false;
24+
@tracked deactivateModalOnDestroyActive = false;
25+
@tracked deactivateModalOnSubmitActive = false;
26+
@tracked deactivateModalOnSubmitValidationError = false;
2327

2428
@action
2529
activateModal(modal) {
@@ -39,6 +43,20 @@ export default class ModalController extends Controller {
3943
}
4044
}
4145

46+
@action
47+
deactivateModalOnSubmit(event) {
48+
event.preventDefault(); // Prevent page reload
49+
const formData = new FormData(event.target);
50+
const value = formData.get('deactivate-modal-on-submit__input');
51+
52+
if (!value) {
53+
this.deactivateModalOnSubmitValidationError = true;
54+
} else {
55+
this.deactivateModalOnSubmitValidationError = false;
56+
this.deactivateModalOnSubmitActive = false;
57+
}
58+
}
59+
4260
@action
4361
resetIsDismissDisabled() {
4462
this.isDismissDisabled = false;

‎showcase/app/templates/components/flyout.hbs‎

Lines changed: 119 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -266,17 +266,17 @@
266266
<Hds::Flyout
267267
id="dropdown-initiated-flyout"
268268
@onClose={{fn this.deactivateFlyout "dropdownInitiatedFlyoutActive"}}
269-
as |M|
269+
as |F|
270270
>
271-
<M.Header>
271+
<F.Header>
272272
Flyout title
273-
</M.Header>
274-
<M.Body>
273+
</F.Header>
274+
<F.Body>
275275
<p class="hds-typography-body-300 hds-foreground-primary">Flyout content</p>
276-
</M.Body>
277-
<M.Footer as |F|>
276+
</F.Body>
277+
<F.Footer as |F|>
278278
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
279-
</M.Footer>
279+
</F.Footer>
280280
</Hds::Flyout>
281281
{{/if}}
282282

@@ -297,17 +297,122 @@
297297
id="dropdown-initiated-flyout-with-returned-focus"
298298
@onClose={{fn this.deactivateFlyout "dropdownInitiatedWithReturnedFocusFlyoutActive"}}
299299
@returnFocusTo="dropdown-initiated-flyout-with-returned-focus-toggle"
300-
as |M|
300+
as |F|
301301
>
302-
<M.Header>
302+
<F.Header>
303303
Flyout title
304-
</M.Header>
305-
<M.Body>
304+
</F.Header>
305+
<F.Body>
306306
<p class="hds-typography-body-300 hds-foreground-primary">Flyout content</p>
307-
</M.Body>
308-
<M.Footer as |F|>
307+
</F.Body>
308+
<F.Footer as |F|>
309+
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
310+
</F.Footer>
311+
</Hds::Flyout>
312+
{{/if}}
313+
314+
<br />
315+
<br />
316+
317+
<button type="button" {{on "click" (fn this.activateFlyout "deactivateFlyoutOnCloseActive")}}>Deactivated with
318+
`onClose`</button>
319+
320+
{{#if this.deactivateFlyoutOnCloseActive}}
321+
<Hds::Flyout
322+
id="deactivate-flyout-on-close"
323+
@onClose={{fn this.deactivateFlyout "deactivateFlyoutOnCloseActive"}}
324+
as |F|
325+
>
326+
<F.Header>
327+
Flyout title
328+
</F.Header>
329+
<F.Body>
330+
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button executes the
331+
<code>F.close</code>
332+
method.</p>
333+
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin-top="12px"}}>This is equivalent to a
334+
manual dismiss (<code>Esc</code>
335+
key, click outsite, click dismiss button) because they're all calling the same function, which invokes the
336+
native
337+
<code>close()</code>
338+
method of the
339+
<code>Dialog</code>
340+
HTML element, who then will cause the
341+
<code>willDestroyNode</code>
342+
action to execute.</p>
343+
</F.Body>
344+
<F.Footer as |F|>
309345
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
310-
</M.Footer>
346+
</F.Footer>
347+
</Hds::Flyout>
348+
{{/if}}
349+
350+
<button type="button" {{on "click" (fn this.activateFlyout "deactivateFlyoutOnDestroyActive")}}>Deactivated on destroy</button>
351+
352+
{{#if this.deactivateFlyoutOnDestroyActive}}
353+
<Hds::Flyout
354+
id="deactivate-flyout-on-destruction"
355+
@onClose={{fn this.deactivateFlyout "deactivateFlyoutOnDestroyActive"}}
356+
as |F|
357+
>
358+
<F.Header>
359+
Flyout title
360+
</F.Header>
361+
<F.Body>
362+
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button will directly remove the
363+
flyout from the DOM.</p>
364+
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin-top="12px"}}>This is not equivalent to
365+
a manual dismiss (<code>Esc</code>
366+
key, click outsite, click dismiss button) because it will trigger directly the
367+
<code>willDestroyNode</code>
368+
action.</p>
369+
</F.Body>
370+
<F.Footer>
371+
<Hds::Button
372+
type="button"
373+
@text="Confirm"
374+
{{on "click" (fn this.deactivateFlyout "deactivateFlyoutOnDestroyActive")}}
375+
/>
376+
</F.Footer>
377+
</Hds::Flyout>
378+
{{/if}}
379+
380+
<button type="button" {{on "click" (fn this.activateFlyout "deactivateFlyoutOnSubmitActive")}}>Deactivated on form
381+
submit</button>
382+
383+
{{#if this.deactivateFlyoutOnSubmitActive}}
384+
<Hds::Flyout
385+
id="deactivate-flyout-on-submit"
386+
@onClose={{fn this.deactivateFlyout "deactivateFlyoutOnSubmitActive"}}
387+
as |F|
388+
>
389+
<F.Header>
390+
Flyout title
391+
</F.Header>
392+
<F.Body>
393+
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button will submit the form and
394+
the associated action will remove the flyout from the DOM.</p>
395+
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin="12px 0 32px"}}>This is not equivalent
396+
to a manual dismiss (<code>Esc</code>
397+
key, click outsite, click dismiss button) because it will trigger directly the
398+
<code>willDestroyNode</code>
399+
action.</p>
400+
<form id="deactivate-flyout-on-submit__form" {{on "submit" this.deactivateFlyoutOnSubmit}}>
401+
<Hds::Form::TextInput::Field name="deactivate-flyout-on-submit__input" as |F|>
402+
<F.Label>Fill in this input</F.Label>
403+
<F.HelperText>This is a fake input, used to emulate validation on submit</F.HelperText>
404+
{{#if this.deactivateFlyoutOnSubmitValidationError}}
405+
<F.Error>Fill in the input above</F.Error>
406+
{{/if}}
407+
</Hds::Form::TextInput::Field>
408+
</form>
409+
</F.Body>
410+
<F.Footer as |F|>
411+
<Hds::ButtonSet>
412+
<Hds::Button type="submit" @text="Confirm" form="deactivate-flyout-on-submit__form" />
413+
<Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
414+
</Hds::ButtonSet>
415+
</F.Footer>
311416
</Hds::Flyout>
312417
{{/if}}
313418

‎showcase/app/templates/components/modal.hbs‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -568,5 +568,109 @@
568568
</Hds::Modal>
569569
{{/if}}
570570

571+
<br />
572+
<br />
573+
574+
<button type="button" {{on "click" (fn this.activateModal "deactivateModalOnCloseActive")}}>Deactivated with `onClose`</button>
575+
576+
{{#if this.deactivateModalOnCloseActive}}
577+
<Hds::Modal
578+
id="deactivate-modal-on-close"
579+
@onClose={{fn this.deactivateModal "deactivateModalOnCloseActive"}}
580+
as |M|
581+
>
582+
<M.Header>
583+
Modal title
584+
</M.Header>
585+
<M.Body>
586+
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button executes the
587+
<code>F.close</code>
588+
method.</p>
589+
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin-top="12px"}}>This is equivalent to a
590+
manual dismiss (<code>Esc</code>
591+
key, click outsite, click dismiss button) because they're all calling the same function, which invokes the
592+
native
593+
<code>close()</code>
594+
method of the
595+
<code>Dialog</code>
596+
HTML element, who then will cause the
597+
<code>willDestroyNode</code>
598+
action to execute.</p>
599+
</M.Body>
600+
<M.Footer as |F|>
601+
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
602+
</M.Footer>
603+
</Hds::Modal>
604+
{{/if}}
605+
606+
<button type="button" {{on "click" (fn this.activateModal "deactivateModalOnDestroyActive")}}>Deactivated on destroy</button>
607+
608+
{{#if this.deactivateModalOnDestroyActive}}
609+
<Hds::Modal
610+
id="deactivate-modal-on-destruction"
611+
@onClose={{fn this.deactivateModal "deactivateModalOnDestroyActive"}}
612+
as |M|
613+
>
614+
<M.Header>
615+
Modal title
616+
</M.Header>
617+
<M.Body>
618+
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button will directly remove the
619+
modal from the DOM.</p>
620+
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin-top="12px"}}>This is not equivalent to
621+
a manual dismiss (<code>Esc</code>
622+
key, click outsite, click dismiss button) because it will trigger directly the
623+
<code>willDestroyNode</code>
624+
action.</p>
625+
</M.Body>
626+
<M.Footer>
627+
<Hds::Button
628+
type="button"
629+
@text="Confirm"
630+
{{on "click" (fn this.deactivateModal "deactivateModalOnDestroyActive")}}
631+
/>
632+
</M.Footer>
633+
</Hds::Modal>
634+
{{/if}}
635+
636+
<button type="button" {{on "click" (fn this.activateModal "deactivateModalOnSubmitActive")}}>Deactivated on form
637+
submit</button>
638+
639+
{{#if this.deactivateModalOnSubmitActive}}
640+
<Hds::Modal
641+
id="deactivate-modal-on-submit"
642+
@onClose={{fn this.deactivateModal "deactivateModalOnSubmitActive"}}
643+
as |M|
644+
>
645+
<M.Header>
646+
Modal title
647+
</M.Header>
648+
<M.Body>
649+
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button will submit the form and
650+
the associated action will remove the modal from the DOM.</p>
651+
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin="12px 0 32px"}}>This is not equivalent
652+
to a manual dismiss (<code>Esc</code>
653+
key, click outsite, click dismiss button) because it will trigger directly the
654+
<code>willDestroyNode</code>
655+
action.</p>
656+
<form id="deactivate-modal-on-submit__form" {{on "submit" this.deactivateModalOnSubmit}}>
657+
<Hds::Form::TextInput::Field name="deactivate-modal-on-submit__input" as |F|>
658+
<F.Label>Fill in this input</F.Label>
659+
<F.HelperText>This is a fake input, used to emulate validation on submit</F.HelperText>
660+
{{#if this.deactivateModalOnSubmitValidationError}}
661+
<F.Error>Fill in the input above</F.Error>
662+
{{/if}}
663+
</Hds::Form::TextInput::Field>
664+
</form>
665+
</M.Body>
666+
<M.Footer as |F|>
667+
<Hds::ButtonSet>
668+
<Hds::Button type="submit" @text="Confirm" form="deactivate-modal-on-submit__form" />
669+
<Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
670+
</Hds::ButtonSet>
671+
</M.Footer>
672+
</Hds::Modal>
673+
{{/if}}
674+
571675
</section>
572676
{{! template-lint-enable no-autofocus-attribute }}

0 commit comments

Comments
 (0)