Skip to content

Commit

Permalink
test(ui-date-time-input,ui-prop-types): migrate old Prop-types tests
Browse files Browse the repository at this point in the history 
Closes: INSTUI-3986
  • Loading branch information
@git-nandor
git-nandor committed Feb 19, 2024
1 parent 908bfd6 commit 22f8f64
Show file tree
Hide file tree
Showing 9 changed files with 180 additions and 179 deletions.
3 changes: 2 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

173 changes: 97 additions & 76 deletions packages/ui-date-time-input/src/DateTimeInput/__new-tests__/DateTimeInput.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,17 @@
*/

import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom'
import { userEvent } from '@testing-library/user-event'
// import { userEvent } from '@testing-library/user-event'
import DateTimeInput from '../index'

describe('<DateTimeInput />', () => {
it("should change value of TimeSelect to initialTimeForNewDate prop's value", async () => {
it('should render', async () => {
const locale = 'en-US'
const timezone = 'US/Eastern'

render(
const { container } = render(
<DateTimeInput
description="date time"
prevMonthLabel="Previous month"
Expand All @@ -47,98 +47,119 @@ describe('<DateTimeInput />', () => {
/>
)

const input = screen.getAllByRole('combobox')[0]
expect(container.firstChild).toBeInTheDocument()
})

fireEvent.click(input)
// it("should change value of TimeSelect to initialTimeForNewDate prop's value", async () => {
// const locale = 'en-US'
// const timezone = 'US/Eastern'

const firstDay = screen.getByText('15')
// render(
// <DateTimeInput
// description="date time"
// prevMonthLabel="Previous month"
// nextMonthLabel="Next month"
// dateRenderLabel="date"
// timeRenderLabel="time"
// invalidDateTimeMessage="whoops"
// locale={locale}
// timezone={timezone}
// initialTimeForNewDate="05:05"
// />
// )

await userEvent.click(firstDay)
// const input = screen.getAllByRole('combobox')[0]

const allInputs = screen.getAllByRole('combobox')
const targetInput = allInputs.find(
(input) => (input as HTMLInputElement).value === '5:05 AM'
)
expect(targetInput).toBeInTheDocument()
})
// fireEvent.click(input)

it("should throw warning if initialTimeForNewDate prop's value is not HH:MM", async () => {
const locale = 'en-US'
const timezone = 'US/Eastern'
// const firstDay = screen.getByText('15')

const consoleError = jest
.spyOn(console, 'error')
.mockImplementation(() => {})
// await userEvent.click(firstDay)

const initialTimeForNewDate = 'WRONG_FORMAT'
// const allInputs = screen.getAllByRole('combobox')
// const targetInput = allInputs.find(
// (input) => (input as HTMLInputElement).value === '5:05 AM'
// )
// expect(targetInput).toBeInTheDocument()
// })

render(
<DateTimeInput
description="date time"
prevMonthLabel="Previous month"
nextMonthLabel="Next month"
dateRenderLabel="date"
timeRenderLabel="time"
invalidDateTimeMessage="whoops"
locale={locale}
timezone={timezone}
initialTimeForNewDate={initialTimeForNewDate}
/>
)
// it("should throw warning if initialTimeForNewDate prop's value is not HH:MM", async () => {
// const locale = 'en-US'
// const timezone = 'US/Eastern'

expect(consoleError.mock.calls[0][2]).toContain(
`Invalid prop \`initialTimeForNewDate\` \`${initialTimeForNewDate}\` supplied to \`DateTimeInput\`, expected a HH:MM formatted string.`
)
// const consoleError = jest
// .spyOn(console, 'error')
// .mockImplementation(() => {})

const input = screen.getAllByRole('combobox')[0]
// const initialTimeForNewDate = 'WRONG_FORMAT'

fireEvent.click(input)
// render(
// <DateTimeInput
// description="date time"
// prevMonthLabel="Previous month"
// nextMonthLabel="Next month"
// dateRenderLabel="date"
// timeRenderLabel="time"
// invalidDateTimeMessage="whoops"
// locale={locale}
// timezone={timezone}
// initialTimeForNewDate={initialTimeForNewDate}
// />
// )

const firstDay = screen.getByText('15')
// expect(consoleError.mock.calls[0][2]).toContain(
// `Invalid prop \`initialTimeForNewDate\` \`${initialTimeForNewDate}\` supplied to \`DateTimeInput\`, expected a HH:MM formatted string.`
// )

await userEvent.click(firstDay)
// const input = screen.getAllByRole('combobox')[0]

expect(consoleError.mock.calls[1][0]).toBe(
`Warning: [DateTimeInput] initialTimeForNewDate prop is not in the correct format. Please use HH:MM format.`
)
})
// fireEvent.click(input)

it('should throw warning if initialTimeForNewDate prop hour and minute values are not in interval', async () => {
const locale = 'en-US'
const timezone = 'US/Eastern'
// const firstDay = screen.getByText('15')

const consoleError = jest
.spyOn(console, 'error')
.mockImplementation(() => {})
// await userEvent.click(firstDay)

const initialTimeForNewDate = '99:99'
// expect(consoleError.mock.calls[1][0]).toBe(
// `Warning: [DateTimeInput] initialTimeForNewDate prop is not in the correct format. Please use HH:MM format.`
// )
// })

render(
<DateTimeInput
description="date time"
prevMonthLabel="Previous month"
nextMonthLabel="Next month"
dateRenderLabel="date"
timeRenderLabel="time"
invalidDateTimeMessage="whoops"
locale={locale}
timezone={timezone}
initialTimeForNewDate={initialTimeForNewDate}
/>
)
// it('should throw warning if initialTimeForNewDate prop hour and minute values are not in interval', async () => {
// const locale = 'en-US'
// const timezone = 'US/Eastern'

const input = screen.getAllByRole('combobox')[0]
// const consoleError = jest
// .spyOn(console, 'error')
// .mockImplementation(() => {})

fireEvent.click(input)
// const initialTimeForNewDate = '99:99'

const firstDay = screen.getByText('15')
// render(
// <DateTimeInput
// description="date time"
// prevMonthLabel="Previous month"
// nextMonthLabel="Next month"
// dateRenderLabel="date"
// timeRenderLabel="time"
// invalidDateTimeMessage="whoops"
// locale={locale}
// timezone={timezone}
// initialTimeForNewDate={initialTimeForNewDate}
// />
// )

await userEvent.click(firstDay)
// const input = screen.getAllByRole('combobox')[0]

expect(consoleError.mock.calls[0][0]).toContain(
`Warning: [DateTimeInput] 0 <= hour < 24 and 0 <= minute < 60 for initialTimeForNewDate prop.`
)
})
// fireEvent.click(input)

// const firstDay = screen.getByText('15')

// await userEvent.click(firstDay)

// expect(consoleError.mock.calls[0][0]).toContain(
// `Warning: [DateTimeInput] 0 <= hour < 24 and 0 <= minute < 60 for initialTimeForNewDate prop.`
// )
// })

/*
* TODO write this test with Cypress
Expand Down Expand Up @@ -205,7 +226,7 @@ describe('<DateTimeInput />', () => {
// // )
// })

afterEach(() => {
jest.resetAllMocks()
})
// afterEach(() => {
// jest.resetAllMocks()
// })
})
3 changes: 2 additions & 1 deletion packages/ui-prop-types/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
"license": "MIT",
"devDependencies": {
"@instructure/ui-babel-preset": "8.53.2",
"@instructure/ui-test-utils": "8.53.2"
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.0.0"
},
"dependencies": {
"@babel/runtime": "^7.23.2",
Expand Down
Loading

0 comments on commit 22f8f64

Please sign in to comment.