feat: [divider] - add data-test attribute

PrestaShopCorp · Nov 2, 2023 · b5acdc9 · b5acdc9
1 parent 0a50e2b
commit b5acdc9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/packages/components/divider/src/divider.ts b/packages/components/divider/src/divider.ts
@@ -19,6 +19,11 @@ export const dividerProps = buildProps({
     required: false,
     default: PuikDividerOrientation.HORIZONTAL,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type DividerProps = ExtractPropTypes<typeof dividerProps>

diff --git a/packages/components/divider/src/divider.vue b/packages/components/divider/src/divider.vue
@@ -2,10 +2,12 @@
   <hr
     v-if="props.orientation === PuikDividerOrientation.HORIZONTAL"
     class="puik-divider puik-divider--horizontal"
+    :data-test="dataTest != undefined ? `horizontal-${dataTest}` : ''"
   />
   <div
     v-if="props.orientation === PuikDividerOrientation.VERTICAL"
     class="puik-divider puik-divider--vertical"
+    :data-test="dataTest != undefined ? `vertical-${dataTest}` : ''"
   ></div>
 </template>
 

diff --git a/packages/components/divider/test/divider.spec.ts b/packages/components/divider/test/divider.spec.ts
@@ -21,8 +21,14 @@ describe('Divider tests', () => {
     factory()
     expect(wrapper).toBeTruthy()
   })
+
   it('should be a vertical divider', () => {
     factory({ orientation: 'vertical' })
     expect(findDivider().classes()).toContain('puik-divider--vertical')
   })
+
+  it('the value of the data-test attribute should be "vertical-test"', () => {
+    factory({ orientation: 'vertical', dataTest: 'test' })
+    expect(findDivider().attributes('data-test')).toBe('vertical-test')
+  })
 })