Merge pull request #1038 from aehrc/issue/1037

Issue/1037

CHANGELOG.md

@@ -6,6 +6,11 @@ This log documents significant changes for the [@aehrc/smart-forms-renderer](htt
 Changelog only includes changes from version 0.36.0 onwards.
 
 
+## [0.44.1] - 2024-10-14
+### Fixed
+- Fixed unexpected behaviour of open-choice's open label field clearing the answers of previously selected options.
+- Fixed an issue where enableWhen logic was not working properly with repeating items.
+
 ## [0.44.0] - 2024-10-09
 ### Added
 - Added support for the [preferredTerminologyServer](https://hl7.org/fhir/uv/sdc/STU3/StructureDefinition-sdc-questionnaire-preferredTerminologyServer.html) SDC extension.

apps/demo-renderer-app/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@aehrc/sdc-populate": "^2.3.1",
-    "@aehrc/smart-forms-renderer": "^0.44.0",
+    "@aehrc/smart-forms-renderer": "^0.44.1",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",

apps/smart-forms-app/e2e/items.spec.ts

@@ -18,6 +18,17 @@
 import { expect, test } from '@playwright/test';
 import { PLAYWRIGHT_APP_URL, PLAYWRIGHT_FORMS_SERVER_URL } from './globals';
 
+test.beforeEach(async ({ page }) => {
+  // Go to playground
+  const fetchQPromise = page.waitForResponse(
+    `${PLAYWRIGHT_FORMS_SERVER_URL}/Questionnaire?_count=100&_sort=-date&`
+  );
+  const launchUrl = `${PLAYWRIGHT_APP_URL}/playground`;
+  await page.goto(launchUrl);
+  const fetchQResponse = await fetchQPromise;
+  expect(fetchQResponse.status()).toBe(200);
+});
+
 const stringInput = 'Test string input';
 const textInput = 'Test text input';
 const dateInput = '25/12/2023';
@@ -33,15 +44,6 @@ const choiceAnswerOptionInput = 'option A';
 const choiceAnswerValueSetInput = 'Tasmania';
 
 test('enter inputs into BitOfEverything questionnaire', async ({ page }) => {
-  // Go to playground
-  const fetchQPromise = page.waitForResponse(
-    `${PLAYWRIGHT_FORMS_SERVER_URL}/Questionnaire?_count=100&_sort=-date&`
-  );
-  const launchUrl = `${PLAYWRIGHT_APP_URL}/playground`;
-  await page.goto(launchUrl);
-  const fetchQResponse = await fetchQPromise;
-  expect(fetchQResponse.status()).toBe(200);
-
   // Select BitOfEverything questionnaire
   await page
     .getByTestId('questionnaire-picker-playground')
@@ -177,3 +179,149 @@ test('enter inputs into BitOfEverything questionnaire', async ({ page }) => {
   expect(debugViewerText.includes(`"code": "6"`)).toBeTruthy();
   expect(debugViewerText.includes(`"display": "${choiceAnswerValueSetInput}"`)).toBeTruthy();
 });
+
+test('enter inputs into OpenChoiceCheckboxAVS questionnaire', async ({ page }) => {
+  // Select OpenChoiceCheckboxAVS questionnaire
+  await page
+    .getByTestId('questionnaire-picker-playground')
+    .locator('input')
+    .fill('OpenChoiceCheckboxAVS');
+  await page.keyboard.press('Enter');
+  await expect(page.getByTestId('questionnaire-details-playground')).toContainText(
+    'Open Choice Checkbox - Answer Value Set'
+  );
+  await expect(page.getByTestId('questionnaire-details-playground')).toContainText(
+    'https://smartforms.csiro.au/docs/advanced/control/itemcontrol/question/open-choice-checkbox-avs'
+  );
+
+  // Build OpenChoiceCheckboxAVS questionnaire
+  await page.getByTestId('picker-build-form-button-playground').click();
+  await expect(page.getByText('"resourceType": "Questionnaire"')).toBeInViewport();
+  await expect(page.getByText('"id": "OpenChoiceCheckboxAVS"')).toBeInViewport();
+
+  const openChoiceCheckboxLinkId = 'state-multi';
+
+  // Test multi-select checkbox
+  // Check on a defined option followed by the open label and see if it removes the initial option
+  // Check two checkboxes
+  await page
+    .locator(
+      `div[data-test="q-item-open-choice-checkbox-answer-value-set-box"][data-linkid="${openChoiceCheckboxLinkId}"]`
+    )
+    .locator('label:has-text("Australian Capital Territory")')
+    .check();
+
+  await page
+    .locator(
+      `div[data-test="q-item-open-choice-checkbox-answer-value-set-box"][data-linkid="${openChoiceCheckboxLinkId}"]`
+    )
+    .locator('label:has-text("Queensland")')
+    .check();
+
+  // Assert that both checkboxes are checked
+  const isACTChecked = await page
+    .locator(
+      `div[data-test="q-item-open-choice-checkbox-answer-value-set-box"][data-linkid="${openChoiceCheckboxLinkId}"]`
+    )
+    .locator('label:has-text("Australian Capital Territory")')
+    .locator('input[type="checkbox"]') // Assuming the checkbox is the input element inside the label
+    .isChecked();
+
+  const isQueenslandChecked = await page
+    .locator(
+      `div[data-test="q-item-open-choice-checkbox-answer-value-set-box"][data-linkid="${openChoiceCheckboxLinkId}"]`
+    )
+    .locator('label:has-text("Queensland")')
+    .locator('input[type="checkbox"]')
+    .isChecked();
+
+  expect(isACTChecked).toBe(true);
+  expect(isQueenslandChecked).toBe(true);
+
+  // Check Open Label checkbox
+  await page
+    .locator(
+      `div[data-test="q-item-open-choice-checkbox-answer-value-set-box"][data-linkid="${openChoiceCheckboxLinkId}"]`
+    )
+    .locator('label:has-text("Overseas state, please specify")')
+    .check();
+
+  // Assert that both checkboxes are checked once more, to verify the open label checkbox did not affect the other checkboxes
+  const isACTCheckedAgain = await page
+    .locator(
+      `div[data-test="q-item-open-choice-checkbox-answer-value-set-box"][data-linkid="${openChoiceCheckboxLinkId}"]`
+    )
+    .locator('label:has-text("Australian Capital Territory")')
+    .locator('input[type="checkbox"]')
+    .isChecked();
+
+  const isQueenslandCheckedAgain = await page
+    .locator(
+      `div[data-test="q-item-open-choice-checkbox-answer-value-set-box"][data-linkid="${openChoiceCheckboxLinkId}"]`
+    )
+    .locator('label:has-text("Queensland")')
+    .locator('input[type="checkbox"]')
+    .isChecked();
+
+  expect(isACTCheckedAgain).toBe(true);
+  expect(isQueenslandCheckedAgain).toBe(true);
+});
+
+test('enableWhen multi-checkbox (also for repeating items)', async ({ page }) => {
+  // Select EnableWhenMultiCheckbox questionnaire
+  await page
+    .getByTestId('questionnaire-picker-playground')
+    .locator('input')
+    .fill('EnableWhenMultiCheckbox');
+  await page.keyboard.press('Enter');
+  await expect(page.getByTestId('questionnaire-details-playground')).toContainText(
+    'EnableWhen Multi-select Checkbox'
+  );
+  await expect(page.getByTestId('questionnaire-details-playground')).toContainText(
+    'https://smartforms.csiro.au/docs/behavior/other/enable-when-multi-checkbox'
+  );
+
+  // Build OpenChoiceCheckboxAVS questionnaire
+  await page.getByTestId('picker-build-form-button-playground').click();
+  await expect(page.getByText('"resourceType": "Questionnaire"')).toBeInViewport();
+  await expect(page.getByText('"id": "EnableWhenMultiCheckbox"')).toBeInViewport();
+
+  const openChoiceCheckboxLinkId = 'select-conditions-list';
+
+  // Check on a single option, then check for displayed enableWhen display question
+  await page
+    .locator(
+      `div[data-test="q-item-open-choice-checkbox-answer-option-box"][data-linkid="${openChoiceCheckboxLinkId}"]`
+    )
+    .locator('label:has-text("Condition A (Displays Clinical guidance: Condition A question)")')
+    .check();
+
+  await expect(page.getByTestId('q-item-display-box')).toContainText(
+    'Clinical guidance: Condition A'
+  );
+
+  // Check on options A. B. C, then check for all displayed enableWhen display questions
+  await page
+    .locator(
+      `div[data-test="q-item-open-choice-checkbox-answer-option-box"][data-linkid="${openChoiceCheckboxLinkId}"]`
+    )
+    .locator('label:has-text("Condition B (Displays Clinical guidance: Condition B question)")')
+    .check();
+
+  await page
+    .locator(
+      `div[data-test="q-item-open-choice-checkbox-answer-option-box"][data-linkid="${openChoiceCheckboxLinkId}"]`
+    )
+    .locator('label:has-text("Condition C (Displays Clinical guidance: Condition C question)")')
+    .check();
+
+  await expect(page.getByTestId('q-item-display-box').first()).toContainText(
+    'Clinical guidance: Condition A'
+  );
+  await expect(page.getByTestId('q-item-display-box').nth(1)).toContainText(
+    'Clinical guidance: Condition B'
+  );
+  await expect(page.getByTestId('q-item-display-box').nth(2)).toContainText(
+    'Clinical guidance: Condition C'
+  );
+});

apps/smart-forms-app/package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@aehrc/sdc-assemble": "^1.3.1",
     "@aehrc/sdc-populate": "^2.3.1",
-    "@aehrc/smart-forms-renderer": "^0.44.0",
+    "@aehrc/smart-forms-renderer": "^0.44.1",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@fontsource/material-icons": "^5.0.18",

documentation/package.json

@@ -15,7 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@aehrc/smart-forms-renderer": "^0.44.0",
+    "@aehrc/smart-forms-renderer": "^0.44.1",
     "@docusaurus/core": "^3.4.0",
     "@docusaurus/preset-classic": "^3.4.0",
     "@docusaurus/theme-live-codeblock": "^3.4.0",

packages/smart-forms-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.44.0",
+  "version": "0.44.1",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {
@@ -38,6 +38,7 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.difference": "^4.5.0",
+    "lodash.differencewith": "^4.5.0",
     "lodash.intersection": "^4.4.0",
     "lodash.isequal": "^4.5.0",
     "nanoid": "^5.0.7",
@@ -82,6 +83,7 @@
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.difference": "^4.5.9",
+    "@types/lodash.differencewith": "^4.5.9",
     "@types/lodash.intersection": "^4.4.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/react": ">=17.0.0",

packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerValueSetItem.tsx

@@ -166,7 +166,7 @@ function OpenChoiceCheckboxAnswerValueSetItem(props: OpenChoiceCheckboxAnswerVal
 
   return (
     <FullWidthFormComponentBox
-      data-test="q-item-open-choice-checkbox-answer-option-box"
+      data-test="q-item-open-choice-checkbox-answer-value-set-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>