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.

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.