From bc223d4915c2781b941c8437ba1c0ab944d8c04b Mon Sep 17 00:00:00 2001
From: saschrad <saschrad@stud.ntnu.no>
Date: Thu, 5 May 2022 11:33:33 +0200
Subject: [PATCH] Added tests
---
.../DatepickerRange/CalendarComponent.vue | 10 +---
.../CalendarComponent.spec.js | 45 ++++++++++++++++++
.../month-selector-test.spec.js | 46 +++++++++++++++++++
3 files changed, 92 insertions(+), 9 deletions(-)
create mode 100644 tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js
create mode 100644 tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js
diff --git a/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue b/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue
index 5279dc8..7ff418c 100644
--- a/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue
+++ b/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;
diff --git a/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js
new file mode 100644
index 0000000..9ed6d65
--- /dev/null
+++ b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js
@@ -0,0 +1,45 @@
+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
diff --git a/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js
new file mode 100644
index 0000000..bba2c88
--- /dev/null
+++ b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js
@@ -0,0 +1,46 @@
+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
--
GitLab