Work on describes

mui · May 17, 2023 · 59b1daa · 59b1daa
1 parent c4b8db0
commit 59b1daa
Show file tree

Hide file tree

Showing 22 changed files with 299 additions and 269 deletions.
diff --git a/...te-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx b/...te-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx
@@ -4,10 +4,10 @@ import { describeRangeValidation } from '@mui/x-date-pickers-pro/tests/describeR
 import { describeValue } from '@mui/x-date-pickers/tests/describeValue';
 import {
   adapterToUse,
-  buildFieldInteractions,
   createPickerRenderer,
   expectInputPlaceholder,
   expectInputValue,
+  getTextbox,
   wrapPickerMount,
 } from 'test/utils/pickers-utils';
 import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
@@ -20,12 +20,6 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
     clockConfig: new Date(2018, 0, 1, 0, 0, 0, 0),
   });
 
-  const { clickOnInput } = buildFieldInteractions({
-    clock,
-    render,
-    Component: DesktopDateRangePicker,
-  });
-
   describePicker(DesktopDateRangePicker, { render, fieldType: 'multi-input', variant: 'desktop' });
 
   describeRangeValidation(DesktopDateRangePicker, () => ({
@@ -78,7 +72,7 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
         expectInputValue(input, value ? adapterToUse.format(value, 'keyboardDate') : '');
       });
     },
-    setNewValue: (value, { isOpened, applySameValue, setEndDate = false } = {}) => {
+    setNewValue: (value, { isOpened, applySameValue, setEndDate = false, selectSection }) => {
       let newValue: any[];
       if (applySameValue) {
         newValue = value;
@@ -95,8 +89,8 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
           })[0],
         );
       } else {
+        selectSection('day');
         const input = screen.getAllByRole<HTMLInputElement>('textbox')[0];
-        clickOnInput(input, 5); // Update the day
         userEvent.keyPress(input, { key: 'ArrowUp' });
       }
 
@@ -137,7 +131,7 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
 
       expectInputValue(input, isEmpty ? '' : expectedValueStr);
     },
-    setNewValue: (value, { isOpened, applySameValue, setEndDate = false } = {}) => {
+    setNewValue: (value, { isOpened, applySameValue, setEndDate = false, selectSection }) => {
       let newValue: any[];
       if (applySameValue) {
         newValue = value;
@@ -154,8 +148,8 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
           })[0],
         );
       } else {
-        const input = screen.getByRole<HTMLInputElement>('textbox');
-        clickOnInput(input, 5); // Update the day
+        selectSection('day');
+        const input = getTextbox();
         userEvent.keyPress(input, { key: 'ArrowUp' });
       }
 

diff --git a/...date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx b/...date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx
@@ -82,7 +82,7 @@ describe('<MobileDateRangePicker /> - Describes', () => {
         expectInputValue(input, value ? adapterToUse.format(value, 'keyboardDate') : '');
       });
     },
-    setNewValue: (value, { isOpened, applySameValue, setEndDate = false } = {}) => {
+    setNewValue: (value, { isOpened, applySameValue, setEndDate = false }) => {
       let newValue: any[];
       if (applySameValue) {
         newValue = value;

diff --git a/...ickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx b/...ickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx
@@ -10,9 +10,9 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
     describeAdapters(
       `key: ${keyToClearValue}`,
       SingleInputDateRangeField,
-      ({ adapter, renderField }) => {
+      ({ adapter, renderFromProps }) => {
         it('should clear all the sections when all sections are selected and all sections are completed', () => {
-          const { input, selectSection } = renderField({
+          const { input, selectSection } = renderFromProps({
             defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
             format: adapter.formats.monthAndYear,
           });
@@ -27,7 +27,7 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
         });
 
         it('should clear all the sections when all sections are selected and not all sections are completed', () => {
-          const { input, selectSection } = renderField({
+          const { input, selectSection } = renderFromProps({
             format: adapter.formats.monthAndYear,
           });
 
@@ -49,7 +49,7 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
         it('should not call `onChange` when clearing all sections and both dates are already empty', () => {
           const onChange = spy();
 
-          const { input, selectSection } = renderField({
+          const { input, selectSection } = renderFromProps({
             format: adapter.formats.monthAndYear,
             defaultValue: [null, null],
             onChange,
@@ -67,7 +67,7 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
         it('should call `onChange` when clearing the each section of each date', () => {
           const handleChange = spy();
 
-          const { selectSection, input } = renderField({
+          const { selectSection, input } = renderFromProps({
             format: adapter.formats.monthAndYear,
             defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
             onChange: handleChange,
@@ -100,7 +100,7 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
         it('should not call `onChange` if the section is already empty', () => {
           const handleChange = spy();
 
-          const { selectSection, input } = renderField({
+          const { selectSection, input } = renderFromProps({
             format: adapter.formats.monthAndYear,
             defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
             onChange: handleChange,

diff --git a/...kers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx b/...kers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx
@@ -13,7 +13,7 @@ import {
 
 describe('<SingleInputDateRangeField /> - Selection', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
-  const { renderField } = buildFieldInteractions({
+  const { renderFromProps } = buildFieldInteractions({
     clock,
     render,
     Component: SingleInputDateRangeField,
@@ -45,7 +45,7 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
 
   describe('Click', () => {
     it('should select the clicked selection when the input is already focused', () => {
-      const { input, selectSection } = renderField({
+      const { input, selectSection } = renderFromProps({
         value: [null, adapterToUse.date(new Date(2022, 1, 24))],
       });
 
@@ -65,7 +65,7 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
     });
 
     it('should not change the selection when clicking on the only already selected section', () => {
-      const { input, selectSection } = renderField({
+      const { input, selectSection } = renderFromProps({
         value: [null, adapterToUse.date(new Date(2022, 1, 24))],
       });
 
@@ -87,7 +87,7 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
 
   describe('key: ArrowRight', () => {
     it('should allows to move from left to right with ArrowRight', () => {
-      const { input, selectSection } = renderField({});
+      const { input, selectSection } = renderFromProps({});
 
       selectSection('month');
       expect(getCleanedSelectedContent(input)).to.equal('MM');
@@ -109,7 +109,7 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
     });
 
     it('should stay on the current section when the last section is selected', () => {
-      const { input, selectSection } = renderField({});
+      const { input, selectSection } = renderFromProps({});
 
       selectSection('year', 'last');
       expect(getCleanedSelectedContent(input)).to.equal('YYYY');
@@ -120,7 +120,7 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
 
   describe('key: ArrowLeft', () => {
     it('should allows to move from right to left with ArrowLeft', () => {
-      const { input, selectSection } = renderField({});
+      const { input, selectSection } = renderFromProps({});
 
       selectSection('year', 'last');
       expect(getCleanedSelectedContent(input)).to.equal('YYYY');
@@ -141,7 +141,7 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
     });
 
     it('should stay on the current section when the first section is selected', () => {
-      const { input, selectSection } = renderField({});
+      const { input, selectSection } = renderFromProps({});
 
       selectSection('month');
       expect(getCleanedSelectedContent(input)).to.equal('MM');

diff --git a/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/describes.DateField.test.tsx
@@ -9,16 +9,13 @@ import {
   wrapPickerMount,
   adapterToUse,
   expectInputValue,
-  buildFieldInteractions,
   getTextbox,
   expectInputPlaceholder,
 } from 'test/utils/pickers-utils';
 
 describe('<DateField /> - Describes', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
 
-  const { clickOnInput } = buildFieldInteractions({ clock, render, Component: DateField });
-
   describeValidation(DateField, () => ({
     render,
     clock,
@@ -60,10 +57,10 @@ describe('<DateField /> - Describes', () => {
         expectedValue ? adapterToUse.format(expectedValue, 'keyboardDate') : '',
       );
     },
-    setNewValue: (value) => {
+    setNewValue: (value, { selectSection }) => {
       const newValue = adapterToUse.addDays(value, 1);
+      selectSection('day');
       const input = getTextbox();
-      clickOnInput(input, 5); // Update the day
       userEvent.keyPress(input, { key: 'ArrowUp' });
       return newValue;
     },