Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(ui-prop-types): migrate old Prop-types tests #1433

Merged
merged 1 commit into from
Feb 20, 2024
Merged

test(ui-prop-types): migrate old Prop-types tests #1433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package-lock.json
View file
Open in desktop

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
Open in desktop
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
Open in desktop
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
Loading