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("<FilterInputLabel />", () => {
-  it("renders without crashing", () => {
-    renderer.create(
-      <FilterInputLabel
-        alertStore={alertStore}
-        filter={NewUnappliedFilter("foo=bar")}
-      />
+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(
+    <FilterInputLabel alertStore={alertStore} filter={filter} />
+  );
+};
+
+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(
+    <FilterInputLabel
+      alertStore={alertStore}
+      filter={alertStore.filters.values[0]}
+    />
+  );
+  const tree = component.toTree();
+
+  // call onChange with new raw value
+  tree.instance.onChange({ raw: newRaw });
+
+  return tree;
+};
+
+describe("<FilterInputLabel /> 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("<FilterInputLabel /> 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("<FilterInputLabel /> 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("<FilterInputLabel /> onChange", () => {
+  it("clicking on the X button removes filters from alertStore", () => {
+    alertStore.filters.values = [
+      NewUnappliedFilter("foo=bar"),
+      NewUnappliedFilter("bar=baz")
+    ];
+    const component = renderer.create(
+      <FilterInputLabel
+        alertStore={alertStore}
+        filter={alertStore.filters.values[0]}
+      />
+    );
+    const button = component.root.findByType("button");
+    button.props.onClick();
+    expect(alertStore.filters.values).toHaveLength(1);
+    expect(alertStore.filters.values).toContainEqual(
+      NewUnappliedFilter("bar=baz")
     );
   });
 });