Support mocking and tests

[SilasPeters]

Having the redux store allows us to more easily mock all of the data, and therefore create tests more efficiently and reliably. I am still investigating what the most efficient way to do this is, so any input is greatly appreciated!

Originally posted by @stickyPiston in #140 (comment)

Let's hold the discussion here!

[SilasPeters]

If I understand the Redux store correctly, we can make the whole website display contents present in the store. Then, on startup, we fill the contents of the store dynamically based on an environment variable.

However, we do need to be able to update the store every 30 min or so, or with webhooks (koala already supports webhooks, as used by Mongoose).

Can the store be filled by dynamically by mocking data defined in a local database or something? How can we supply the mocking data?

This can also immediately fix #131, where large assets are not loaded in time.

[stickyPiston]

The idea for the mocking that I have right now is that you start the application with a redux store with predefined values for the API slices, and you can test new features manually or iterate on them using that version of the system in development. The advantage is that all of the data is always available and predictable, and new developers don't need the contentful and koala keys to start developing, because they can use the mocked environment to develop their features in.

Testing expands on the idea of mocking: the tests run in the mock environment and navigate the page and asserts things on it. To some extent these are more integration tests than unit tests, but vite has great tooling for those, and even coverage reports (though that might be a tad bit too extreme for the radio, i reckon).

[SilasPeters]

Yes, I meant that haha. Will the redux store in production be able to update its contents? For example, what if an activity is added or the number of enrollmentes have changed? We need to keep that logic.

[stickyPiston]

It is, the activities are reloaded in the Activities component, where the polling interval is set to whatever is set in the environment variable. The mocks will also include this logic, but the API mocks will always just return the same result (though we could also write a test for this if we really wanted to).

radio/src/components/Activities.jsx

Lines 7 to 9 in ddf8ec1

	const { data: activities, isSuccess } = useActivitiesQuery(undefined, {
	pollingInterval: Number(import.meta.env.VITE_LOAD_INTERVAL)
	});