diff --git a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx index f0b12d4777..faa38b02b1 100644 --- a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx +++ b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx @@ -18,14 +18,18 @@ */ import React from 'react'; import moment from 'moment-timezone'; -import { render } from 'spec/helpers/testing-library'; +import { render, screen } from 'spec/helpers/testing-library'; +import userEvent from '@testing-library/user-event'; import TimezoneSelector from './index'; describe('TimezoneSelector', () => { - let timezone: string; + let timezone: string | undefined; const onTimezoneChange = jest.fn(zone => { timezone = zone; }); + beforeEach(() => { + timezone = undefined; + }); it('renders a TimezoneSelector with a default if undefined', () => { jest.spyOn(moment.tz, 'guess').mockReturnValue('America/New_York'); render( @@ -36,6 +40,27 @@ describe('TimezoneSelector', () => { ); expect(onTimezoneChange).toHaveBeenCalledWith('America/Nassau'); }); + it('should properly select values from the offsetsToName map', async () => { + jest.spyOn(moment.tz, 'guess').mockReturnValue('America/New_York'); + render( + , + ); + + const select = screen.getByRole('combobox', { + name: 'Timezone selector', + }); + expect(select).toBeInTheDocument(); + userEvent.click(select); + const selection = await screen.findByTitle( + 'GMT -06:00 (Mountain Daylight Time)', + ); + expect(selection).toBeInTheDocument(); + userEvent.click(selection); + expect(selection).toBeVisible(); + }); it('renders a TimezoneSelector with the closest value if passed in', async () => { render( { const prevTimezone = useRef(timezone); const matchTimezoneToOptions = (timezone: string) => TIMEZONE_OPTIONS.find(option => option.offsets === getOffsetKey(timezone)) - ?.value || DEFAULT_TIMEZONE; + ?.value || DEFAULT_TIMEZONE.value; - const updateTimezone = (tz: string) => { - // update the ref to track changes - prevTimezone.current = tz; - // the parent component contains the state for the value - onTimezoneChange(tz); - }; + const updateTimezone = useCallback( + (tz: string) => { + // update the ref to track changes + prevTimezone.current = tz; + // the parent component contains the state for the value + onTimezoneChange(tz); + }, + [onTimezoneChange], + ); useEffect(() => { const updatedTz = matchTimezoneToOptions(timezone || moment.tz.guess()); if (prevTimezone.current !== updatedTz) { updateTimezone(updatedTz); } - }, [timezone]); + }, [timezone, updateTimezone]); return (