Merge pull request #147 from Gather307/component-tests

Created cypress component tests

frontend/cypress.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+  projectId: 'e5nkh3',
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here

frontend/src/components/CompactGroup.tsx

@@ -9,7 +9,7 @@ interface Props {
   group: IGroup;
   width: string;
   height: string;
-  corners?: Array<boolean>;
+  corners?: boolean[];
 }
 
 const CompactGroupV1 = ({

frontend/src/components/ConstrainedText.tsx

@@ -19,10 +19,13 @@ const ConstrainedText = ({
 }: Props) => {
   return (
     <Text style={style}>
-      {prefix}
+      <Text as="i">{text.length <= charLimit ? "" : prefix}</Text>
       {text.length <= charLimit
         ? text
-        : text.substring(0, Math.max(charLimit - postfix.length, 0))}
+        : text.substring(
+            0,
+            Math.max(charLimit - postfix.length - prefix.length, 0)
+          )}
       <Text as="i">{text.length <= charLimit ? "" : postfix}</Text>
     </Text>
   );

frontend/src/components/PageNumberButton.tsx

@@ -26,7 +26,7 @@ const PageNumberButton = ({
       borderColor="gray.500"
       borderStyle="solid none solid none"
     >
-      {displayValue === -1 ? "..." : displayValue}
+      {displayValue <= -1 ? "..." : displayValue}
     </Button>
   );
 };

frontend/src/components/PageSelector.tsx

@@ -19,16 +19,14 @@ const PageSelector = ({
   minimal = true,
 }: Props) => {
   if (limit < 5) {
-    throw RangeError("Limit must be at minimum 5.");
+    console.log(
+      "Error: limit for PageSelector must be at most 5. Supplied: ",
+      limit
+    );
+    return <Box>error loading page selector.</Box>;
   }
 
-  const cells: JSX.Element[] = [];
-
-  // Render up to limit cells.
-  // Start at first cell (1) or selected cell - 1 (always have at least one cell before selected cell)
-
-  // If range > limit, display limit - 1 numbers
-
+  const cells: JSX.Element[] = []; //Holds a list of elements to render
   // Push a left arrow
   cells.push(
     <Button
@@ -44,8 +42,9 @@ const PageSelector = ({
     >
       <Icon as={FaAngleLeft} />
       {minimal ? "" : "Left"}
-    </Button>,
+    </Button>
   );
+
   if (range <= limit) {
     for (let i = 1; i <= range; i++) {
       cells.push(
@@ -54,31 +53,50 @@ const PageSelector = ({
           displayValue={i}
           onSelect={onSelect}
           key={"pageSelect" + i}
-        />,
+        />
       );
     }
   } else {
-    const start = Math.max(1, selected - Math.floor((limit - 2) / 2));
-    const end = Math.min(range, selected + Math.floor((limit - 2) / 2));
-    console.log("Starting at ", start, " and ending at ", end);
+    const borderRange = Math.floor((limit - 2) / 2);
+    let start = Math.max(1, selected - borderRange);
+    let end = Math.min(range, selected + borderRange);
+
+    if (end <= limit - 1) {
+      // Implies that we should just display up to limit numbers
+      // (minus one for the end of the range) since we are very early in the list
+      end = limit - 1; // Like a "ceil" operation
+      if (start != 1) {
+        throw RangeError("Misalignment of range occured, lower bound");
+      }
+    } else if (start >= range - limit + 1) {
+      // Inverse of above
+      start = range - limit + 2; // Range is inclusive, so add two (if limit is 5 & range 10, this displays 1...7, 8, 9, 10)
+      if (end != range) {
+        throw RangeError("Misalignment of range occured, upper bound");
+      }
+    }
+
     // Always push a 1
     cells.push(
       <PageNumberButton
         selectedValue={selected}
         displayValue={1}
         onSelect={onSelect}
         key={"pageSelect1"}
-      />,
+      />
     );
+
     // Push the rest of range
     for (let i = start; i <= end; i++) {
       if (i === 1 || i === range) continue;
-      <PageNumberButton
-        selectedValue={selected}
-        displayValue={i}
-        onSelect={onSelect}
-        key={"pageSelect" + i}
-      />;
+      cells.push(
+        <PageNumberButton
+          selectedValue={selected}
+          displayValue={i}
+          onSelect={onSelect}
+          key={"pageSelect" + i}
+        />
+      );
     }
     // Always push the end of the range
     cells.push(
@@ -87,22 +105,26 @@ const PageSelector = ({
         displayValue={range}
         onSelect={onSelect}
         key={"pageSelect" + range}
-      />,
+      />
     );
+
     // Insert ... buttons if necessary
-    if (selected - Math.floor((limit - 2) / 2) > 2)
+    if (selected - borderRange > 2) {
       cells.splice(
-        1,
+        2,
         0,
-        <PageNumberButton displayValue={-1} key={"pageSkip1"} />,
+        <PageNumberButton displayValue={-1} key={"pageSkip1"} />
       );
-    if (selected + Math.floor((limit - 1) / 2) < range - 2)
+    }
+    if (selected + borderRange < range - 2) {
       cells.splice(
-        range - 2,
+        start === 1 ? end + 1 : limit + 1, // Wild formula but just trust me on this bro
         0,
-        <PageNumberButton displayValue={-2} key={"pageSkip2"} />,
+        <PageNumberButton displayValue={-1} key={"pageSkip2"} />
       );
+    }
   }
+
   // Push a right arrow
   cells.push(
     <Button
@@ -118,7 +140,7 @@ const PageSelector = ({
     >
       {minimal ? "" : "Right"}
       <Icon as={FaAngleRight} />
-    </Button>,
+    </Button>
   );
 
   return (

frontend/src/components/SearchBar.tsx

@@ -1,38 +1,34 @@
 import { Icon, Input, InputGroup, InputRightElement } from "@chakra-ui/react";
-import { CSSProperties, useRef, useState, useEffect } from "react";
+import { CSSProperties, useRef, useState } from "react";
 import { IoSearch } from "react-icons/io5";
 
 interface Props {
   onSearch: (searchText: string) => void;
   placeholder: string;
+  searchAfterEvery?: boolean;
   style?: CSSProperties;
   width?: string;
 }
 
 const SearchBar = ({
   onSearch,
   placeholder,
+  searchAfterEvery = true,
   width = "auto",
   style = {},
 }: Props) => {
   const ref = useRef<HTMLInputElement>(null);
   const [value, setValue] = useState("");
 
-  // Debounce the search input
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      onSearch(value);
-    }, 300);
-
-    return () => clearTimeout(timer);
-  }, [value, onSearch]);
-
   return (
-    <InputGroup display="inline" width={width} style={style}>
+    <InputGroup width={width} style={style}>
       <Input
         ref={ref}
         value={value}
-        onChange={(e) => setValue(e.target.value)}
+        onChange={(e) => {
+          setValue(e.target.value);
+          if (searchAfterEvery) onSearch(e.target.value);
+        }}
         placeholder={placeholder}
         _placeholder={{
           fontStyle: "italic",
@@ -53,6 +49,7 @@ const SearchBar = ({
           as={IoSearch}
           color="var(--col-accent)"
           onClick={() => onSearch(ref.current ? ref.current.value : "")}
+          _hover={{ color: "var(--col-tertiary)" }}
         />
       </InputRightElement>
     </InputGroup>

frontend/src/components/SkeletonGroup.tsx

@@ -1,25 +1,26 @@
-import {
-  Box,
-  Skeleton,
-  SkeletonCircle,
-  SkeletonText,
-  VStack,
-} from "@chakra-ui/react";
+import { Box, Skeleton, SkeletonText, VStack } from "@chakra-ui/react";
 import "../styles/CompactGroup.css";
 
 interface Props {
   width: string;
   height: string;
+  corners?: boolean[]; // TL, TR, BR, BL
 }
 
-const SkeletonGroup = ({ width, height }: Props) => {
+const SkeletonGroup = ({
+  width,
+  height,
+  corners = [false, false, false, false],
+}: Props) => {
   return (
     <Box
       width={width}
       height={height}
       className="container"
       padding="15px 40px 20px"
-      borderRadius="25%"
+      borderRadius={`${corners[0] ? "0%" : "20%"} ${
+        corners[1] ? "0%" : "20%"
+      } ${corners[2] ? "0%" : "20%"} ${corners[3] ? "0%" : "20%"}`}
       position="relative"
     >
       <VStack height="100%" justifyContent="space-between">
@@ -32,17 +33,7 @@ const SkeletonGroup = ({ width, height }: Props) => {
           spacing="4"
           skeletonHeight="2"
         />
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          flexDir="row"
-          width="100%"
-          height="20%"
-        >
-          <SkeletonCircle width="28" height="16" marginRight="20%" />
-          <SkeletonText width="100%" noOfLines={1} />
-        </Box>
+        <SkeletonText width="80%" noOfLines={1} />
       </VStack>
     </Box>
   );

frontend/src/components/tests/ConstrainedText.cy.tsx

@@ -1,9 +1,81 @@
 import ConstrainedText from "../ConstrainedText";
 
 describe("<ConstrainedText />", () => {
-  it("renders", () => {
+  let charLimit = 10;
+  let string = "This is the constrained text.";
+
+  it("renders correctly when provided text under limit", () => {
+    charLimit = 100;
+    cy.mount(<ConstrainedText text={string} charLimit={charLimit} />);
+    cy.get("p.chakra-text", {
+      timeout: 500,
+    }).should("have.text", string.slice(0, charLimit));
+  });
+
+  it("renders the correct amount of characters.", () => {
+    cy.mount(<ConstrainedText key="C1" text={string} charLimit={charLimit} />);
+    cy.get("p.chakra-text").contains(string.slice(0, charLimit), {
+      timeout: 500,
+    });
+  });
+
+  it("correctly postfixes text", () => {
+    charLimit = 10;
+    cy.mount(
+      <ConstrainedText text={string} charLimit={charLimit} postfix="..." />
+    );
+    cy.get("p.chakra-text", {
+      timeout: 500,
+    }).should("have.text", string.slice(0, charLimit - 3) + "...");
+  });
+
+  it("correctly prefixes text", () => {
+    cy.mount(
+      <ConstrainedText text={string} charLimit={charLimit} prefix="..." />
+    );
+    cy.get("p.chakra-text", {
+      timeout: 500,
+    }).should("have.text", "..." + string.slice(0, charLimit - 3));
+  });
+
+  it("can prefix and postfix simultaneously", () => {
+    cy.mount(
+      <ConstrainedText
+        text={string}
+        charLimit={charLimit}
+        prefix=".,."
+        postfix=",.,"
+      />
+    );
+    cy.get("p.chakra-text", {
+      timeout: 500,
+    }).should("have.text", ".,." + string.slice(0, charLimit - 6) + ",.,");
+  });
+
+  it("correctly renders postfix with a postfix longer than char limit", () => {
+    cy.mount(
+      <ConstrainedText
+        text={string}
+        charLimit={charLimit}
+        postfix="This is a long postfix."
+      />
+    );
+    cy.get("p.chakra-text", {
+      timeout: 500,
+    }).should("have.text", "This is a long postfix.");
+  });
+
+  //Visual test
+  it("uses provided styles", () => {
     cy.mount(
-      <ConstrainedText text="This is the constrained text." charLimit={10} />,
+      <ConstrainedText
+        text={string}
+        charLimit={1000}
+        style={{
+          color: "rgba(255,0,0,1)",
+          backgroundColor: "rgb(0,155, 255)",
+        }}
+      />
     );
   });
 });