INSR-10489: Add tests for state-specific text on payment-method

src/layouts/payment-method/payment-method.spec.js

@@ -20,7 +20,7 @@ jest.mock('@/helpers/order-helper.js', () => ({
     saveSession: jest.fn()
 }));
 
-function setupMocks({ customMountOptions = {}, queryString }, mainInitialState = {}, customMixin = null) {
+function setupMocks({ customMountOptions = {}, queryString }, mainInitialState = {}, customMixin = null, mockCmsContent = '') {
     const mountOptions = getMountOptions({
         ...customMountOptions,
         route: { query: { issPage: issPageValues.PAYMENT_METHOD, ...queryString }, params: {} },
@@ -51,7 +51,9 @@ function setupMocks({ customMountOptions = {}, queryString }, mainInitialState =
     };
     const cmsMixin = {
         methods: {
-            getCmsContent: jest.fn()
+            getCmsContent: jest.fn((widget, field) => {
+                return mockCmsContent;
+            })
         }
     }
 
@@ -320,4 +322,28 @@ describe('payment-method.vue', () => {
             expect(submitWorkOrder).toHaveBeenCalledTimes(1);
         });
     });
+
+    describe('State Specific Text Rendering', () => {
+        test('State specific textBlock component exists when CMS content for it exists', () => {
+            // Arrange
+            const mockCmsContent = 'This is a test CMS content for state specific text.';
+            const wrapper = setupMocks({}, {}, null, mockCmsContent);
+
+            // Act
+            const stateSpecificTextBlock = wrapper.find('[class="state-specific-text"]');
+
+            // Assert
+            expect(stateSpecificTextBlock.exists()).toBe(true);
+        });
+        test('State specific textBlock component does not exist when CMS content for it does not exist', () => {
+            // Arrange
+            const wrapper = setupMocks({}, {}, null, '');
+
+            // Act
+            const stateSpecificTextBlock = wrapper.find('[class="state-specific-text"]');
+
+            // Assert
+            expect(stateSpecificTextBlock.exists()).toBe(false);
+        });
+    });
 });

src/layouts/payment-method/payment-method.vue

@@ -21,6 +21,7 @@
                         cmsWidgetName="SiteSubHeaderWidget" />
                     <textBlock
                         v-if="stateSpecificText"
+                        class="state-specific-text"
                         :customText="stateSpecificText" />
                     <div class="main-content-container">
                         <hr class="section-divider" />