From b285ea3435cca22bfe1955f2b8bbd6b3225cb044 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Wed, 30 Aug 2023 12:56:57 +0200
Subject: [PATCH] chore: tests for data-table

---
 cypress/integration/dataTable.cy.js     | 62 +++++++++++++++++++++++++
 src/components/datatable/BottomPanel.js |  1 +
 2 files changed, 63 insertions(+)
 create mode 100644 cypress/integration/dataTable.cy.js

diff --git a/cypress/integration/dataTable.cy.js b/cypress/integration/dataTable.cy.js
new file mode 100644
index 000000000..1657306cb
--- /dev/null
+++ b/cypress/integration/dataTable.cy.js
@@ -0,0 +1,62 @@
+import { EXTENDED_TIMEOUT } from '../support/util.js'
+
+const map = {
+    id: 'eDlFx0jTtV9',
+    name: 'ANC: LLITN Cov Chiefdom this year',
+    downloadFileNamePrefix: 'ANC LLITN Cov Chiefdom this year',
+    cardTitle: 'ANC LLITN coverage',
+}
+
+// const openMoreMenuWithOptions = (numOptions) => {
+//     cy.get('[data-test="moremenubutton"]').first().click()
+
+//     cy.get('[data-test="more-menu"]')
+//         .find('li')
+//         .not('.disabled')
+//         .should('have.length', numOptions)
+
+//     cy.get('[data-test="more-menu"]')
+//         .find('li')
+//         .contains('Show data table')
+//         .click()
+
+//     //check that the bottom panel is present
+//     cy.getByDataTest('bottom-panel').should('be.visible')
+
+//     // option switched to "Hide data table"
+
+// }
+
+describe('data table', () => {
+    it('opens data table', () => {
+        cy.visit(`/?id=${map.id}`, EXTENDED_TIMEOUT)
+        cy.get('canvas', EXTENDED_TIMEOUT).should('be.visible')
+
+        cy.get('[data-test="moremenubutton"]').first().click()
+
+        cy.get('[data-test="more-menu"]')
+            .find('li')
+            .not('.disabled')
+            .should('have.length', 6)
+
+        cy.get('[data-test="more-menu"]')
+            .find('li')
+            .contains('Show data table')
+            .click()
+
+        //check that the bottom panel is present
+        cy.getByDataTest('bottom-panel').should('be.visible')
+
+        // check number of columns
+        cy.getByDataTest('bottom-panel')
+            .find('[role="columnheader"]')
+            .should('have.length', 10)
+
+        // try the filtering
+        cy.getByDataTest('bottom-panel')
+            .find('[role="columnheader"]')
+            .containsExact('Name')
+            .siblings('input')
+            .type('Kakua')
+    })
+})
diff --git a/src/components/datatable/BottomPanel.js b/src/components/datatable/BottomPanel.js
index 24f005bf0..62160bcbf 100644
--- a/src/components/datatable/BottomPanel.js
+++ b/src/components/datatable/BottomPanel.js
@@ -40,6 +40,7 @@ const BottomPanel = () => {
             ref={panelRef}
             className={styles.bottomPanel}
             style={{ height: tableHeight }}
+            data-test="bottom-panel"
         >
             <span
                 className={styles.closeIcon}