cypress green

packages/builder/cypress/integration/createView.spec.js

@@ -25,12 +25,12 @@ context("Create a View", () => {
     cy.get(".title").contains("Test View")
     cy.get("[data-cy=table-header]").then($headers => {
       expect($headers).to.have.length(3)
-      // const headers = $headers.map(header => header.text())
-      // expect(headers).to.deep.eq(["group", "age", "rating"])
+      const headers = Array.from($headers).map(header => header.textContent.trim())
+      expect(headers).to.deep.eq(["group", "age", "rating"])
     })
   })
 
-  xit("filters the view by age over 10", () => {
+  it("filters the view by age over 10", () => {
     cy.contains("Filter").click()
     cy.contains("Add Filter").click()
     cy.get(".menu-container")
@@ -43,12 +43,15 @@ context("Create a View", () => {
       .select("More Than")
     cy.get(".menu-container").find("input").type(18)
     cy.contains("Save").click()
-    cy.get(".ag-center-cols-container > div.ag-row").get($values => {
+    cy.get("[role=rowgroup] .ag-row").get($values => {
       expect($values).to.have.length(5)
     })
   })
 
-  xit("creates a stats calculation view based on age", () => {
+  it("creates a stats calculation view based on age", () => {
+    // Required due to responsive bug with ag grid in cypress
+    cy.viewport("macbook-15")
+
     cy.contains("Calculate").click()
     cy.get(".menu-container")
       .find("select")
@@ -60,11 +63,9 @@ context("Create a View", () => {
       .eq(1)
       .select("age")
     cy.contains("Save").click()
-    cy.get("[data-cy=table-header] span").then($headers => {
-      cy.log($headers)
+    cy.get("[data-cy=table-header]").then($headers => {
       expect($headers).to.have.length(7)
-      const headers = $headers.map(header => header.textContent)
-      cy.log(headers)
+      const headers = Array.from($headers).map(header => header.textContent.trim())
       expect(headers).to.deep.eq([
         "field",
         "sum",
@@ -75,32 +76,36 @@ context("Create a View", () => {
         "avg",
       ])
     })
-    // cy.get("tbody td").then($values => {
-    //   const values = $values.map((i, value) => Cypress.$(value).text())
-    //   expect(values.get()).to.deep.eq([
-    //     "age",
-    //     "155",
-    //     "20",
-    //     "49",
-    //     "5",
-    //     "5347",
-    //     "31",
-    //   ])
-    // })
+    cy.get(".ag-cell").then($values => {
+      const values = Array.from($values).map(header => header.textContent.trim())
+      expect(values).to.deep.eq([
+        "age",
+        "155",
+        "20",
+        "49",
+        "5",
+        "5347",
+        "31",
+      ])
+    })
   })
 
-  xit("groups the view by group", () => {
+  it("groups the view by group", () => {
+    // Required due to responsive bug with ag grid in cypress
+    cy.viewport("macbook-15")
+
     cy.contains("Group By").click()
     cy.get("select").select("group")
     cy.contains("Save").click()
+    cy.get(".ag-center-cols-viewport").scrollTo("100%")
     cy.contains("Students").should("be.visible")
     cy.contains("Teachers").should("be.visible")
 
-    cy.get(".ag-center-cols-container > div.ag-row")
-      .first()
+    cy
+      .get(".ag-row[row-index=0]")
       .find(".ag-cell")
       .then($values => {
-        const values = $values.map(value => value.textContent)
+        const values = Array.from($values).map(value => value.textContent)
         expect(values).to.deep.eq([
           "Students",
           "70",

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -44,6 +44,7 @@
       customLoadingOverlay: TableLoadingOverlay,
     },
     loadingOverlayComponent: "customLoadingOverlay",
+    animateRows: true
   }
 
   $: {
@@ -135,7 +136,6 @@
     {columnDefs}
     {loading}
     on:select={({ detail }) => (selectedRows = detail)} />
-  />
 </section>
 
 <style>

packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte

@@ -19,6 +19,9 @@
   let menuButton
   let sortDirection = ""
   let modal
+  let hovered
+
+  $: console.log($$restProps)
 
   function toggleMenu() {
     showColumnMenu(menuButton)
@@ -39,9 +42,13 @@
   })
 </script>
 
-<header on:click={onSort} data-cy="table-header">
+<header
+  on:click={onSort}
+  data-cy="table-header"
+  on:mouseover={() => (hovered = true)}
+  on:mouseleave={() => (hovered = false)}>
   <div>
-    <span>{displayName}</span>
+    <span class="column-header-name">{displayName}</span>
     <i class={`${SORT_ICON_MAP[sortDirection]} sort-icon`} />
   </div>
   <Modal bind:this={modal}>
@@ -52,7 +59,7 @@
       <CreateEditColumn onClosed={modal.hide} {field} />
     </ModalContent>
   </Modal>
-  <div>
+  <section class:show={hovered}>
     {#if editable}
       <span on:click|stopPropagation={showModal}>
         <i class="ri-pencil-line" />
@@ -61,7 +68,7 @@
     <span on:click|stopPropagation={toggleMenu} bind:this={menuButton}>
       <i class="ri-filter-line" />
     </span>
-  </div>
+  </section>
 </header>
 
 <style>
@@ -76,6 +83,15 @@
     color: var(--ink);
   }
 
+  section {
+    opacity: 0;
+    transition: 0.2s all;
+  }
+
+  section.show {
+    opacity: 1;
+  }
+
   .sort-icon {
     position: relative;
     top: 2px;
@@ -91,7 +107,8 @@
     color: var(--blue);
   }
 
-  i:active {
+  i.active,
+  i:hover {
     color: var(--blue);
   }
 </style>