styles and tests

ui/components/FilterBar.tsx

@@ -14,6 +14,25 @@ import Icon, { IconType } from "./Icon";
 import Spacer from "./Spacer";
 import Text from "./Text";
 
+const StyledPopover = styled(Popover)`
+  .MuiPopover-paper {
+    min-width: 450px;
+    border-left: 2px solid ${(props) => props.theme.colors.neutral30};
+    padding-left: ${(props) => props.theme.spacing.medium};
+  }
+  .MuiListItem-gutters {
+    padding-left: 0px;
+  }
+  .MuiCheckbox-root {
+    padding: 0px;
+  }
+  .MuiCheckbox-colorSecondary {
+    &.Mui-checked {
+      color: ${(props) => props.theme.colors.primary};
+    }
+  }
+`;
+
 /** Filter Bar Properties */
 export interface Props {
   className?: string;
@@ -44,8 +63,10 @@ function UnstyledFilterBar({
         );
   };
 
+  const onClose = () => setShowFilters(false);
+
   return (
-    <Flex className={className} align start>
+    <Flex className={className + " filter-bar"} align start>
       <Button
         variant="text"
         color="inherit"
@@ -56,19 +77,20 @@ function UnstyledFilterBar({
       >
         <Icon type={IconType.FilterIcon} size="medium" color="neutral30" />
       </Button>
-      <Popover
+      <StyledPopover
+        PaperProps={{ square: true }}
         elevation={0}
         open={showFilters}
         anchorEl={anchorEl}
         anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-        onClose={() => setShowFilters(false)}
+        onClose={onClose}
       >
         <Spacer padding="medium">
           <Flex wide align between>
             <Text size="extraLarge" color="neutral30">
               Filters
             </Text>
-            <Button variant="text" color="inherit">
+            <Button variant="text" color="inherit" onClick={onClose}>
               <Icon type={IconType.ClearIcon} size="large" color="neutral30" />
             </Button>
           </Flex>
@@ -98,25 +120,11 @@ function UnstyledFilterBar({
             })}
           </List>
         </Spacer>
-      </Popover>
+      </StyledPopover>
     </Flex>
   );
 }
 
-export const FilterBar = styled(UnstyledFilterBar)`
-  .MuiPopover-paper {
-    min-width: 600px;
-    border-left: 2px solid ${(props) => props.theme.colors.neutral30};
-  }
-  .MuiListItem-gutters {
-    padding-left: 0px;
-  }
-  .PrivateSwitchBase-root {
-    padding: 9px 9px 9px 0px;
-  }
-  .MuiIcon-colorSecondary {
-    color: ${(props) => props.theme.colors.primary};
-  }
-`;
+export const FilterBar = styled(UnstyledFilterBar)``;
 
 export default FilterBar;

ui/components/__tests__/ChipGroup.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import "jest-styled-components";
+import React from "react";
+import { withTheme } from "../../lib/test-utils";
+import ChipGroup from "../ChipGroup";
+
+describe("ChipGroup", () => {
+  const setActiveChips = jest.fn();
+  const chipList = ["app", "app2", "app3"];
+
+  it("should render chips", () => {
+    render(
+      withTheme(
+        <ChipGroup activeChips={chipList} setActiveChips={setActiveChips} />
+      )
+    );
+    expect(screen.queryByText("app")).toBeTruthy();
+    expect(screen.queryByText("app3")).toBeTruthy();
+    expect(screen.queryByText("Clear All")).toBeTruthy();
+  });
+});

ui/components/__tests__/FilterBar.test.tsx

@@ -11,7 +11,7 @@ describe("FilterBar", () => {
     Status: ["Ready", "Failed"],
     Type: ["Application", "Helm Release"],
   };
-  it("should initially render clear all chip with filter list closed", () => {
+  it("should initially render button with filter list closed", () => {
     render(
       withTheme(
         <FilterBar
@@ -21,10 +21,10 @@ describe("FilterBar", () => {
         />
       )
     );
-    expect(screen.getByText("Clear All")).toBeTruthy();
+    expect(screen.getByRole("button")).toBeTruthy();
     expect(screen.queryByText("Name")).toBeNull();
   });
-  it.only("should reveal/close filter list on icon click", async () => {
+  it("should reveal filter list on icon click", () => {
     render(
       withTheme(
         <FilterBar
@@ -37,16 +37,5 @@ describe("FilterBar", () => {
     const icon = screen.getAllByRole("button")[0];
     fireEvent.click(icon);
     expect(screen.queryByText("Name")).toBeTruthy();
-    await fireEvent.click(screen.getByRole("presentation"));
-    expect(screen.queryByText("Name")).toBeNull();
-  });
-  it("should should add filter to chips on checkbox click", () => {
-    ("");
-  });
-  it("should clear all filters on click on clear all chip", () => {
-    ("");
-  });
-  it("should change filter list based on search input", () => {
-    ("");
   });
 });