[Test modernization] Modernizes DatePicker, DescriptionList, DisplayText

UNRELEASED.md

@@ -81,5 +81,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for Pagination, FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438))
 - Modernized tests for PopoverOverlay component([#4430](https://github.com/Shopify/polaris-react/pull/4430))
 - Modernized tests for Dropzone, ExceptionList, and ConnectedFilterControl > Item components([#4412](https://github.com/Shopify/polaris-react/pull/4412))
+- Modernized tests for DatePicker, DescriptionList, and DisplayText ([#4360](https://github.com/Shopify/polaris-react/pull/4360))
 
 ### Deprecations

src/components/DatePicker/components/Day/tests/Day.test.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 
 import {Day} from '../Day';
@@ -18,41 +16,45 @@ function MockTable({children}: {children: React.ReactNode}) {
 describe('<Day />', () => {
   it('renders a button', () => {
     const currentDay = new Date(2017, 1, 1, 0, 0);
-    const day = mountWithAppProvider(
+    const day = mountWithApp(
       <MockTable>
         <Day focused day={currentDay} selected disabled={false} />
       </MockTable>,
     );
-    expect(day.find('button')).toHaveLength(1);
+    expect(day).toContainReactComponentTimes('button', 1);
   });
 
   describe('tabIndex', () => {
     it('sets the tabIndex to 0 if day is today', () => {
       const currentDay = new Date();
-      const day = mountWithAppProvider(
+      const day = mountWithApp(
         <MockTable>
           <Day focused day={currentDay} selected disabled={false} />
         </MockTable>,
       );
-      expect(day.find('button').prop('tabIndex')).toBe(0);
+      expect(day).toContainReactComponent('button', {
+        tabIndex: 0,
+      });
     });
 
     it('sets the tabIndex to -1 if day is disabled', () => {
       const currentDay = new Date();
-      const day = mountWithAppProvider(
+      const day = mountWithApp(
         <MockTable>
           <Day focused day={currentDay} selected disabled />
         </MockTable>,
       );
-      expect(day.find('button').prop('tabIndex')).toBe(-1);
+      expect(day).toContainReactComponent('button', {
+        tabIndex: -1,
+      });
     });
   });
 
   describe('onClick', () => {
     it('gets called if button is not disabled', () => {
       const spy = jest.fn();
       const currentDay = new Date();
-      const day = mountWithAppProvider(
+      const day = mountWithApp(
         <MockTable>
           <Day
             focused
@@ -63,19 +65,19 @@ describe('<Day />', () => {
           />
         </MockTable>,
       );
-      day.find('button').simulate('click');
+      day.find('button')!.trigger('onClick');
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it('does not get called if button is disabled', () => {
       const spy = jest.fn();
       const currentDay = new Date();
-      const day = mountWithAppProvider(
+      const day = mountWithApp(
         <MockTable>
           <Day focused day={currentDay} selected disabled onClick={spy} />
         </MockTable>,
       );
-      day.find('button').simulate('click');
+      day.find('button')!.trigger('onClick');
       expect(spy).not.toHaveBeenCalled();
     });
   });
@@ -84,12 +86,12 @@ describe('<Day />', () => {
     it('gets called if button is focused', () => {
       const spy = jest.fn();
       const currentDay = new Date();
-      const day = mountWithAppProvider(
+      const day = mountWithApp(
         <MockTable>
           <Day day={currentDay} selected onFocus={spy} />
         </MockTable>,
       );
-      day.find('button').simulate('focus');
+      day.find('button')!.trigger('onFocus');
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });

src/components/DatePicker/components/Month/tests/Month.test.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 
 import {Weekday} from '../../Weekday';
@@ -17,43 +15,49 @@ describe('<Month />', () => {
 
   describe('title', () => {
     it('passes the label and abbreviated value to Weekday', () => {
-      const month = mountWithAppProvider(
+      const month = mountWithApp(
         <Month {...defaultProps} month={0} year={2018} weekStartsOn={1} />,
       );
-      expect(month.find(Weekday).first().prop('title')).toBe('Mo');
-      expect(month.find(Weekday).first().prop('label')).toBe('Monday');
+      expect(month.findAll(Weekday)[0]).toHaveReactProps({
+        title: 'Mo',
+        label: 'Monday',
+      });
     });
   });
 
   describe('current', () => {
     const currentDay = new Date().getDay();
     const currentMonth = new Date().getMonth();
     const currentYear = new Date().getFullYear();
-    const month = mountWithAppProvider(
-      <Month
-        {...defaultProps}
-        month={currentMonth}
-        year={currentYear}
-        weekStartsOn={currentDay}
-      />,
-    );
 
     it('passes true to Weekday if month year and weekStartsOn are today', () => {
-      expect(month.find(Weekday).first().prop('current')).toBe(true);
+      const month = mountWithApp(
+        <Month
+          {...defaultProps}
+          month={currentMonth}
+          year={currentYear}
+          weekStartsOn={currentDay}
+        />,
+      );
+      expect(month.findAll(Weekday)[0]).toHaveReactProps({
+        current: true,
+      });
     });
 
     it('passes false to Weekday if month year and weekStartsOn are not today', () => {
-      const month = mountWithAppProvider(
+      const month = mountWithApp(
         <Month {...defaultProps} month={1} year={2016} weekStartsOn={1} />,
       );
-      expect(month.find(Weekday).first().prop('current')).toBe(false);
+      expect(month.findAll(Weekday)[0]).toHaveReactProps({
+        current: false,
+      });
     });
   });
 
   describe('with allowRange prop to true', () => {
     it('range can be created even if start and end have different references', () => {
       const hoverDate = new Date('05 Jan 2018 00:00:00 GMT');
-      const month = mountWithAppProvider(
+      const month = mountWithApp(
         <Month
           {...defaultProps}
           month={0}
@@ -67,9 +71,9 @@ describe('<Month />', () => {
           }}
         />,
       );
-
-      expect(month.find(Day).get(2).props.inHoveringRange).toBeTruthy();
-      expect(month.find(Day).get(10).props.inHoveringRange).toBeFalsy();
+      const days = month.findAll(Day);
+      expect(days[1]).toHaveReactProps({inHoveringRange: true});
+      expect(days[9]).toHaveReactProps({inHoveringRange: false});
     });
   });
 
@@ -105,7 +109,7 @@ describe('<Month />', () => {
         });
       });
 
-      it('passes the first accessibility label prefix to day when allowRange  is not true & first accessibility label prefix is defined', () => {
+      it('passes the first accessibility label prefix to day when allowRange is not true & first accessibility label prefix is defined', () => {
         const accessibilityLabelPrefixes = ['Custom start', 'Custom end'] as [
           string,
           string,

src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {Weekday} from '../Weekday';
 
 describe('<Weekday />', () => {
   it('sets the text and label', () => {
-    const weekday = mountWithAppProvider(
+    const weekday = mountWithApp(
       <table>
         <thead>
           <tr>
@@ -15,7 +14,9 @@ describe('<Weekday />', () => {
         </thead>
       </table>,
     );
-    expect(weekday.text()).toBe('Su');
-    expect(weekday.find('th').prop('aria-label')).toBe('Sunday');
+    expect(weekday).toContainReactText('Su');
+    expect(weekday.find('th'))!.toHaveReactProps({
+      'aria-label': 'Sunday',
+    });
   });
 });