@pega/custom-dx-components 24.2.16 → 25.1.10-alpha-0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "24.2.16",
+  "version": "25.1.10-alpha-0.2",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -15,51 +15,53 @@
   "type": "module",
   "sideEffects": false,
   "dependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/plugin-transform-class-properties": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
-    "@pega/auth": "^0.2.19",
-    "@pega/constellation-dx-components-build-utils": "^1.0.1",
-    "ajv": "^8.12.0",
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/preset-react": "^7.27.1",
+    "@pega/auth": "^0.2.24",
+    "@pega/constellation-dx-components-build-utils": "^2.0.4",
+    "@pega/inquirer-fuzzy-path": "^3.0.0",
+    "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
     "archiver": "^7.0.1",
     "arg": "^5.0.2",
-    "babel-loader": "^9.1.3",
-    "chalk": "^5.3.0",
+    "babel-loader": "^10.0.0",
+    "chalk": "^5.4.1",
     "check-git": "^2.0.2",
-    "compression-webpack-plugin": "^10.0.0",
-    "css-loader": "6.8.1",
-    "css-minimizer-webpack-plugin": "^5.0.1",
+    "compression-webpack-plugin": "^11.1.0",
+    "css-loader": "7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.2",
     "eslint": "^8.56.0",
-    "execa": "^8.0.1",
+    "execa": "^9.5.2",
     "file-loader": "6.2.0",
-    "fs-extra": "^11.2.0",
+    "fs-extra": "^11.3.0",
     "gitignore": "^0.7.0",
-    "inquirer": "^9.2.12",
+    "inquirer": "^9.3.7",
     "jwt-decode": "^4.0.0",
-    "listr2": "^8.0.1",
-    "mini-css-extract-plugin": "2.7.6",
+    "listr2": "^8.3.3",
+    "mini-css-extract-plugin": "2.9.2",
     "mustache": "^4.2.0",
     "ncp": "^2.0.0",
     "node-fetch": "^3.3.2",
-    "ora": "^8.0.1",
+    "node-stream-zip": "^1.15.0",
+    "ora": "^8.2.0",
     "pascalcase": "^2.0.0",
-    "postcss": "^8.4.33",
-    "postcss-loader": "7.3.4",
-    "postcss-preset-env": "9.3.0",
+    "postcss": "^8.5.3",
+    "postcss-loader": "8.1.1",
+    "postcss-preset-env": "10.1.6",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dev-utils": "^12.0.1",
-    "resolve": "1.22.8",
+    "resolve": "1.22.10",
     "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^13.3.3",
-    "terser-webpack-plugin": "5.3.10",
-    "ts-loader": "^9.5.1",
-    "typescript": "~5.3.3",
+    "sass-loader": "^16.0.5",
+    "terser-webpack-plugin": "5.3.14",
+    "ts-loader": "^9.5.2",
+    "typescript": "~5.8.3",
     "unarchive": "^1.1.3",
     "url-loader": "4.1.1",
-    "webpack": "5.74.0",
-    "webpack-cli": "^5.1.4"
+    "webpack": "5.99.8",
+    "webpack-cli": "^6.0.1"
   },
   "author": "Custom component dev",
   "license": "SEE LICENSE IN LICENSE",
@@ -68,16 +70,16 @@
     "custom-components"
   ],
   "devDependencies": {
-    "@babel/preset-env": "^7.23.7",
-    "@pega/configs": "^0.7.1",
-    "@pega/prettier-config": "^0.7.1",
-    "@types/jest": "^29.5.11",
+    "@babel/preset-env": "^7.27.2",
+    "@pega/configs": "^0.16.3",
+    "@pega/prettier-config": "^0.16.3",
+    "@types/jest": "^29.5.14",
     "babel-jest": "^29.7.0",
-    "cspell": "^8.3.2",
+    "cspell": "^8.19.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
-    "prettier": "3.1.1",
-    "ts-jest": "^29.1.1"
+    "prettier": "3.5.3",
+    "ts-jest": "^29.3.2"
   }
 }

package/src/cli.js

@@ -32,6 +32,7 @@ import {
   moveComponent,
   renameLibrary,
   restoreConfig,
+  restore,
   revertWebPack,
   promoteWebPack,
   showStatus,
@@ -63,6 +64,7 @@ const TASKS = {
   RENAME: 'rename',
   RENAME_LIB: 'renameLibrary',
   RESTORE_CONFIG: 'restoreConfig',
+  RESTORE_LIB: 'restore',
   QUARANTINE: 'quarantine',
   MOVE: 'moveComponent',
   LIST: 'list',
@@ -170,6 +172,10 @@ export default async (args = []) => {
       restoreConfig(options);
       break;
     }
+    case TASKS.RESTORE_LIB: {
+      restore(options);
+      break;
+    }
     case TASKS.QUARANTINE: {
       quarantine(options);
       break;

package/src/constants.js

@@ -2,6 +2,7 @@
 export const TASKS_CONFIG_JSON_FILENAME = 'tasks.config.json';
 export const INPUT_CONFIG_JSON_FILENAME = 'input.config.json';
 export const PACKAGE_JSON_FILENAME = 'package.json';
+export const PACKAGE_LOCK_JSON_FILENAME = 'package-lock.json';
 export const BUILD_CONFIG_JSON_FILENAME = 'build.config.json';
 export const WEBPACK_CONFIG_JS_FILENAME = 'webpack.config.js';
 export const WEBPACK_PATHS_JS_FILENAME = 'paths.js';
@@ -13,6 +14,7 @@ export const COMPONENTS_PATH = 'component';
 export const TOKEN_PATH = 'node_modules/@pega/custom-dx-components/.access_token';
 export const OOTB_COMPONENTS = 'node_modules/@pega/custom-dx-components/.ootb_components';
 export const LIBRARY_BASED = 'libraryMode';
+export const LIBRARY_BASED_CL = 'libraryModeCL';
 export const USE_INPUT_CONFIG = 'useInputConfig';
 export const SHARED_DIRECTORY = 'shared';
 export const SHOW_DEBUG = 'showDebug';
@@ -20,7 +22,7 @@ export const ARCHIVES_PATH = 'store';
 export const BIN_ARCHIVES_PATH = 'bin-arch';
 export const TEMP_PATH = 'store/temp';
 export const COMPONENTS_CONFIG_FILE_NAME = 'componentsconfig.json';
-
+export const MAX_RFT_CHARS = 64;
 
 
 /* REST end points */
@@ -39,6 +41,14 @@ export const LP_PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT =
 export const LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT =
   'pegalaunchpad/c11n/isolations/{isolationId}/v102/assetsUpdate';
 
+export const PUBLISH_COMPONENT_LIBRARY_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component_library';
+export const PUBLISH_COMPONENT_LIBRARY_ARCHIVE_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component_library_archive';
+export const LIST_COMPONENT_LIBRARIES_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/list_component_libraries';
+export const LIST_COMPONENT_LIBRARY_ARCHIVES_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/list_component_library_archives';
+export const DELETE_COMPONENT_LIBRARY_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/delete_component_library';
+export const COMPONENT_LIBRARY_ARCHIVE_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/component_library_archive';
+
+
 export const FIELD_PATH = '/field';
 export const TEMPLATE_PATH = '/template';
 export const WIDGET_PATH = '/widget';
@@ -73,9 +83,7 @@ export const AUTHENTICATE_DEFAULTS = {
 export const SHARED_FILE_NAMES = [
   "suggestions-handler.ts",
   "PConnProps.d.ts",
-  "create-nonce.ts",
-  "Operator.tsx",
-  "Avatar.tsx"
+  "create-nonce.ts"
 ];
 
 export const AUTHENTICATE_SCHEMA = {

package/src/tasks/authenticate/index.js

@@ -174,6 +174,11 @@ export default async options => {
   const serverConfig = data['server-config'];
   const isPwdNonEmpty = !!serverConfig.password;
 
+
+  console.log(`\nAuthenticating to server: ${chalk.green.bold(`${serverConfig.server}`)}\n`);
+
+
+
   // console.log(`serverConfig: ${JSON.stringify(serverConfig)}`);
   const questions = await getAuthQuestions(serverConfig);
   // console.log(`questions: ${JSON.stringify(questions)}`);

package/src/tasks/build-all/index.js

@@ -12,12 +12,15 @@ import {
   addDebugLog,
   cleanUp,
   getLibraryBased,
+  getLibraryBasedCL,
   checkLibraryAndArchives,
   getConfigDefaults,
   zipVersionAndArchive } from '../../util.js';
 
 import { getBuildComponentQuestions } from './helper.js';
 
+import { buildLibV3 } from '@pega/constellation-dx-components-build-utils/index.js';
+
 
 export function getCustomTasks(componentKey, sourceMap, devBuild, options, showStats, skipBuild) {
 addDebugLog("getCustomTasks", `componentKey: ${componentKey}, sourceMap: ${sourceMap}, devBuild: ${devBuild}, skipBuild: ${skipBuild}`, "");
@@ -54,6 +57,7 @@ export default async options => {
   await checkLibraryAndArchives();
 
   const isLibraryBased = getLibraryBased();
+  const isLibraryBasedCL = getLibraryBasedCL();
 
 addDebugLog("buildAllComponents", "", "+");
   const components = await getComponents();
@@ -99,7 +103,7 @@ addDebugLog("buildAllComponents", "", "+");
   }
 
   // if skipBuild, then do a build here as opposed to every step (v1 is every step, v2, just once)
-  if (skipBuild && firstComponent) {
+  if (skipBuild && firstComponent && !isLibraryBasedCL) {
     console.log();
     console.log(chalk.bold.green("Validation compile..."));
     await bundleComponent(firstComponent, sourceMap, devBuild, showStats);
@@ -107,6 +111,21 @@ addDebugLog("buildAllComponents", "", "+");
     await zipVersionAndArchive(confDef.currentOrgLib, confDef.buildVersion);
   }
 
+  if (isLibraryBasedCL) {
+    console.log();
+    console.log(chalk.bold.green("Validation via build library..."));
+    const confDef =  getConfigDefaults();
+    const organization = confDef.organization;
+    const library = confDef.library;
+
+    const buildLibName = organization.concat('_').concat(library);
+
+    buildLibV3(
+      buildLibName,
+      confDef.buildVersion
+    );
+  }
+
 
 
   // once done, remove leftover directories

package/src/tasks/build-jest-assets/index.js

@@ -2,10 +2,9 @@ import fs from 'fs';
 import path from 'path';
 import { join } from 'path';
 import inquirer from 'inquirer';
-import { Listr } from 'listr2';
 import chalk from 'chalk';
 
-import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents, getLibraryBased, setLibraryBased, forceDefaultsUpdate } from '../../util.js';
+import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents, getLibraryBasedCL, setLibraryBasedCL, forceDefaultsUpdate } from '../../util.js';
 import createAll from '../create-all/index.js';
 import create from '../create/index.js';
 import createLib from '../create-lib/index.js';
@@ -151,7 +150,7 @@ const createJestLibraryAssets = async(isLaunchPad = false) => {
   // initially delete local assets
   await deleteAssets();
 
-  let args  = ['', '', '', 'DXIL', '0.0.1', 'N'];
+  let args  = ['', '', '', 'DXIL', '0.0.1', 'N', 'Original'];
   let myOptions = {};
   myOptions["params"] = args;
 
@@ -200,7 +199,7 @@ const createJestLibraryAssets = async(isLaunchPad = false) => {
   await copyAssets(createPath);
   await deleteAssets();
 
-  args  = [ '','', '', 'Pega_DXIL', '0.0.1-dev'];
+  args  = [ '','', '', 'Pega_DXIL', '0.0.1-dev', 'Y'];
   myOptions = {};
   myOptions["params"] = args;
 
@@ -220,9 +219,9 @@ export default async options => {
   if (buildAssets) {
     // get current server type
     const savedServerType = await getServerType();
-    const savedLibraryBased = getLibraryBased();
+    const savedLibraryBasedCL = getLibraryBasedCL();
 
-    await setLibraryBased(false);
+    await setLibraryBasedCL(false);
 
     // Constellation
     await setServerType("infinity");
@@ -233,7 +232,7 @@ export default async options => {
     await createJestOriginalAssets(true);
 
     // Constellation Library
-    await setLibraryBased(true);
+    await setLibraryBasedCL(true);
     await setServerType("infinity");
 
     await createJestLibraryAssets(false);
@@ -246,7 +245,7 @@ export default async options => {
 
     // restore serverType
     await setServerType(savedServerType);
-    await setLibraryBased(savedLibraryBased);
+    await setLibraryBasedCL(savedLibraryBasedCL);
 
   }
 

package/src/tasks/build-lib/helper.js

@@ -1,5 +1,3 @@
-import fs from 'fs';
-import path from 'path';
 import chalk from 'chalk';
 
 import {
@@ -7,7 +5,8 @@ import {
   getPegaServerConfig,
   validateSemver,
   addDebugLog,
-  getLibraryBased
+  getLibraryBased,
+  getLibraryBasedCL
 } from '../../util.js';
 
 
@@ -17,6 +16,7 @@ addDebugLog("getBuildComoponentQuestions", `defaultVerion: ${defaultVersion}`, "
   const defaultPegaConfig = await getPegaServerConfig();
 
   const isLibraryBased =  getLibraryBased();
+  const isLibraryBasedCL = getLibraryBasedCL();
 
 
   if (components.length == 0) {
@@ -24,23 +24,42 @@ addDebugLog("getBuildComoponentQuestions", `defaultVerion: ${defaultVersion}`, "
     process.exit(1);
   }
 
-  return [
-    {
-      name: 'version',
-      message: 'Enter library version',
-      default: defaultVersion,
-      validate: (value) => {
-        if (validateSemver(value)) {
-          return true;
+  if (isLibraryBasedCL) {
+    return [
+      {
+        name: 'version',
+        message: 'Enter library version',
+        default: defaultVersion,
+        validate: (value) => {
+          if (validateSemver(value)) {
+            return true;
+          }
+          return 'Please provide semver compatible version e.g 0.0.1';
         }
-        return 'Please provide semver compatible version e.g 0.0.1';
       }
-    },
-    {
-      name: 'devBuild',
-      type: 'confirm',
-      message: 'When publish, make deletable ?',
-      default: defaultPegaConfig.devBuild
-    }
-  ];
+    ];
+  }
+  else {
+    return [
+      {
+        name: 'version',
+        message: 'Enter library version',
+        default: defaultVersion,
+        validate: (value) => {
+          if (validateSemver(value)) {
+            return true;
+          }
+          return 'Please provide semver compatible version e.g 0.0.1';
+        }
+      },
+      {
+        name: 'devBuild',
+        type: 'confirm',
+        message: 'When publish, make deletable ?',
+        default: defaultPegaConfig.devBuild
+      }
+    ];
+  }
+
+
 };

package/src/tasks/build-lib/index.js

@@ -3,7 +3,7 @@ import inquirer from 'inquirer';
 import { Listr } from 'listr2';
 import chalk from 'chalk';
 
-import { buildLib } from '@pega/constellation-dx-components-build-utils/index.js';
+import { buildLib, buildLibV3 } from '@pega/constellation-dx-components-build-utils/index.js';
 
 import validate from '../validator/index.js';
 import { lintComponent } from '../linter/index.js';
@@ -20,7 +20,8 @@ import {
   getConfigDevBuild,
   checkJWTExpiration,
   getConfigDefaults,
-  getLibraryBased
+  getLibraryBased,
+  getLibraryBasedCL
 } from '../../util.js';
 import bundleComponent from '../bundle/index.js';
 
@@ -56,6 +57,7 @@ addDebugLog("localBuildLibrary", `organization: ${organization}, library: ${libr
   const components = await getComponents();
   const tokenAndStaticServer = await getC11NB2STokenAndStaticServer();
   const currentOrgLib = organization.concat('_').concat(library);
+  const isLibraryBasedCL = getLibraryBasedCL();
 
   if (tokenAndStaticServer.C11NB2S === undefined) {
     console.log(
@@ -102,9 +104,11 @@ addDebugLog("localBuildLibrary", `organization: ${organization}, library: ${libr
   // compile to see if any errors, as buildLib doesn't catch all errors.
   // Turning off stats (last param), so won't show warnings, as
   // warnings are part of buildLib
-  console.log(chalk.green.bold('Compile check...'));
-  await bundleComponent(components[0], null, devBuild, false);
-  console.log('');
+
+  // for now
+  // console.log(chalk.green.bold('Compile check...'));
+  // await bundleComponent(components[0], null, devBuild, false);
+  // console.log('');
 
   // remove dist/lib stuff
   await cleanUp();
@@ -115,12 +119,30 @@ addDebugLog("localBuildLibrary", `organization: ${organization}, library: ${libr
   // with subdirectories for each version.
   // If "buildDev", we append to version "-dev".  Currently, only "-dev" versions, when published, can be deleted.
 addDebugLog("buildLib", "services call", "");
-  buildLib(
-    buildLibName,
-    buildVersion,
-    tokenAndStaticServer.C11NB2S,
-    tokenAndStaticServer.appStaticContentServer
-  );
+  // buildLibV3(
+  //   buildLibName,
+  //   buildVersion,
+  //   tokenAndStaticServer.C11NB2S,
+  //   tokenAndStaticServer.appStaticContentServer
+  // );
+
+  if (isLibraryBasedCL) {
+    buildLibV3(
+      buildLibName,
+      buildVersion
+    );
+  }
+  else {
+    buildLib(
+      buildLibName,
+      buildVersion,
+      tokenAndStaticServer.C11NB2S,
+      tokenAndStaticServer.appStaticContentServer
+    );
+  }
+
+
+
 addDebugLog("buildLib", "services end", "");
 
 }
@@ -132,7 +154,7 @@ export default async options => {
     process.exit();
   }
 
-  if (options.params.length != 4) {
+  if (options.params.length != 7) {
     // internal so already called
     await showVersion();
     await checkLibraryAndArchives();
@@ -150,17 +172,17 @@ addDebugLog("buildLibrary", "", "+");
   let version;
   let devBuild;
 
-  if (options.params.length >= 5) {
-    version = options.params[3];
-    const dBuild = options.params[4];
-    devBuild = !!(dBuild === 'Y' || dBuild === 'y' || dBuild === true || dBuild === 'true');
-  }
-  else if (options.params.length === 4) {
+  if (options.params.length === 6) {
     // internally called from publish
     const orgLib =  getConfigDefaults();
     version = orgLib.version;
     devBuild = await getConfigDevBuild();
   }
+  else if (options.params.length >= 5) {
+    version = options.params[3];
+    const dBuild = options.params[4];
+    devBuild = !!(dBuild === 'Y' || dBuild === 'y' || dBuild === true || dBuild === 'true');
+  }
   else {
     console.log(`\nLibrary ${chalk.bold.green(currentOrgLib)} `);
     const questions = await getBuildComponentQuestions(compDef.version);

package/src/tasks/create/index.js

@@ -22,7 +22,9 @@ import {
   getLibraryBased,
   addDebugLog,
   checkLibraryAndArchives,
-  getConfigDefaults
+  getConfigDefaults,
+  getSubTypeLabel,
+  getMaxComponentNameCount
 } from '../../util.js';
 import { COMPONENT_SCHEMA, SHARED_FILE_NAMES } from '../../constants.js';
 
@@ -103,6 +105,8 @@ const compileMustacheTemplates = async (
   files.forEach(file => {
     const filePath = path.join(componentDirectory, file);
 
+    const subTypeLabel = getSubTypeLabel(type, subtype);
+
     const output = compileMustacheTemplate(filePath, {
       COMPONENT_KEY: componentKey,
       COMPONENT_NAME: componentName,
@@ -114,6 +118,7 @@ const compileMustacheTemplates = async (
       ALLOWEDAPPS: JSON.stringify(allowedApplications),
       TYPE: type,
       SUB_TYPE: JSON.stringify(mustacheSubType),
+      SUB_TYPE_LABEL: subTypeLabel,
       DESCRIPTION: description,
       IS_TEMPLATE: isTemplate,
       IS_PICKLIST: isPicklist,
@@ -305,6 +310,7 @@ addDebugLog("create", "", "+");
     );
   } else {
     const componentDefaults = getConfigDefaults();
+    const maxChars = getMaxComponentNameCount();
     const questions = [
       {
         name: 'type',
@@ -352,7 +358,7 @@ addDebugLog("create", "", "+");
       },
       {
         name: 'componentName',
-        message: 'Enter component name (required)',
+        message: `Enter component name (required) (${maxChars} max chars)`,
         validate: value => {
           /* value should not be empty
           It should not have spaces
@@ -360,8 +366,12 @@ addDebugLog("create", "", "+");
           Only case-insensitive alphanumeric values are allowed
         */
           if (value && !/^\d/.test(value) && value === sanitize(value)) {
+            if (value.length > maxChars) {
+              return `${value.length - maxChars} too many characters.`
+            }
             return true;
           }
+
           return 'Only alphanumeric values are allowed, starting with alphabets, no spaces.';
         }
       },

package/src/tasks/create/templates/Constellation/Field/Boolean/config.json.mustache

@@ -9,12 +9,38 @@
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
+  "subtypeLabel": "{{SUB_TYPE_LABEL}}",
   "icon": "images/pz-checkbox-active.svg",
   "properties": [
     {
       "name": "label",
       "label": "Field label",
       "format": "TEXT"
+    },
+      {
+      "name": "labelOption",
+      "label": "Field label",
+      "format": "SELECT",
+      "defaultValue": "custom",
+      "visibility": "@PLATFORMNAME != 'launchpad'",
+      "source": [
+        {
+          "key": "default",
+          "value": "Default"
+        },
+        {
+          "key": "custom",
+          "value": "Custom"
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "label": "Custom field label",
+      "format": "VALUEINPUT",
+      "required": true,
+      "ruleType": "Paragraph",
+      "visibility": "@PLATFORMNAME != 'launchpad'"
     },
     {
       "name": "hideLabel",

package/src/tasks/create/templates/Constellation/Field/Boolean/create-nonce.ts.mustache

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/src/tasks/create/templates/Constellation/Field/Boolean/demo.test.tsx.mustache

@@ -0,0 +1,19 @@
+// import { expect, test } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import '@testing-library/jest-dom';
+
+import * as DemoStories from './demo.stories';
+
+const { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  expect(await screen.findByText('Boolean caption')).toBeVisible();
+  expect(await screen.findByText('Boolean label')).toBeVisible();
+  expect(await screen.findByText('Test helper text')).toBeVisible();
+  const checkboxElement = screen.getByRole('checkbox');
+  expect(checkboxElement).toBeChecked();
+  fireEvent.click(checkboxElement);
+  expect(checkboxElement).not.toBeChecked();
+});