Skip to content

Commit

Permalink
Add tests to check if attributes such as data-test are passed to the …
Browse files Browse the repository at this point in the history 
…modal
  • Loading branch information
@ratierd
ratierd committed Feb 23, 2023
1 parent a23e9f3 commit d71d793
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 17 deletions.
114 changes: 114 additions & 0 deletions tests/acceptance/basic-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,26 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
openSelector: '#example-basic button',
dialogText: 'Basic',
closeSelector: overlaySelector,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});

await assert.dialogOpensAndCloses({
openSelector: '#example-basic button',
dialogText: 'Basic',
closeSelector: dialogCloseButton,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
});

Expand All @@ -41,12 +55,26 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
openSelector: '#example-translucent button',
dialogText: 'With Translucent Overlay',
closeSelector: overlaySelector,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});

await assert.dialogOpensAndCloses({
openSelector: '#example-translucent button',
dialogText: 'With Translucent Overlay',
closeSelector: dialogCloseButton,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
});

Expand All @@ -55,12 +83,26 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
openSelector: '#example-without-overlay button',
dialogText: 'Without Overlay',
closeSelector: '#example-without-overlay',
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});

await assert.dialogOpensAndCloses({
openSelector: '#example-without-overlay button',
dialogText: 'Without Overlay',
closeSelector: dialogCloseButton,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
});

Expand All @@ -69,12 +111,26 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
openSelector: '#example-translucent button',
dialogText: 'With Translucent Overlay',
closeSelector: overlaySelector,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});

await assert.dialogOpensAndCloses({
openSelector: '#example-translucent button',
dialogText: 'With Translucent Overlay',
closeSelector: dialogCloseButton,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
});

Expand All @@ -83,12 +139,26 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
openSelector: '#example-overlay-sibling button',
dialogText: 'With Translucent Overlay as Sibling',
closeSelector: overlaySelector,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});

await assert.dialogOpensAndCloses({
openSelector: '#example-overlay-sibling button',
dialogText: 'With Translucent Overlay as Sibling',
closeSelector: dialogCloseButton,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
});

Expand Down Expand Up @@ -121,12 +191,24 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
'custom-styles-modal-container',
'has provided container-class'
);
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
await assert.dialogOpensAndCloses({
openSelector: '#example-custom-styles button',
dialogText: 'Custom Styles',
closeSelector: dialogCloseButton,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
});

Expand All @@ -142,6 +224,11 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
'ember-modal-dialog-target-attachment-left',
'has targetAttachment class name'
);
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
});
Expand All @@ -151,6 +238,13 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
openSelector: '#example-target-element button',
dialogText: 'Target - Element',
closeSelector: dialogCloseButton,
whileOpen: async function () {
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
});

Expand All @@ -163,6 +257,11 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
assert
.dom(dialogSelector)
.hasClass('my-cool-modal', 'has provided containerClassNames');
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
});
Expand All @@ -179,6 +278,11 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
assert
.dom(dialogSelector)
.hasClass('my-cool-modal-2', 'has provided containerClassNames');
assert.hasDataTest(
dialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
},
});
});
Expand All @@ -198,6 +302,11 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
assert
.dom(inPlaceDialogSelector)
.hasClass('my-custom-class', 'has provided containerClass');
assert.hasDataTest(
inPlaceDialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
assert.strictEqual(
getComputedStyle(dialogElement).getPropertyValue('position'),
'static',
Expand Down Expand Up @@ -247,6 +356,11 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
assert
.dom(inPlaceDialogSelector)
.hasClass('my-custom-class-2', 'has provided containerClassNames');
assert.hasDataTest(
inPlaceDialogSelector,
'my-data-test',
'dialog has data-test attribute'
);
await click(inPlaceCloseButton);
});
});
34 changes: 17 additions & 17 deletions tests/dummy/app/templates/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<CodeSnippet @name="basic-modal-dialog.hbs" />
{{#if this.isShowingBasic}}
{{!-- BEGIN-SNIPPET basic-modal-dialog --}}
<ModalDialog @onClose={{action (mut this.isShowingBasic) false}}>
<ModalDialog data-test="my-data-test" @onClose={{action (mut this.isShowingBasic) false}}>
<h1>Stop! Modal Time!</h1>
<p>Basic</p>
<button onclick={{action (mut this.isShowingBasic) false}}>Close</button>
Expand All @@ -31,7 +31,7 @@
<CodeSnippet @name="translucent-modal-dialog.hbs" />
{{#if this.isShowingTranslucent}}
{{!-- BEGIN-SNIPPET translucent-modal-dialog --}}
<ModalDialog @onClose={{action (mut this.isShowingTranslucent) false}} @translucentOverlay={{true}}>
<ModalDialog data-test="my-data-test" @onClose={{action (mut this.isShowingTranslucent) false}} @translucentOverlay={{true}}>
<h1>Stop! Modal Time!</h1>
<p>With Translucent Overlay</p>
<button onclick={{action (mut this.isShowingTranslucent) false}}>Close</button>
Expand All @@ -46,7 +46,7 @@
<CodeSnippet @name="translucent-modal-dialog-with-callback.hbs" />
{{#if this.isShowingTranslucentWithCallback}}
{{!-- BEGIN-SNIPPET translucent-modal-dialog-with-callback --}}
<ModalDialog @onClose={{action (mut this.isShowingTranslucentWithCallback) false}} @translucentOverlay={{true}} @onClickOverlay={{action "clickedTranslucentOverlay"}}>
<ModalDialog data-test="my-data-test" @onClose={{action (mut this.isShowingTranslucentWithCallback) false}} @translucentOverlay={{true}} @onClickOverlay={{action "clickedTranslucentOverlay"}}>
<h1>Stop! Modal Time!</h1>
<p>Translucent Overlay with Callback</p>
<button onclick={{action (mut this.isShowingTranslucentWithCallback) false}}>Close</button>
Expand All @@ -61,7 +61,7 @@
<CodeSnippet @name="modal-dialog-without-overlay.hbs" />
{{#if this.isShowingWithoutOverlay}}
{{!-- BEGIN-SNIPPET modal-dialog-without-overlay --}}
<ModalDialog @onClose={{action (mut this.isShowingWithoutOverlay) false}} @hasOverlay={{false}} @clickOutsideToClose={{true}}>
<ModalDialog data-test="my-data-test" @onClose={{action (mut this.isShowingWithoutOverlay) false}} @hasOverlay={{false}} @clickOutsideToClose={{true}}>
<h1>Stop! Modal Time!</h1>
<p>Without Overlay</p>
<button onclick={{action (mut this.isShowingWithoutOverlay) false}}>Close</button>
Expand All @@ -76,7 +76,7 @@
<CodeSnippet @name="translucent-modal-dialog-sibling.hbs" />
{{#if this.isShowingSibling}}
{{!-- BEGIN-SNIPPET translucent-modal-dialog-sibling --}}
<ModalDialog @onClose={{action (mut this.isShowingSibling) false}} @translucentOverlay={{true}} @overlayPosition="sibling">
<ModalDialog data-test="my-data-test" @onClose={{action (mut this.isShowingSibling) false}} @translucentOverlay={{true}} @overlayPosition="sibling">
<h1>Stop! Modal Time!</h1>
<p>With Translucent Overlay as Sibling</p>
<button onclick={{action (mut this.isShowingSibling) false}}>Close</button>
Expand All @@ -92,7 +92,7 @@
<CodeSnippet @name="custom-styles.scss" />
{{#if this.isShowingCustomStyles}}
{{!-- BEGIN-SNIPPET custom-styles-modal-dialog --}}
<ModalDialog @onClose={{action (mut this.isShowingCustomStyles) false}} @targetAttachment="none" @containerClass={{this.customContainerClassNames}} @overlayClass="custom-styles-overlay">
<ModalDialog data-test="my-data-test" @onClose={{action (mut this.isShowingCustomStyles) false}} @targetAttachment="none" @containerClass={{this.customContainerClassNames}} @overlayClass="custom-styles-overlay">
<h1>Stop! Modal Time!</h1>
<p>Custom Styles</p>
<button onclick={{action (mut this.isShowingCustomStyles) false}}>Close</button>
Expand All @@ -109,7 +109,7 @@
<CodeSnippet @name="target-selector-modal-dialog.hbs" />
{{#if this.isShowingTargetSelector}}
{{!-- BEGIN-SNIPPET target-selector-modal-dialog --}}
<ModalDialog @onClose={{action "toggleTargetSelector"}} @targetAttachment={{this.exampleTargetAttachment}} @attachment={{this.exampleAttachment}} @target="#alignModalDialogToMe">
<ModalDialog data-test="my-data-test" @onClose={{action "toggleTargetSelector"}} @targetAttachment={{this.exampleTargetAttachment}} @attachment={{this.exampleAttachment}} @target="#alignModalDialogToMe">
<h1>Stop! Modal Time!</h1>
<p>Target - Selector: "#alignModalDialogToMe"</p>
<p>Target Attachment: {{this.exampleTargetAttachment}}</p>
Expand All @@ -130,7 +130,7 @@
<CodeSnippet @name="target-element-modal-dialog.hbs" />
{{#if this.isShowingTargetElement}}
{{!-- BEGIN-SNIPPET target-element-modal-dialog --}}
<ModalDialog @onClose={{action "toggleTargetElement"}} @targetAttachment={{this.exampleTargetAttachment}} @attachment={{this.exampleAttachment}} @target="#bwmde">
<ModalDialog data-test="my-data-test" @onClose={{action "toggleTargetElement"}} @targetAttachment={{this.exampleTargetAttachment}} @attachment={{this.exampleAttachment}} @target="#bwmde">
<h1>Stop! Modal Time!</h1>
<p>Target - Element #bwmde</p>
<p>Target Attachment: {{this.exampleTargetAttachment}}</p>
Expand All @@ -149,7 +149,7 @@
<CodeSnippet @name="subclass-styles.scss" />
{{#if this.isShowingSubclassed}}
{{!-- BEGIN-SNIPPET subclass-modal-dialog --}}
<MyCoolModalDialog @onClose={{action (mut this.isShowingSubclassed) false}} @translucentOverlay={{true}}>
<MyCoolModalDialog data-test="my-data-test" @onClose={{action (mut this.isShowingSubclassed) false}} @translucentOverlay={{true}}>
<h1>Stop! Modal Time!</h1>
<p>Via Subclass</p>
<button onclick={{action (mut this.isShowingSubclassed) false}}>Close</button>
Expand All @@ -166,7 +166,7 @@
<CodeSnippet @name="subclass-styles.scss" />
{{#if this.isShowingSubclassed2}}
{{!-- BEGIN-SNIPPET subclass-modal-dialog-2 --}}
<MyCoolModalDialogTwo @onClose={{action (mut this.isShowingSubclassed2) false}} @translucentOverlay={{true}}>
<MyCoolModalDialogTwo data-test="my-data-test" @onClose={{action (mut this.isShowingSubclassed2) false}} @translucentOverlay={{true}}>
<h1>Stop! Modal Time!</h1>
<p>Via Subclass</p>
<button onclick={{action (mut this.isShowingSubclassed2) false}}>Close</button>
Expand All @@ -184,7 +184,7 @@
I AM THE CONTAINER
{{#if this.isShowingInPlace}}
{{!-- BEGIN-SNIPPET in-place-modal-dialog --}}
<ModalDialog @onClose={{action (mut this.isShowingSubclassed) false}} @renderInPlace={{true}} @targetAttachment="none" @containerClass="ember-modal-dialog-in-place my-custom-class" @overlayClass="ember-modal-overlay-in-place">
<ModalDialog data-test="my-data-test" @onClose={{action (mut this.isShowingInPlace) false}} @renderInPlace={{true}} @targetAttachment="none" @containerClass="ember-modal-dialog-in-place my-custom-class" @overlayClass="ember-modal-overlay-in-place">
<h1>Stop! Modal Time!</h1>
<p>In Place</p>
<button onclick={{action (mut this.isShowingInPlace) false}}>Close</button>
Expand All @@ -196,17 +196,17 @@

<div class="example" id="example-in-place-2">
<h2>In Place</h2>
<button onclick={{action (mut this.isShowingInPlace) true}}>Do It</button>
<button onclick={{action (mut this.isShowingInPlace2) true}}>Do It</button>
<CodeSnippet @name="in-place-modal-dialog.hbs" />
<CodeSnippet @name="in-place.scss" />
<div id="container-in-place-2">
I AM THE CONTAINER
{{#if this.isShowingInPlace}}
{{#if this.isShowingInPlace2}}
{{!-- BEGIN-SNIPPET in-place-modal-dialog --}}
<ModalDialog @onClose={{action (mut this.isShowingSubclassed) false}} @renderInPlace={{true}} @targetAttachment="none" @containerClassNames="ember-modal-dialog-in-place my-custom-class-2" @overlayClassNames="ember-modal-overlay-in-place">
<ModalDialog data-test="my-data-test" @onClose={{action (mut this.isShowingInPlace2) false}} @renderInPlace={{true}} @targetAttachment="none" @containerClassNames="ember-modal-dialog-in-place my-custom-class-2" @overlayClassNames="ember-modal-overlay-in-place">
<h1>Stop! Modal Time!</h1>
<p>In Place</p>
<button onclick={{action (mut this.isShowingInPlace) false}}>Close</button>
<button onclick={{action (mut this.isShowingInPlace2) false}}>Close</button>
</ModalDialog>
{{!-- END-SNIPPET --}}
{{/if}}
Expand All @@ -221,7 +221,7 @@
<div id="container-centered-scrolling">
{{#if this.isShowingCenteredScrolling}}
{{!-- BEGIN-SNIPPET centered-scrolling-modal-dialog --}}
<ModalDialog @onClose={{action "toggleCenteredScrolling"}} @translucentOverlay={{true}} @targetAttachment="none" @containerClass="centered-scrolling-container" @overlayClass="centered-scrolling-overlay" @wrapperClass="centered-scrolling-wrapper">
<ModalDialog data-test="my-data-test" @onClose={{action "toggleCenteredScrolling"}} @translucentOverlay={{true}} @targetAttachment="none" @containerClass="centered-scrolling-container" @overlayClass="centered-scrolling-overlay" @wrapperClass="centered-scrolling-wrapper">
<h1>Really Long Content To Demonstrate Scrolling</h1>
<ul>
<li>Hover over modal and scroll</li>
Expand All @@ -243,7 +243,7 @@
<CodeSnippet @name="element-centered-modal-dialog.hbs" />
{{#if this.isShowingElementCenterModal}}
{{!-- BEGIN-SNIPPET element-centered-modal-dialog --}}
<ModalDialog @onClose={{action (mut this.isShowingElementCenterModal) false}} @elementId={{this.elementId}} @translucentOverlay={{true}} @targetAttachment="elementCenter" @target="#elementCenter">
<ModalDialog data-test="my-data-test" @onClose={{action (mut this.isShowingElementCenterModal) false}} @elementId={{this.elementId}} @translucentOverlay={{true}} @targetAttachment="elementCenter" @target="#elementCenter">
<p>Centered on element.</p>
</ModalDialog>
{{!-- END-SNIPPET --}}
Expand Down
5 changes: 5 additions & 0 deletions tests/helpers/modal-asserts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ export default function registerAssertHelpers(assert) {
return this.dom(selector).isVisible(message);
};

assert.hasDataTest = function (selector, dataTest, message) {
message = message || `${selector} has data-test attribute`;
return this.dom(selector).hasAttribute('data-test', dataTest, message);
};

assert.dialogOpensAndCloses = async function (options) {
const self = this;
await click(options.openSelector, options.context);
Expand Down

0 comments on commit d71d793

Please sign in to comment.