Skip to content
This repository has been archived by the owner on Dec 15, 2023. It is now read-only.

Commit

Permalink
test(toggle, tooltip, validation-messages): new test template - vue3 (#…
Browse files Browse the repository at this point in the history 
…1250)

* test(toggle, tooltip, validation-messages): new test template

---------

Co-authored-by: iropolo <ignacio.ropolo@dialpad.com>
  • Loading branch information
@iropolo
iropolo and iropolo authored Oct 6, 2023
1 parent 8138fd3 commit f1221d4
Show file tree
Hide file tree
Showing 3 changed files with 303 additions and 386 deletions.
249 changes: 110 additions & 139 deletions components/toggle/toggle.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,182 +1,161 @@
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);
});

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', () => {
Expand All @@ -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);
// });
});
});
});
Expand Down
Loading

0 comments on commit f1221d4

Please sign in to comment.