fix(kdropdownitem): attribute handling (#2157)

* fix(kdropdownitem): attribute handling * fix(kdropdownitem): attribute binding * test(kdropdownitem): fix component tests * fix(kdropdownitem): minor fix * fix(kdropdownitem): address pr feedback
Kong · Jun 20, 2024 · 8a78dd5 · 8a78dd5
1 parent 7587814
commit 8a78dd5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/sandbox/pages/SandboxDropdown.vue b/sandbox/pages/SandboxDropdown.vue
@@ -164,20 +164,23 @@
           </KButton>
           <template #items>
             <KDropdownItem
+              data-testid="router-link"
               :item="{ label: 'Home', to: { name: 'home' } }"
               target="_blank"
             >
               <KongIcon />
               Router link
             </KDropdownItem>
             <KDropdownItem
+              data-testid="external-link"
               :item="{ label: 'External link', to: 'https://kongponents.konghq.com/' }"
               target="_blank"
             >
               <ExternalLinkIcon />
               External link
             </KDropdownItem>
             <KDropdownItem
+              data-testid="disabled-button"
               disabled
               has-divider
               @click="handleItemClick"
@@ -186,13 +189,15 @@
               Disabled button
             </KDropdownItem>
             <KDropdownItem
+              data-testid="disabled-router-link"
               disabled
               :item="{ label: 'Home', to: { name: 'home' } }"
             >
               <KongIcon />
               Disabled router link
             </KDropdownItem>
             <KDropdownItem
+              data-testid="disabled-external-link"
               disabled
               :item="{ label: 'External link', to: 'https://kongponents.konghq.com/' }"
             >
@@ -201,6 +206,7 @@
             </KDropdownItem>
             <KDropdownItem
               danger
+              data-testid="button"
               has-divider
               @click="handleItemClick"
             >

diff --git a/src/components/KDropdown/KDropdown.cy.ts b/src/components/KDropdown/KDropdown.cy.ts
@@ -196,14 +196,14 @@ describe('KDropdown', () => {
     cy.getTestId('dropdown-list').eq(0).find('.has-divider').should('have.length', 2)
     cy.getTestId('dropdown-list').eq(0).find('.danger').should('have.length', 1)
 
-    cy.get('[data-testid="button"] button').should('be.visible')
-    cy.get('[data-testid="disabled-button"] button').should('be.visible')
+    cy.get('button[data-testid="button"]').should('be.visible')
+    cy.get('button[data-testid="disabled-button"]').should('be.visible')
 
-    cy.get('[data-testid="router-link"] router-link').should('be.visible')
-    cy.get('[data-testid="disabled-router-link"] router-link').should('be.visible')
+    cy.get('router-link[data-testid="router-link"]').should('be.visible')
+    cy.get('router-link[data-testid="disabled-router-link"]').should('be.visible')
 
-    cy.get('[data-testid="external-link"] a').should('be.visible')
-    cy.get('[data-testid="disabled-external-link"] a').should('be.visible')
+    cy.get('a[data-testid="external-link"]').should('be.visible')
+    cy.get('a[data-testid="disabled-external-link"]').should('be.visible')
   })
 })
 
@@ -228,11 +228,11 @@ describe('KDropdownItem', () => {
       },
     })
 
-    cy.getTestId('dropdown-item').should('not.exist')
-    cy.getTestId(testIdAttr).should('be.visible')
-    cy.getTestId(testIdAttr).find('[data-testid="dropdown-item-trigger"]').should('have.attr', 'target', '_blank')
+    cy.get(`li[data-testid="dropdown-item"].${boundClass}`).should('be.visible')
+    cy.get(`li[data-testid="dropdown-item"] [data-testid="${testIdAttr}"]`).should('be.visible')
+    cy.get(`li[data-testid="dropdown-item"] [data-testid="${testIdAttr}"]`).should('have.attr', 'target', '_blank')
     // making sure classes don't leak to trigger element
-    cy.getTestId('dropdown-item-trigger').not(`.${boundClass}`).should('have.length', 1)
+    cy.get(`li[data-testid="dropdown-item"] [data-testid="${testIdAttr}"]`).not(`.${boundClass}`).should('have.length', 1)
   })
 
   it('correctly handles disabled state on links', () => {

diff --git a/src/components/KDropdown/KDropdownItem.vue b/src/components/KDropdown/KDropdownItem.vue
@@ -1,12 +1,12 @@
 <template>
   <li
     class="k-dropdown-item"
-    :class="{
+    :class="[{
       'has-divider': hasDivider,
       'disabled': disabled,
       'danger': danger || isDangerous,
-      'dropdown-selected-option': selected
-    }"
+      'dropdown-selected-option': selected,
+    }, $attrs.class, $attrs.style]"
     data-testid="dropdown-item"
   >
     <component
@@ -29,6 +29,10 @@ import type { DropdownItem, DropdownItemRenderedRecord, DropdownItemRenderedType
 import type { PropType } from 'vue'
 import { computed, useAttrs } from 'vue'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const attrs = useAttrs()
 
 const props = defineProps({
@@ -134,8 +138,6 @@ const strippedAttrs = computed((): typeof attrs => {
   delete modifiedAttrs.class
   delete modifiedAttrs.disabled
   delete modifiedAttrs.style
-  // Ensure the `data-testid` attribute is only applied to the top-most element
-  delete modifiedAttrs['data-testid']
 
   return modifiedAttrs
 })