Merge pull request #156 from georgetown-cset/94-rework-group-selectio…

…n-interface

Rework group selection interface

web/gui-v2/package.json

@@ -41,13 +41,13 @@
   "devDependencies": {
     "@emotion/jest": "^11.11.0",
     "@percy/cli": "^1.26.2",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "babel-jest": "^29.6.1",
+    "@testing-library/user-event": "^14.5.1",
+    "babel-jest": "^29.7.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react-test-renderer": "^18.2.0"
   }
 }

web/gui-v2/src/components/ListView.test.js

@@ -1,21 +1,27 @@
 import React from 'react';
+import { CacheProvider } from '@emotion/react';
 import {
   getByRole,
   getByText,
   screen,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
 
-import { userEventSetup } from '../util/testing';
+import { emotionCache, userEventSetup } from '../util/testing';
 import ListView from './ListView';
+import { exportsForTestingOnly } from './ListViewTable';
+
+const { extractCurrentFilters, filterRow } = exportsForTestingOnly;
 
 const INITIAL_COLUMNS = ['Company', 'Country', 'AI publications', 'AI patents', 'Tech Tier 1 jobs'];
 const REMOVED_COLUMN = 'AI publications';
 
 describe("ListView", () => {
   it("adjust filters and reset dropdown filters", async () => {
     const { user } = userEventSetup(
-      <ListView />
+      <CacheProvider value={emotionCache}>
+        <ListView />
+      </CacheProvider>
     );
 
     // Filter by Europe and verify that the count updates
@@ -31,10 +37,28 @@ describe("ListView", () => {
     expect(screen.getByText('Viewing 1760 companies')).toBeVisible();
   }, 20000);
 
+
+  it("selects a group of companies", async () => {
+    const { user } = userEventSetup(
+      <CacheProvider value={emotionCache}>
+        <ListView />
+      </CacheProvider>
+    );
+
+    const companyHeader = screen.getByRole('columnheader', { name: /company/i });
+    await user.click(getByRole(companyHeader, 'combobox'));
+    const menu = screen.getByRole('listbox');
+    await user.click(getByText(menu, 'S&P 500'));
+    expect(screen.getByText('Viewing 499 of 1760 companies')).toBeVisible();
+  }, 20000);
+
+
   describe("add/remove columns dialog", () => {
     it("opens the dialog and changes columns", async () => {
       const { user } = userEventSetup(
-        <ListView />
+        <CacheProvider value={emotionCache}>
+          <ListView />
+        </CacheProvider>
       );
 
       for ( const column of INITIAL_COLUMNS ) {
@@ -53,9 +77,10 @@ describe("ListView", () => {
       expect(removedCheckbox.checked).toEqual(true);
       await user.click(removedCheckbox);
       expect(removedCheckbox.checked).toEqual(false);
+      let dialogRemoved = waitForElementToBeRemoved(screen.getByRole('dialog'));
       await user.click(getByRole(dialog, 'button', { name: 'Apply' }));
-      // await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
-      // expect(screen.queryByRole('heading', { name: 'Add/remove columns'})).not.toBeInTheDocument();
+      await dialogRemoved;
+      expect(screen.queryByRole('heading', { name: 'Add/remove columns'})).not.toBeInTheDocument();
 
       // Verify that the changes took effect
       for ( const column of INITIAL_COLUMNS.filter(e => e !== REMOVED_COLUMN) ) {
@@ -64,48 +89,34 @@ describe("ListView", () => {
     }, 90000);
   });
 
-  describe.skip('groups', () => {
-    it('switches to custom group mode', async () => {
-      const { user } = userEventSetup(
-        <ListView />
-      );
-
-      const groupSelectorWrapper = screen.getByTestId('group-selector');
-      await user.click(getByRole(groupSelectorWrapper, 'button'));
-
-      // Verify that the groups we expect are present
-      expect(screen.getByRole('option', { name: 'All companies' })).toBeVisible();
-      expect(screen.getByRole('option', { name: 'S&P 500' })).toBeVisible();
-      expect(screen.getByRole('option', { name: 'Custom' })).toBeVisible();
-      await user.click(screen.getByRole('option', { name: 'Custom' }));
-
-      // We don't have any companies in our group yet, so no results should be shown
-      expect(screen.getByText(/no companies selected/i)).toBeVisible();
 
-      // Open the group editor dialog
-      await user.click(screen.getByRole('button', { name: /edit custom group/i }));
-      expect(screen.getByRole('heading', { name: 'Modify custom company group' })).toBeVisible();
-      const dialog = screen.getByRole('dialog');
-      const companyInput = getByRole(dialog, 'combobox');
-      await user.click(companyInput);
-      await user.type(companyInput, 'Microsoft');
-      await user.click(getByRole(dialog, 'option', { name: 'Microsoft' }));
-      await user.click(getByRole(dialog, 'button', { name: 'Apply' }));
-      await waitForElementToBeRemoved(dialog);
-
-      // Confirm that our group selection is present in the table
-      const table = screen.getByRole('table');
-      expect(getByRole(table, 'row', { name: /Microsoft/ })).toBeVisible();
-
-      // Verify that a pre-existing group displays correctly
-      await user.click(getByRole(groupSelectorWrapper, 'button', { name: 'Custom' }));
-      expect(screen.getByRole('option', { name: 'S&P 500' })).toBeVisible();
-      await user.click(screen.getByRole('option', { name: 'S&P 500' }));
-      expect(getByRole(table, 'row', { name: /Microsoft/ })).toBeVisible();
-      expect(getByRole(table, 'row', { name: /IBM/ })).toBeVisible();
-      expect(getByRole(table, 'row', { name: /Google/ })).toBeVisible();
-      expect(getByRole(table, 'row', { name: /Apple/ })).toBeVisible();
-      expect(getByRole(table, 'row', { name: /3M/ })).toBeVisible();
-    }, 60000);
+  describe("helper functions", () => {
+    it("filtering rows works as expected", () => {
+      const FILTERS_RAW = {
+        name: {
+          get: [ "GROUP:sp500", "Sierra Nevada Corp" ],
+        },
+      };
+
+      const FILTERS_TRANSFORMED = extractCurrentFilters(FILTERS_RAW);
+
+      expect(FILTERS_TRANSFORMED).toEqual({
+        _groups: [ "sp500" ],
+        _companies: [ "Sierra Nevada Corp" ],
+        name: [ "GROUP:sp500", "Sierra Nevada Corp" ],
+      });
+
+      const MICROSOFT = { cset_id: 163, name: "Microsoft", groups: { sp500: true, global500: true } };
+      const SAMSUNG = { cset_id: 671, name: "Samsung", groups: { sp500: true, global500: false } };
+      const THALES = { cset_id: 2794, name: "Thales SA", groups: { sp500: false, global500: false } };
+      const QUALCOMM = { cset_id: 209, name: "Qualcomm", groups: { sp500: false, global500: true } };
+      const SIERRA_NEVADA = { cset_id: 2753, name: "Sierra Nevada Corp", groups: { sp500: false, global500: false } };
+
+      expect(filterRow(MICROSOFT, FILTERS_TRANSFORMED)).toEqual(true);
+      expect(filterRow(SAMSUNG, FILTERS_TRANSFORMED)).toEqual(true);
+      expect(filterRow(THALES, FILTERS_TRANSFORMED)).toEqual(false);
+      expect(filterRow(QUALCOMM, FILTERS_TRANSFORMED)).toEqual(false);
+      expect(filterRow(SIERRA_NEVADA, FILTERS_TRANSFORMED)).toEqual(true);
+    });
   });
 });