unit tests for alerts on license-plate-lookup

src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js

@@ -0,0 +1,61 @@
+/* eslint-env jest */
+import { getDamageString } from '@/helpers/damage-helper';
+import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
+import { RouterLinkStub } from '@vue/test-utils';
+import { render } from '@testing-library/vue';
+import '@testing-library/jest-dom';
+import LicensePlateLookupAlertsComponent from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
+
+jest.mock('@/helpers/damage-helper');
+
+const mountOptions = {
+    global: {
+        stubs: {
+            RouterLink: RouterLinkStub,
+        },
+        mixins: [
+            {
+                methods: {
+                    getCmsContent: jest.fn(() => ''),
+                    getFooterInfoBoxHeight: jest.fn(() => 80),
+                    cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
+                },
+            },
+        ],
+    },
+};
+
+describe('license-plate-lookup-alerts.vue', () => {
+    test('VehicleNotFoundAlert is displayed on the screen', () => {
+        // Arrange
+        mountOptions.props = {
+            activeAlertType: vehicleLookupAlertTypes.NOT_FOUND,
+        };
+
+        // Act
+        const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
+        const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
+        const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
+
+        // Assert
+        expect(vehicleNotFoundAlert).toBeVisible();
+        expect(vehicleNotMatchedAlert).toEqual(null);
+    });
+
+    test('VehicleNotMatchedAlert is displayed on the screen', () => {
+        // Arrange
+        getDamageString.mockImplementation(() => 'Mock Damage String');
+        mountOptions.props = {
+            activeAlertType: vehicleLookupAlertTypes.NOT_MATCHED,
+        };
+
+        // Act
+        const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
+        const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
+        const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
+
+        // Assert
+        expect(vehicleNotMatchedAlert).toBeVisible();
+        expect(vehicleNotFoundAlert).toEqual(null);
+    });
+})

src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue

@@ -3,6 +3,7 @@
       alertClass="alert-danger"
       cmsWidgetName="AlertVinNotFoundWidget"
       id="vehicle-not-found-alert"
+      aria-label="vehicle-not-found-alert"
     />
   </template>
   <script>

src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue

@@ -4,6 +4,7 @@
       cmsWidgetName="AlertMatchedDifferentVehicleWidget"
       :manualCopy="body"
       :manualHeadline="header"
+          aria-label="vehicle-not-matched-alert"
     />
   </template>
   <script>