DEV Community

Cover image for JS Date: The Timezone Tantrum
Marko Bjelac
Marko Bjelac

Posted on

JS Date: The Timezone Tantrum

Cover photo by Lucian Alexe on Unsplash

Why

We had a subtle bug in our UI code which involved the wrong time offset being applied when date & time were input around the DST change.

Without going into the ghastly details, the underlying cause was we used the dreaded JS Date.

In our defence, we had to use it as it was the output type from a 3rd party widget.

At Software Sauna, we like to test stuff. Much more than that, we like to test stuff in isolation. We believed we tested our component in isolation, until we learned that JS Date is coupled to the OS.

Isolated component test & test with Date breaking the isolation

We could control the DST flip by setting the test's input time to the appropriate time of year (summer/winter). However we couldn't control the timezone. We had to adjust the expected data in the test 🤢 using the same library which the production code used (momentjs).

How would it work on CI? - we asked ourselves. Well, even better, CI is always on UTC so it wouldn't be bothered with it.

After some thought we concluded this was a bad thing. If users' browsers were in a timezone, so should the UI tests!

We needed to set the timezone to our UI test CI job!

How

Thankfully, since we use Github actions for CI this was just a matter of finding an action that suited us.

We set up Sze Ying's action set-timezone and that's it!

test-frontend:
runs-on: ubuntu-latest
steps:
- uses: szenius/set-timezone@v1.2
with:
timezoneLinux: "Europe/Helsinki"
- uses: actions/checkout@v4
- uses: actions/setup-node@v3
with:
node-version-file: 'ui/package.json'
cache: 'yarn'
cache-dependency-path: ui/yarn.lock
- run: yarn
working-directory: ui
- name: tests
run: |
yarn test | tee ../fe-test-results.txt
working-directory: ui
...
view raw fe-tests-cropped.yml hosted with ❤ by GitHub

Note: Only the UI/frontend tests job should have this. Your server should be in UTC and so should the backend tests job.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay