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); + }); }); }); });