diff --git a/components/toggle/toggle.test.js b/components/toggle/toggle.test.js
index ebd283b4ae..4bb3991d5d 100644
--- a/components/toggle/toggle.test.js
+++ b/components/toggle/toggle.test.js
@@ -1,73 +1,59 @@
import { mount } from '@vue/test-utils';
import DtToggle from './toggle.vue';
-import {
- cleanSpy,
- initializeSpy,
- itBehavesLikeDoesNotRaiseAnyVueWarnings,
- // itBehavesLikeRaisesSingleVueWarning,
-} from '../../tests/shared_examples/validation';
-
-// Constants
+
const baseProps = {};
-const baseSlotData = { default: 'My Toggle Label' };
+const baseSlot = { default: 'My Toggle Label' };
+const baseAttrs = {};
+
+let mockProps = {};
+let mockSlots = {};
+let mockAttrs = {};
describe('DtToggle Tests', () => {
- // Wrappers
let wrapper;
let button;
let label;
let icon;
- // Environment
- let props = baseProps;
- let attrs = {};
- let slots = baseSlotData;
+ const updateWrapper = () => {
+ wrapper = mount(DtToggle, {
+ props: { ...baseProps, ...mockProps },
+ attrs: { ...baseAttrs, ...mockAttrs },
+ slots: { ...baseSlot, ...mockSlots },
+ });
- // Helpers
- const _setChildWrappers = () => {
button = wrapper.find('button');
label = wrapper.find('[data-qa="toggle-label"]');
icon = wrapper.find('.d-toggle__inner');
};
- const _setWrappers = () => {
- wrapper = mount(DtToggle, {
- props,
- attrs,
- slots,
- });
- _setChildWrappers();
- };
-
- // Setup
- beforeEach(function () {});
+ beforeEach(() => {
+ updateWrapper();
+ });
- // Teardown
- afterEach(function () {
- props = baseProps;
- attrs = {};
- slots = baseSlotData;
+ afterEach(() => {
+ mockProps = {};
+ mockAttrs = {};
+ mockSlots = {};
});
- afterAll(() => {});
describe('Presentation Tests', () => {
describe('Common toggle button attrs', () => {
- // Test Setup
- beforeEach(() => {
- _setWrappers();
+ it('should exist', () => {
+ expect(wrapper.exists()).toBe(true);
});
- it('should exist', () => { expect(wrapper.exists()).toBe(true); });
+
it('should have d-toggle class', () => {
expect(button.classes().includes('d-toggle')).toBe(true);
});
- it(
- 'should have type button',
- () => { expect(button.attributes('type')).toBe('button'); },
- );
- it(
- 'should have role switch',
- () => { expect(button.attributes('role')).toBe('switch'); },
- );
+
+ it('should have type button', () => {
+ expect(button.attributes('type')).toBe('button');
+ });
+
+ it('should have role switch', () => {
+ expect(button.attributes('role')).toBe('switch');
+ });
it('should show the icon', () => {
expect(icon.exists()).toBe(true);
@@ -75,108 +61,101 @@ describe('DtToggle Tests', () => {
it('should hide the icon when showIcon prop is false', async () => {
await wrapper.setProps({ showIcon: false });
- await wrapper.vm.$nextTick();
- _setChildWrappers();
+
+ icon = wrapper.find('.d-toggle__inner');
+
expect(icon.exists()).toBe(false);
});
describe('disabled behaviour', () => {
- it(
- 'should set correct disabled attributes when disabled prop is false',
- () => {
- expect(button.attributes('aria-disabled')).toBe('false');
- expect(button.attributes().disabled).toBeUndefined();
- expect(button.classes().includes('d-toggle--disabled')).toBe(false);
- },
- );
-
- it(
- 'should set correct disabled attributes when disabled prop is true',
- async () => {
- await wrapper.setProps({ disabled: true });
- expect(button.attributes('aria-disabled')).toBe('true');
- expect(button.element.disabled).toBe(true);
- expect(button.classes().includes('d-toggle--disabled')).toBe(true);
- },
- );
+ it('should set correct disabled attributes when disabled prop is false', () => {
+ expect(button.attributes('aria-disabled')).toBe('false');
+ expect(button.attributes().disabled).toBeUndefined();
+ expect(button.classes().includes('d-toggle--disabled')).toBe(false);
+ });
+
+ it('should set correct disabled attributes when disabled prop is true', async () => {
+ await wrapper.setProps({ disabled: true });
+
+ expect(button.attributes('aria-disabled')).toBe('true');
+ expect(button.element.disabled).toBe(true);
+ expect(button.classes().includes('d-toggle--disabled')).toBe(true);
+ });
it('should set correct size class', async () => {
await wrapper.setProps({ size: 'sm' });
+
expect(button.classes().includes('d-toggle--small')).toBe(true);
});
});
});
+
describe('Unchecked Toggle', () => {
- // Test Setup
beforeEach(() => {
- props = {
- ...baseProps,
- checked: false,
- };
- _setWrappers();
+ mockProps = { checked: false };
+
+ updateWrapper();
});
- it('should exist', () => { expect(wrapper.exists()).toBe(true); });
+ it('should exist', () => {
+ expect(wrapper.exists()).toBe(true);
+ });
describe('checked behaviour', () => {
- it(
- 'should set correct checked attributes when checked prop is false',
- () => {
- expect(button.attributes('aria-checked')).toBe('false');
- expect(button.classes().includes('d-toggle--checked')).toBe(false);
- },
- );
+ it('should set correct checked attributes when checked prop is false', () => {
+ expect(button.attributes('aria-checked')).toBe('false');
+ expect(button.classes().includes('d-toggle--checked')).toBe(false);
+ });
});
describe('label behaviour', () => {
- it('should exist', () => { expect(label.exists()).toBe(true); });
- it(
- 'should match provided label prop',
- () => { expect(label.text()).toBe(slots.default); },
- );
+ it('should exist', () => {
+ expect(label.exists()).toBe(true);
+ });
+
+ it('should match provided label prop', () => {
+ expect(label.text()).toBe(baseSlot.default);
+ });
});
});
describe('Checked Toggle', () => {
- // Test Setup
beforeEach(() => {
- props = {
- ...baseProps,
+ mockProps = {
checked: true,
disabled: false,
};
- _setWrappers();
+
+ updateWrapper();
});
- it('should exist', () => { expect(wrapper.exists()).toBe(true); });
+ it('should exist', () => {
+ expect(wrapper.exists()).toBe(true);
+ });
describe('checked behaviour', () => {
- it(
- 'should set correct checked attributes when checked prop is true',
- () => {
- expect(button.attributes('aria-checked')).toBe('true');
- expect(button.classes().includes('d-toggle--checked')).toBe(true);
- },
- );
+ it('should set correct checked attributes when checked prop is true', () => {
+ expect(button.attributes('aria-checked')).toBe('true');
+ expect(button.classes().includes('d-toggle--checked')).toBe(true);
+ });
});
describe('label behaviour', () => {
- it('should exist', () => { expect(label.exists()).toBe(true); });
- it(
- 'should match provided label prop',
- () => { expect(label.text()).toBe(slots.default); },
- );
+ it('should exist', () => {
+ expect(label.exists()).toBe(true);
+ });
+
+ it('should match provided label prop', () => {
+ expect(label.text()).toBe(baseSlot.default);
+ });
});
});
describe('Indeterminate Toggle', () => {
- // Test Setup
beforeEach(() => {
- props = {
- ...baseProps,
- checked: 'mixed',
- };
- _setWrappers();
+ mockProps = { checked: 'mixed' };
+
+ updateWrapper();
});
it('should set indeterminate state when checked prop is mixed', () => {
@@ -188,49 +167,41 @@ describe('DtToggle Tests', () => {
});
});
- describe('Accessibility Tests', function () {
- describe('aria-label validations', function () {
- // const warningMessage = '[Vue warn]: You must provide an aria-label when there is no label passed';
+ describe('Accessibility Tests', () => {
+ describe('aria-label validations', () => {
+ let MOCK_CONSOLE_ERROR_SPY;
+ let MOCK_CONSOLE_WARN_SPY;
- // Test Setup
- beforeEach(function () {
- initializeSpy();
+ beforeEach(() => {
+ MOCK_CONSOLE_ERROR_SPY = vi.spyOn(console, 'error');
+ MOCK_CONSOLE_WARN_SPY = vi.spyOn(console, 'warn');
});
- // Test Teardown
- afterEach(function () {
- cleanSpy();
+ afterEach(() => {
+ MOCK_CONSOLE_ERROR_SPY.mockRestore();
+ MOCK_CONSOLE_WARN_SPY.mockRestore();
});
- describe('should not throw a Vue error if a label is provided', function () {
- beforeAll(function () {
- props = baseProps;
- slots = { default: 'My Label' };
- _setWrappers();
+ describe('should not throw a Vue error if a label is provided', () => {
+ it('should not raise any warnings', () => {
+ mockSlots = { default: 'My Label' };
+
+ updateWrapper();
+
+ expect(console.warn).not.toHaveBeenCalled();
});
- itBehavesLikeDoesNotRaiseAnyVueWarnings();
});
describe('should not throw a Vue error if a label is not provided, but an aria-label attr exists', () => {
- beforeAll(() => {
- props = { ...baseProps };
- attrs = { 'aria-label': 'my label' };
- slots = {};
- _setWrappers();
+ it('should not raise any warnings', () => {
+ mockSlots = { default: '' };
+ mockAttrs = { 'aria-label': 'my label' };
+
+ updateWrapper();
+
+ expect(console.warn).not.toHaveBeenCalled();
});
- itBehavesLikeDoesNotRaiseAnyVueWarnings();
});
-
- // todo: fix
- // describe('When neither ariaLabel attr nor a default slot exists', () => {
- // beforeAll(() => {
- // props = { ...baseProps };
- // attrs = {};
- // slots = {};
- // _setWrappers();
- // });
- // itBehavesLikeRaisesSingleVueWarning(warningMessage);
- // });
});
});
});
diff --git a/components/tooltip/tooltip.test.js b/components/tooltip/tooltip.test.js
index 31022b49f8..7306285494 100644
--- a/components/tooltip/tooltip.test.js
+++ b/components/tooltip/tooltip.test.js
@@ -5,51 +5,36 @@ import {
TOOLTIP_DIRECTIONS,
} from './tooltip_constants';
+const baseProps = { delay: false };
+const baseSlots = {
+ default: 'Test message',
+ anchor: ``,
+};
+
+let mockProps = {};
+let mockSlots = {};
+
describe('DtTooltip tests', () => {
- // Wrappers
let wrapper;
let tooltipContainer;
let tooltip;
let anchor;
let onMount;
- const restoreSpy = function () {
- onMount.mockRestore();
- };
-
- const setOnMount = function () {
- onMount = vi.spyOn(DtTooltip.methods, 'onMount').mockClear();
- };
-
- const _clearChildWrappers = () => {
- tooltipContainer = null;
- tooltip = null;
- anchor = null;
- };
-
- // Helpers
- const _setChildWrappers = () => {
- tooltipContainer = wrapper.find('[data-qa="dt-tooltip-container"]');
- tooltip = wrapper.findComponent({ ref: 'content' });
- anchor = wrapper.find('[data-qa="dt-tooltip-anchor"]');
- };
-
- const _mountWrapper = () => {
+ const updateWrapper = () => {
wrapper = mount(DtTooltip, {
+ props: { ...baseProps, ...mockProps },
+ slots: { ...baseSlots, ...mockSlots },
global: {
stubs: {
transition: false,
},
},
- props: {
- delay: false,
- },
- slots: {
- default: 'Test message',
- anchor: ``,
- },
});
- _setChildWrappers();
+
+ tooltipContainer = wrapper.find('[data-qa="dt-tooltip-container"]');
+ tooltip = wrapper.findComponent({ ref: 'content' });
+ anchor = wrapper.find('[data-qa="dt-tooltip-anchor"]');
};
beforeAll(() => {
@@ -59,15 +44,13 @@ describe('DtTooltip tests', () => {
global.cancelAnimationFrame = vi.fn();
});
- beforeEach(async () => {
- _mountWrapper();
+ beforeEach(() => {
+ updateWrapper();
});
- afterEach(async () => {
- // close to unmount tippy
- await wrapper.setProps({ show: false });
- wrapper.unmount();
- _clearChildWrappers();
+ afterEach(() => {
+ mockProps = {};
+ mockSlots = {};
});
afterAll(() => {
@@ -78,136 +61,114 @@ describe('DtTooltip tests', () => {
describe('Presentation Tests', () => {
describe('when tooltip is open', () => {
- beforeEach(async () => {
- await wrapper.setProps({ show: true });
- _setChildWrappers();
+ beforeEach(() => {
+ mockProps = { show: true };
+
+ updateWrapper();
+ });
+
+ it('should render the component', () => {
+ expect(wrapper.exists()).toBe(true);
+ });
+
+ it('should render the container', () => {
+ expect(tooltipContainer.exists()).toBe(true);
+ });
+
+ it('should render the tooltip', () => {
+ expect(tooltip.exists()).toBe(true);
+ });
+
+ it('should render the anchor', () => {
+ expect(anchor.text()).toBe('Hover me');
});
- it(
- 'should render the component',
- () => { expect(wrapper.exists()).toBe(true); },
- );
- it(
- 'should render the container',
- () => { expect(tooltipContainer.exists()).toBe(true); },
- );
- it(
- 'should render the tooltip',
- () => { expect(tooltip.exists()).toBe(true); },
- );
- it(
- 'should render the anchor',
- () => { expect(anchor.text()).toBe('Hover me'); },
- );
it('should set default classes', () => {
expect(tooltip.classes('d-tooltip__arrow-tippy--top')).toBe(true);
});
- it('should render the message', async () => {
+
+ it('should render the message', () => {
expect(tooltip.text()).toBe('Test message');
});
describe('When inverted is true', () => {
- beforeEach(async () => {
- await wrapper.setProps({ inverted: true });
- _setChildWrappers();
- });
it('should have the inverted class set', () => {
+ mockProps = { inverted: true };
+
+ updateWrapper();
+
expect(tooltip.classes(TOOLTIP_KIND_MODIFIERS.inverted)).toBe(true);
});
});
describe('When a placement is provided', () => {
- TOOLTIP_DIRECTIONS.forEach(placement => describe(`When direction is ${placement}`, () => {
- beforeEach(async () => {
- await wrapper.setProps({ placement });
- });
-
- it('should have correct arrow direction class', async () => {
- expect(tooltip.classes(`d-tooltip__arrow-tippy--${placement}`)).toBe(true);
- });
- }));
+ TOOLTIP_DIRECTIONS.forEach(placement =>
+ describe(`When direction is ${placement}`, () => {
+ it('should have correct arrow direction class', () => {
+ mockProps = { placement };
+
+ updateWrapper();
+
+ expect(tooltip.classes(`d-tooltip__arrow-tippy--${placement}`)).toBe(true);
+ });
+ }));
});
});
});
describe('Interactivity Tests', () => {
- beforeEach(setOnMount);
- afterEach(restoreSpy);
+ beforeEach(() => {
+ onMount = vi.spyOn(DtTooltip.methods, 'onMount').mockClear();
+ });
+
+ afterEach(() => {
+ onMount.mockRestore();
+ });
describe('When show prop is true', () => {
- beforeEach(async () => {
+ it('should display tooltip', async () => {
await wrapper.setProps({ show: true });
- });
- it('should display tooltip', async () => {
expect(tooltip.isVisible()).toBe(true);
});
});
describe('When show prop is false', () => {
- beforeEach(async () => {
+ it('should display tooltip', async () => {
await wrapper.setProps({ show: false });
- });
- it('should display tooltip', async () => {
expect(tooltip.isVisible()).toBe(false);
});
});
describe('When show prop is unset (default behaviour)', () => {
- beforeEach(async () => {
- await wrapper.setProps({ show: null });
- _setChildWrappers();
+ beforeEach(() => {
+ mockProps = { show: null };
+
+ updateWrapper();
});
describe('When mouseenter tooltip', () => {
- beforeEach(async () => {
+ it('should display tooltip', async () => {
await wrapper.setProps({ delay: false });
await anchor.trigger('mouseenter');
- });
- it('should display tooltip', () => {
expect(tooltip.isVisible()).toBe(true);
});
});
- // jsdom does not yet support :focus-visible, commenting this out for now...
- // describe('When focusin tooltip', function () {
- // beforeEach(async function () {
- // await anchor.trigger('focusin');
- // });
-
- // it('should display tooltip', function () {
- // assert.isTrue(tooltip.isVisible());
- // });
-
- // describe('When escape is pressed', function () {
- // beforeEach(async function () {
- // await anchor.trigger('keydown', { key: 'Escape' });
- // });
-
- // it('should hide tooltip', function () {
- // assert.isFalse(wrapper.vm.isShown);
- // });
- // });
- // });
-
describe('When mouseleave tooltip', () => {
- beforeEach(async () => {
+ it('should hide tooltip', async () => {
await anchor.trigger('mouseleave');
- });
- it('should hide tooltip', () => {
expect(tooltip.isVisible()).toBe(false);
});
});
describe('When focusout tooltip', () => {
- beforeEach(async () => {
+ it('should display tooltip', async () => {
await anchor.trigger('focusout');
- });
- it('should display tooltip', () => {
expect(tooltip.isVisible()).toBe(false);
});
});
diff --git a/components/validation_messages/validation_messages.test.js b/components/validation_messages/validation_messages.test.js
index ebdd0af702..fd2700e80e 100644
--- a/components/validation_messages/validation_messages.test.js
+++ b/components/validation_messages/validation_messages.test.js
@@ -1,215 +1,199 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import { VALIDATION_MESSAGE_TYPES } from '@/common/constants';
import DtValidationMessages from './validation_messages.vue';
import {
setFormattedValidationMessages,
addFormattedValidationMessage,
} from '../../tests/helpers/validation_messages';
-import {
- itBehavesLikePassesCustomPropValidation,
- itBehavesLikeFailsCustomPropValidation,
-} from '../../tests/shared_examples/validation';
-// Test Constants
-const baseProps = {};
-const baseValidationMessages = [{
+const MOCK_BASE_VALIDATION_MESSAGES = [{
message: 'Error',
type: VALIDATION_MESSAGE_TYPES.ERROR,
}];
+let MOCK_VALIDATION_MESSAGES;
+
+const baseProps = {};
+
+let mockProps = {};
+
describe('Validation Messages Tests', () => {
- // Wrappers
let wrapper;
let messages;
- // Test Environment
- let props = baseProps;
- let attrs = {};
- let validationMessages;
-
- // Helpers
- const _setWrappers = () => {
- wrapper = shallowMount(DtValidationMessages, {
- props,
- attrs,
+ const updateWrapper = () => {
+ wrapper = mount(DtValidationMessages, {
+ props: { ...baseProps, ...mockProps },
});
+
messages = wrapper.findAll('[data-qa="validation-message"]');
};
- // Test Teardown
- afterEach(function () {
- props = baseProps;
- attrs = {};
+ beforeEach(() => {
+ updateWrapper();
});
- describe('Presentation Tests', () => {
- // Shared Examples
- const itBehavesLikeHasNoVisibleValidationMessages = () => {
- it(
- 'should not have any visible validation messages',
- () => { expect(messages.length).toBe(0); },
- );
- };
-
- const itBehavesLikeHasValidationMessages = (validationMessagesVisible, firstVisibleValidationMessage) => {
- it(
- 'should have expected number of visible validation messages',
- () => {
- expect(messages.length).toBe(validationMessagesVisible);
- },
- );
-
- it('should have matching first validation message', () => {
- expect(messages.at(0).text()).toBe(firstVisibleValidationMessage);
- });
- };
+ afterEach(() => {
+ mockProps = {};
+ });
+ describe('Presentation Tests', () => {
describe('When there is a success validation message', () => {
- // Test Environment
- const successValidationMessage = 'Success';
+ const MOCK_SUCCESS_VALIDATION_MESSAGE = 'Success';
- // Test Setup
beforeEach(() => {
- validationMessages = setFormattedValidationMessages(VALIDATION_MESSAGE_TYPES.SUCCESS, successValidationMessage);
+ MOCK_VALIDATION_MESSAGES = setFormattedValidationMessages(
+ VALIDATION_MESSAGE_TYPES.SUCCESS,
+ MOCK_SUCCESS_VALIDATION_MESSAGE);
});
describe('When the radio group renders', () => {
- // Test Setup
beforeEach(() => {
- props = { ...baseProps, validationMessages };
- _setWrappers();
+ mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES };
+
+ updateWrapper();
});
- itBehavesLikeHasValidationMessages(1, successValidationMessage);
- });
+ it('should have expected number of visible validation messages', () => {
+ expect(messages.length).toBe(1);
+ });
- describe('When validation messages are hidden', () => {
- // Test Setup
- beforeEach(() => {
- props = { ...baseProps, validationMessages, showMessages: false };
+ it('should have matching first validation message', () => {
+ expect(messages.at(0).text()).toBe(MOCK_SUCCESS_VALIDATION_MESSAGE);
});
+ });
+ describe('When validation messages are hidden', () => {
describe('When the radio group renders', () => {
- // Test Setup
- beforeEach(() => { _setWrappers(); });
+ it('should not have any visible validation messages', () => {
+ mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES, showMessages: false };
- itBehavesLikeHasNoVisibleValidationMessages();
+ updateWrapper();
+
+ expect(messages.length).toBe(0);
+ });
});
});
describe('When there is also a warning validation message', () => {
- // Test Environment
- const warningValidationMessage = 'Warning';
+ const MOCK_WARNING_VALIDATION_MESSAGE = 'Warning';
- // Test Setup
beforeEach(() => {
- validationMessages = addFormattedValidationMessage(
- validationMessages,
+ MOCK_VALIDATION_MESSAGES = addFormattedValidationMessage(
+ MOCK_VALIDATION_MESSAGES,
VALIDATION_MESSAGE_TYPES.WARNING,
- warningValidationMessage,
+ MOCK_WARNING_VALIDATION_MESSAGE,
);
});
describe('When the radio group renders', () => {
- // Test Setup
beforeEach(() => {
- props = { ...baseProps, validationMessages };
- _setWrappers();
+ mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES };
+
+ updateWrapper();
});
- itBehavesLikeHasValidationMessages(1, warningValidationMessage);
+ it('should have expected number of visible validation messages', () => {
+ expect(messages.length).toBe(1);
+ });
+
+ it('should have matching first validation message', () => {
+ expect(messages.at(0).text()).toBe(MOCK_WARNING_VALIDATION_MESSAGE);
+ });
});
describe('When there is also an error validation message', () => {
- // Test Environment
- const errorValidationMessage = 'Error';
+ const MOCK_ERROR_VALIDATION_MESSAGE = 'Error';
- // Test Setup
beforeEach(() => {
- validationMessages = addFormattedValidationMessage(
- validationMessages,
+ MOCK_VALIDATION_MESSAGES = addFormattedValidationMessage(
+ MOCK_VALIDATION_MESSAGES,
VALIDATION_MESSAGE_TYPES.ERROR,
- errorValidationMessage,
+ MOCK_ERROR_VALIDATION_MESSAGE,
);
});
describe('When the radio group renders', () => {
- // Test Setup
beforeEach(() => {
- props = { ...baseProps, validationMessages };
- _setWrappers();
+ mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES };
+
+ updateWrapper();
});
- itBehavesLikeHasValidationMessages(1, errorValidationMessage);
+ it('should have expected number of visible validation messages', () => {
+ expect(messages.length).toBe(1);
+ });
+
+ it('should have matching first validation message', () => {
+ expect(messages.at(0).text()).toBe(MOCK_ERROR_VALIDATION_MESSAGE);
+ });
});
});
});
});
describe('When there are malformed validation messages', () => {
- // Test Environment
- const emptyValidationMessage = '';
+ const MOCK_EMPTY_VALIDATION_MESSAGE = '';
- // Test Setup
beforeEach(() => {
- validationMessages = setFormattedValidationMessages(VALIDATION_MESSAGE_TYPES.WARNING, emptyValidationMessage);
+ MOCK_VALIDATION_MESSAGES = setFormattedValidationMessages(
+ VALIDATION_MESSAGE_TYPES.WARNING,
+ MOCK_EMPTY_VALIDATION_MESSAGE);
});
describe('When there is a warning validation message with an empty message', () => {
- // Test Setup
- beforeEach(() => {
- props = { ...baseProps, validationMessages };
- _setWrappers();
- });
+ it('should not have any visible validation messages', () => {
+ mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES };
+
+ updateWrapper();
- itBehavesLikeHasNoVisibleValidationMessages();
+ expect(messages.length).toBe(0);
+ });
});
describe('When there is also a correct success validation message', () => {
- // Test Environment
- const successValidationMessage = 'Success';
+ describe('When the validation message renders', () => {
+ it('should not have any visible validation messages', () => {
+ const MOCK_SUCCESS_VALIDATION_MESSAGE = 'Success';
- // Test Setup
- beforeEach(() => {
- validationMessages = addFormattedValidationMessage(
- validationMessages,
- VALIDATION_MESSAGE_TYPES.SUCCESS,
- successValidationMessage,
- );
- });
+ MOCK_VALIDATION_MESSAGES = addFormattedValidationMessage(
+ MOCK_VALIDATION_MESSAGES,
+ VALIDATION_MESSAGE_TYPES.SUCCESS,
+ MOCK_SUCCESS_VALIDATION_MESSAGE,
+ );
- describe('When the validation message renders', () => {
- // Test Setup
- beforeEach(() => {
- props = { ...baseProps, validationMessages };
- _setWrappers();
- });
+ mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES };
+
+ updateWrapper();
- itBehavesLikeHasNoVisibleValidationMessages();
+ expect(messages.length).toBe(0);
+ });
});
});
describe('When there is also a correct warning validation message', () => {
- // Test Environment
- const warningValidationMessage = 'Warning';
-
- // Test Setup
- beforeEach(() => {
- validationMessages = addFormattedValidationMessage(
- validationMessages,
- VALIDATION_MESSAGE_TYPES.WARNING,
- warningValidationMessage,
- );
- });
-
describe('When the validation message renders', () => {
- // Test Setup
+ const MOCK_WARNING_VALIDATION_MESSAGE = 'Warning';
+
beforeEach(() => {
- props = { ...baseProps, validationMessages };
- _setWrappers();
+ MOCK_VALIDATION_MESSAGES = addFormattedValidationMessage(
+ MOCK_VALIDATION_MESSAGES,
+ VALIDATION_MESSAGE_TYPES.WARNING,
+ MOCK_WARNING_VALIDATION_MESSAGE,
+ );
+
+ mockProps = { validationMessages: MOCK_VALIDATION_MESSAGES };
+
+ updateWrapper();
});
- itBehavesLikeHasValidationMessages(1, warningValidationMessage);
+ it('should have expected number of visible validation messages', () => {
+ expect(messages.length).toBe(1);
+ });
+
+ it('should have matching first validation message', () => {
+ expect(messages.at(0).text()).toBe(MOCK_WARNING_VALIDATION_MESSAGE);
+ });
});
});
});
@@ -217,19 +201,17 @@ describe('Validation Messages Tests', () => {
describe('Accessibility Tests', () => {
describe('When there is a validation message', () => {
- // Test Setup
beforeEach(() => {
- props = { ...baseProps, validationMessages: baseValidationMessages };
+ mockProps = { validationMessages: MOCK_BASE_VALIDATION_MESSAGES };
+
+ updateWrapper();
});
describe('When validation messages are shown', () => {
- // Test Setup
- beforeEach(() => { _setWrappers(); });
+ it('has a status role', () => {
+ expect(messages.at(0).attributes('role')).toBe('status');
+ });
- it(
- 'has a status role',
- () => { expect(messages.at(0).attributes('role')).toBe('status'); },
- );
it('has aria-live set to polite', () => {
expect(messages.at(0).attributes('aria-live')).toBe('polite');
});
@@ -239,13 +221,16 @@ describe('Validation Messages Tests', () => {
describe('Validation Tests', () => {
describe('When there are validation messages', () => {
- // Test Environment
- const prop = DtValidationMessages.props.validationMessages;
+ const MOCK_PROP = DtValidationMessages.props.validationMessages;
- itBehavesLikePassesCustomPropValidation(prop, ['Error']);
+ it('passes custom prop validation', () => {
+ expect(MOCK_PROP.validator(['Error'])).toBe(true);
+ });
describe('When the provided messages are numeric', () => {
- itBehavesLikeFailsCustomPropValidation(prop, [123]);
+ it('fails custom prop validation', () => {
+ expect(MOCK_PROP.validator([123])).toBe(false);
+ });
});
});
});