Merge branch 'githru:main' into main

githru · Aug 29, 2024 · 7340cf5 · 7340cf5
2 parents c0a5d1b + 48065ce
commit 7340cf5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 32 deletions.
diff --git a/packages/view/src/components/BranchSelector/BranchSelector.tsx b/packages/view/src/components/BranchSelector/BranchSelector.tsx
@@ -1,4 +1,3 @@
-import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import type { SelectChangeEvent } from "@mui/material/Select";
@@ -24,18 +23,13 @@ const BranchSelector = () => {
         sx={{ m: 1, minWidth: 120 }}
         size="small"
       >
-        <InputLabel id="branch-select-small-label">Branches</InputLabel>
         <Select
-          labelId="branch-select-small-label"
-          id="branch-select-small"
           value={selectedBranch}
-          label="Branches"
+          displayEmpty
           onChange={handleChangeSelect}
           className="select-box"
+          inputProps={{ "aria-label": "Without label" }}
         >
-          <MenuItem value="">
-            <em>None</em>
-          </MenuItem>
           {branchList?.map((option) => (
             <MenuItem
               key={option}

diff --git a/packages/view/src/components/TemporalFilter/TemporalFilter.scss b/packages/view/src/components/TemporalFilter/TemporalFilter.scss
@@ -3,14 +3,13 @@
 .temporal-filter {
   display: flex;
   flex-direction: column;
+  padding: 1rem;
 
   .line-charts {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    padding: 1rem;
-    height: 140px;
-    align-content: space-around;
+    gap: 1rem;
 
     .reset-button {
       width: 3rem;
@@ -23,7 +22,6 @@
   .line-charts-svg {
     height: 100%;
     width: 100%;
-    overflow: visible;
   }
 
   .line-chart-wrap {

diff --git a/packages/view/tests/home.spec.ts b/packages/view/tests/home.spec.ts
@@ -10,10 +10,9 @@ test.describe("home", () => {
     await expect(page).toHaveTitle(/Githru/);
   });
 
-  test("when click cluster", async ({ page }) => {
-    await page.waitForSelector("[data-testid=cluster-graph__container]", { state: "attached" });
-
-    const childContainers = await page.$$("[data-testid=cluster-graph__container]");
+  test("opens detail container on cluster click", async ({ page }) => {
+    await page.waitForSelector(".cluster-graph__container", { state: "attached" });
+    const childContainers = await page.$$(".cluster-graph__container");
 
     if (childContainers.length > CLICK_INDEX) {
       await childContainers[CLICK_INDEX].scrollIntoViewIfNeeded();
@@ -23,22 +22,9 @@ test.describe("home", () => {
     }
 
     // waiting for changing
-    await page.waitForTimeout(1000);
-
-    const newChildContainers = await page.$$("[data-testid=cluster-graph__container]");
-
-    const targetIndexForCheck = CLICK_INDEX + 1;
-    const transformPositionForCheck = 10 + targetIndexForCheck * 50 + 220;
-    if (newChildContainers.length > targetIndexForCheck) {
-      const transformValue = await newChildContainers[targetIndexForCheck].getAttribute("transform");
+    await page.waitForTimeout(10000);
 
-      if (transformValue !== null) {
-        expect(transformValue).toBe(`translate(2, ${transformPositionForCheck})`);
-      } else {
-        throw new Error("Transform attribute not found");
-      }
-    } else {
-      throw new Error("Not enough child containers found");
-    }
+    const detailContainer = await page.waitForSelector(".detail__container");
+    expect(detailContainer).toBeTruthy();
   });
 });