Adding shop list button tests

src/iss-components/shop-list-button/__snapshots__/shop-list-button.spec.js.snap

@@ -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,
+}
+`;

src/iss-components/shop-list-button/shop-list-button.spec.js

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

src/iss-components/shop-list-button/shop-list-button.vue

@@ -1,55 +1,62 @@
 <template>
-  <transition
+    <transition
-      name="fade"
+        name="fade"
-      mode="out-in">
+        mode="out-in">
-      <baseInputButton
+        <baseInputButton
-          v-bind="$props"
+            v-bind="$props"
-          v-model="selectedValue"
+            v-model="selectedValue"
-          buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
+            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
-          <div
+            <div
-              :aria-label="buttonLabel"
+                :aria-label="buttonLabel"
-              class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
-              <div class="row-one">
+                <div class="row-one">
-                  <span
+                    <span
-                      class="m-0 button-label-copy"
+                        id="buttonLabelSpan"
-                      :class="textPosition">{{
+                        class="m-0 button-label-copy"
-                      buttonLabel
+                        :class="textPosition">{{ buttonLabel }}
-                  }}</span>
+                    </span>
-                  <span
+                    <span
-                      class="m-0 caption ms-1"
+                        id="buttonLabelSubCopySpan"
-                      :class="textPosition">{{
+                        class="m-0 caption ms-1"
-                      buttonLabelSubCopy
+                        :class="textPosition">{{ buttonLabelSubCopy }}
-                  }}</span>
+                    </span>
-                  <div
+                    <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>
-              <div class="row-two">
+                <div class="row-two">
-                  <span
+                    <span
-                      v-if="buttonBodyCopy"
+                        v-if="buttonBodyCopy"
-                      class="m-0 button-label-sub-copy small"
+                        id="buttonBodyCopy"
-                      v-html="buttonBodyCopy"></span>
+                        class="m-0 button-label-sub-copy small"
-              </div>
+                        v-html="buttonBodyCopy"></span>
-              <span
+                </div>
-                  v-if="screenReaderOnlyText"
+                <span
-                  class="sr-only">
+                    v-if="screenReaderOnlyText"
-                  {{ screenReaderOnlyText }}
+                    id="screenReaderOnlyTextSpan"
-              </span>
+                    class="sr-only">
-          </div>
+                    {{ screenReaderOnlyText }}
-      </baseInputButton>
+                </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>