Poulter/46624 react 18 upgrade 10 23

client/app/components/TableFilter.jsx

@@ -202,7 +202,7 @@ class TableFilter extends React.PureComponent {
       getFilterValues;
 
     return (
-      <span {...iconStyle}>
+      <span {...iconStyle} data-testid="table-filter-testid">
         <FilterIcon
           aria-label={this.filterIconAriaLabel()}
           label={this.filterIconAriaLabel()}

client/app/components/Tooltip.jsx

@@ -43,7 +43,7 @@ const Tooltip = (props) => {
   return (
     <React.Fragment>
       {React.cloneElement(props.children, tooltipProps)}
-      <span {...tooltipStyling}>
+      <span {...tooltipStyling} data-testid="tooltip-testid">
         <ReactTooltip
           effect="solid"
           id={id}

client/app/components/badges/ContestedBadge/ContestedClaimBadge.test.js

@@ -1,21 +1,23 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
 
 import rootReducer from 'app/queue/reducers';
 import ContestedClaimBadge from './ContestedClaimBadge';
+import COPY from 'COPY';
 
 describe('ContestedClaimBadge', () => {
   const defaultAppeal = {
-    contested_claim: true,
+    id: '1234',
+    contestedClaim: true
   };
 
   const getStore = () => createStore(rootReducer, applyMiddleware(thunk));
 
   const setupContestedClaimBadge = (store) => {
-    return mount(
+    return (
       <Provider store={store}>
         <ContestedClaimBadge
           appeal={defaultAppeal}
@@ -24,10 +26,15 @@ describe('ContestedClaimBadge', () => {
     );
   };
 
-  it('renders correctly', () => {
+  it('renders correctly', async () => {
     const store = getStore();
-    const component = setupContestedClaimBadge(store);
+    const { asFragment } = render(setupContestedClaimBadge(store));
 
-    expect(component).toMatchSnapshot();
+    waitFor(() => {
+      expect(screen.getByText('CC')).toBeInTheDocument();
+      expect(screen.getByText(COPY.CC_BADGE_TOOLTIP)).toBeInTheDocument();
+    });
+
+    expect(asFragment()).toMatchSnapshot();
   });
 });

client/app/components/badges/ContestedBadge/__snapshots__/ContestedClaimBadge.test.js.snap

@@ -1,23 +1,119 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ContestedClaimBadge renders correctly 1`] = `
-<Provider
-  store={
-    Object {
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-      Symbol(observable): [Function],
-    }
-  }
->
-  <ContestedClaimBadge
-    appeal={
-      Object {
-        "contested_claim": true,
-      }
-    }
-  />
-</Provider>
+<DocumentFragment>
+  <div
+    class="cf-contested-badge"
+  >
+    <span
+      aria-describedby="badge-cc-1234"
+      aria-label="contested claim"
+      currentitem="false"
+      data-css-j1ndum=""
+      data-event="focus mouseenter"
+      data-event-off="mouseleave keydown"
+      data-for="badge-cc-1234"
+      data-tip="true"
+      tabindex="0"
+    >
+      CC
+    </span>
+    <span
+      data-css-s9vlzg=""
+      data-testid="tooltip-testid"
+    >
+      <div
+        class="__react_component_tooltip t00000000-0000-0000-0000-000000000000 place-bottom type-dark"
+        data-id="tooltip"
+        id="badge-cc-1234"
+        role="tooltip"
+      >
+        <style>
+          
+  	.t00000000-0000-0000-0000-000000000000 {
+	    color: #fff;
+	    background: #222;
+	    border: 1px solid transparent;
+  	}
+
+  	.t00000000-0000-0000-0000-000000000000.place-top {
+        margin-top: -10px;
+    }
+    .t00000000-0000-0000-0000-000000000000.place-top::before {
+        border-top: 8px solid transparent;
+    }
+    .t00000000-0000-0000-0000-000000000000.place-top::after {
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        bottom: -6px;
+        left: 50%;
+        margin-left: -8px;
+        border-top-color: #222;
+        border-top-style: solid;
+        border-top-width: 6px;
+    }
+
+    .t00000000-0000-0000-0000-000000000000.place-bottom {
+        margin-top: 10px;
+    }
+    .t00000000-0000-0000-0000-000000000000.place-bottom::before {
+        border-bottom: 8px solid transparent;
+    }
+    .t00000000-0000-0000-0000-000000000000.place-bottom::after {
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        top: -6px;
+        left: 50%;
+        margin-left: -8px;
+        border-bottom-color: #222;
+        border-bottom-style: solid;
+        border-bottom-width: 6px;
+    }
+
+    .t00000000-0000-0000-0000-000000000000.place-left {
+        margin-left: -10px;
+    }
+    .t00000000-0000-0000-0000-000000000000.place-left::before {
+        border-left: 8px solid transparent;
+    }
+    .t00000000-0000-0000-0000-000000000000.place-left::after {
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        right: -6px;
+        top: 50%;
+        margin-top: -4px;
+        border-left-color: #222;
+        border-left-style: solid;
+        border-left-width: 6px;
+    }
+
+    .t00000000-0000-0000-0000-000000000000.place-right {
+        margin-left: 10px;
+    }
+    .t00000000-0000-0000-0000-000000000000.place-right::before {
+        border-right: 8px solid transparent;
+    }
+    .t00000000-0000-0000-0000-000000000000.place-right::after {
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        left: -6px;
+        top: 50%;
+        margin-top: -4px;
+        border-right-color: #222;
+        border-right-style: solid;
+        border-right-width: 6px;
+    }
+  
+        </style>
+        <div
+          style="white-space: pre-line;"
+        >
+          This is a Contested Claim and needs to be
+processed by the Specialty Case team. Please
+ include all parties and POA in correspondence.
+        </div>
+      </div>
+    </span>
+  </div>
+</DocumentFragment>
 `;

client/app/components/badges/FnodBadge/FnodBadge.test.js

@@ -1,34 +1,54 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
 
 import rootReducer from 'app/queue/reducers';
 import FnodBadge from './FnodBadge';
+import { tooltipListStyling } from 'app/components/badges/style';
+import { DateString } from 'app/util/DateUtil';
+import COPY from 'COPY';
+import Badge from '../Badge';
 
 describe('FnodBadge', () => {
-  const defaultAppeal = {
-    veteranAppellantDeceased: true,
-    veteranDateOfDeath: '2019-03-17'
-  };
+
+  const veteranAppellantDeceased = true;
+  const uniqueId = '1234'
+  const veteranDateOfDeath = '2019-03-17';
+  const tooltipText = <div>
+    <strong>Date of Death Reported</strong>
+    <ul {...tooltipListStyling}>
+      <li><strong>Source:</strong> {COPY.FNOD_SOURCE}</li>
+      {veteranDateOfDeath &&
+        <li><strong>Date of Death:</strong> <DateString date={veteranDateOfDeath} /></li>
+      }
+    </ul>
+  </div>;
 
   const getStore = () => createStore(rootReducer, applyMiddleware(thunk));
 
   const setupFnodBadge = (store) => {
-    return mount(
+    return (
       <Provider store={store}>
         <FnodBadge
-          appeal={defaultAppeal}
+          uniqueId={uniqueId}
+          veteranAppellantDeceased={veteranAppellantDeceased}
+          tooltipText={tooltipText}
         />
       </Provider>
     );
   };
 
-  it('renders correctly', () => {
+  it.only('renders correctly', () => {
     const store = getStore();
-    const component = setupFnodBadge(store);
+    const { asFragment } = render(setupFnodBadge(store));
 
-    expect(component).toMatchSnapshot();
+    expect(screen.getByText('FNOD')).toBeInTheDocument();
+    expect(screen.getByText('Date of Death Reported')).toBeInTheDocument()
+    expect(screen.getByText('Source:')).toBeInTheDocument();
+    expect(screen.getByText('Date of Death:')).toBeInTheDocument();
+    expect(screen.getByText('03/17/19')).toBeInTheDocument();
+    expect(asFragment()).toMatchSnapshot();
   });
 });