Merge pull request #322 from sairina/ktextbox-tests

Add tests for `KTextbox`

CHANGELOG.md

@@ -9,13 +9,16 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le
 - [#313] - Add tests for `KButton`
 - [#315] - Add tests for `KCheckbox`
 - [#320] - Add tests for `KModal`
+- [#322] - Add tests for `KTextbox`
 
 <!-- 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
+[#322]: https://github.com/learningequality/kolibri-design-system/pull/322
+
 
 ## Version 1.3.0
 

lib/KTextbox/__tests__/KTextbox.spec.js

@@ -0,0 +1,158 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import KTextbox from '../index';
+
+describe('KTextbox component', () => {
+  it(`smoke test`, () => {
+    const wrapper = shallowMount(KTextbox);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  describe('props', () => {
+    it(`a label should appear`, () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          label: 'test',
+        },
+      });
+      expect(wrapper.find('label').text()).toEqual('test');
+    });
+    it(`value of the text field should appear when passed in`, () => {
+      const initialValue = '1234paowiejfapwoeifjapwoeijf';
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          label: 'test',
+          value: initialValue,
+        },
+      });
+      const value = wrapper.find('input').element.value;
+      expect(value).toBe(initialValue);
+    });
+    it(`invalidText is not displayed if showInvalidText is false`, () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          invalid: true,
+          showInvalidText: false,
+          invalidText: 'error!',
+        },
+      });
+      const errorTextField = wrapper.find('.ui-textbox-feedback-text');
+      expect(errorTextField.text()).not.toBe('error!');
+    });
+    it(`invalidText is displayed through error prop if invalid and showInvalidText are both true`, () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          invalid: true,
+          showInvalidText: true,
+          invalidText: 'error!',
+        },
+      });
+      const errorTextField = wrapper.find('.ui-textbox-feedback-text');
+      expect(errorTextField.text()).toBe('error!');
+    });
+    it(`text field is disabled when 'disabled' is true`, () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          disabled: true,
+        },
+      });
+      expect(wrapper.find('input').attributes('disabled')).toBe('disabled');
+    });
+    it(`text field is autofocused when 'autofocus' is true`, () => {
+      const wrapper = shallowMount(KTextbox, {
+        propsData: {
+          autofocus: true,
+        },
+      });
+      const textField = wrapper.findComponent({ name: 'UiTextbox' });
+      expect(textField.attributes('autofocus')).toBe('true');
+    });
+    it(`length of characters for value matches maxlength prop`, () => {
+      const wrapper = shallowMount(KTextbox, {
+        propsData: {
+          maxlength: 13,
+        },
+      });
+      const textField = wrapper.findComponent({ name: 'UiTextbox' });
+      expect(textField.attributes('maxlength')).toBe('13');
+    });
+    it(`HTML autocomplete attribute is passed with autocomplete prop`, () => {
+      const wrapper = shallowMount(KTextbox, {
+        propsData: {
+          autocomplete: 'current-password',
+        },
+      });
+      const textField = wrapper.findComponent({ name: 'UiTextbox' });
+      expect(textField.attributes('autocomplete')).toBe('current-password');
+    });
+    it(`HTML autocapitalize attribute is passed with autocapitalize prop`, () => {
+      const wrapper = shallowMount(KTextbox, {
+        propsData: {
+          autocapitalize: 'sentences',
+        },
+      });
+      const textField = wrapper.findComponent({ name: 'UiTextbox' });
+      expect(textField.attributes('autocapitalize')).toBe('sentences');
+    });
+    it(`input type is 'number' when type is set to 'number'`, () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          type: 'number',
+        },
+      });
+      expect(wrapper.find('input').attributes('number')).toBe('true');
+      expect(wrapper.find('input').attributes('type')).toBe('number');
+    });
+    it(`input type is 'text' when type is set to 'text'`, () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          type: 'text',
+        },
+      });
+      expect(wrapper.find('input').attributes('type')).toBe('text');
+    });
+    it(`min length of value is passed as an attribute by the 'min' prop`, () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          type: 'number',
+          min: 50,
+        },
+      });
+      expect(wrapper.find('input').attributes('type')).toBe('number');
+      expect(wrapper.find('input').attributes('number')).toBe('true');
+      expect(wrapper.find('input').attributes('min')).toBe('50');
+    });
+    it(`max length of value is passed as an attribute by the 'max' prop`, () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          type: 'number',
+          max: 50,
+        },
+      });
+      expect(wrapper.find('input').attributes('type')).toBe('number');
+      expect(wrapper.find('input').attributes('number')).toBe('true');
+      expect(wrapper.find('input').attributes('max')).toBe('50');
+    });
+    it(`when 'true', textarea element is rendered`, () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          textArea: true,
+        },
+      });
+      expect(wrapper.find('textarea').exists()).toBeTruthy();
+    });
+  });
+  describe('event handling', () => {
+    it('should emit a input when value is updated', () => {
+      const wrapper = mount(KTextbox, {
+        propsData: {
+          value: 'test',
+        },
+      });
+
+      const input = wrapper.find('input');
+      input.element.value = 'new value';
+      input.trigger('input');
+      expect(wrapper.emitted().input).toBeTruthy();
+    });
+  });
+});

lib/__test__/KModal.spec.js → lib/__tests__/KModal.spec.js

@@ -1,17 +1,6 @@
 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);