test: update selectors

.eslintrc.cjs

@@ -56,5 +56,25 @@ module.exports = {
       prefer: 'type-imports',
       fixStyle: 'separate-type-imports',
     }],
+    'vue/no-restricted-static-attribute': ['error',
+      {
+        key: 'data-test-id',
+        message: 'Using "data-test-id" is not allowed. Use "data-testid" instead.',
+      },
+      {
+        key: 'data-tracking-id',
+        message: 'Using "data-tracking-id" is not allowed. Use "data-testid" instead.',
+      },
+    ],
+    'vue/no-restricted-v-bind': ['error',
+      {
+        argument: 'data-test-id',
+        message: 'Using "data-test-id" is not allowed. Use "data-testid" instead.',
+      },
+      {
+        argument: 'data-tracking-id',
+        message: 'Using "data-tracking-id" is not allowed. Use "data-testid" instead.',
+      },
+    ],
   },
 }

src/components/MarkdownContent.spec.ts

@@ -36,7 +36,7 @@ describe('<MarkdownContent />', () => {
       },
     })
 
-    expect(wrapper.find('.markdown-content').isVisible()).toBe(true)
+    expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
     expect(wrapper.find('h1').text()).toEqual(title)
     expect(wrapper.findTestId('paragraph-1').isVisible()).toBe(true)
     expect(wrapper.findTestId('paragraph-1').text()).toEqual(sentence)
@@ -59,8 +59,8 @@ describe('<MarkdownContent />', () => {
         },
       })
 
-      expect(wrapper.find('.markdown-content').isVisible()).toBe(true)
-      expect(wrapper.find('.markdown-content').attributes('class')).toContain(`mode-${mode}`)
+      expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
+      expect(wrapper.findTestId('markdown-content').attributes('class')).toContain(`mode-${mode}`)
       expect(wrapper.find('h1').text()).toEqual(title)
     })
   }

src/components/MarkdownUi.vue

@@ -5,6 +5,7 @@
     ref="markdownComponent"
     class="kong-ui-public-markdown-ui"
     :class="[`mode-${currentMode}`, `theme-${activeTheme}`, { 'fullscreen': isFullscreen }]"
+    data-testid="markdown-ui"
   >
     <div
       v-if="editable && currentMode !== 'read'"

vitest.setup.ts

@@ -1,11 +1,10 @@
-import { config, DOMWrapper } from '@vue/test-utils'
+import { config } from '@vue/test-utils'
 
 const DataTestIdPlugin = (wrapper: any) => {
   /** Find element by `data-testid` selector */
   const findTestId = (dataTestid: string): any => {
     const dataSelector = `[data-testid="${dataTestid}"]`
-    const element = wrapper.element.querySelector(dataSelector)
-    return new DOMWrapper(element)
+    return wrapper.find(dataSelector)
   }
 
   return {