import { expect } from "chai" ; import React from "react" ; import sinon from "sinon" ; import { fireEvent , render } from "@testing-library/react" ; import TestUtils from "../TestUtils" ; import { DatePicker } from "../../components-react/datepicker/DatePicker" ; import { SpecialKey } from "@itwin/appui-abstract" ; import { adjustDateToTimezone } from "../../components-react/common/DateUtils" ; describe ( "<DatePicker />" , ( ) => { let renderSpy ; const testDate = new Date ( "July 22, 2018 07:22:13 -0400" ) ; before ( async ( ) => { await TestUtils . initializeUiComponents ( ) ; } ) ; beforeEach ( ( ) => { sinon . restore ( ) ; renderSpy = sinon . spy ( ) ; } ) ; after ( ( ) => { TestUtils . terminateUiComponents ( ) ; } ) ; it ( "adjustDateToTimezone should adjust london time to current locale" , ( ) => { const londonDate = new Date ( "July 22, 2018 07:22:13 +0100" ) ; const adjustedDate = adjustDateToTimezone ( londonDate , 1 * 60 ) ; expect ( adjustedDate . getHours ( ) ) . to . eq ( 7 ) ; } ) ; it ( "should render " , ( ) => { const renderedComponent = render ( < DatePicker selected = { testDate } / > ) ; expect ( renderedComponent ) . not . to . be . null ; const span = renderedComponent . container . querySelector ( "span.components-month-year" ) ; expect ( span ) . not . to . be . null ; const spanValue = span ! . textContent ; expect ( spanValue ! . match ( /month.long.july/ ) ) . not . to . be . null ; expect ( spanValue ! . match ( /2018/ ) ) . not . to . be . null ; const month = renderedComponent . getByRole ( "listbox" ) ; expect ( month ) . not . to . be . undefined ; } ) ; it ( "should change to previous month " , ( ) => { const renderedComponent = render ( < DatePicker selected = { testDate } / > ) ; const span = renderedComponent . container . querySelector ( "span.components-month-year" ) ; expect ( span ) . not . to . be . null ; expect ( span ! . textContent ! . match ( /month.long.july/ ) ) . not . to . be . null ; expect ( renderedComponent ) . not . to . be . null ; const button = renderedComponent . container . querySelector ( ".components-previous-month" ) ; expect ( button ) . not . to . be . null ; fireEvent . click ( button ! ) ; expect ( span ! . textContent ! . match ( /month.long.june/ ) ) . not . to . be . null ; } ) ; it ( "should change to previous month " , ( ) => { const renderedComponent = render ( < DatePicker selected = { testDate } / > ) ; const span = renderedComponent . container . querySelector ( "span.components-month-year" ) ; expect ( span ) . not . to . be . null ; expect ( span ! . textContent ! . match ( /month.long.july/ ) ) . not . to . be . null ; expect ( renderedComponent ) . not . to . be . null ; const button = renderedComponent . container . querySelector ( ".components-previous-month" ) ; expect ( button ) . not . to . be . null ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; expect ( span ! . textContent ! . match ( /month.long.december/ ) ) . not . to . be . null ; } ) ; it ( "should change to next month " , ( ) => { const renderedComponent = render ( < DatePicker selected = { testDate } / > ) ; const span = renderedComponent . container . querySelector ( "span.components-month-year" ) ; expect ( span ) . not . to . be . null ; expect ( span ! . textContent ! . match ( /month.long.july/ ) ) . not . to . be . null ; expect ( renderedComponent ) . not . to . be . null ; const button = renderedComponent . container . querySelector ( ".components-next-month" ) ; expect ( button ) . not . to . be . null ; fireEvent . click ( button ! ) ; expect ( span ! . textContent ! . match ( /month.long.august/ ) ) . not . to . be . null ; const previousButton = renderedComponent . container . querySelector ( ".components-previous-month" ) ; fireEvent . click ( previousButton ! ) ; expect ( span ! . textContent ! . match ( /month.long.july/ ) ) . not . to . be . null ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; fireEvent . click ( button ! ) ; expect ( span ! . textContent ! . match ( /month.long.january/ ) ) . not . to . be . null ; } ) ; it ( "should trigger onDateChange" , ( ) => { const renderedComponent = render ( < DatePicker selected = { testDate } onDateChange = { renderSpy } / > ) ; const testDayTicks = new Date ( 2018 , 6 , 19 ) . getTime ( ) ; const dataValueSelector = `li[data-value='${ testDayTicks }']` ; const dayEntry = renderedComponent . container . querySelector ( dataValueSelector ) ; expect ( dayEntry ) . not . to . be . null ; fireEvent . click ( dayEntry ! ) ; expect ( renderSpy ) . to . be . called ; } ) ; it ( "should handle keyboard processing" , ( ) => { const renderedComponent = render ( < DatePicker selected = { testDate } onDateChange = { renderSpy } / > ) ; const calendar = renderedComponent . getByTestId ( "components-date-picker-calendar-list" ) ; calendar . focus ( ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowDown } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowDown } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowDown } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowDown } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowDown } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowDown } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowUp } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowUp } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowUp } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowUp } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowUp } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowUp } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowUp } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowLeft } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowRight } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . Enter } ) ; expect ( renderSpy ) . to . be . called ; renderSpy . resetHistory ( ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . ArrowLeft } ) ; fireEvent . keyDown ( calendar , { key : SpecialKey . Space } ) ; expect ( renderSpy ) . to . be . called ; } ) ; } ) ;