diff --git a/packages/material-ui-lab/src/CalendarPicker/CalendarPicker.test.tsx b/packages/material-ui-lab/src/CalendarPicker/CalendarPicker.test.tsx index 1258c1cb4dc2e8..82a5915320319a 100644 --- a/packages/material-ui-lab/src/CalendarPicker/CalendarPicker.test.tsx +++ b/packages/material-ui-lab/src/CalendarPicker/CalendarPicker.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; +import { SinonFakeTimers, useFakeTimers } from 'sinon'; import { fireEvent, screen, describeConformanceV5 } from 'test/utils'; import CalendarPicker, { calendarPickerClasses as classes } from '@material-ui/lab/CalendarPicker'; import { @@ -10,6 +11,15 @@ import { } from '../internal/pickers/test-utils'; describe('', () => { + let clock: SinonFakeTimers; + beforeEach(() => { + clock = useFakeTimers(); + }); + afterEach(() => { + clock.restore(); + }); + + // StrictModeViolation: Uses StrictMode incompatible API of `react-transition-group` const render = createPickerRender({ strict: false }); describeConformanceV5( {}} />, () => ({ diff --git a/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx b/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx index 345325e08277fa..49d9a0eb40edbb 100644 --- a/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx +++ b/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { spy } from 'sinon'; +import { SinonFakeTimers, spy, useFakeTimers } from 'sinon'; import TextField from '@material-ui/core/TextField'; import { TransitionProps } from '@material-ui/core/transitions'; import { act, fireEvent, screen, userEvent } from 'test/utils'; @@ -42,6 +42,14 @@ const UncontrolledOpenDesktopDatePicker = (({ }) as typeof DesktopDatePicker; describe('', () => { + let clock: SinonFakeTimers; + beforeEach(() => { + clock = useFakeTimers(); + }); + afterEach(() => { + clock.restore(); + }); + // StrictModeViolation: Uses CalendarPicker const render = createPickerRender({ strict: false }); it('prop: components.OpenPickerIcon', () => { diff --git a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx index 7aa721ae8513d7..0e7e7de05b2720 100644 --- a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx +++ b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { spy } from 'sinon'; +import { SinonFakeTimers, spy, useFakeTimers } from 'sinon'; import { act, describeConformance, screen, fireEvent, userEvent } from 'test/utils'; import { createTheme, ThemeProvider } from '@material-ui/core/styles'; import TextField, { TextFieldProps } from '@material-ui/core/TextField'; @@ -23,14 +23,15 @@ const defaultRangeRenderInput = (startProps: TextFieldProps, endProps: TextField ); describe('', () => { - const render = createPickerRender({ strict: false }); - - before(function beforeHook() { - if (!/jsdom/.test(window.navigator.userAgent)) { - // FIXME This test suite is extremely flaky in test:karma - this.skip(); - } + let clock: SinonFakeTimers; + beforeEach(() => { + clock = useFakeTimers(); }); + afterEach(() => { + clock.restore(); + }); + // StrictModeViolation: Uses CalendarPicker + const render = createPickerRender({ strict: false }); describeConformance( ', () => { + let clock: SinonFakeTimers; + beforeEach(() => { + clock = useFakeTimers(new Date()); + }); + afterEach(() => { + clock.restore(); + }); + // StrictModeViolation: Uses CalendarPicker const render = createPickerRender({ strict: false }); it('Accepts date on `OK` button click', () => { @@ -267,39 +275,29 @@ describe('', () => { expect(screen.getByText('July')).toBeVisible(); }); - describe('mock time', () => { - let clock: SinonFakeTimers; - - beforeEach(() => { - clock = useFakeTimers(new Date()); - }); - - afterEach(() => { - clock.restore(); - }); - - it('prop `showTodayButton` – accept current date when "today" button is clicked', () => { - const onCloseMock = spy(); - const handleChange = spy(); - render( - } - showTodayButton - cancelText="stream" - onClose={onCloseMock} - onChange={handleChange} - value={adapterToUse.date('2018-01-01T00:00:00.000')} - DialogProps={{ TransitionComponent: FakeTransitionComponent }} - />, - ); - const start = adapterToUse.date(); - fireEvent.click(screen.getByRole('textbox')); + it('prop `showTodayButton` – accept current date when "today" button is clicked', () => { + const onCloseMock = spy(); + const handleChange = spy(); + render( + } + showTodayButton + cancelText="stream" + onClose={onCloseMock} + onChange={handleChange} + value={adapterToUse.date('2018-01-01T00:00:00.000')} + DialogProps={{ TransitionComponent: FakeTransitionComponent }} + />, + ); + const start = adapterToUse.date(); + fireEvent.click(screen.getByRole('textbox')); + act(() => { clock.tick(10); - fireEvent.click(screen.getByText(/today/i)); - - expect(onCloseMock.callCount).to.equal(1); - expect(handleChange.callCount).to.equal(1); - expect(adapterToUse.getDiff(handleChange.args[0][0], start)).to.equal(10); }); + fireEvent.click(screen.getByText(/today/i)); + + expect(onCloseMock.callCount).to.equal(1); + expect(handleChange.callCount).to.equal(1); + expect(adapterToUse.getDiff(handleChange.args[0][0], start)).to.equal(10); }); }); diff --git a/packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.test.tsx b/packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.test.tsx index ea2013a67dd32f..6809495fbca5f0 100644 --- a/packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.test.tsx +++ b/packages/material-ui-lab/src/MobileDateTimePicker/MobileDateTimePicker.test.tsx @@ -17,6 +17,7 @@ describe('', () => { clock.restore(); }); + // StrictModeViolation: Uses CalendarPicker const render = createPickerRender({ strict: false }); it('opens dialog on textField click for Mobile mode', () => { diff --git a/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx b/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx index 47abeec749c26a..d3139115dbaf9d 100644 --- a/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx +++ b/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; +import { SinonFakeTimers, useFakeTimers } from 'sinon'; import TextField from '@material-ui/core/TextField'; import { fireEvent, screen } from 'test/utils'; import StaticDatePicker from '@material-ui/lab/StaticDatePicker'; @@ -11,6 +12,14 @@ import { } from '../internal/pickers/test-utils'; describe('', () => { + let clock: SinonFakeTimers; + beforeEach(() => { + clock = useFakeTimers(); + }); + afterEach(() => { + clock.restore(); + }); + // StrictModeViolation: Uses CalendarPicker const render = createPickerRender({ strict: false }); it('render proper month', () => { diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js index 28c38bdb329c36..c7a3bfcaeafd60 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js @@ -12,6 +12,7 @@ import StylesProvider from '../StylesProvider'; import ThemeProvider from '../ThemeProvider'; describe('makeStyles', () => { + // StrictModeViolation: uses `useSynchronousEffect` const mount = createMount({ strict: null }); /**