Merge pull request #320 from sairina/kmodal-tests

Add tests for `KModal`

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 Releases are recorded as git tags in the [Github releases](https://github.com/learningequality/kolibri-design-system/releases) page.
 
+## Version 1.3.1
+
+- [#309] - Add jest testing environment to KDS
+- [#311] - Add tests for `KRouterLink`
+- [#313] - Add tests for `KButton`
+- [#315] - Add tests for `KCheckbox`
+- [#320] - Add tests for `KModal`
+
+<!-- Referenced PRs -->
+[#309]: https://github.com/learningequality/kolibri-design-system/pull/309
+[#311]: https://github.com/learningequality/kolibri-design-system/pull/311
+[#313]: https://github.com/learningequality/kolibri-design-system/pull/313
+[#315]: https://github.com/learningequality/kolibri-design-system/pull/315
+[#320]: https://github.com/learningequality/kolibri-design-system/pull/320
+
 ## Version 1.3.0
 
 - [#291] - When tracking input modality with `trackInputModality`, modality is set to keyboard only when the TAB key is pressed

lib/KModal.vue

@@ -30,7 +30,7 @@
             v-if="hasError"
             class="visuallyhidden"
           >
-            {{ $tr('errorAlert', { title }) }}
+            {{ errorMessage }}
           </span>
         </h1>
 
@@ -172,6 +172,11 @@
         type: Boolean,
         default: false,
       },
+      errorMessage: {
+        type: String,
+        default: null,
+        required: false,
+      },
     },
     data() {
       return {
@@ -332,10 +337,6 @@
         }
       },
     },
-    $trs: {
-      // error alerts
-      errorAlert: 'Error in { title }',
-    },
   };
 
 </script>

lib/__test__/KModal.spec.js

@@ -0,0 +1,134 @@
+import { shallowMount } from '@vue/test-utils';
+import KModal from '../KModal';
+
+// jest.mock('kolibri.utils.coreStrings', () => {
+//   const translations = {
+//     readReference: 'Reference',
+//   };
+//   return {
+//     $tr: jest.fn(key => {
+//       return translations[key];
+//     }),
+//   };
+// });
+
+describe('KModal component', () => {
+  it(`smoke test`, () => {
+    const wrapper = shallowMount(KModal);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  describe('props', () => {
+    it(`a title should appear`, () => {
+      const title = 'test title';
+      const wrapper = shallowMount(KModal, {
+        propsData: {
+          title: title,
+        },
+      });
+      expect(wrapper.find('.title').text()).toEqual(title);
+    });
+    it(`text should appear on the submit button`, () => {
+      const submitText = 'hello';
+      const onClick = jest.fn();
+      const wrapper = shallowMount(KModal, {
+        propsData: {
+          submitText: submitText,
+        },
+        listeners: { submit: onClick },
+      });
+      expect(wrapper.findComponent({ name: 'KButton' }).props().text).toEqual(submitText);
+    });
+
+    it(`text should appear on the close button`, () => {
+      let cancelText = 'goodbye';
+      const onClick = jest.fn();
+      const wrapper = shallowMount(KModal, {
+        propsData: {
+          cancelText: cancelText,
+        },
+        listeners: { cancel: onClick },
+      });
+      expect(wrapper.findComponent({ name: 'KButton' }).props().text).toEqual(cancelText);
+    });
+
+    it(`submit button is disabled if submitDisabled is true`, () => {
+      let submitText = 'hello';
+      const onClick = jest.fn();
+      const wrapper = shallowMount(KModal, {
+        propsData: {
+          submitText: submitText,
+          submitDisabled: true,
+        },
+        listeners: { submit: onClick },
+      });
+      expect(wrapper.findComponent({ name: 'KButton' }).props().disabled).toBeTruthy();
+    });
+
+    it(`cancel button is disabled if cancelDisabled is true`, () => {
+      let cancelText = 'goodbye';
+      const onClick = jest.fn();
+      const wrapper = shallowMount(KModal, {
+        propsData: {
+          cancelText: cancelText,
+          cancelDisabled: true,
+        },
+        listeners: { cancel: onClick },
+      });
+      expect(wrapper.findComponent({ name: 'KButton' }).props().disabled).toBeTruthy();
+    });
+
+    it(`size of modal can be determined with string prop`, () => {
+      const wrapper = shallowMount(KModal, {
+        propsData: {
+          size: 'large',
+        },
+      });
+      expect(wrapper.find('.modal').element.style['width']).toEqual('100%');
+    });
+
+    it(`size of modal can be determined by integer prop`, () => {
+      const wrapper = shallowMount(KModal, {
+        propsData: {
+          size: 789,
+        },
+      });
+      expect(wrapper.find('.modal').element.style['width']).toEqual('789px');
+    });
+
+    it(`error message is in a visually hidden span if hasError is true`, () => {
+      const error = 'watch out for the error';
+      const wrapper = shallowMount(KModal, {
+        propsData: {
+          hasError: true,
+          errorMessage: error,
+        },
+      });
+      expect(wrapper.find('.visuallyhidden').element).toBeTruthy();
+      expect(wrapper.find('.visuallyhidden').text()).toContain(error);
+    });
+  });
+  describe('slots', () => {
+    it(`content is displayed in default <slot>`, () => {
+      const slot = '<div><p>main content appears here</p></div>';
+      const wrapper = shallowMount(KModal, {
+        slots: {
+          default: slot,
+        },
+      });
+      expect(wrapper.find('.content').text()).toContain('main content appears here');
+    });
+    it(`alternative content is displayed below main content if actions <slot> is used`, () => {
+      const slot = '<div><p>main content appears here</p></div>';
+      const actionsSlot = '<div><p class="actionsSlot">actions content</p></div>';
+      const wrapper = shallowMount(KModal, {
+        slots: {
+          default: slot,
+          actions: actionsSlot,
+        },
+      });
+      expect(wrapper.find('.content').text()).toContain('main content appears here');
+      expect(wrapper.find('.actions').text()).toContain('actions content');
+    });
+  });
+});