diff --git a/ui/src/Components/Labels/FilterInputLabel/index.test.js b/ui/src/Components/Labels/FilterInputLabel/index.test.js index 0f5e19c92..0fab42590 100644 --- a/ui/src/Components/Labels/FilterInputLabel/index.test.js +++ b/ui/src/Components/Labels/FilterInputLabel/index.test.js @@ -1,5 +1,6 @@ import React from "react"; -import renderer from "react-test-renderer"; + +import { shallow, mount } from "enzyme"; import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore"; @@ -22,7 +23,7 @@ const MockColors = () => { }; }; -const FakeLabel = (matcher, applied) => { +const ShallowLabel = (matcher, applied) => { const name = "foo"; const value = "bar"; const filter = NewUnappliedFilter(`${name}${matcher}${value}`); @@ -30,27 +31,22 @@ const FakeLabel = (matcher, applied) => { filter.name = name; filter.matcher = matcher; filter.value = value; - return renderer.create( - - ); + return shallow(); }; const ValidateClass = (matcher, applied, expectedClass) => { - const tree = FakeLabel(matcher, applied).toJSON(); - expect(tree.props.className.split(" ")).toContain(expectedClass); + const tree = ShallowLabel(matcher, applied); + expect(tree.props().className.split(" ")).toContain(expectedClass); }; const ValidateOnChange = newRaw => { - const component = renderer.create( + const tree = shallow( ); - const tree = component.toTree(); - - // call onChange with new raw value - tree.instance.onChange({ raw: newRaw }); + tree.instance().onChange({ raw: newRaw }); return tree; }; @@ -92,40 +88,40 @@ describe(" className", () => { describe(" style", () => { it("unapplied filter with color information and '=' matcher should have empty style", () => { MockColors(); - const tree = FakeLabel("=", false).toJSON(); - expect(tree.props.style).toMatchObject({}); + const tree = ShallowLabel("=", false); + expect(tree.props().style).toMatchObject({}); }); it("unapplied filter with no color information and '=' matcher should have empty style", () => { - const tree = FakeLabel("=", false).toJSON(); - expect(tree.props.style).toMatchObject({}); + const tree = ShallowLabel("=", false); + expect(tree.props().style).toMatchObject({}); }); it("unapplied filter with no color information and any matcher other than '=' should have empty style", () => { for (const matcher of NonEqualMatchers) { - const tree = FakeLabel(matcher, false).toJSON(); - expect(tree.props.style).toMatchObject({}); + const tree = ShallowLabel(matcher, false); + expect(tree.props().style).toMatchObject({}); } }); it("applied filter with color information and '=' matcher should have non empty style", () => { MockColors(); - const tree = FakeLabel("=", true).toJSON(); - expect(tree.props.style).toMatchObject({ + const tree = ShallowLabel("=", true); + expect(tree.props().style).toMatchObject({ color: "rgba(1, 2, 3, 100)", backgroundColor: "rgba(4, 5, 6, 200)" }); }); it("applied filter with no color information and '=' matcher should have empty style", () => { - const tree = FakeLabel("=", true).toJSON(); - expect(tree.props.style).toMatchObject({}); + const tree = ShallowLabel("=", true); + expect(tree.props().style).toMatchObject({}); }); it("applied filter with no color information and any matcher other than '=' should have empty style", () => { for (const matcher of NonEqualMatchers) { - const tree = FakeLabel(matcher, true).toJSON(); - expect(tree.props.style).toMatchObject({}); + const tree = ShallowLabel(matcher, true); + expect(tree.props().style).toMatchObject({}); } }); }); @@ -168,14 +164,14 @@ describe(" onChange", () => { NewUnappliedFilter("foo=bar"), NewUnappliedFilter("bar=baz") ]; - const component = renderer.create( + const tree = mount( ); - const button = component.root.findByType("button"); - button.props.onClick(); + const button = tree.find("button"); + button.simulate("click"); expect(alertStore.filters.values).toHaveLength(1); expect(alertStore.filters.values).toContainEqual( NewUnappliedFilter("bar=baz")