From b4cbb0d8d5872c75b12897752c3b3e3bc672592b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Wed, 22 Aug 2018 19:32:05 +0100 Subject: [PATCH] feat(tests): all label classes are now tested --- .../Labels/FilterInputLabel/index.test.js | 175 +++++++++++++++++- 1 file changed, 168 insertions(+), 7 deletions(-) diff --git a/ui/src/Components/Labels/FilterInputLabel/index.test.js b/ui/src/Components/Labels/FilterInputLabel/index.test.js index 464c25fde..0f5e19c92 100644 --- a/ui/src/Components/Labels/FilterInputLabel/index.test.js +++ b/ui/src/Components/Labels/FilterInputLabel/index.test.js @@ -11,13 +11,174 @@ beforeEach(() => { alertStore = new AlertStore([]); }); -describe("", () => { - it("renders without crashing", () => { - renderer.create( - +const NonEqualMatchers = ["!=", "=~", "!~", ">", "<"]; + +const MockColors = () => { + alertStore.data.colors["foo"] = { + bar: { + font: { red: 1, green: 2, blue: 3, alpha: 100 }, + background: { red: 4, green: 5, blue: 6, alpha: 200 } + } + }; +}; + +const FakeLabel = (matcher, applied) => { + const name = "foo"; + const value = "bar"; + const filter = NewUnappliedFilter(`${name}${matcher}${value}`); + filter.applied = applied; + filter.name = name; + filter.matcher = matcher; + filter.value = value; + return renderer.create( + + ); +}; + +const ValidateClass = (matcher, applied, expectedClass) => { + const tree = FakeLabel(matcher, applied).toJSON(); + expect(tree.props.className.split(" ")).toContain(expectedClass); +}; + +const ValidateOnChange = newRaw => { + const component = renderer.create( + + ); + const tree = component.toTree(); + + // call onChange with new raw value + tree.instance.onChange({ raw: newRaw }); + + return tree; +}; + +describe(" className", () => { + it("unapplied filter with '=' matcher should use 'badge-secondary' class", () => { + ValidateClass("=", false, "badge-secondary"); + }); + + it("unapplied filter with any matcher other than '=' should use 'badge-secondary' class", () => { + for (const matcher of NonEqualMatchers) { + ValidateClass(matcher, false, "badge-secondary"); + } + }); + + it("applied filter with '=' matcher and no color should use 'badge-warning' class", () => { + ValidateClass("=", true, "badge-warning"); + }); + + it("applied filter with any matcher other than '=' and no color should use 'badge-warning' class", () => { + for (const matcher of NonEqualMatchers) { + ValidateClass(matcher, true, "badge-warning"); + } + }); + + it("applied filter included in staticColorLabels with '=' matcher should use 'badge-info' class", () => { + alertStore.settings.values.staticColorLabels = ["foo"]; + ValidateClass("=", true, "badge-info"); + }); + + it("applied filter included in staticColorLabels with any matcher other than '=' should use 'badge-warning' class", () => { + alertStore.settings.values.staticColorLabels = ["foo"]; + for (const matcher of NonEqualMatchers) { + ValidateClass(matcher, true, "badge-warning"); + } + }); +}); + +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({}); + }); + + it("unapplied filter with no color information and '=' matcher should have empty style", () => { + const tree = FakeLabel("=", false).toJSON(); + 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({}); + } + }); + + it("applied filter with color information and '=' matcher should have non empty style", () => { + MockColors(); + const tree = FakeLabel("=", true).toJSON(); + 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({}); + }); + + 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({}); + } + }); +}); + +describe(" onChange", () => { + it("filter raw value is updated after onChange call", () => { + alertStore.filters.values = [NewUnappliedFilter("foo=bar")]; + ValidateOnChange("baz=abc"); + expect(alertStore.filters.values).toHaveLength(1); + expect(alertStore.filters.values).toContainEqual( + NewUnappliedFilter("baz=abc") + ); + }); + + it("filter is removed after onChange call with empty value", () => { + alertStore.filters.values = [NewUnappliedFilter("foo=bar")]; + ValidateOnChange(""); + expect(alertStore.filters.values).toHaveLength(0); + }); + + it("onChange doesn't allow duplicates", () => { + alertStore.filters.values = [ + NewUnappliedFilter("foo=bar"), + NewUnappliedFilter("bar=baz") + ]; + ValidateOnChange("bar=baz"); + expect(alertStore.filters.values).toHaveLength(1); + expect(alertStore.filters.values).not.toContainEqual( + NewUnappliedFilter("foo=bar") + ); + expect(alertStore.filters.values).toContainEqual( + NewUnappliedFilter("bar=baz") + ); + }); +}); + +describe(" onChange", () => { + it("clicking on the X button removes filters from alertStore", () => { + alertStore.filters.values = [ + NewUnappliedFilter("foo=bar"), + NewUnappliedFilter("bar=baz") + ]; + const component = renderer.create( + + ); + const button = component.root.findByType("button"); + button.props.onClick(); + expect(alertStore.filters.values).toHaveLength(1); + expect(alertStore.filters.values).toContainEqual( + NewUnappliedFilter("bar=baz") ); }); });