INSR-8489: Address copilot suggestions for tool-tip and mobile fee modal
- Correct default values for cmsWidgetName prop - Change name of tool-tip component to match pattern (kebab-case) - Automatically unmount tool-tip component after each test - Accessibility improvements for tool-tip icon - Remove unused event handler wiring - Narrow CSS selector for price row to prevent unintended styling - Remove unused imports
This commit is contained in:
parent
f46e584d6b
commit
818914b1a8
4 changed files with 18 additions and 19 deletions
|
|
@ -1,8 +1,7 @@
|
|||
<template>
|
||||
<div class="advanced-mobile-modal-container">
|
||||
<modal
|
||||
ref="advancedMobileModal"
|
||||
:onModalClosedCallback="onModalClosed">
|
||||
ref="advancedMobileModal">
|
||||
<div>
|
||||
<div class="header">{{ modalHeaderText }}</div>
|
||||
<div class="subheader">{{ modalHeaderSubText }}</div>
|
||||
|
|
@ -42,7 +41,7 @@ export default {
|
|||
props: {
|
||||
cmsWidgetName: {
|
||||
type: String,
|
||||
default: 'SuggestTimeslotModal'
|
||||
default: 'AdvancedMobileModal'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -124,8 +124,6 @@
|
|||
|
||||
<script>
|
||||
import { useMainStore } from '@/store';
|
||||
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
|
||||
import textBlock from '@/digital-components/text-block/text-block.vue';
|
||||
import textLink from '@/ux-components/text-link/text-link.vue';
|
||||
import { formatAmountInDollars } from '@/helpers/text-helper.js';
|
||||
import advancedMobileModal from '@/iss-components/cart-dropdown/advanced-mobile-modal/advanced-mobile-modal.vue';
|
||||
|
|
@ -470,7 +468,7 @@ export default {
|
|||
.price-row {
|
||||
display: flex;
|
||||
|
||||
:last-child {
|
||||
>:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { shallowMount, mount } from "@vue/test-utils";
|
||||
import { shallowMount, mount, enableAutoUnmount } from "@vue/test-utils";
|
||||
import toolTip from "@/ux-components/tool-tip/tool-tip.vue";
|
||||
|
||||
const mockMixin = {
|
||||
|
|
@ -18,6 +18,7 @@ function setupMocks(mountOptionsMockData = {}) {
|
|||
}
|
||||
|
||||
describe("toolTip.vue", () => {
|
||||
enableAutoUnmount(afterEach);
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
<template>
|
||||
<div class="tooltip-container" ref="container">
|
||||
<span @click="toggleTooltip" class="tooltip-icon">
|
||||
<slot name="icon">
|
||||
<img src="@/assets/img/icons/info-circle-blue.svg" />
|
||||
</slot>
|
||||
</span>
|
||||
<span
|
||||
class="tooltip-icon"
|
||||
role="button"
|
||||
aria-label="Show more information"
|
||||
@click="toggleTooltip"
|
||||
@keydown.enter.prevent="toggleTooltip"
|
||||
@keydown.space.prevent="toggleTooltip">
|
||||
<slot name="icon">
|
||||
<img src="@/assets/img/icons/info-circle-blue.svg" alt="" />
|
||||
</slot>
|
||||
</span>
|
||||
<span
|
||||
v-if="isVisible"
|
||||
class="tooltip"
|
||||
|
|
@ -22,16 +28,11 @@
|
|||
import { getStringWithCustomValues } from '@/helpers/cms-content-helper';
|
||||
|
||||
export default {
|
||||
name: "toolTip",
|
||||
name: "tool-tip",
|
||||
props: {
|
||||
cmsWidgetName: {
|
||||
type: String,
|
||||
default(rawProps) {
|
||||
if (!rawProps.cmsWidgetName) {
|
||||
console.log("Error: Missing a CMS Widget Name (required field)");
|
||||
}
|
||||
return "widgetUndefined";
|
||||
},
|
||||
default: 'widgetUndefined'
|
||||
},
|
||||
customValueMap: {
|
||||
type: Object,
|
||||
|
|
|
|||
Loading…
Reference in a new issue