From e7b17f53268dc4902f1019500000830dcaf7b6bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Wed, 29 Aug 2018 22:32:37 +0100 Subject: [PATCH] feat(tests): add more tests for DateTimeSelect --- .../SilenceModal/DateTimeSelect/index.test.js | 197 +++++++++++++++++- 1 file changed, 195 insertions(+), 2 deletions(-) diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js index 030b41091..878512442 100644 --- a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js +++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js @@ -1,25 +1,218 @@ import React from "react"; -import { mount } from "enzyme"; +import { mount, shallow } from "enzyme"; + +import moment from "moment"; import { SilenceFormStore } from "Stores/SilenceFormStore"; -import { DateTimeSelect } from "."; +import { + DateTimeSelect, + TabContentStart, + TabContentEnd, + TabContentDuration +} from "."; let silenceFormStore; beforeEach(() => { silenceFormStore = new SilenceFormStore(); + silenceFormStore.data.startsAt = moment([2060, 1, 1, 0, 0, 0]); + silenceFormStore.data.endsAt = moment([2061, 1, 1, 0, 0, 0]); }); +const ShallowDateTimeSelect = () => { + return shallow(); +}; + const MountedDateTimeSelect = () => { return mount(); }; describe("", () => { + it("renders 3 tabs", () => { + const tree = ShallowDateTimeSelect(); + const tabs = tree.find("Tab"); + expect(tabs).toHaveLength(3); + }); + it("renders 'Duration' tab by default", () => { const tree = MountedDateTimeSelect(); const tab = tree.find(".nav-link.active"); expect(tab).toHaveLength(1); + // check tab title expect(tab.text()).toMatch(/Duration/); + // check tab content + expect(tree.find(".tab-content").text()).toBe("366days0hours0minutes"); + }); + + it("clicking on the 'Starts' tab switches content to 'startsAt' selection", () => { + const tree = MountedDateTimeSelect(); + const tab = tree.find(".nav-link").at(0); + expect(tab.text()).toMatch(/Starts/); + tab.simulate("click"); + expect(tree.find(".tab-content").text()).toMatch(/2060/); + }); + + it("clicking on the 'Ends' tab switches content to 'endsAt' selection", () => { + const tree = MountedDateTimeSelect(); + const tab = tree.find(".nav-link").at(1); + expect(tab.text()).toMatch(/Ends/); + tab.simulate("click"); + expect(tree.find(".tab-content").text()).toMatch(/2061/); + }); + + it("clicking on the 'Duration' tabs switches content to duration selection", () => { + const tree = MountedDateTimeSelect(); + // first switch to 'Starts' + tree + .find(".nav-link") + .at(0) + .simulate("click"); + // then switch back to 'Duration' + const tab = tree.find(".nav-link").at(2); + expect(tab.text()).toMatch(/Duration/); + tab.simulate("click"); + expect(tree.find(".tab-content").text()).toBe("366days0hours0minutes"); + }); +}); + +const ValidateTimeButton = ( + tab, + storeKey, + elemIndex, + iconMatch, + expectedDiff +) => { + const button = tab.find("td > span").at(elemIndex); + expect(button.html()).toMatch(iconMatch); + + const oldTimeValue = moment(silenceFormStore.data[storeKey]); + button.simulate("click"); + expect(silenceFormStore.data[storeKey].toISOString()).not.toBe( + oldTimeValue.toISOString() + ); + const diffMS = silenceFormStore.data[storeKey].diff(oldTimeValue); + expect(diffMS).toBe(expectedDiff); +}; + +const ShallowTabContentStart = () => { + return shallow(); +}; + +const MountedTabContentStart = () => { + return mount(); +}; + +describe("", () => { + it("selecting date on DatePicker updates startsAt", () => { + const tree = ShallowTabContentStart(); + const picker = tree.find("DatePicker"); + const startsAt = moment([2063, 10, 10, 0, 1, 2]); + picker.simulate("change", startsAt); + expect(silenceFormStore.data.startsAt.toISOString()).toBe( + startsAt.toISOString() + ); + }); + + it("clicking on the hour inc button adds 1h to startsAt", () => { + const tree = MountedTabContentStart(); + ValidateTimeButton(tree, "startsAt", 0, /angle-up/, 3600 * 1000); + }); + + it("clicking on the minute inc button adds 1m to startsAt", () => { + const tree = MountedTabContentStart(); + ValidateTimeButton(tree, "startsAt", 1, /angle-up/, 60 * 1000); + }); + + it("clicking on the hour dec button subtracts 1h from startsAt", () => { + const tree = MountedTabContentStart(); + ValidateTimeButton(tree, "startsAt", 2, /angle-down/, -1 * 3600 * 1000); + }); + + it("clicking on the minute dec button subtracts 1m from startsAt", () => { + const tree = MountedTabContentStart(); + ValidateTimeButton(tree, "startsAt", 3, /angle-down/, -1 * 60 * 1000); + }); +}); + +const ShallowTabContentEnd = () => { + return shallow(); +}; + +const MountedTabContentEnd = () => { + return mount(); +}; + +describe("", () => { + it("Selecting date on DatePicker updates endsAt", () => { + const tree = ShallowTabContentEnd(); + const picker = tree.find("DatePicker"); + const endsAt = moment([2063, 11, 5, 1, 3, 2]); + picker.simulate("change", endsAt); + expect(silenceFormStore.data.endsAt.toISOString()).toBe( + endsAt.toISOString() + ); + }); + + it("clicking on the hour inc button adds 1h to endsAt", () => { + const tree = MountedTabContentEnd(); + ValidateTimeButton(tree, "endsAt", 0, /angle-up/, 3600 * 1000); + }); + + it("clicking on the minute inc button adds 1m to endsAt", () => { + const tree = MountedTabContentEnd(); + ValidateTimeButton(tree, "endsAt", 1, /angle-up/, 60 * 1000); + }); + + it("clicking on the hour dec button subtracts 1h from endsAt", () => { + const tree = MountedTabContentEnd(); + ValidateTimeButton(tree, "endsAt", 2, /angle-down/, -1 * 3600 * 1000); + }); + + it("clicking on the minute dec button subtracts 1m from endsAt", () => { + const tree = MountedTabContentEnd(); + ValidateTimeButton(tree, "endsAt", 3, /angle-down/, -1 * 60 * 1000); + }); +}); + +const ValidateDurationButton = (elemIndex, iconMatch, expectedDiff) => { + const tree = mount( + + ); + const button = tree.find("td > span").at(elemIndex); + expect(button.html()).toMatch(iconMatch); + + const oldEndsAt = moment(silenceFormStore.data.endsAt); + button.simulate("click"); + expect(silenceFormStore.data.endsAt.toISOString()).not.toBe( + oldEndsAt.toISOString() + ); + const diffMS = silenceFormStore.data.endsAt.diff(oldEndsAt); + expect(diffMS).toBe(expectedDiff); +}; + +describe("", () => { + it("clicking on the day inc button adds 1d to endsAt", () => { + ValidateDurationButton(0, /angle-up/, 24 * 3600 * 1000); + }); + + it("clicking on the day dec button subtracts 1d from endsAt", () => { + ValidateDurationButton(2, /angle-down/, -1 * 24 * 3600 * 1000); + }); + + it("clicking on the hour inc button adds 1h to endsAt", () => { + ValidateDurationButton(3, /angle-up/, 3600 * 1000); + }); + + it("clicking on the hour dec button subtracts 1h from endsAt", () => { + ValidateDurationButton(5, /angle-down/, -1 * 3600 * 1000); + }); + + it("clicking on the minute inc button adds 5m to endsAt", () => { + ValidateDurationButton(6, /angle-up/, 5 * 60 * 1000); + }); + + it("clicking on the minute dec button subtracts 5m from endsAt", () => { + ValidateDurationButton(8, /angle-down/, -1 * 5 * 60 * 1000); }); });