diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e81c0504..30babd9e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ 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` [#309]: https://github.com/learningequality/kolibri-design-system/pull/309 @@ -16,6 +17,8 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le [#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 diff --git a/lib/KTextbox/__tests__/KTextbox.spec.js b/lib/KTextbox/__tests__/KTextbox.spec.js new file mode 100644 index 000000000..010bbd49e --- /dev/null +++ b/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(); + }); + }); +}); diff --git a/lib/__test__/KCheckbox.spec.js b/lib/__tests__/KCheckbox.spec.js similarity index 100% rename from lib/__test__/KCheckbox.spec.js rename to lib/__tests__/KCheckbox.spec.js diff --git a/lib/__test__/KModal.spec.js b/lib/__tests__/KModal.spec.js similarity index 94% rename from lib/__test__/KModal.spec.js rename to lib/__tests__/KModal.spec.js index 36315ddd8..7912c248e 100644 --- a/lib/__test__/KModal.spec.js +++ b/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); diff --git a/lib/buttons-and-links/__test__/KRouterLink.spec.js b/lib/buttons-and-links/__tests__/KRouterLink.spec.js similarity index 100% rename from lib/buttons-and-links/__test__/KRouterLink.spec.js rename to lib/buttons-and-links/__tests__/KRouterLink.spec.js diff --git a/lib/content/__test__/KContentRenderer.spec.js b/lib/content/__tests__/KContentRenderer.spec.js similarity index 100% rename from lib/content/__test__/KContentRenderer.spec.js rename to lib/content/__tests__/KContentRenderer.spec.js diff --git a/lib/utils/__test__/pluginMediator.spec.js b/lib/utils/__tests__/pluginMediator.spec.js similarity index 100% rename from lib/utils/__test__/pluginMediator.spec.js rename to lib/utils/__tests__/pluginMediator.spec.js