unit tests: Collapse, SimpleBox

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

shell/components/Collapse.vue

@@ -26,15 +26,18 @@ export default {
     <slot name="title">
       <div
         class="advanced text-link"
+        data-testid="collapse-div"
         @click="showAdvanced"
       >
         <i
           v-if="open"
           class="icon icon-chevron-down"
+          data-testid="collapse-icon-down"
         />
         <i
           v-else
           class="icon icon-chevron-right"
+          data-testid="collapse-icon-right"
         />
         {{ title }}
       </div>
@@ -43,6 +46,7 @@ export default {
     <div
       v-if="open"
       class="content"
+      data-testid="collapse-content"
     >
       <slot />
     </div>

shell/components/SimpleBox.vue

@@ -38,13 +38,17 @@ export default {
       class="top"
     >
       <slot name="title">
-        <h2 v-if="title">
+        <h2
+          v-if="title"
+          data-testid="simple-box-title"
+        >
           {{ title }}
         </h2>
       </slot>
       <div
         v-if="canClose || pref"
         class="close-button"
+        data-testid="simple-box-close"
         @click="closeBox($event)"
       >
         <i class="icon icon-close" />

shell/components/__tests__/Collapse.spec.ts

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import Collapse from '@shell/components/Collapse.vue';
+
+describe('component: Collapse.vue', () => {
+  describe('closed', () => {
+    const wrapper = mount(Collapse, { propsData: { open: false } });
+
+    it('is closed', () => {
+      const content = wrapper.find(`[data-testid="collapse-content"]`);
+
+      expect(content.element).toBeUndefined();
+    });
+
+    it('icon is chevron right', () => {
+      const icon = wrapper.find(`[data-testid="collapse-icon-right"]`);
+
+      expect(icon.element).toBeDefined();
+    });
+  });
+
+  describe('collapsed', () => {
+    const wrapper = mount(Collapse, { propsData: { open: true } });
+
+    it('is collapse', () => {
+      const content = wrapper.find(`[data-testid="collapse-content"]`);
+
+      expect(content.element).toBeDefined();
+    });
+
+    it('icon should is chevron down', () => {
+      const icon = wrapper.find(`[data-testid="collapse-icon-down"]`);
+
+      expect(icon.element).toBeDefined();
+    });
+
+    it('emit', async() => {
+      const collapse = wrapper.find(`[data-testid="collapse-div"]`);
+
+      await collapse.trigger('click');
+
+      expect(wrapper.emitted('update:open')).toBeTruthy();
+    });
+  });
+});

shell/components/__tests__/SimpleBox.spec.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils';
+import SimpleBox from '@shell/components/SimpleBox.vue';
+
+describe('component: SimpleBox.vue', () => {
+  const wrapper = mount(SimpleBox, { propsData: { title: 'Simple box title' } });
+
+  it('show title', () => {
+    const title = wrapper.find(`[data-testid="simple-box-title"]`);
+
+    expect(title.element).toBeDefined();
+  });
+
+  it('show close button', async() => {
+    await wrapper.setProps({ canClose: true });
+    const closeButton = wrapper.find(`[data-testid="simple-box-close"]`);
+
+    expect(closeButton.element).toBeDefined();
+  });
+
+  it('close emit', async() => {
+    await wrapper.setProps({ canClose: true });
+    const closeButton = wrapper.find(`[data-testid="simple-box-close"]`);
+
+    await closeButton.trigger('click');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+});