Thanks, looking at the commit code it was indeed out of my reach (atm).
I got to learn fast!

Thanks for the PR ❤️

I'm making minor changes:

• renaming active-inactive to on-off for DX and reducing keystrokes (it also aligns with existing props on-icon & off-icon)
• renamed demo & moved up

whoa, You added a test 😍

Hi, @jd-solanki, Thank you for taking the time to review my first PR to Open Source Community and provide feedback, Anu is a great project, I really enjoy contributing code to this project.

Hey @IcetCode

After merging, I noticed we have updated modelValue prop's type and default value. Is it intentional?

Sorry, I should mention this change. I changed the prop's type because I found that if an Array or Set type value is passed to modelValue, the state of ASwitch cannot be changed. Therefore, I chose to limit it to primitive types such as String, Boolean, and Number, which is more in line with user habits.

This change seems to be a breaking change, and we may need to add more unit test cases to ensure its stability.

Hi @IcetCode

I've added support for arrays in this commit. However, I have an issue with the test in packages/anu-vue/test/composables/useCheckbox.test.ts file where I commented TODO.

If you are familiar with tests can you please check why commented code is failing?

Thanks 😇

Hi @jd-solanki
After running the code, I found that the problem lies in the setter function of the isChecked state. isChecked intercepts the compute setter method, and the setter function is only triggered when we actively change the state of 'isChecked'. In the test case, only the value of modelValue was changed, which does not trigger its setter function. Below is a test case that I excerpted from the Vue source code, which intuitively explains this situation.

  it('should support setter', () => {
    const n = ref(1)
    const plusOne = computed({
      get: () => n.value + 1,
      set: val => {
        n.value = val - 1
      }
    })

    expect(plusOne.value).toBe(2)
    n.value++
    expect(plusOne.value).toBe(3)

    plusOne.value = 0
    expect(n.value).toBe(-1)
  })

Just setting isChecked.value === xxx once manually is enough to make this test case run successfully.

  it('should have `isChecked` as `true` when `modelValue` is changed to `true`', () => {
    const modelValue = ref(false)
    const emitMock = vi.fn()
    const trueValue = true
    const falseValue = false

    const { isChecked } = useCheckbox(modelValue, emitMock, trueValue, falseValue)
    modelValue.value = true

    expect(isChecked.value).toBe(true)
    isChecked.value = true // trigger the setter function

    expect(emitMock).toBeCalledTimes(1)
    expect(emitMock).toHaveBeenCalledWith('update:modelValue', true)
  })

The reason why the last test case failed is that we did not provide the update:modelValue function. We know that v-model is a syntactic sugar and it will be compiled into the following code.

// before
<input v-model="searchText" />
// after
<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

We just need to change the mock function like this

// before
const emitMock = vitest.fn()
// after
const emitMock = vi.fn((fnName: string, value: string) => {
  if (fnName === 'update:modelValue')
    modelValue.value = value
})

Thanks @IcetCode

I don't know why that didn't come to my mind but now I understand the issue and updated the tests in this commit.

Thanks for your contribution 🥂

I'm glad to be of help.🥂

Hey, @IcetCode it looks like you are really good with tests, May I ask you one question as this is the first time writing tests?

How to test CSS we get in DOM, here's my try, where I try to check the CSS of a button.

Hey @jd-solanki ,

After running the component in tests and the browser, I noticed that the CSSStyleDeclaration object differs between the two environments. This could be caused by jsdom or vue-test-util. Fortunately, vue-test-util provides an attributes function that allows us to easily retrieve an element's styles.

 it('color prop changes button color', () => {
    const wrapper = shallowMount(ABtn, { props: { color: 'warning' }, slots: { default: 'Click me' } })
    const myRegex = /;\s?/g; // match "; " or ";"

    const styles = wrapper.attributes('style')?.split(myRegex)
    expect(styles).toContain('--a-layer-c: var(--a-warning)')
  })

oh sorry @IcetCode I totally forgot about this 🙏🏻

Will give it a try for sure!

Thanks, Nice to talk to you 😇

Hey, @IcetCode Do you have any experience with configuring Playwright inside Vitest?

Hey, @sandros94
I haven't tried Playwright yet, but I've used Cypress's component test for testing components. It solved a bunch of problems that came up when using a Node.js environment for component testing, like having a complete browser environment and more intuitive style checks. Maybe we can bring in Playwright or Cypress along with Vitest to cover component testing for Anu. This would definitely boost the stability of components

Thanks for your input, I want to write more tests to improve robustness however I'm experiencing something is missing from correct test setup like window.getComputedStyle don't give actual styles just like we get in browser in vitest + jsdom so I wanted to try if playwright can help here.

I tried to integrate playwright but it looks like if we use playwright then we have to let go of vitest but at the same time I also found that we can use playwright inside vitest to avoid compromising vitest features like instant feedback ⚡

Playwright's component test is still in the experimental stage, maybe we should considering Cypress instead. I think using Cypress or Playwright for component style layer tests, and then extracting the component logic with hooks and testing it with Vitest, is an excellent approach.

@IcetCode Have you ever tried this? Does it affect the speed of tests, more specifically when I tried playwright in the sample repo I was missing vitest's HMR like speed 😅 ?

@jd-solanki I noticed that they both use Vite as their bundler, which could be the reason for the slowdown in HMR

@IcetCode If you know of any project that uses vite and uses Playwright inside vitest for component testing, please let me know. I would like to add the playwright in vitest.

Regards.