test: include test

unovue · Dec 30, 2024 · 2dfdf0b · 2dfdf0b
1 parent c9c564c
commit 2dfdf0b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/packages/radix-vue/src/PinInput/PinInput.test.ts b/packages/radix-vue/src/PinInput/PinInput.test.ts
@@ -22,6 +22,14 @@ describe('given default PinInput', () => {
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
 
+  it('should display input placeholders', () => {
+    expect(inputs[0].element.placeholder).toBe('') // first input was focused thus not showing placeholder
+    expect(inputs[1].element.placeholder).toBe('*')
+    expect(inputs[2].element.placeholder).toBe('*')
+    expect(inputs[3].element.placeholder).toBe('*')
+    expect(inputs[4].element.placeholder).toBe('*')
+  })
+
   describe('after user input', () => {
     beforeEach(async () => {
       await userEvent.keyboard('test')
@@ -143,6 +151,22 @@ describe('given default PinInput', () => {
     it('should emit \'complete\' with the result', () => {
       expect(wrapper.emitted('complete')?.[0]?.[0]).toStrictEqual(['a', 'p', 'p', 'l', 'e'])
     })
+
+    describe('after resetting value', async () => {
+      beforeEach(async () => {
+        await userEvent.keyboard('apple')
+        const button = wrapper.find('button')
+        await button.trigger('click')
+      })
+
+      it('should display input placeholders', () => {
+        expect(inputs[0].element.placeholder).toBe('*')
+        expect(inputs[1].element.placeholder).toBe('*')
+        expect(inputs[2].element.placeholder).toBe('*')
+        expect(inputs[3].element.placeholder).toBe('*')
+        expect(inputs[4].element.placeholder).toBe('*')
+      })
+    })
   })
 })
 

diff --git a/packages/radix-vue/src/PinInput/story/_PinInput.vue b/packages/radix-vue/src/PinInput/story/_PinInput.vue
@@ -15,6 +15,7 @@ const value = ref<string[]>([])
   <PinInputRoot
     v-bind="{ ...props, ...useEmitAsProps(emits) }"
     v-model="value"
+    placeholder="*"
     class="flex gap-2 items-center"
   >
     <PinInputInput
@@ -24,4 +25,8 @@ const value = ref<string[]>([])
       :index="index"
     />
   </PinInputRoot>
+
+  <button @click="value = []">
+    Reset value
+  </button>
 </template>