so basically, I would have a page that would contain some event, like this: /events/:eventId. On that page, there would be a component something like this:
function isEventOrderByClose(
eventOrderBy: Date | null,
eventTimeZone: string = 'Etc/Greenwich'
): boolean {
if (!isValidDate(eventOrderBy)) return false;
return isWithinInterval(utcToZonedTime(new Date(), eventTimeZone), {
start: subMinutes(eventOrderBy, 30),
end: eventOrderBy,
});
}
function Event() {
const { params: { eventId } } = useParams();
const { data } = useQuery({ variables: { eventId } });
return (
<section>
<h1>{event.title}</h1>
{isEventOrderByClose(data?.eventOrderBy, data?.eventTimeZone) && (
<div role="alert" aria-live="polite">
Heads up! You need to order soon!
</div>
)}
</section>
);
}
The problem that I am running into is that, when run on CI/CD, the timezone is obviously different than my local environment. I'm not entirely sure what timezone it's running in. So I have a test like as follows:
describe('Event', () => {
it('shows alert when order time is in under 30 minutes', async () => {
await mock({
Event: () => ({
eventOrderBy: utcToZonedTime(addMinutes(new Date(), 45), 'America/Los_Angeles'),
eventTimeZone: 'America/Los_Angeles',
}),
})
expect(await screen.findByRole('alert')).toBeVisible();
})
})
Of course, this will mean that now will be interpreted differently on CI/CD and my local machine, where my local machine is America/New_York and CI/CD is probably in UTC.
Is there an appropriate way to handle timezones with distance to current time in testing?