search

ntohq / buefy-next

Lightweight UI components for Vue.js (Vue3) based on Bulma
https://v3.buefy.org
MIT License
120 stars 10 forks source link

Port Unit Tests. #1

Closed wesdevpro closed 1 year ago

wesdevpro commented 1 year ago

Before starting actual porting, we have to tweak the webpack and Jest configurations.

List of spec files:

kikuomax commented 1 year ago

Command to run unit tests:

npm run unit
kikuomax commented 1 year ago

I found a non-critical issue in FieldBody. It treated children of a div element as a slot when it created the div element. Children should have been specified as an array of elements. https://github.com/ntohq/buefy/blob/67ecf3a8b9e1365cc51f37f20b64f85403b0ad8b/src/components/field/FieldBody.vue#L25-L47

kikuomax commented 1 year ago

I found another non-critical issue in FieldBody. I should have used a slot (() => element instead of [element]) to specify a child of b-field. The Vue runtime warned it as a potential performance issue. https://github.com/ntohq/buefy/blob/67ecf3a8b9e1365cc51f37f20b64f85403b0ad8b/src/components/field/FieldBody.vue#L37-L44

kikuomax commented 1 year ago

TableMobileSort cannot be instantiated if columns prop is null or undefined. The unit tests for TableMobileSort crashed due to this bug. I do not think users face this bug because TableMobileSort is internally used by Table where columns should not be null or undefined. So I won't create a separate issue but will patch it in this issue.

kikuomax commented 1 year ago

TableMobileSort cannot be instantiated if columns prop is null or undefined. The unit tests for TableMobileSort crashed due to this bug. I do not think users face this bug because TableMobileSort is internally used by Table where columns should not be null or undefined. So I won't create a separate issue but will patch it in this issue.

There are more bugs related to this in TableMobileSort. But again, users should not face the bug.

kikuomax commented 1 year ago

I found the following code crashed if trigger did not exist; i.e., inline prop was true: https://github.com/ntohq/buefy-next/blob/f0348bfbc83536b76717b023821f941ac5c83ae9/src/components/dropdown/Dropdown.vue#L269-L276

The cause was that this.$refs.trigger became null instead of undefined (maybe changed behavior from Vue 2 → Vue 3), and null passed the test this.$refs.trigger !== undefined. Then this.$refs.trigger.querySelectorAll('*') ended up with a crash.

However, this only happens in unit tests because the above code in the isInWhiteList method is run when inline is false; i.e., trigger is never null. So users won't face the error.

I will correct the code in this issue anyway.

kikuomax commented 1 year ago

I found a "dangling" $destroy: https://github.com/ntohq/buefy-next/blob/f0348bfbc83536b76717b023821f941ac5c83ae9/src/utils/InjectedChildMixin.js#L15

But users should not face this. I will remove this in this issue.

kikuomax commented 1 year ago

The following code won't work as intended if content does not exist: https://github.com/ntohq/buefy-next/blob/f0348bfbc83536b76717b023821f941ac5c83ae9/src/components/tooltip/Tooltip.vue#L271-L278

$refs.content becomes null if content does not exist, and the test this.$refs.content !== undefined passes. Then this.$refs.content.querySelectorAll('*') ends up with a crash.

However, users won't face this error because content always exists. I will fix it in this issue.

kikuomax commented 1 year ago

I have to polyfill window.crypto.getRandomValues in the test environment. For more details, please see: https://github.com/orgs/ntohq/projects/12?pane=issue&itemId=34430335

kikuomax commented 1 year ago

I will add a test case for BFieldBody to test a potential cause of #18.

wesdevpro commented 1 year ago

Closing because all PR's pertaining to porting the unit test to vue3 😎

kikuomax commented 1 year ago

@wesdevpro Sorry, I ran out of time last Friday. Bunch of PRs are still coming.

kikuomax commented 1 year ago

It is finally done!