refactor: allow checkboxes as option and add rendering tests for checkboxes enabled (#1045)

* refactor: allow checkboxes as option
  test: enable rendering test for checkboxes

* build: yarn lock

* chore: rm playwright

* test: update baseline

* chore: rm playwrgith from resolutions

* chore: put it back again

* chore: test without res again

* chore: and add resolutions back again

apis/nucleus/src/components/listbox/ListBox.jsx

@@ -19,6 +19,7 @@ export default function ListBox({
   model,
   selections,
   direction,
+  checkboxes: checkboxOption,
   height,
   width,
   listLayout = 'vertical',
@@ -35,7 +36,7 @@ export default function ListBox({
   const [initScrollPosIsSet, setInitScrollPosIsSet] = useState(false);
   const [layout] = useLayout(model);
   const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
-  const { checkboxes, histogram } = layout ?? {};
+  const { checkboxes = checkboxOption, histogram } = layout ?? {};
 
   const loaderRef = useRef(null);
   const local = useRef({

apis/nucleus/src/components/listbox/ListBoxInline.jsx

@@ -48,6 +48,7 @@ export default function ListBoxInline({ options = {} }) {
     direction,
     frequencyMode,
     listLayout,
+    checkboxes,
     search = true,
     focusSearch = false,
     toolbar = true,
@@ -268,6 +269,7 @@ export default function ListBoxInline({ options = {} }) {
                 listLayout={listLayout}
                 frequencyMode={frequencyMode}
                 rangeSelect={rangeSelect}
+                checkboxes={checkboxes}
                 height={height}
                 width={width}
                 update={update}

package.json

@@ -36,6 +36,7 @@
     ]
   },
   "devDependencies": {
+    "@playwright/test": "1.28.1",
     "@after-work.js/aw": "6.0.14",
     "@babel/cli": "7.19.3",
     "@babel/core": "7.20.5",
@@ -106,7 +107,8 @@
     "**/caniuse-lite": "1.0.30001435",
     "**/react": "18.2.0",
     "**/react-dom": "18.2.0",
-    "**/react-is": "18.2.0"
+    "**/react-is": "18.2.0",
+    "@playwright/test": "1.28.1"
   },
   "workspaces": [
     "generated/*",

test/rendering/listbox/listbox.js

@@ -22,12 +22,12 @@
     };
   }
 
-  const init = async () => {
+  const init = async (options = {}) => {
     const element = window.document.querySelector('#object');
     const { app } = getMocks();
     const nebbie = window.stardust.embed(app);
     const listboxOptions = {
-      dense: false,
+      ...options,
     };
     const inst = await nebbie.field('Alpha');
     inst.mount(element, listboxOptions);
@@ -36,5 +36,37 @@
     };
   };
 
-  return init();
+  const getOptions = () => {
+    const paramStrings = document.location.search.split('?').pop().split('&');
+    const paramsArr = paramStrings.map((stringPair) => {
+      const [key, val] = stringPair.split('=');
+      return [key, ['true', 'false'].includes(val) ? JSON.parse(val) : val];
+    });
+    const params = Object.fromEntries(paramsArr);
+    return params;
+  };
+
+  const getScenarioOptions = (s) => {
+    let sc = {};
+    switch (s) {
+      case 'standard':
+        sc = {};
+        break;
+      case 'checkboxes':
+        sc = { checkboxes: true };
+        break;
+      default:
+        throw new Error('Invalid test scenario', s);
+    }
+    return sc;
+  };
+
+  const { scenario, ...options } = getOptions() || {};
+
+  const scenarioOptions = getScenarioOptions(scenario);
+
+  return init({
+    ...scenarioOptions,
+    ...options,
+  });
 })();

test/rendering/listbox/listbox.spec.js

@@ -27,7 +27,7 @@ test.describe('listbox mashup rendering test', () => {
   test('listbox basic', async () => {
     const FILE_NAME = 'listbox_basic.png';
 
-    await page.goto(`${url}/listbox/listbox.html`);
+    await page.goto(`${url}/listbox/listbox.html?scenario=standard`);
     const selector = await page.waitForSelector(listboxSelector, { visible: true });
 
     const image = await selector.screenshot();
@@ -37,7 +37,7 @@ test.describe('listbox mashup rendering test', () => {
   test('selecting two values should result in two green rows', async () => {
     const FILE_NAME = 'listbox_select_EH.png';
 
-    await page.goto(`${url}/listbox/listbox.html`);
+    await page.goto(`${url}/listbox/listbox.html?scenario=standard`);
     const selector = await page.waitForSelector(listboxSelector, { visible: true });
 
     const selectNumbers = [4, 7];
@@ -50,4 +50,21 @@ test.describe('listbox mashup rendering test', () => {
     const image = await selector.screenshot();
     return expect(image).toMatchSnapshot(FILE_NAME);
   });
+
+  test('should render checkboxes and check A and I', async () => {
+    const FILE_NAME = 'listbox_checkboxes_select_AI.png';
+
+    await page.goto(`${url}/listbox/listbox.html?scenario=checkboxes`);
+    const selector = await page.waitForSelector(listboxSelector, { visible: true });
+
+    const selectNumbers = [0, 8];
+    const action = async (nbr) => {
+      const rowSelector = `${listboxSelector} [data-n="${nbr}"]`;
+      await page.click(rowSelector);
+    };
+    await execSequence(selectNumbers, action);
+
+    const image = await selector.screenshot();
+    return expect(image).toMatchSnapshot(FILE_NAME);
+  });
 });

yarn.lock

@@ -5071,6 +5071,14 @@
   dependencies:
     esquery "^1.0.1"
 
+"@playwright/test@1.28.1":
+  version "1.28.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.28.1.tgz#e5be297e024a3256610cac2baaa9347fd57c7860"
+  integrity sha512-xN6spdqrNlwSn9KabIhqfZR7IWjPpFK1835tFNgjrlysaSezuX8PYUwaz38V/yI8TJLG9PkAMEXoHRXYXlpTPQ==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.28.1"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz#58f8217ba70069cc6a73f5d7e05e85b458c150e2"
@@ -17585,6 +17593,11 @@ pkg-dir@^5.0.0:
   dependencies:
     find-up "^5.0.0"
 
+playwright-core@1.28.1:
+  version "1.28.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.28.1.tgz#8400be9f4a8d1c0489abdb9e75a4cc0ffc3c00cb"
+  integrity sha512-3PixLnGPno0E8rSBJjtwqTwJe3Yw72QwBBBxNoukIj3lEeBNXwbNiKrNuB1oyQgTBw5QHUhNO3SteEtHaMK6ag==
+
 pngjs@^3.0.0, pngjs@^3.3.3:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"