From e0c67ae656dcb9d3aad7f12b16b0224186b6d0f2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 17:39:14 +0800
Subject: [PATCH] feat(playwrights): add download xlsx test

---
 .../Dashboard/common/Toolbar/ViewMenu.ts      | 40 +++++++++++++++++++
 tests/playwright/tests/viewMenu.spec.ts       | 20 ++++++++++
 2 files changed, 60 insertions(+)

diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts b/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
index ca999fb118..7b534a1c17 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
@@ -4,6 +4,7 @@ import { GridPage } from '../../Grid';
 import { ToolbarPage } from './index';
 // @ts-ignore
 import fs from 'fs';
+import XLSX from 'xlsx';
 
 export class ToolbarViewMenuPage extends BasePage {
   readonly toolbar: ToolbarPage;
@@ -46,6 +47,33 @@ export class ToolbarViewMenuPage extends BasePage {
     await expect(file).toEqual(expectedData);
   }
 
+  async verifyDownloadAsXLSX({
+    downloadLocator,
+    expectedDataFile,
+  }: {
+    downloadLocator: Locator;
+    expectedDataFile: string;
+  }) {
+    const [download] = await Promise.all([
+      // Start waiting for the download
+      this.rootPage.waitForEvent('download'),
+      // Perform the action that initiates download
+      downloadLocator.click(),
+    ]);
+
+    // Save downloaded file somewhere
+    await download.saveAs('./output/at.xlsx');
+
+    // convert xlsx to csv
+    const wb = XLSX.readFile('./output/at.xlsx');
+    XLSX.writeFile(wb, './output/at.txt', { bookType: 'csv' });
+
+    // verify downloaded content against expected content
+    const expectedData = fs.readFileSync(expectedDataFile, 'utf8');
+    const file = fs.readFileSync('./output/at.txt', 'utf8');
+    await expect(file).toEqual(expectedData);
+  }
+
   // menu items
   //    Collaborative View
   //    Download
@@ -68,6 +96,13 @@ export class ToolbarViewMenuPage extends BasePage {
             .last(),
           expectedDataFile: verificationInfo?.verificationFile ?? './fixtures/expectedBaseDownloadData.txt',
         });
+      } else if (subMenu === 'Download as XLSX') {
+        await this.verifyDownloadAsXLSX({
+          downloadLocator: await this.rootPage
+            .locator(`.ant-dropdown-menu-title-content:has-text("${subMenu}")`)
+            .last(),
+          expectedDataFile: verificationInfo?.verificationFile ?? './fixtures/expectedBaseDownloadData.txt',
+        });
       } else {
         await this.rootPage.locator(`.ant-dropdown-menu-title-content:has-text("${subMenu}")`).last().click();
       }
@@ -78,6 +113,11 @@ export class ToolbarViewMenuPage extends BasePage {
             message: 'Successfully exported all table data',
           });
           break;
+        case 'Download as XLSX':
+          await this.verifyToast({
+            message: 'Successfully exported all table data',
+          });
+          break;
         case 'Locked View':
           await this.verifyToast({
             message: 'Successfully Switched to locked view',
diff --git a/tests/playwright/tests/viewMenu.spec.ts b/tests/playwright/tests/viewMenu.spec.ts
index 51037e3b6b..94a2b67b51 100644
--- a/tests/playwright/tests/viewMenu.spec.ts
+++ b/tests/playwright/tests/viewMenu.spec.ts
@@ -56,4 +56,24 @@ test.describe('Grid view locked', () => {
       },
     });
   });
+
+  test.only('Download XLSX', async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: 'Team & Auth' });
+    await dashboard.treeView.openTable({ title: 'Country' });
+
+    await dashboard.grid.toolbar.clickFields();
+    // Hide 'LastUpdate' column
+    await dashboard.grid.toolbar.fields.click({
+      title: 'LastUpdate',
+    });
+
+    await dashboard.grid.toolbar.viewsMenu.click({
+      menu: 'Download',
+      subMenu: 'Download as XLSX',
+      verificationInfo: {
+        verificationFile: isPg(context) ? './fixtures/expectedBaseDownloadDataPg.txt' : null,
+      },
+    });
+  });
 });