Run-2321-Added unit test for date filter #9098
Conversation
jayas006
changed the title
There was a problem hiding this comment.
left some pointers, overall looking good. The component dateFilter could be refactored, once the tests are merged if you'd like to give it a shot, it would be a good practice with vue (the modelValue doesn't need to be destructed into data properties and could be used directly in the template)
| modelValue: { | ||
| type: Object, | ||
| required: true | ||
| } |
There was a problem hiding this comment.
Could you please create a type for modelValue, describing that it has the properties enabled and datetime?
| import DateTimePicker from "../dateTimePicker.vue"; | ||
| import _ from "lodash"; | ||
| let idCounter = 0; | ||
| jest.spyOn(_, "uniqueId").mockImplementation(() => `uniqueId_${idCounter++}`); |
There was a problem hiding this comment.
you have this spy later in the code, safe to remove this line
| it("initializes with correct data", () => { | ||
| const wrapper = mountDateFilter(); | ||
| expect(wrapper.vm.uid).toBeTruthy(); | ||
| expect(wrapper.vm.enabled).toBe(false); | ||
| expect(wrapper.vm.datetime).toBe(""); | ||
| }); |
There was a problem hiding this comment.
please remove this test
| it("sets uid correctly", () => { | ||
| const wrapper = mountDateFilter(); | ||
| expect(wrapper.vm.uid).toBe(`uniqueId_${idCounter - 1}`); | ||
| }); |
There was a problem hiding this comment.
better to check that the input has the right id (which is the uid) instead of checking wrapper.vm.uid
| it("renders provided slot content in label", async () => { | ||
| const slotContent = "Provided slot content"; | ||
| const wrapper = mountDateFilter({ slots: { default: slotContent } }); | ||
| await wrapper.vm.$nextTick(); | ||
| const label = wrapper.find("label"); | ||
| expect(label.text()).toBe(slotContent); | ||
| }); |
There was a problem hiding this comment.
this test isn't relevant - dateFilter doesn't have logic that would affect the label content (it's always enabled). Suggest to remove it.
| it("toggles enabled state when checkbox is clicked", async () => { | ||
| const wrapper = mountDateFilter(); | ||
| const checkbox = wrapper.find('input[type="checkbox"]'); | ||
| await checkbox.setValue(true); |
There was a problem hiding this comment.
it's always preferable to click then to setValue if possible
| await wrapper.vm.$nextTick(); | ||
| const emitted = wrapper.emitted("update:modelValue"); | ||
| expect(emitted).toBeTruthy(); | ||
| if (emitted) { |
There was a problem hiding this comment.
please remove this if and just leave the line expect(emitted[0]).toEqual([{ enabled: true, datetime: "" }]);
| await wrapper.vm.$nextTick(); | ||
| const emitted = wrapper.emitted("update:modelValue"); | ||
| expect(emitted).toBeTruthy(); | ||
| if (emitted) { |
There was a problem hiding this comment.
please remove if
Yes will do that. Thanks |
Is this a bugfix, or an enhancement? Please describe.
This is an enhancement
Describe the solution you've implemented
In the dateFilter.spec.ts file, I implemented tests to verify various aspects of the DateFilter component. These tests are designed to catch potential issues early in the development process and ensure that modifications to other parts of the project do not unintentionally impact the functionality of the DateFilter component.
Describe alternatives you've considered
Additional context