diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap new file mode 100644 index 000000000..21e2131be --- /dev/null +++ b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap @@ -0,0 +1,1055 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` 'Duration' tab matches snapshot 1`] = ` +" + +
+
+
+ + + + + + + + + + + + + + + +
+ + + + + + + +
+

+ 366 +

+ 		+ + days + +
+ + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+ + + + + + + +
+

+ 0 +

+ 		+ + hours + +
+ + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+ + + + + + + +
+

+ 0 +

+ 		+ + minutes + +
+ + + + + + + +
+
+
+
+" +`; + +exports[` 'Ends' tab matches snapshot 1`] = ` +" + +
+
+
+
+
+ + +
+
+
+ February 2061 +
+
+
+
+
+ Su +
+
+ Mo +
+
+ Tu +
+
+ We +
+
+ Th +
+
+ Fr +
+
+ Sa +
+
+
+
+
+
+ 30 +
+
+ 31 +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+
+
+ 6 +
+
+ 7 +
+
+ 8 +
+
+ 9 +
+
+ 10 +
+
+ 11 +
+
+ 12 +
+
+
+
+ 13 +
+
+ 14 +
+
+ 15 +
+
+ 16 +
+
+ 17 +
+
+ 18 +
+
+ 19 +
+
+
+
+ 20 +
+
+ 21 +
+
+ 22 +
+
+ 23 +
+
+ 24 +
+
+ 25 +
+
+ 26 +
+
+
+
+ 27 +
+
+ 28 +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+
+
+
+ Today +
+
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+

+ 00 +

+ 		+

+ : +

+ 		+

+ 00 +

+
+ + + + + + + + + + + + + + +
+
+
+" +`; + +exports[` 'Starts' tab matches snapshot 1`] = ` +" +
    +
  • + + + Starts + + + now + + +
    • +
  • + + + Ends + + + in 366d + + +
    • +
  • + + + Duration + + + 366d + + +
    • +
+
+
+
+
+
+ +
+
+
+ February 2060 +
+
+
+
+
+ Su +
+
+ Mo +
+
+ Tu +
+
+ We +
+
+ Th +
+
+ Fr +
+
+ Sa +
+
+
+
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ 6 +
+
+ 7 +
+
+
+
+ 8 +
+
+ 9 +
+
+ 10 +
+
+ 11 +
+
+ 12 +
+
+ 13 +
+
+ 14 +
+
+
+
+ 15 +
+
+ 16 +
+
+ 17 +
+
+ 18 +
+
+ 19 +
+
+ 20 +
+
+ 21 +
+
+
+
+ 22 +
+
+ 23 +
+
+ 24 +
+
+ 25 +
+
+ 26 +
+
+ 27 +
+
+ 28 +
+
+
+
+ 29 +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ 6 +
+
+
+
+
+ Today +
+
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+

+ 00 +

+ 		+

+ : +

+ 		+

+ 00 +

+
+ + + + + + + + + + + + + + +
+
+
+" +`; diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js index fc0a5459e..7111aa412 100644 --- a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js +++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js @@ -4,6 +4,8 @@ import { mount, shallow } from "enzyme"; import { advanceTo, clear } from "jest-date-mock"; +import toDiffableHtml from "diffable-html"; + import moment from "moment"; import { SilenceFormStore } from "Stores/SilenceFormStore"; @@ -51,6 +53,12 @@ describe("", () => { expect(tree.find(".tab-content").text()).toBe("366days0hours0minutes"); }); + it("'Duration' tab matches snapshot", () => { + advanceTo(new Date(2060, 1, 1, 0, 0, 0)); + const tree = MountedDateTimeSelect(); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); + }); + it("clicking on the 'Starts' tab switches content to 'startsAt' selection", () => { const tree = MountedDateTimeSelect(); const tab = tree.find(".nav-link").at(0); @@ -59,6 +67,16 @@ describe("", () => { expect(tree.find(".tab-content").text()).toMatch(/2060/); }); + it("'Starts' tab matches snapshot", () => { + advanceTo(new Date(2060, 1, 1, 0, 0, 0)); + const tree = MountedDateTimeSelect(); + tree + .find(".nav-link") + .at(0) + .simulate("click"); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); + }); + it("clicking on the 'Ends' tab switches content to 'endsAt' selection", () => { const tree = MountedDateTimeSelect(); const tab = tree.find(".nav-link").at(1); @@ -67,6 +85,16 @@ describe("", () => { expect(tree.find(".tab-content").text()).toMatch(/2061/); }); + it("'Ends' tab matches snapshot", () => { + advanceTo(new Date(2060, 1, 1, 0, 0, 0)); + const tree = MountedDateTimeSelect(); + tree + .find(".nav-link") + .at(1) + .simulate("click"); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); + }); + it("clicking on the 'Duration' tabs switches content to duration selection", () => { const tree = MountedDateTimeSelect(); // first switch to 'Starts'