Migrate test

lib/buttons-and-links/KButton.vue

@@ -19,7 +19,7 @@
       v-if="icon"
       :icon="icon"
       :color="iconColor"
-      data-test="iconBefore"
+      data-testid="iconBefore"
       class="prop-icon"
     />
     <!-- @slot Pass sub-components into the button, typically `KDropdownMenu` -->
@@ -40,7 +40,7 @@
       v-if="iconAfter"
       :icon="iconAfter"
       :color="iconColor"
-      data-test="iconAfter"
+      data-testid="iconAfter"
       class="prop-icon"
     />
 
@@ -50,7 +50,7 @@
       icon="dropdown"
       class="dropdown-arrow"
       :style="arrowStyles"
-      data-test="dropdownIcon"
+      data-testid="dropdownIcon"
       style="width: 24px; height: 24px"
     />
   </component>

lib/buttons-and-links/__tests__/KButton.spec.js

@@ -1,67 +1,63 @@
-import { shallowMount } from '@vue/test-utils';
+import { render, screen, fireEvent } from '@testing-library/vue';
+import VueRouter from 'vue-router';
 import KButton from '../KButton.vue';
 
+const renderComponent = (props = {}, slots = {}) =>
+  render(KButton, {
+    props,
+    routes: new VueRouter(),
+    slots,
+  });
+
 describe('KButton', () => {
   describe('icon related props', () => {
-    it('should render an icon before the text with the icon string passed to the `icon` prop', () => {
-      const wrapper = shallowMount(KButton, {
-        propsData: {
-          icon: 'add',
-        },
-      });
-      expect(wrapper.find('[data-test="iconBefore"]').exists()).toBe(true);
+    it('should render an icon before the text with the icon string passed to the icon prop', () => {
+      renderComponent({ icon: 'add' });
+
+      const iconBefore = screen.getByTestId('iconBefore');
+      expect(iconBefore).toBeInTheDocument();
     });
-    it('should render an icon after the text with the icon string pased to the `iconAfter` prop', () => {
-      const wrapper = shallowMount(KButton, {
-        propsData: {
-          iconAfter: 'video',
-        },
-      });
-      expect(wrapper.find('[data-test="iconAfter"]').exists()).toBe(true);
+
+    it('should render an icon after the text with the icon string passed to the iconAfter prop', () => {
+      renderComponent({ iconAfter: 'video' });
+
+      const iconAfter = screen.getByTestId('iconAfter');
+      expect(iconAfter).toBeInTheDocument();
     });
+
     it('should render a dropdown icon when hasDropdown is true', () => {
-      const wrapper = shallowMount(KButton, {
-        propsData: {
-          hasDropdown: true,
-        },
-      });
-      expect(wrapper.find('[data-test="dropdownIcon"]').exists()).toBe(true);
+      renderComponent({ hasDropdown: true });
+
+      const dropdownIcon = screen.getByTestId('dropdownIcon');
+      expect(dropdownIcon).toBeInTheDocument();
     });
   });
 
   describe('text prop and slots', () => {
     it('should render the text prop if nothing is in the default slot', () => {
-      const wrapper = shallowMount(KButton, {
-        propsData: {
-          text: 'test',
-        },
-      });
-      expect(wrapper.text()).toContain('test');
+      renderComponent({ text: 'test' });
+
+      expect(screen.getByText('test')).toBeInTheDocument();
     });
 
     it('should render the slot when the slot has content', () => {
-      const wrapper = shallowMount(KButton, {
-        propsData: {
-          text: 'test',
-        },
-        slots: {
-          default: '<span>slot</span>',
-        },
-      });
-      expect(wrapper.text()).toContain('slot');
-      expect(wrapper.text()).toContain('test');
+      renderComponent({ text: 'test' }, { default: '<span>slot</span>' });
+
+      expect(screen.getByText('slot')).toBeInTheDocument();
+      expect(screen.getByText('test')).toBeInTheDocument();
     });
   });
 
   describe('event handling', () => {
-    it('should emit a click event when clicked', () => {
-      const wrapper = shallowMount(KButton, {
-        propsData: {
-          text: 'test',
-        },
-      });
-      wrapper.trigger('click');
-      expect(wrapper.emitted().click).toBeTruthy();
+    it('should emit a click event when clicked', async () => {
+      const { emitted } = renderComponent({ text: 'test' });
+
+      const button = screen.getByText('test');
+      await fireEvent.click(button);
+
+      const clickEvent = emitted();
+      expect(clickEvent).toHaveProperty('click');
+      expect(clickEvent.click).toHaveLength(1);
     });
   });
 });