diff --git a/ui/src/Components/Fetcher/index.test.js b/ui/src/Components/Fetcher/index.test.js index a7c9f71c4..5de2ec694 100644 --- a/ui/src/Components/Fetcher/index.test.js +++ b/ui/src/Components/Fetcher/index.test.js @@ -1,5 +1,6 @@ import React from "react"; -import renderer from "react-test-renderer"; + +import { mount } from "enzyme"; import { EmptyAPIResponse } from "__mocks__/Fetch"; @@ -28,74 +29,58 @@ afterEach(() => { global.fetch.mockRestore(); }); +const MountedFetcher = () => { + return mount( + + ); +}; + +const FetcherSpan = (label, interval) => + ``; + describe("", () => { it("renders correctly with 'label=value' filter", () => { - const tree = renderer - .create() - .toJSON(); - - expect(tree.props["data-filters"]).toBe("label=value"); - expect(tree.props["data-interval"]).toBe(30); + const tree = MountedFetcher(); + expect(tree.html()).toBe(FetcherSpan("label=value", 30)); }); it("re-renders on fetch interval change", () => { - const fetcher = renderer.create( - - ); - - expect(fetcher.toJSON().props["data-interval"]).toBe(30); + const tree = MountedFetcher(); + expect(tree.html()).toBe(FetcherSpan("label=value", 30)); settingsStore.fetchConfig.config.interval = 60; - expect(fetcher.toJSON().props["data-interval"]).toBe(60); + expect(tree.html()).toBe(FetcherSpan("label=value", 60)); }); it("re-renders on filters change", () => { - const fetcher = renderer.create( - - ); - - expect(fetcher.toJSON().props["data-filters"]).toBe("label=value"); + const tree = MountedFetcher(); + expect(tree.html()).toBe(FetcherSpan("label=value", 30)); alertStore.filters.values = []; - expect(fetcher.toJSON().props["data-filters"]).toBe(""); + expect(tree.html()).toBe(FetcherSpan("", 30)); }); it("calls alertStore.fetchWithThrottle on mount", () => { const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); - - renderer.create( - - ); - + MountedFetcher(); expect(fetchSpy).toHaveBeenCalledTimes(1); }); it("calls alertStore.fetchWithThrottle again after interval change", () => { const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); - - renderer.create( - - ); + MountedFetcher(); settingsStore.fetchConfig.config.interval = 60; - expect(fetchSpy).toHaveBeenCalledTimes(2); }); it("calls alertStore.fetchWithThrottle again after filter change", () => { const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); - - renderer.create( - - ); + MountedFetcher(); alertStore.filters.values = []; - expect(fetchSpy).toHaveBeenCalledTimes(2); }); it("keeps calling alertStore.fetchWithThrottle after running pending timers", () => { const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle"); - - renderer.create( - - ); + MountedFetcher(); jest.runOnlyPendingTimers(); expect(fetchSpy).toHaveBeenCalledTimes(2); jest.runOnlyPendingTimers(); @@ -105,18 +90,14 @@ describe("", () => { }); it("internal timer is armed after render", () => { - const fetcher = renderer.create( - - ); - const instance = fetcher.getInstance(); + const tree = MountedFetcher(); + const instance = tree.instance(); expect(instance.timer).toBeGreaterThanOrEqual(0); }); it("internal timer is null after unmount", () => { - const fetcher = renderer.create( - - ); - const instance = fetcher.getInstance(); + const tree = MountedFetcher(); + const instance = tree.instance(); instance.componentWillUnmount(); expect(instance.timer).toBeNull(); }); diff --git a/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap index f9ef4e031..33d99d53d 100644 --- a/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap @@ -1,37 +1,28 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` matches snapshot 1`] = ` -
-
-

-
+

+ - + +

-

+

foo bar

+" `; diff --git a/ui/src/Components/Grid/FatalError/index.test.js b/ui/src/Components/Grid/FatalError/index.test.js index b75178e51..1462f096c 100644 --- a/ui/src/Components/Grid/FatalError/index.test.js +++ b/ui/src/Components/Grid/FatalError/index.test.js @@ -1,11 +1,14 @@ import React from "react"; -import renderer from "react-test-renderer"; + +import { shallow } from "enzyme"; + +import toDiffableHtml from "diffable-html"; import { FatalError } from "."; describe("", () => { it("matches snapshot", () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); + const tree = shallow(); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); }); diff --git a/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap index cc290d805..86c540753 100644 --- a/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap @@ -1,21 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` matches snapshot 1`] = ` - +" `; diff --git a/ui/src/Components/Grid/UpstreamError/index.test.js b/ui/src/Components/Grid/UpstreamError/index.test.js index 99596e53d..9e7da7a31 100644 --- a/ui/src/Components/Grid/UpstreamError/index.test.js +++ b/ui/src/Components/Grid/UpstreamError/index.test.js @@ -1,13 +1,14 @@ import React from "react"; -import renderer from "react-test-renderer"; + +import { shallow } from "enzyme"; + +import toDiffableHtml from "diffable-html"; import { UpstreamError } from "."; describe("", () => { it("matches snapshot", () => { - const tree = renderer - .create() - .toJSON(); - expect(tree).toMatchSnapshot(); + const tree = shallow(); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); }); diff --git a/ui/src/Components/Labels/BaseLabel/index.test.js b/ui/src/Components/Labels/BaseLabel/index.test.js index dc86bff0c..b5f7d19b6 100644 --- a/ui/src/Components/Labels/BaseLabel/index.test.js +++ b/ui/src/Components/Labels/BaseLabel/index.test.js @@ -1,5 +1,6 @@ import React from "react"; -import renderer from "react-test-renderer"; + +import { shallow } from "enzyme"; import { AlertStore } from "Stores/AlertStore"; @@ -19,7 +20,7 @@ const FakeBaseLabel = () => { return null; } } - return renderer.create( + return shallow( ); }; @@ -27,40 +28,40 @@ const FakeBaseLabel = () => { describe("", () => { it("isStaticColorLabel() returns true for labels present in staticColorLabels", () => { alertStore.settings.values.staticColorLabels = ["foo", "job", "bar"]; - const instance = FakeBaseLabel().getInstance(); + const instance = FakeBaseLabel().instance(); expect(instance.isStaticColorLabel("job")).toBeTruthy(); }); it("isStaticColorLabel() returns false for labels not present in staticColorLabels", () => { alertStore.settings.values.staticColorLabels = ["foo"]; - const instance = FakeBaseLabel().getInstance(); + const instance = FakeBaseLabel().instance(); expect(instance.isStaticColorLabel("job")).toBeFalsy(); }); it("getColorClass() on a label included in staticColorLabels should return 'info'", () => { alertStore.settings.values.staticColorLabels = ["job"]; - const instance = FakeBaseLabel().getInstance(); + const instance = FakeBaseLabel().instance(); expect(instance.getColorClass("job", "foo")).toBe("info"); }); it("getColorClass() on a label without any special color should return 'warning'", () => { - const instance = FakeBaseLabel().getInstance(); + const instance = FakeBaseLabel().instance(); expect(instance.getColorClass("foo", "bar")).toBe("warning"); }); it("getColorClass() on 'alertname' label should return 'dark'", () => { - const instance = FakeBaseLabel().getInstance(); + const instance = FakeBaseLabel().instance(); expect(instance.getColorClass("alertname", "foo")).toBe("dark"); }); it("getColorStyle() on a label included in staticColorLabels should be empty", () => { alertStore.settings.values.staticColorLabels = ["job"]; - const instance = FakeBaseLabel().getInstance(); + const instance = FakeBaseLabel().instance(); expect(instance.getColorStyle("job", "bar")).toMatchObject({}); }); it("getColorStyle() on a label without any color information should be empty", () => { - const instance = FakeBaseLabel().getInstance(); + const instance = FakeBaseLabel().instance(); expect(instance.getColorStyle("foo", "bar")).toMatchObject({}); }); @@ -71,7 +72,7 @@ describe("", () => { background: { red: 4, green: 5, blue: 6, alpha: 200 } } }; - const instance = FakeBaseLabel().getInstance(); + const instance = FakeBaseLabel().instance(); expect(instance.getColorStyle("foo", "bar")).toMatchObject({ color: "rgba(1, 2, 3, 100)", backgroundColor: "rgba(4, 5, 6, 200)" diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.test.js b/ui/src/Components/Labels/FilteringCounterBadge/index.test.js index 4ee1755d8..4acfdd158 100644 --- a/ui/src/Components/Labels/FilteringCounterBadge/index.test.js +++ b/ui/src/Components/Labels/FilteringCounterBadge/index.test.js @@ -1,5 +1,6 @@ import React from "react"; -import renderer from "react-test-renderer"; + +import { mount, render } from "enzyme"; import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore"; @@ -12,47 +13,39 @@ beforeEach(() => { }); const validateClassName = (value, className) => { - const tree = renderer - .create( - - ) - .toJSON(); - expect(tree.props.className.split(" ")).toContain(className); + const tree = mount( + + ); + expect(tree.find("span").hasClass(className)).toBe(true); }; const validateStyle = value => { - const tree = renderer - .create( - - ) - .toJSON(); - expect(tree.props.style).toMatchObject({}); + const tree = mount( + + ); + expect(tree.find("span").prop("style")).toEqual({}); }; const validateOnClick = value => { - const tree = renderer - .create( - - ) - .toJSON(); - - tree.props.onClick({ preventDefault: () => {} }); - + const tree = mount( + + ); + tree.simulate("click"); expect(alertStore.filters.values).toHaveLength(1); expect(alertStore.filters.values).toContainEqual( NewUnappliedFilter(`@state=${value}`) @@ -81,17 +74,15 @@ describe("", () => { }); it("counter badge should have correct children based on the counter prop value", () => { - const tree = renderer - .create( - - ) - .toJSON(); - expect(tree.children).toEqual(["123"]); + const tree = render( + + ); + expect(tree.text()).toBe("123"); }); it("onClick method on @state=unprocessed counter badge should add a new filter", () => { diff --git a/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap b/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap new file mode 100644 index 000000000..cd6d7a583 --- /dev/null +++ b/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` matches snapshot 1`] = ` +" + + foo: bar + +" +`; diff --git a/ui/src/Components/Labels/FilteringLabel/index.test.js b/ui/src/Components/Labels/FilteringLabel/index.test.js index c7e6e543d..883264334 100644 --- a/ui/src/Components/Labels/FilteringLabel/index.test.js +++ b/ui/src/Components/Labels/FilteringLabel/index.test.js @@ -1,5 +1,8 @@ import React from "react"; -import renderer from "react-test-renderer"; + +import { mount } from "enzyme"; + +import toDiffableHtml from "diffable-html"; import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore"; @@ -12,20 +15,18 @@ beforeEach(() => { }); const RenderAndClick = (name, value) => { - const tree = renderer - .create( - - ) - .toJSON(); - - tree.props.onClick({ preventDefault: () => {} }); + const tree = mount( + + ); + tree.simulate("click"); }; describe("", () => { - it("renders without crashing", () => { - renderer.create( + it("matches snapshot", () => { + const tree = mount( ); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); it("calling onClick() adds a new filter 'foo=bar'", () => { diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.js b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.js index 674f71e5a..1fdb9b821 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.js @@ -1,7 +1,8 @@ import React from "react"; -import renderer from "react-test-renderer"; -import InputRange from "react-input-range"; +import { mount } from "enzyme"; + +import toDiffableHtml from "diffable-html"; import { Settings } from "Stores/Settings"; import { AlertGroupConfiguration } from "./AlertGroupConfiguration"; @@ -12,32 +13,30 @@ beforeEach(() => { }); const FakeConfiguration = () => { - return renderer.create( - - ); + return mount(); }; describe(" className", () => { it("matches snapshot with default values", () => { - const tree = FakeConfiguration().toJSON(); - expect(tree).toMatchSnapshot(); + const tree = FakeConfiguration(); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); it("call to onChange() updates internal state", () => { - const tree = FakeConfiguration().toTree(); - tree.instance.onChange(11); - expect(tree.instance.config.defaultRenderCount).toBe(11); + const tree = FakeConfiguration(); + tree.instance().onChange(11); + expect(tree.instance().config.defaultRenderCount).toBe(11); }); it("settings are updated on completed change", () => { - const tree = FakeConfiguration().toTree(); - tree.instance.onChangeComplete(96); + const tree = FakeConfiguration(); + tree.instance().onChangeComplete(96); expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(96); }); it("custom interval value is rendered correctly", () => { settingsStore.alertGroupConfig.config.defaultRenderCount = 55; const component = FakeConfiguration(); - expect(component.root.findByType(InputRange).props.value).toBe(55); + expect(component.find("InputRange").props().value).toBe(55); }); }); diff --git a/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.js b/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.js index 04cbf509e..97c1b152f 100644 --- a/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.js +++ b/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.js @@ -1,7 +1,8 @@ import React from "react"; -import renderer from "react-test-renderer"; -import InputRange from "react-input-range"; +import { mount } from "enzyme"; + +import toDiffableHtml from "diffable-html"; import { Settings } from "Stores/Settings"; import { FetchConfiguration } from "./FetchConfiguration"; @@ -12,30 +13,30 @@ beforeEach(() => { }); const FakeConfiguration = () => { - return renderer.create(); + return mount(); }; describe(" className", () => { it("matches snapshot with default values", () => { - const tree = FakeConfiguration().toJSON(); - expect(tree).toMatchSnapshot(); + const tree = FakeConfiguration(); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); it("call to onChange() updates internal state", () => { - const tree = FakeConfiguration().toTree(); - tree.instance.onChange(55); - expect(tree.instance.config.fetchInterval).toBe(55); + const tree = FakeConfiguration(); + tree.instance().onChange(55); + expect(tree.instance().config.fetchInterval).toBe(55); }); it("settings are updated on completed change", () => { - const tree = FakeConfiguration().toTree(); - tree.instance.onChangeComplete(123); + const tree = FakeConfiguration(); + tree.instance().onChangeComplete(123); expect(settingsStore.fetchConfig.config.interval).toBe(123); }); it("custom interval value is rendered correctly", () => { settingsStore.fetchConfig.config.interval = 66; const component = FakeConfiguration(); - expect(component.root.findByType(InputRange).props.value).toBe(66); + expect(component.find("InputRange").props().value).toBe(66); }); }); diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap index 3e3b7abde..5ced2b986 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap @@ -1,88 +1,49 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` className matches snapshot with default values 1`] = ` -
-