-
+
`,
context: args,
@@ -62,7 +74,7 @@ Default.args = {
setConnectorType: action(function (value) {
this.set('selectedConnectorType', value);
}),
- wrapperClass: null,
+ wrapperClass: 'dark',
label: 'Fruit',
id: 'fruit-basket',
};
@@ -75,7 +87,7 @@ Short.args = {
setConnectorType: action(function (value) {
this.set('selectedConnectorType', value);
}),
- wrapperClass: 'w-20',
+ wrapperClass: 'dark w-20',
label: 'Fruit',
id: 'fruit-basket',
};
@@ -88,7 +100,7 @@ ExternalLabel.args = {
setConnectorType: action(function (value) {
this.set('selectedConnectorType', value);
}),
- wrapperClass: null,
+ wrapperClass: 'dark',
id: 'fruit-basket',
};
@@ -102,6 +114,7 @@ Disabled.args = {
}),
label: 'Fruit',
id: 'fruit-basket',
+ wrapperClass: 'dark',
};
export const Errors = Template.bind({});
@@ -116,4 +129,5 @@ Errors.args = {
id: 'fruit-basket',
isValid: false,
error: 'No more fruit',
+ wrapperClass: 'dark',
};
diff --git a/tests/integration/components/mox/input-test.js b/tests/integration/components/mox/input-test.js
index 289dd97c..87ef6a82 100644
--- a/tests/integration/components/mox/input-test.js
+++ b/tests/integration/components/mox/input-test.js
@@ -65,10 +65,14 @@ module('Integration | Component | mox/input', function (hooks) {
`);
let secondField = await find('[data-test-second-field]');
+ let initialPosition = secondField.getBoundingClientRect().top;
assert
.dom('[data-test-first-field] [data-test-mox-input-error]')
.doesNotExist();
- assert.strictEqual(secondField.offsetTop, 54);
+ assert.strictEqual(
+ secondField.getBoundingClientRect().top,
+ initialPosition
+ );
this.set('error', 'message1');
@@ -76,10 +80,20 @@ module('Integration | Component | mox/input', function (hooks) {
.dom('[data-test-first-field] + [data-test-mox-input-error]')
.includesText('message1');
assert.strictEqual(
- secondField.offsetTop,
- 54,
+ secondField.getBoundingClientRect().top,
+ initialPosition,
'the second field does not change its position relative to the top'
);
+
+ this.set('error', null);
+
+ assert
+ .dom('[data-test-first-field] [data-test-mox-input-error]')
+ .doesNotExist();
+ assert.strictEqual(
+ secondField.getBoundingClientRect().top,
+ initialPosition
+ );
});
module('light mode', function () {
diff --git a/tests/integration/components/mox/select-test.js b/tests/integration/components/mox/select-test.js
index 07f67d1a..a1ab4615 100644
--- a/tests/integration/components/mox/select-test.js
+++ b/tests/integration/components/mox/select-test.js
@@ -51,114 +51,6 @@ module('Integration | Component | mox/select', function (hooks) {
assert.dom('[data-test-select-button]').isDisabled();
});
- test('it highlights the field if it is invalid (dark mode)', async function (assert) {
- this.set('onInput', () => {});
-
- await render(hbs`
-
-
-
`);
-
- assert.dom('[data-test-select-button]').hasClass('border-red-800');
- assert.dom('[data-test-select-button]').hasStyle({
- borderColor: 'rgb(153, 27, 27)',
- });
- });
-
- test('it allows to validate and invalidate the field after rendering (dark mode)', async function (assert) {
- this.set('onInput', () => {});
- this.set('isValid', null);
-
- await render(hbs`
-
-
-
`);
-
- assert.dom('[data-test-select-button]').doesNotHaveClass('border-red-800');
- assert.dom('[data-test-select-button]').hasStyle({
- borderColor: 'rgb(107, 114, 128)',
- });
-
- this.set('isValid', false);
-
- assert.dom('[data-test-select-button]').hasClass('border-red-800');
- assert.dom('[data-test-select-button]').hasStyle({
- borderColor: 'rgb(153, 27, 27)',
- });
-
- this.set('isValid', true);
-
- assert.dom('[data-test-select-button]').doesNotHaveClass('border-red-800');
- assert.dom('[data-test-select-button]').hasStyle({
- borderColor: 'rgb(107, 114, 128)',
- });
- });
-
- test('it may display a validation error alongside the field', async function (assert) {
- this.set('onInput', () => {});
-
- await render(hbs`
`);
-
- assert
- .dom('[data-test-mox-select-error]')
- .includesText(`Connector missing`);
- });
-
- test('it is accessible (dark mode)', async function (assert) {
- await render(hbs`
-
-
-
`);
-
- await a11yAudit();
- assert.ok(true, 'no a11y detected');
- });
-
- test('the invalid input state is accessible', async function (assert) {
- this.set('onInput', () => {});
-
- await render(hbs`
-
-
`);
- await a11yAudit();
- assert.ok(true, 'no accessibility errors');
- });
-
module('when toggled', function (hooks) {
hooks.beforeEach(async function () {
await render(hbs`
@@ -267,6 +159,56 @@ module('Integration | Component | mox/select', function (hooks) {
.includesText('Self-Hosted');
});
+ test('it is accessible with custom options (dark mode)', async function (assert) {
+ await render(hbs`
+
+
+ {{#each this.options as |option|}}
+
+ {{/each}}
+
+
`);
+
+ await click('[data-test-select-button]');
+
+ await a11yAudit();
+ assert.ok(true, 'it has no accessibility errors');
+ });
+
+ test('it is accessible with custom options (light mode)', async function (assert) {
+ await render(hbs`
+
+
+ {{#each this.options as |option|}}
+
+ {{/each}}
+
+
`);
+
+ await click('[data-test-select-button]');
+
+ await a11yAudit();
+ assert.ok(true, 'it has no accessibility errors');
+ });
+
test('it allows selecting customized options', async function (assert) {
await render(hbs`
+
- {{#each this.options as |option|}}
-
- {{/each}}
- `);
+ {{#each this.options as |option|}}
+
+ {{/each}}
+
+