[VA-IIR 755] fix VA Alert on search form not closing (#30341)

department-of-veterans-affairs · Jun 17, 2024 · 8867402 · 8867402
1 parent 48a4fe8
commit 8867402
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/src/applications/yellow-ribbon/actions/index.unit.spec.js b/src/applications/yellow-ribbon/actions/index.unit.spec.js
@@ -2,6 +2,7 @@
 import { expect } from 'chai';
 import sinon from 'sinon';
 // Relative imports.
+import { apiRequest } from 'platform/utilities/api';
 import {
   fetchResultsAction,
   fetchResultsFailure,
@@ -60,6 +61,8 @@ describe('Yellow Ribbon actions', () => {
   describe('fetchResultsThunk', () => {
     let mockedLocation;
     let mockedHistory;
+    let updateQueryParamsStub;
+    let apiRequestStub;
 
     beforeEach(() => {
       mockedLocation = {
@@ -70,6 +73,22 @@ describe('Yellow Ribbon actions', () => {
       mockedHistory = {
         replaceState: sinon.stub(),
       };
+
+      const queryParams = new URLSearchParams(mockedLocation.search);
+
+      apiRequestStub = sinon.stub(apiRequest, 'default').resolves({
+        data: {
+          results: [],
+          totalResults: 0,
+        },
+      });
+
+      updateQueryParamsStub = sinon.stub(queryParams, 'updateQuery').returns();
+    });
+
+    afterEach(() => {
+      apiRequestStub.restore();
+      updateQueryParamsStub.restore();
     });
 
     it('updates search params', async () => {

diff --git a/src/applications/yellow-ribbon/containers/SearchResults/index.jsx b/src/applications/yellow-ribbon/containers/SearchResults/index.jsx
@@ -2,7 +2,10 @@
 /* eslint-disable react/static-property-placement */
 // Dependencies.
 import React, { Component } from 'react';
-import { VaPagination } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+import {
+  VaAlert,
+  VaPagination,
+} from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import PropTypes from 'prop-types';
 import recordEvent from 'platform/monitoring/record-event';
 import { connect } from 'react-redux';
@@ -236,10 +239,10 @@ export class SearchResults extends Component {
     // Show the error alert box if there was an error.
     if (error) {
       return (
-        <va-alert status="error">
+        <VaAlert status="error">
           <h3 slot="headline">Something went wrong</h3>
           <div className="usa-alert-text vads-u-font-size--base">{error}</div>
-        </va-alert>
+        </VaAlert>
       );
     }
 
@@ -258,8 +261,9 @@ export class SearchResults extends Component {
           >
             No schools found for your search criteria.
           </h2>
-          <va-alert
-            onClose={toggleAlertToolTip}
+          <VaAlert
+            closeBtnAriaLabel="Close notification"
+            onCloseEvent={toggleAlertToolTip}
             visible={isToolTipOpen}
             closeable
             status="info"
@@ -268,7 +272,7 @@ export class SearchResults extends Component {
             <div className="usa-alert-text vads-u-font-size--base">
               {TOOL_TIP_CONTENT}
             </div>
-          </va-alert>
+          </VaAlert>
         </>
       );
     }
@@ -296,8 +300,9 @@ export class SearchResults extends Component {
             </span>
           </span>
         </h2>
-        <va-alert
-          onClose={toggleAlertToolTip}
+        <VaAlert
+          closeBtnAriaLabel="Close notification"
+          onCloseEvent={toggleAlertToolTip}
           visible={isToolTipOpen}
           closeable
           status="info"
@@ -306,7 +311,7 @@ export class SearchResults extends Component {
           <div className="usa-alert-text vads-u-font-size--base">
             {TOOL_TIP_CONTENT}
           </div>
-        </va-alert>
+        </VaAlert>
 
         {/* Table of Results */}
         <ul