npm - fhir-react - Versions diffs - 0.2.1 → 0.3.0 - Mend

fhir-react 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/src/components/resources/Appointment/Appointment.js CHANGED Viewed

@@ -6,9 +6,7 @@ import fhirVersions from '../fhirResourceVersions';
 import {
   Root,
   Header,
-  Title,
   Badge,
-  BadgeSecondary,
   Body,
   Value,
   ValueSection,
@@ -23,6 +21,7 @@ import Coding from '../../datatypes/Coding';
 import Reference from '../../datatypes/Reference';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import { isNotEmptyArray } from '../../../utils';
+import Accordion from '../../containers/Accordion';
 const prepareParticipantData = data => {
   let participantPatient = [];
@@ -163,71 +162,98 @@ const Appointment = props => {
     serviceCategory,
   } = resourceDTO(fhirVersion, fhirResource);
+  const tableData = [
+    {
+      label: 'Type',
+      testId: 'type',
+      data:
+        isNotEmptyArray(typeCoding) &&
+        typeCoding.map((item, i) => (
+          <Coding key={`item-${i}`} fhirData={item} />
+        )),
+      status: isNotEmptyArray(typeCoding),
+    },
+    {
+      label: 'Duration [min]',
+      testId: 'minutesDuration',
+      data: minutesDuration,
+      status: minutesDuration,
+    },
+    {
+      label: 'Reason',
+      testId: 'reason',
+      data: isNotEmptyArray(reason) && <CodeableConcept fhirData={reason} />,
+      status: isNotEmptyArray(reason),
+    },
+    {
+      label: 'Cancelation Reason',
+      testId: 'cancelationReason',
+      data: isNotEmptyArray(cancelationReason) && (
+        <CodeableConcept fhirData={cancelationReason} />
+      ),
+      status: isNotEmptyArray(cancelationReason),
+    },
+    {
+      label: 'Service Category',
+      testId: 'serviceCategory',
+      data: isNotEmptyArray(serviceCategory) && (
+        <CodeableConcept fhirData={serviceCategory} />
+      ),
+      status: isNotEmptyArray(serviceCategory),
+    },
+  ];
   return (
     <Root name="Appointment">
-      <Header>
-        {description && <Title>{description}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {start && (
-          <BadgeSecondary data-testid="startDate">
-            on <Date fhirData={start} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {isNotEmptyArray(typeCoding) && (
-          <Value label="Type" data-testid="type">
-            {typeCoding.map((item, i) => (
-              <Coding key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {minutesDuration && (
-          <Value label="Duration [min]" data-testid="minutesDuration">
-            {minutesDuration}
-          </Value>
-        )}
-        {isNotEmptyArray(reason) && (
-          <Value label="Reason" data-testid="reason">
-            <CodeableConcept fhirData={reason} />
-          </Value>
-        )}
-        {isNotEmptyArray(cancelationReason) && (
-          <Value label="Cancelation Reason" data-testid="cancelationReason">
-            <CodeableConcept fhirData={cancelationReason} />
-          </Value>
-        )}
-        {isNotEmptyArray(serviceCategory) && (
-          <Value label="Service Category" data-testid="serviceCategory">
-            <CodeableConcept fhirData={serviceCategory} />
-          </Value>
-        )}
-        {isNotEmptyArray(participant) && (
-          <ValueSection label="Participant" data-testid="participant">
-            <Table>
-              <thead>
-                <TableRow>
-                  <TableHeader>Patient</TableHeader>
-                  <TableHeader>Practitioner</TableHeader>
-                  <TableHeader>Other</TableHeader>
-                </TableRow>
-              </thead>
-              <tbody>
-                <TableRow>
-                  <TableCell>{participantPatient}</TableCell>
-                  <TableCell>{participantPractitioner}</TableCell>
-                  <TableCell>{participantLocation}</TableCell>
-                </TableRow>
-              </tbody>
-            </Table>
-          </ValueSection>
-        )}
-        {comment && (
-          <Value label="Comment" data-testid="comment">
-            {comment}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={fhirResource.resourceName}
+            additionalContent={
+              start && (
+                <Value label="Start date" data-testid="headerStartDate">
+                  <Date fhirData={start} isBlack />
+                </Value>
+              )
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={description}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {isNotEmptyArray(participant) && (
+              <ValueSection
+                label="Participant"
+                data-testid="participant"
+                marginTop
+              >
+                <Table>
+                  <thead>
+                    <TableRow>
+                      <TableHeader>Patient</TableHeader>
+                      <TableHeader>Practitioner</TableHeader>
+                      <TableHeader>Other</TableHeader>
+                    </TableRow>
+                  </thead>
+                  <tbody className="border-top-0">
+                    <TableRow>
+                      <TableCell>{participantPatient}</TableCell>
+                      <TableCell>{participantPractitioner}</TableCell>
+                      <TableCell>{participantLocation}</TableCell>
+                    </TableRow>
+                  </tbody>
+                </Table>
+              </ValueSection>
+            )}
+            {comment && (
+              <ValueSection label="Comment" data-testid="comment" marginTop>
+                <span className="text-secondary">{comment}</span>
+              </ValueSection>
+            )}
+          </Body>
+        }
+      />
     </Root>
   );
 };

package/src/components/resources/Appointment/Appointment.test.js CHANGED Viewed

@@ -24,7 +24,7 @@ describe('should render component correctly', () => {
       'Discussion on the results',
     );
     expect(getByTestId('status').textContent).toEqual('booked');
-    expect(getByTestId('startDate').textContent).toContain('2013-12-10');
+    expect(getByTestId('headerStartDate').textContent).toContain('12/10/2013');
     expect(getByTestId('type').textContent).toContain('General Discussion');
     expect(getByTestId('participant').textContent).toContain(
       'Peter James Chalmers',
@@ -71,7 +71,7 @@ describe('should render component correctly', () => {
       'Discussion on the results',
     );
     expect(getByTestId('status').textContent).toEqual('booked');
-    expect(getByTestId('startDate').textContent).toContain('2013-12-10');
+    expect(getByTestId('headerStartDate').textContent).toContain('12/10/2013');
     expect(getByTestId('participant').textContent).toContain(
       'Peter James Chalmers',
@@ -108,7 +108,7 @@ describe('should render component correctly', () => {
       'Discussion on the results',
     );
     expect(getByTestId('status').textContent).toEqual('booked');
-    expect(getByTestId('startDate').textContent).toContain('2013-12-10');
+    expect(getByTestId('headerStartDate').textContent).toContain('12/10/2013');
     expect(getByTestId('participant').textContent).toContain(
       'Peter James Chalmers',

package/src/components/resources/Bundle/Bundle.js CHANGED Viewed

@@ -9,7 +9,7 @@ import * as FhirResourceTypes from '../../supportedFhirResourceList';
 import './Bundle.css';
-export default function Bundle(props) {
+export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
   const commonDTO = fhirResource => {
     const type = _get(fhirResource, 'type', null);
     const total = _get(fhirResource, 'total');
@@ -36,7 +36,6 @@ export default function Bundle(props) {
     }
   };
-  const { fhirResource, fhirVersion } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -79,6 +78,7 @@ export default function Bundle(props) {
                 <FhirComponent
                   fhirResource={resource}
                   fhirVersion={fhirVersion}
+                  fhirIcons={fhirIcons}
                 />
               </div>
             );

package/src/components/resources/Bundle/Bundle.stories.js CHANGED Viewed

@@ -17,6 +17,8 @@ import r4Example3 from '../../../fixtures/r4/resources/bundle/example3.json';
 import r4Example4 from '../../../fixtures/r4/resources/bundle/example4.json';
 import fhirVersions from '../fhirResourceVersions';
+import fhirIcons from '../../../fixtures/example-icons';
 export default {
   title: 'Bundle',
 };
@@ -24,69 +26,133 @@ export default {
 export const Example1OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
   return (
-    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example2OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example2);
   return (
-    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example3OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example3);
   return (
-    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example4OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example4);
   return (
-    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example3OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example3);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example4OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example4);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', r4Example3);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example4OfR4 = () => {
   const fhirResource = object('Resource', r4Example4);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 // export const ExampleWithoutFHIRVersionProperty = () => {

package/src/components/resources/Bundle/Bundle.test.js CHANGED Viewed

@@ -8,6 +8,8 @@ import dstu2Example2 from '../../../fixtures/dstu2/resources/bundle/example3.jso
 import stu3Example1 from '../../../fixtures/stu3/resources/bundle/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/bundle/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 describe('Bundle should render component correctly', () => {
   it('should render component correctly with DSTU2 source data', () => {
     const defaultProps = {
@@ -29,6 +31,7 @@ describe('Bundle should render component correctly', () => {
     const defaultProps = {
       fhirVersion: fhirVersions.DSTU2,
       fhirResource: dstu2Example2,
+      fhirIcons: fhirIcons,
     };
     const { getByText, getAllByTestId } = render(<Bundle {...defaultProps} />);
     expect(getAllByTestId('title').map(title => title.textContent)).toEqual([

package/src/components/resources/CarePlan/CarePlan.test.js CHANGED Viewed

@@ -42,7 +42,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('subject').textContent).toContain('Peter James');
     expect(getByTestId('subject').textContent).toContain('Patient/example');
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
-    expect(getByTestId('periodEnd').textContent).toEqual('2017-06-01');
+    expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
       'Management of Type 2 Diabetes',
     );
@@ -67,7 +67,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('subject').textContent).toContain('Peter James');
     expect(getByTestId('subject').textContent).toContain('Patient/example');
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
-    expect(getByTestId('periodEnd').textContent).toEqual('2017-06-01');
+    expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
       'Management of Type 2 Diabetes',
     );
@@ -89,7 +89,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('goals').textContent).toEqual('#goal');
     expect(getByTestId('subject').textContent).toContain('Eve Everywoman');
     expect(getByTestId('subject').textContent).toContain('Patient/1');
-    expect(getByTestId('periodStart').textContent).toEqual('2013-01-01');
-    expect(getByTestId('periodEnd').textContent).toEqual('2013-10-01');
+    expect(getByTestId('periodStart').textContent).toEqual('1/1/2013');
+    expect(getByTestId('periodEnd').textContent).toEqual('10/1/2013');
   });
 });

package/src/components/resources/CareTeam/CareTeam.js CHANGED Viewed

@@ -1,23 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _get from 'lodash/get';
-import fhirVersions from '../fhirResourceVersions';
-import DateType from '../../datatypes/Date';
-import CodableConcept from '../../datatypes/CodeableConcept';
-import Reference from '../../datatypes/Reference';
-import CareTeamParticipants from './CareTeamParticipants';
 import {
-  Root,
-  Header,
-  Title,
   Badge,
   Body,
-  Value,
+  Header,
   MissingValue,
+  Root,
+  Title,
+  Value,
 } from '../../ui';
+import CareTeamParticipants from './CareTeamParticipants';
+import CodableConcept from '../../datatypes/CodeableConcept';
+import DateType from '../../datatypes/Date';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
+import _get from 'lodash/get';
+import fhirVersions from '../fhirResourceVersions';
 const commonDTO = fhirResource => {
   // Default value for title - "Care team"
   const name = _get(fhirResource, 'name', 'Care team');

package/src/components/resources/CareTeam/CareTeam.test.js CHANGED Viewed

@@ -24,7 +24,7 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('periodStart')).toBeNull();
-    expect(getByTestId('periodEnd').textContent).toEqual('2013-01-01');
+    expect(getByTestId('periodEnd').textContent).toEqual('1/1/2013');
     expect(getByTestId('category').textContent.trim()).toEqual('(encounter)');
     expect(getByTestId('subject').textContent).toContain(
       'Peter James Chalmers',
@@ -53,7 +53,7 @@ describe('should render the CareTeam component properly', () => {
     const periodEnds = getAllByTestId('participant.periodEnd').map(
       n => n.textContent,
     );
-    expect(periodEnds).toEqual(['-', '2013-01-01']);
+    expect(periodEnds).toEqual(['-', '1/1/2013']);
   });
   it('should render participants with STU3 source data when structure source data of Participants Role is coding array', () => {
@@ -83,7 +83,7 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('periodStart')).toBeNull();
-    expect(getByTestId('periodEnd').textContent).toEqual('2013-01-01');
+    expect(getByTestId('periodEnd').textContent).toEqual('1/1/2013');
     expect(getByTestId('encounter').textContent).toEqual('Encounter/example');
     expect(getByTestId('category').textContent).toContain(
       'Encounter-focused care team',
@@ -115,6 +115,6 @@ describe('should render the CareTeam component properly', () => {
     const periodEnds = getAllByTestId('participant.periodEnd').map(
       n => n.textContent,
     );
-    expect(periodEnds).toEqual(['-', '2013-01-01']);
+    expect(periodEnds).toEqual(['-', '1/1/2013']);
   });
 });

package/src/components/resources/Claim/Claim.test.js CHANGED Viewed

@@ -23,7 +23,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('complete');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');
@@ -45,7 +45,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('complete');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');
@@ -112,7 +112,7 @@ describe('should render the Claim component properly', () => {
     };
     const { getByTestId } = render(<Claim {...defaultProps} />);
-    expect(getByTestId('accident.date').textContent).toEqual('2014-07-09');
+    expect(getByTestId('accident.date').textContent).toEqual('7/9/2014');
     expect(getByTestId('accident.type').textContent).toContain(
       'Sporting Accident',
     );
@@ -151,7 +151,7 @@ describe('should render the Claim component properly', () => {
     const { getByTestId } = render(<Claim {...defaultProps} />);
     expect(getByTestId('employmentImpacted').textContent).toEqual(
-      '2014-08-16 - 2014-08-16',
+      '8/16/2014 - 8/16/2014',
     );
   });
@@ -163,7 +163,7 @@ describe('should render the Claim component properly', () => {
     const { getByTestId } = render(<Claim {...defaultProps} />);
     expect(getByTestId('hospitalization').textContent).toEqual(
-      '2014-08-15 - 2014-08-16',
+      '8/15/2014 - 8/16/2014',
     );
   });
@@ -251,7 +251,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('claim');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');

package/src/components/resources/ClaimResponse/ClaimResponse.test.js CHANGED Viewed

@@ -23,7 +23,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('outcome').textContent).toEqual('complete');
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -40,7 +40,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('2014-08-31');
+    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');
@@ -76,7 +76,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('outcome').textContent).toEqual('complete');
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -93,7 +93,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('2014-08-31');
+    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');
@@ -169,7 +169,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('outcome')).toBeNull();
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -189,7 +189,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('2014-08-31');
+    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');