Added tests

src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue

@@ -5,7 +5,7 @@
     >
       <div class="months" v-for="day in days" :key="day">{{ day }}</div>
     </div>
-    <div class="grid grid-cols-7 gap-y-0.5 my-1">
+    <div class="daysList grid grid-cols-7 gap-y-0.5 my-1">
       <div
         class="days blocked"
         v-for="index in daysBeforeStartOfMonth"
@@ -192,14 +192,6 @@ export default {
     isBlocked(day) {
       return this.blockedDays.includes(day);
     },
-    isDayBlocked(day) {
-      return this.blockedDays.includes(day);
-    },
-    isDayBetweenBlocked(day) {
-      return this.blockedDaysRange.some(([start, end]) => {
-        return start <= day && day <= end;
-      });
-    },
     // Get date from day and month and check if it is between start and end
     isDayBetweenStartAndEndDate(day) {
       if (!this.startDate || !this.endDate) return false;

tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js

+import { shallowMount } from "@vue/test-utils";
+import CalendarComponent from "@/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue";
+
+describe("CalendarComponent tests", () => {
+    let wrapper;
+    beforeEach(() => {
+        wrapper = shallowMount(CalendarComponent, {
+            propsData: {
+                month: new Date(1651739228545),// May 2022
+                blockedDaysRange: [
+                    [new Date(1651739228545)],  // 5 May
+                    [
+                        new Date(1652733228545), // 16 May
+                        new Date(1652833228545) // 18 May
+                    ]]
+            }
+        });
+    });
+
+    it("Is instansiated", () => {
+        expect(wrapper.exists()).toBeTruthy();
+    });
+
+    it("Check that all week days are rendered", () => {
+        expect(wrapper.findAll(".months").length).toBe(7);
+    })
+
+    it("Check that the correct amount of days are rendered", () => {
+        // 31 days in May, 6 for start of week from last month and 5 for end of month
+        expect(wrapper.find(".daysList").findAll("div").length).toBe(42);
+    })
+
+    it("Check select day works", () => {
+        wrapper.find(".daysList").findAll("div")[7].find("button").trigger("click");
+        expect(wrapper.emitted()).toHaveProperty('selectDate')
+    })
+
+    it("Test that selecting day outside of month does not work", () => {
+        // Click on the first day, which is not in the month 
+        wrapper.find(".daysList").findAll("div")[0].find("button").trigger("click");
+        expect(wrapper.emitted()).not.toHaveProperty('selectDate')
+    })
+
+
+});
\ No newline at end of file

tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js

+import { shallowMount } from "@vue/test-utils";
+import monthSelector from "@/components/TimepickerComponents/DatepickerRange/MonthSelector.vue";
+
+describe("MonthSelector tests", () => {
+    let wrapper;
+    beforeEach(() => {
+        wrapper = shallowMount(monthSelector, {
+            propsData: {
+                month: new Date(1651739228545), // 05 May 2022 UTC
+                type: "type"
+            }
+        });
+    });
+
+    it("Is instansiated", () => {
+        expect(wrapper.exists()).toBeTruthy();
+    });
+
+    it("Check if fields show correct informations", () => {
+        // Check if container exists
+        expect(wrapper.find(".container-c .text"))
+        const children = wrapper.find(".container-c .text").findAll("div");
+
+        // Check if there are two children
+        expect(children.length).toBe(2);
+
+        // Check children content
+        expect(children[0].text()).toBe("MAY");
+        expect(children[1].text()).toBe("2022");
+    });
+
+    it("Check that changing are emitted", async () => {
+        // Check that there are two buttons
+        expect(wrapper.findAll(".button").length).toBe(2);
+
+        const buttons = wrapper.findAll(".button");
+        console.log(buttons[0].html());
+        // Check that the first button goes a month back
+        await buttons[0].trigger("click");
+        expect(wrapper.emitted()).toHaveProperty('back')
+
+        // Check that the second button goes a month forward
+        await buttons[1].trigger("click");
+        expect(wrapper.emitted()).toHaveProperty('forward')
+    })
+});
\ No newline at end of file