Current work todos

[silverbackdan]

• [x] Move complex conditionals in ComponentGroup template to computed vars
• [x] Move signedIn computed var from ComponentGroup to Auth class
• [x] Once signedIn is available from Auth - update the watcher in ComponentGroup
• [x] Also update ResourceLoader to access the new signedIn computed var from Auth class
• [ ] Test watch is called with immediate when it has been defined
• [x] Test fetcher::fetchRoute if meta.cwa is false, to skip
• [x] on ResourceLoader currently we are using onMounted to run code when it is only on client-side - is it worth changing the way we check for this? Code should not be render blocking
• [x] Check if there are ways to test for process.server and process.client for testing https://github.com/components-web-app/cwa-nuxt-module/pull/102/files
• [x] Also if you can find out process.server and process.client can be mocked, please do a find in the tests for .todo and see if we can make these work as well

[p1pchenk0]

Test fetcher::fetchRoute if meta.cwa is false, to skip - #103 + in this PR I've also fixed failing tests after code changes

[p1pchenk0]

Test watch is called with immediate when it has been defined - unfortunately, such tests cannot be written for Vue3 components as watch is called within setup function. Moreover, since in one component there may be multiple watchers. in order to check whether correct function is called, we had to:

• move getter function responsible for storing all values we watch into separate computed to check its reference in test
• move watcher function into method to be able to check its reference

based on all this things, I must admit, that doing all this for testing one flag may be overkill

[silverbackdan]

Test watch is called with immediate when it has been defined - unfortunately, such tests cannot be written for Vue3 components as watch is called within setup function. Moreover, since in one component there may be multiple watchers. in order to check whether correct function is called, we had to:

• move getter function responsible for storing all values we watch into separate computed to check its reference in test
• move watcher function into method to be able to check its reference

based on all this things, I must admit, that doing all this for testing one flag may be overkill

I do have an example to mock the watch function and call the original, wrapping the watch in as a spy but calling the original as well. Then you just check if the function was called with specific arguments. I see what you mean about if there are more watchers and ensuring the flag is called on the correct watcher. However, if the watcher is inside the onMounted for example, we can mock onMounted to call it and ensure that watcher was called then... but with some thinking perhaps there is a more succinct way to test.

[p1pchenk0]

I have moved process.client and process.server into composable, thus I could easily mock it in route-middleware tests, so last two points are also done

[p1pchenk0]

Test watch is called with immediate when it has been defined - unfortunately, such tests cannot be written for Vue3 components as watch is called within setup function. Moreover, since in one component there may be multiple watchers. in order to check whether correct function is called, we had to:

• move getter function responsible for storing all values we watch into separate computed to check its reference in test
• move watcher function into method to be able to check its reference

based on all this things, I must admit, that doing all this for testing one flag may be overkill

I do have an example to mock the watch function and call the original, wrapping the watch in as a spy but calling the original as well. Then you just check if the function was called with specific arguments. I see what you mean about if there are more watchers and ensuring the flag is called on the correct watcher. However, if the watcher is inside the onMounted for example, we can mock onMounted to call it and ensure that watcher was called then... but with some thinking perhaps there is a more succinct way to test.

do you mean you moved watcher function into separate method and called it like this:

doSomething() { }

watch(val, doSomething)

?

[p1pchenk0]

Move complex conditionals in ComponentGroup template to computed vars - ✅ Move signedIn computed var from ComponentGroup to Auth class - ✅

[silverbackdan]

Test watch is called with immediate when it has been defined - unfortunately, such tests cannot be written for Vue3 components as watch is called within setup function. Moreover, since in one component there may be multiple watchers. in order to check whether correct function is called, we had to:

• move getter function responsible for storing all values we watch into separate computed to check its reference in test
• move watcher function into method to be able to check its reference

based on all this things, I must admit, that doing all this for testing one flag may be overkill

I do have an example to mock the watch function and call the original, wrapping the watch in as a spy but calling the original as well. Then you just check if the function was called with specific arguments. I see what you mean about if there are more watchers and ensuring the flag is called on the correct watcher. However, if the watcher is inside the onMounted for example, we can mock onMounted to call it and ensure that watcher was called then... but with some thinking perhaps there is a more succinct way to test.

do you mean you moved watcher function into separate method and called it like this:

doSomething() { }

watch(val, doSomething)

?

This was one way I managed to use watchers but also be able to spy on how they were called https://github.com/components-web-app/cwa-nuxt-module/blob/nuxt3/src/runtime/api/fetcher/fetch-status-manager.spec.ts#L35-L49

[p1pchenk0]

on ResourceLoader currently we are using onMounted to run code when it is only on client-side - is it worth changing the way we check for this? Code should not be render blocking - looks like we cannot do much with this since using process.client check leads to DOM mismatch during hydration

[silverbackdan]

on ResourceLoader currently we are using onMounted to run code when it is only on client-side - is it worth changing the way we check for this? Code should not be render blocking - looks like we cannot do much with this since using process.client check leads to DOM mismatch during hydration

Ah yes, forgot about this - indeed in that case it does need to be done once already mounted.

[p1pchenk0]

Once signedIn is available from Auth - update the watcher in ComponentGroup - ✅ Also update ResourceLoader to access the new signedIn computed var from Auth class - ✅

[p1pchenk0]

Test watch is called with immediate when it has been defined - unfortunately, such tests cannot be written for Vue3 components as watch is called within setup function. Moreover, since in one component there may be multiple watchers. in order to check whether correct function is called, we had to:

• move getter function responsible for storing all values we watch into separate computed to check its reference in test
• move watcher function into method to be able to check its reference

based on all this things, I must admit, that doing all this for testing one flag may be overkill

I do have an example to mock the watch function and call the original, wrapping the watch in as a spy but calling the original as well. Then you just check if the function was called with specific arguments. I see what you mean about if there are more watchers and ensuring the flag is called on the correct watcher. However, if the watcher is inside the onMounted for example, we can mock onMounted to call it and ensure that watcher was called then... but with some thinking perhaps there is a more succinct way to test.

do you mean you moved watcher function into separate method and called it like this:

doSomething() { }

watch(val, doSomething)

?

This was one way I managed to use watchers but also be able to spy on how they were called https://github.com/components-web-app/cwa-nuxt-module/blob/nuxt3/src/runtime/api/fetcher/fetch-status-manager.spec.ts#L35-L49

so you ok with moving function from watcher into separate method for reference check in test?

[silverbackdan]

Hmm I'm not sure we are quite understanding each other.

If we were to be mocking watch like I am, can't we just check that the function has been called with the correct options in the same test where we are checking the watcher is working?

[silverbackdan]

E,g, https://github.com/components-web-app/cwa-nuxt-module/blob/nuxt3/src/runtime/api/fetcher/fetch-status-manager.spec.ts#L585

[silverbackdan]

Great work, thanks