Add test for details view

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -10,6 +10,7 @@ import {
   FormControl,
   Card,
   CardGroup,
+  Collapse,
 } from "react-bootstrap";
 import ReactObjectTableViewer from "react-object-table-viewer";
 
@@ -28,14 +29,6 @@ const AccessServerButton = ({ url }) => (
   </a>
 );
 
-const ToggleButton = ({ dataTarget }) => {
-  return (
-    <button data-toggle="collapse" data-target={dataTarget}>
-      <span className="caret"></span>
-    </button>
-  );
-};
-
 const ServerDashboard = (props) => {
   let base_url = window.base_url;
   // sort methods
@@ -57,6 +50,7 @@ const ServerDashboard = (props) => {
   var [errorAlert, setErrorAlert] = useState(null);
   var [sortMethod, setSortMethod] = useState(null);
   var [disabledButtons, setDisabledButtons] = useState({});
+  const [collapseStates, setCollapseStates] = useState({});
 
   var user_data = useSelector((state) => state.user_data),
     user_page = useSelector((state) => state.user_page),
@@ -208,21 +202,38 @@ const ServerDashboard = (props) => {
 
   const serverRow = (user, server) => {
     const { servers, ...userNoServers } = user;
+    const serverNameDash = server.name ? `-${server.name}` : "";
+    const userServerName = user.name + serverNameDash;
+    const open = collapseStates[userServerName] || false;
     return [
-      <tr key={`${user.name}-${server.name}-row`} className="user-row">
+      <tr key={`${userServerName}-row`} className="user-row">
         <td data-testid="user-row-name">
           <span>
-            <ToggleButton
+            <Button
-              dataTarget={`#${user.name}-${server.name}-collapse`}
+              onClick={() =>
-            />{" "}
+                setCollapseStates({
+                  ...collapseStates,
+                  [userServerName]: !open,
+                })
+              }
+              aria-controls={`${userServerName}-collapse`}
+              aria-expanded={open}
+              data-testid={`${userServerName}-collapse-button`}
+              variant={open ? "secondary" : "primary"}
+              size="sm"
+            >
+              <span className="caret"></span>
+            </Button>{" "}
+          </span>
+          <span data-testid={`user-name-div-${userServerName}`}>
+            {user.name}
           </span>
-          <div data-testid={`user-name-div-${user.name}`}>{user.name}</div>
         </td>
         <td data-testid="user-row-admin">{user.admin ? "admin" : ""}</td>
 
         <td data-testid="user-row-server">
           {server.name ? (
-            <p class="text-secondary">{server.name}</p>
+            <p className="text-secondary">{server.name}</p>
           ) : (
             <p style={{ color: "lightgrey" }}>[MAIN]</p>
           )}
@@ -263,49 +274,54 @@ const ServerDashboard = (props) => {
         <EditUserCell user={user} />
       </tr>,
       <tr>
-        <td colSpan={6} style={{ padding: 0 }}>
+        <td
-          {/*<div style={{ margin: "0 auto", float: "none" }}>*/}
+          colSpan={6}
-          <CardGroup
+          style={{ padding: 0 }}
-            id={`${user.name}-${server.name}-collapse`}
+          data-testid={`${userServerName}-td`}
-            className="collapse"
+        >
-            style={{ width: "90%", margin: "0 auto", float: "none" }}
+          <Collapse in={open} data-testid={`${userServerName}-collapse`}>
-          >
+            <CardGroup
-            <Card style={{ width: "50%", padding: 6, float: "left" }}>
+              id={`${userServerName}-card-group`}
-              <Card.Title>User</Card.Title>
+              style={{ width: "90%", margin: "0 auto", float: "none" }}
-              <ReactObjectTableViewer
+            >
-                className="table-striped table-bordered admin-table-head"
+              <Card style={{ width: "50%", padding: 6, float: "left" }}>
-                style={{
+                <Card.Title>User</Card.Title>
-                  padding: "3px 6px",
+                <ReactObjectTableViewer
-                  margin: "auto",
+                  className="table-striped table-bordered admin-table-head"
-                }}
+                  style={{
-                keyStyle={{
+                    padding: "3px 6px",
-                  padding: "4px",
+                    margin: "auto",
-                }}
+                  }}
-                valueStyle={{
+                  keyStyle={{
-                  padding: "4px",
+                    padding: "4px",
-                }}
+                  }}
-                data={userNoServers}
+                  valueStyle={{
-              />
+                    padding: "4px",
-            </Card>
+                  }}
-            <Card style={{ width: "50%", padding: 6, display: "inline-block" }}>
+                  data={userNoServers}
-              <Card.Title>Server</Card.Title>
+                />
-              <ReactObjectTableViewer
+              </Card>
-                className="table-striped table-bordered admin-table-head"
+              <Card
-                style={{
+                style={{ width: "50%", padding: 6, display: "inline-block" }}
-                  padding: "3px 6px",
+              >
-                  margin: "auto",
+                <Card.Title>Server</Card.Title>
-                }}
+                <ReactObjectTableViewer
-                keyStyle={{
+                  className="table-striped table-bordered admin-table-head"
-                  padding: "4px",
+                  style={{
-                }}
+                    padding: "3px 6px",
-                valueStyle={{
+                    margin: "auto",
-                  padding: "4px",
+                  }}
-                }}
+                  keyStyle={{
-                data={server}
+                    padding: "4px",
-              />
+                  }}
-            </Card>
+                  valueStyle={{
-          </CardGroup>
+                    padding: "4px",
-          {/*</div>*/}
+                  }}
+                  data={server}
+                />
+              </Card>
+            </CardGroup>
+          </Collapse>
         </td>
       </tr>,
     ];

jsx/src/components/ServerDashboard/ServerDashboard.test.js

@@ -221,6 +221,46 @@ test("Sorts according to server status (running/not running)", async () => {
   expect(first.textContent).toContain("bar");
 });
 
+test("Shows server details with button click", async () => {
+  let callbackSpy = mockAsync();
+
+  await act(async () => {
+    render(serverDashboardJsx(callbackSpy));
+  });
+  let button = screen.getByTestId("foo-collapse-button");
+  let collapse = screen.getByTestId("foo-collapse");
+  let collapseBar = screen.getByTestId("bar-collapse");
+
+  expect(collapse.className).toContain("collapse");
+  expect(collapse.className).not.toContain("show");
+  expect(collapseBar.className).not.toContain("show");
+
+  await act(async () => {
+    fireEvent.click(button);
+  });
+  clock.tick(400);
+
+  expect(collapse.className).toContain("collapse show");
+  expect(collapseBar.className).not.toContain("show");
+
+  await act(async () => {
+    fireEvent.click(button);
+  });
+  clock.tick(400);
+
+  expect(collapse.className).toContain("collapse");
+  expect(collapse.className).not.toContain("show");
+  expect(collapseBar.className).not.toContain("show");
+
+  await act(async () => {
+    fireEvent.click(button);
+  });
+  clock.tick(400);
+
+  expect(collapse.className).toContain("collapse show");
+  expect(collapseBar.className).not.toContain("show");
+});
+
 test("Renders nothing if required data is not available", async () => {
   useSelector.mockImplementation((callback) => {
     return callback({});