Adding shop list button tests
This commit is contained in:
Michaela Brydon
parent
a388f2cff1
commit
8af8f0b4b5
3 changed files with 973 additions and 47 deletions
|
|
@ -0,0 +1,27 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Shop list button should render correctly with all relevant props 1`] = `
|
||||
<transition-stub name="fade" mode="out-in" appear="false" persisted="false" css="true" selectedvalue="selected value">
|
||||
<base-input-button-stub modelvalue="value of modal" groupname="name of group" buttonwrapperclasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2" ismultiselect="false" validationrules="" isrequired="true" selectinginitiatesload="false" suppresserror="false" buttonlabel="Label of button" buttonlabelsubcopy="Sub copy of button" buttonbodycopy="button body copy" screenreaderonlytext="screen reader only text" additionalbuttondata="[object Object]" alttext="" iswide="false" value="1234"></base-input-button-stub>
|
||||
</transition-stub>
|
||||
`;
|
||||
|
||||
exports[`Shop list button should render correctly with required props 1`] = `
|
||||
<transition-stub name="fade" mode="out-in" appear="false" persisted="false" css="true">
|
||||
<base-input-button-stub modelvalue="value of modal" groupname="name of group" buttonwrapperclasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2" ismultiselect="false" validationrules="" isrequired="true" selectinginitiatesload="false" suppresserror="false" alttext="" iswide="false" value="1234"></base-input-button-stub>
|
||||
</transition-stub>
|
||||
`;
|
||||
|
||||
exports[`Shop list button should render expected data with all relevant props 1`] = `
|
||||
Object {
|
||||
"availabilityRating": null,
|
||||
"displayAvailabilityIndicators": true,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`Shop list button should render expected data with only required props 1`] = `
|
||||
Object {
|
||||
"availabilityRating": null,
|
||||
"displayAvailabilityIndicators": false,
|
||||
}
|
||||
`;
|
||||
|
|
@ -1 +1,893 @@
|
|||
// TODO
|
||||
import { shallowMount, mount } from '@vue/test-utils';
|
||||
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
|
||||
import shopListButton from '@/iss-components/shop-list-button/shop-list-button.vue';
|
||||
|
||||
const buttonLabelReference = 'span[id="buttonLabelSpan"]';
|
||||
const buttonLabelCopyReference = 'span[id="buttonLabelSubCopySpan"]';
|
||||
const availabilityIndicatorBlockReference = 'div[id="availabilityIndicatorBlock"]';
|
||||
const loaderReference = { ref: 'availabilityIndicatorLoader' };
|
||||
const availabilityBadgeReference = 'div[id="availabilityBadge"]';
|
||||
const buttonBodyCopyReference = 'span[id="buttonBodyCopy"]';
|
||||
const screenReaderOnlySpanReference = '#screenReaderOnlyTextSpan';
|
||||
|
||||
describe('Shop list button', () => {
|
||||
describe('should render', () => {
|
||||
test('correctly with required props', async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group'
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
test('correctly with all relevant props', async () => {
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(null)
|
||||
};
|
||||
const wrapper = shallowMount(shopListButton, {
|
||||
propsData: {
|
||||
buttonLabel: 'Label of button',
|
||||
buttonLabelSubCopy: 'Sub copy of button',
|
||||
selectedValue: 'selected value',
|
||||
buttonBodyCopy: 'button body copy',
|
||||
screenReaderOnlyText: 'screen reader only text',
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
test('expected data with only required props', async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group'
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.$data).toMatchSnapshot();
|
||||
});
|
||||
test('expected data with all relevant props', async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
additionalButtonData: {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(null)
|
||||
}
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.$data).toMatchSnapshot();
|
||||
});
|
||||
describe('button label with expected classes', () => {
|
||||
test('when "textPosition" prop provided', async () => {
|
||||
// Arrange
|
||||
const textPosition = 'positionOfText';
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
textPosition
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const buttonLabel = wrapper.find(buttonLabelReference);
|
||||
|
||||
// Assert
|
||||
expect(buttonLabel.exists()).toBeTruthy();
|
||||
expect(buttonLabel.classes()).toContain(textPosition);
|
||||
});
|
||||
test('when "textPosition" prop not provided', async () => {
|
||||
// Arrange
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button'
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const buttonLabel = wrapper.find(buttonLabelReference);
|
||||
|
||||
// Assert
|
||||
expect(buttonLabel.exists()).toBeTruthy();
|
||||
});
|
||||
});
|
||||
describe('button label sub copy with expected classes', () => {
|
||||
test('when "textPosition" prop provided', async () => {
|
||||
// Arrange
|
||||
const textPosition = 'positionOfText';
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
textPosition
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const buttonLabelSubCopy = wrapper.find(buttonLabelCopyReference);
|
||||
|
||||
// Assert
|
||||
expect(buttonLabelSubCopy.exists()).toBeTruthy();
|
||||
expect(buttonLabelSubCopy.classes().length).toBe(4);
|
||||
expect(buttonLabelSubCopy.classes()).toContain('m-0');
|
||||
expect(buttonLabelSubCopy.classes()).toContain('caption');
|
||||
expect(buttonLabelSubCopy.classes()).toContain('ms-1');
|
||||
expect(buttonLabelSubCopy.classes()).toContain(textPosition);
|
||||
});
|
||||
test('when "textPosition" prop not provided', async () => {
|
||||
// Arrange
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button'
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const buttonLabelSubCopy = wrapper.find(buttonLabelCopyReference);
|
||||
|
||||
// Assert
|
||||
expect(buttonLabelSubCopy.exists()).toBeTruthy();
|
||||
expect(buttonLabelSubCopy.classes().length).toBe(3);
|
||||
expect(buttonLabelSubCopy.classes()).toContain('m-0');
|
||||
expect(buttonLabelSubCopy.classes()).toContain('caption');
|
||||
expect(buttonLabelSubCopy.classes()).toContain('ms-1');
|
||||
});
|
||||
});
|
||||
describe('availability indicator block with expected when displayAvailabilityIndicators true', () => {
|
||||
test('and availability rating is high', async () => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve('high')
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const availabilityIndicatorBlock = wrapper.find(availabilityIndicatorBlockReference);
|
||||
|
||||
// Assert
|
||||
expect(availabilityIndicatorBlock.exists()).toBeTruthy();
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('availability-indicator');
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('rounded-pill');
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('green');
|
||||
});
|
||||
test.each(['low', ''])(
|
||||
'and availability rating is not high or null',
|
||||
async (availabilityBadge) => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityBadge)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const availabilityIndicatorBlock = wrapper.find(availabilityIndicatorBlockReference);
|
||||
|
||||
// Assert
|
||||
expect(availabilityIndicatorBlock.exists()).toBeTruthy();
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('availability-indicator');
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('rounded-pill');
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('orange');
|
||||
}
|
||||
);
|
||||
test.each([null, undefined])(
|
||||
'and availability rating is null',
|
||||
async (availabilityRating) => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const availabilityIndicatorBlock = wrapper.find(availabilityIndicatorBlockReference);
|
||||
|
||||
// Assert
|
||||
expect(availabilityIndicatorBlock.exists()).toBeTruthy();
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('availability-indicator');
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('rounded-pill');
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('gray');
|
||||
}
|
||||
);
|
||||
});
|
||||
test('availability indicator block with expected classes when displayAvailabilityIndicators true', async () => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve({})
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const availabilityIndicatorBlock = wrapper.find(availabilityIndicatorBlockReference);
|
||||
|
||||
// Assert
|
||||
expect(availabilityIndicatorBlock.exists()).toBeTruthy();
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('availability-indicator');
|
||||
expect(availabilityIndicatorBlock.classes()).toContain('rounded-pill');
|
||||
});
|
||||
test('availability indicator loader when displayAvailabilityIndicators', async () => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(null)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const availabilityIndicatorLoader = wrapper.findComponent(loaderReference);
|
||||
|
||||
// Assert
|
||||
expect(availabilityIndicatorLoader.exists()).toBeTruthy();
|
||||
expect(availabilityIndicatorLoader.props().loaderPosition).toBe('left');
|
||||
expect(availabilityIndicatorLoader.attributes().allowpageinteraction).toBe('true');
|
||||
});
|
||||
describe('availability badge when displayAvailabilityIndicators true', () => {
|
||||
test('and "availabilityRating" is "high"', async () => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve('high')
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const availabilityBadge = wrapper.find(availabilityBadgeReference);
|
||||
|
||||
// Assert
|
||||
expect(availabilityBadge.exists()).toBeTruthy();
|
||||
expect(availabilityBadge.classes().length).toBe(2);
|
||||
expect(availabilityBadge.classes()).toContain('availability-badge');
|
||||
expect(availabilityBadge.classes()).toContain('green');
|
||||
});
|
||||
test.each(['low', ''])(
|
||||
'and "availabilityRating" is not "high" or null',
|
||||
async (availabilityRating) => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const availabilityBadge = wrapper.find(availabilityBadgeReference);
|
||||
|
||||
// Assert
|
||||
expect(availabilityBadge.exists()).toBeTruthy();
|
||||
expect(availabilityBadge.classes().length).toBe(2);
|
||||
expect(availabilityBadge.classes()).toContain('availability-badge');
|
||||
expect(availabilityBadge.classes()).toContain('orange');
|
||||
}
|
||||
);
|
||||
});
|
||||
test('button body copy when buttonBodyCopy provided', async () => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve({})
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData,
|
||||
buttonBodyCopy: 'body copy'
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const buttonBodyCopy = wrapper.find(buttonBodyCopyReference);
|
||||
|
||||
// Assert
|
||||
expect(buttonBodyCopy.exists()).toBeTruthy();
|
||||
expect(buttonBodyCopy.classes()).toContain('m-0');
|
||||
expect(buttonBodyCopy.classes()).toContain('button-label-sub-copy');
|
||||
expect(buttonBodyCopy.classes()).toContain('small');
|
||||
});
|
||||
test('screen reader only text when screenReaderOnlyText provided', async () => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve({})
|
||||
};
|
||||
const screenReaderOnlyText = 'text just for screen reader';
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData,
|
||||
screenReaderOnlyText
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const screenReaderOnlySpan = wrapper.find(screenReaderOnlySpanReference);
|
||||
|
||||
// Assert
|
||||
expect(screenReaderOnlySpan.exists()).toBeTruthy();
|
||||
expect(screenReaderOnlySpan.classes()).toContain('sr-only');
|
||||
expect(screenReaderOnlySpan.text()).toContain(screenReaderOnlyText);
|
||||
});
|
||||
});
|
||||
describe('should not render', () => {
|
||||
test.each([false, null, undefined])(
|
||||
'availability indicator block when displayAvailabilityIndicators falsy',
|
||||
async (displayAvailabilityIndicators) => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators,
|
||||
availabilityRatingCallback: () => Promise.resolve({})
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const availabilityIndicatorBlock = wrapper.find(availabilityIndicatorBlockReference);
|
||||
|
||||
// Assert
|
||||
expect(availabilityIndicatorBlock.exists()).toBeFalsy();
|
||||
}
|
||||
);
|
||||
test.each([null, undefined])(
|
||||
'availability badge when displayAvailabilityIndicators true and "availabilityRating" is null',
|
||||
async (availabilityRating) => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const availabilityBadge = wrapper.find(availabilityBadgeReference);
|
||||
|
||||
// Assert
|
||||
expect(availabilityBadge.exists()).toBeFalsy();
|
||||
}
|
||||
);
|
||||
test('button body copy when buttonBodyCopy not provided', async () => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve({})
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const buttonBodyCopy = wrapper.find(buttonBodyCopyReference);
|
||||
|
||||
// Assert
|
||||
expect(buttonBodyCopy.exists()).toBeFalsy();
|
||||
});
|
||||
test('screen reader only text when screenReaderOnlyText not provided', async () => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve({})
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const screenReaderOnlySpan = wrapper.find(screenReaderOnlySpanReference);
|
||||
|
||||
// Assert
|
||||
expect(screenReaderOnlySpan.exists()).toBeFalsy();
|
||||
});
|
||||
});
|
||||
describe('computed', () => {
|
||||
describe('isLoaderDisplayed', () => {
|
||||
test.each([null, undefined])(
|
||||
'should return true when availabilityRating is null or undefined',
|
||||
async (availabilityRating) => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.isLoaderDisplayed;
|
||||
|
||||
// Assert
|
||||
expect(result).toBeTruthy();
|
||||
}
|
||||
);
|
||||
test('should return false when availabilityRating is empty string', async () => {
|
||||
// Arrange
|
||||
const availabilityRating = '';
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.isLoaderDisplayed;
|
||||
|
||||
// Assert
|
||||
expect(result).toBeFalsy();
|
||||
});
|
||||
test('should return false when availabilityRating is non-empty string', async () => {
|
||||
// Arrange
|
||||
const availabilityRating = 'not empty string';
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.isLoaderDisplayed;
|
||||
|
||||
// Assert
|
||||
expect(result).toBeFalsy();
|
||||
});
|
||||
});
|
||||
describe('availabilityRatingClass', () => {
|
||||
test.each([null, undefined])(
|
||||
'returns "gray" if availability rating null or undefined',
|
||||
async (availabilityRating) => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
const expected = 'gray';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.availabilityRatingClass;
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(expected);
|
||||
}
|
||||
);
|
||||
test('returns green if availability rating is "high"', async () => {
|
||||
// Arrange
|
||||
const availabilityRating = 'high';
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
const expected = 'green';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.availabilityRatingClass;
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(expected);
|
||||
});
|
||||
test.each(['', 'not high'])(
|
||||
'returns orange if availability not "high"',
|
||||
async (availabilityRating) => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
const expected = 'orange';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.availabilityRatingClass;
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(expected);
|
||||
}
|
||||
);
|
||||
});
|
||||
describe('badgeText', () => {
|
||||
test.each([null, undefined])(
|
||||
'returns empty string if availability rating null or undefined',
|
||||
async (availabilityRating) => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
const expected = '';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.badgeText;
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(expected);
|
||||
}
|
||||
);
|
||||
test('returns "Appts available" if availability rating "high"', async () => {
|
||||
// Arrange
|
||||
const availabilityRating = 'high';
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
const expected = 'Appts available';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.badgeText;
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(expected);
|
||||
});
|
||||
test.each(['', 'not high'])(
|
||||
'returns "Appts low" if availability rating not null or "high"',
|
||||
async (availabilityRating) => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve(availabilityRating)
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
const expected = 'Appts low';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.badgeText;
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(expected);
|
||||
}
|
||||
);
|
||||
});
|
||||
describe('selectedValue', () => {
|
||||
test('"get" returns modalValue prop', async () => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve({})
|
||||
};
|
||||
const modelValue = 'value of modal';
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue,
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.selectedValue;
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(modelValue);
|
||||
});
|
||||
test('"set" emits "update:modalValue" event', async () => {
|
||||
// Arrange
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback: () => Promise.resolve({})
|
||||
};
|
||||
const modelValue = 'value of modal';
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue,
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
const newValue = 'new value';
|
||||
|
||||
// Act
|
||||
wrapper.vm.selectedValue = newValue;
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual(newValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('before mount', () => {
|
||||
test('should call availabilityRatingCallback with expected data if displayAvailabilityIndicators true', async () => {
|
||||
// Arrange
|
||||
const availabilityRating = 'rating';
|
||||
const availabilityRatingCallback = jest.fn().mockImplementation(() => Promise.resolve(availabilityRating));
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: true,
|
||||
availabilityRatingCallback
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(availabilityRatingCallback).toBeCalledTimes(1);
|
||||
});
|
||||
test('should not call availabilityRatingCallback if displayAvailabilityIndicators false', async () => {
|
||||
// Arrange
|
||||
const availabilityRating = 'rating';
|
||||
const availabilityRatingCallback = jest.fn().mockImplementation(() => Promise.resolve(availabilityRating));
|
||||
const additionalButtonData = {
|
||||
displayAvailabilityIndicators: false,
|
||||
availabilityRatingCallback
|
||||
};
|
||||
const wrapper = mount(shopListButton, {
|
||||
propsData: {
|
||||
value: 1234,
|
||||
modelValue: 'value of modal',
|
||||
groupName: 'name of group',
|
||||
buttonLabel: 'label of button',
|
||||
additionalButtonData
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin]
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(availabilityRatingCallback).toBeCalledTimes(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,55 +1,62 @@
|
|||
<template>
|
||||
<transition
|
||||
name="fade"
|
||||
mode="out-in">
|
||||
<baseInputButton
|
||||
v-bind="$props"
|
||||
v-model="selectedValue"
|
||||
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
|
||||
<div
|
||||
:aria-label="buttonLabel"
|
||||
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
|
||||
<div class="row-one">
|
||||
<span
|
||||
class="m-0 button-label-copy"
|
||||
:class="textPosition">{{
|
||||
buttonLabel
|
||||
}}</span>
|
||||
<span
|
||||
class="m-0 caption ms-1"
|
||||
:class="textPosition">{{
|
||||
buttonLabelSubCopy
|
||||
}}</span>
|
||||
<div
|
||||
<transition
|
||||
name="fade"
|
||||
mode="out-in">
|
||||
<baseInputButton
|
||||
v-bind="$props"
|
||||
v-model="selectedValue"
|
||||
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
|
||||
<div
|
||||
:aria-label="buttonLabel"
|
||||
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
|
||||
<div class="row-one">
|
||||
<span
|
||||
id="buttonLabelSpan"
|
||||
class="m-0 button-label-copy"
|
||||
:class="textPosition">{{ buttonLabel }}
|
||||
</span>
|
||||
<span
|
||||
id="buttonLabelSubCopySpan"
|
||||
class="m-0 caption ms-1"
|
||||
:class="textPosition">{{ buttonLabelSubCopy }}
|
||||
</span>
|
||||
<div
|
||||
v-if="displayAvailabilityIndicators"
|
||||
id="availabilityIndicatorBlock"
|
||||
class="availability-indicator rounded-pill"
|
||||
:class="availabilityRatingClass">
|
||||
<div
|
||||
v-if="!isLoaderDisplayed"
|
||||
class="availability-badge"
|
||||
:class="availabilityRating == 'high' ? 'green' : 'orange'"></div>
|
||||
<span
|
||||
v-if="!isLoaderDisplayed"
|
||||
class="m-0 button-auxillary-copy">{{ badgeText }}</span>
|
||||
<loader
|
||||
v-if="isLoaderDisplayed"
|
||||
ref="availabilityIndicatorLoader"
|
||||
loaderPosition="left"
|
||||
:allowPageInteraction="true" />
|
||||
<div
|
||||
v-else
|
||||
id="availabilityIndicator">
|
||||
<div
|
||||
id="availabilityBadge"
|
||||
class="availability-badge"
|
||||
:class="availabilityRating == 'high' ? 'green' : 'orange'">
|
||||
</div>
|
||||
<span class="m-0 button-auxillary-copy">{{ badgeText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-two">
|
||||
<span
|
||||
v-if="buttonBodyCopy"
|
||||
class="m-0 button-label-sub-copy small"
|
||||
v-html="buttonBodyCopy"></span>
|
||||
</div>
|
||||
<span
|
||||
v-if="screenReaderOnlyText"
|
||||
class="sr-only">
|
||||
{{ screenReaderOnlyText }}
|
||||
</span>
|
||||
</div>
|
||||
</baseInputButton>
|
||||
</div>
|
||||
<div class="row-two">
|
||||
<span
|
||||
v-if="buttonBodyCopy"
|
||||
id="buttonBodyCopy"
|
||||
class="m-0 button-label-sub-copy small"
|
||||
v-html="buttonBodyCopy"></span>
|
||||
</div>
|
||||
<span
|
||||
v-if="screenReaderOnlyText"
|
||||
id="screenReaderOnlyTextSpan"
|
||||
class="sr-only">
|
||||
{{ screenReaderOnlyText }}
|
||||
</span>
|
||||
</div>
|
||||
</baseInputButton>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
|
|
@ -68,7 +75,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
availabilityRating: null,
|
||||
displayAvailabilityIndicator: this.additionalButtonData?.displayAvailabilityIndicators ?? false
|
||||
displayAvailabilityIndicators: this.additionalButtonData?.displayAvailabilityIndicators ?? false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -97,11 +104,11 @@ export default {
|
|||
this.additionalButtonData
|
||||
.availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
|
||||
.then((data) => {
|
||||
console.log(`data: ${JSON.stringify(data)}`);
|
||||
this.availabilityRating = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: { }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue