From cf191693ec87364e5c6c61bfff95960612e17dab Mon Sep 17 00:00:00 2001
From: NateLanza <natelanzadevelopment@gmail.com>
Date: Tue, 7 Jan 2025 17:56:07 -0700
Subject: [PATCH] Fix attribute dropdown tests for PR 439

---
 e2e-tests/attributeSelector.spec.ts | 42 +++++++++++++++--------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/e2e-tests/attributeSelector.spec.ts b/e2e-tests/attributeSelector.spec.ts
index 13f13cca..4953ff2b 100644
--- a/e2e-tests/attributeSelector.spec.ts
+++ b/e2e-tests/attributeSelector.spec.ts
@@ -3,6 +3,18 @@ import { beforeTest } from './common';
 
 test.beforeEach(beforeTest);
 
+/**
+ * Selects or deselects an attribute from the attribute dropdown
+ * @param page the page to interact with
+ * @param attributeName the name of the attribute to toggle
+ * @param checked whether to select or deselect the attribute
+ */
+async function toggleAttribute(page, attributeName, checked) {
+  await page.getByLabel('Attributes').first().click();
+  await page.getByRole('option', { name: attributeName }).getByRole('checkbox').setChecked(checked);
+  await page.locator('#menu- > .MuiBackdrop-root').click();
+}
+
 test('Attribute Dropdown', async ({ page }) => {
   await page.goto('http://localhost:3000/?workspace=Upset+Examples&table=simpsons&sessionId=193');
 
@@ -10,44 +22,34 @@ test('Attribute Dropdown', async ({ page }) => {
   // Age
   /// /////////////////
   // Deseslect and assert that it's removed from the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByRole('checkbox', { name: 'Age' }).uncheck();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
+  await toggleAttribute(page, 'Age', false);
   await expect(page.getByLabel('Age').locator('rect')).toHaveCount(0);
 
   // Reselect and assert that it's added back to the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByLabel('Age').check();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
-  await expect(page.getByText('Age', { exact: true })).toBeVisible();
+  await toggleAttribute(page, 'Age', true);
+  // This doesn't make sense but it works to find the Age column header
+  await expect(page.locator('g').filter({ hasText: /^Age2020404060608080$/ }).locator('rect')).toBeVisible();
 
   /// /////////////////
   // Degree
   /// /////////////////
   // Deselect and assert that it's removed from the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByRole('checkbox', { name: 'Degree' }).uncheck();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
+  await toggleAttribute(page, 'Degree', false);
   await expect(page.locator('#upset-svg').getByLabel('Number of intersecting sets').locator('rect')).toHaveCount(0);
 
   // Reselect and assert that it's added back to the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByRole('checkbox', { name: 'Degree' }).check();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
+  await toggleAttribute(page, 'Degree', true);
   await expect(page.locator('#upset-svg').getByLabel('Number of intersecting sets').locator('rect')).toBeVisible();
 
   /// /////////////////
   // Deviation
   /// /////////////////
   // Deselect and assert that it's removed from the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByRole('checkbox', { name: 'Deviation' }).uncheck();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
+  await toggleAttribute(page, 'Deviation', false);
   await expect(page.getByLabel('Deviation', { exact: true }).locator('rect')).toHaveCount(0);
 
   // Reselect and assert that it's added back to the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByRole('checkbox', { name: 'Deviation' }).check();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
-  await expect(page.getByText('Deviation', { exact: true })).toBeVisible();
+  await toggleAttribute(page, 'Deviation', true);
+  // This also doesn't make sense but uniquely selects the Deviation column header
+  await expect(page.locator('g').filter({ hasText: /^#Deviation-10%-10%-5%-5%0%0%5%5%10%10%Age2020404060608080$/ }).locator('rect').nth(1)).toBeVisible();
 });