Packages version updated to 24 and DigV2 playwright tests updated (#486)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sdk",
-  "version": "23.1.10",
+  "version": "24.1.10",
   "private": true,
   "scripts": {
     "_comment_SDK_install_build_run_commands": "The following are public commands to clean, install, build, and run the SDK",
@@ -57,11 +57,11 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/pickers": "^3.3.10",
-    "@pega/auth": "^0.2.9",
+    "@pega/auth": "^0.2.10",
     "@pega/cosmos-react-condition-builder": "^4.2.0",
     "@pega/cosmos-react-core": "^4.2.0",
     "@pega/cosmos-react-work": "^4.2.0",
-    "@pega/react-sdk-components": "~23.1.11",
+    "@pega/react-sdk-components": "~0.24.1",
     "@storybook/react-webpack5": "^7.6.7",
     "@tinymce/tinymce-react": "^4.3.2",
     "@types/styled-components": "^5.1.34",
@@ -76,6 +76,7 @@
     "react": "^17.0.2",
     "react-datepicker": "^4.25.0",
     "react-dom": "^17.0.2",
+    "react-number-format": "^5.4.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.3.4",
     "styled-components": "^6.1.8",
@@ -88,13 +89,13 @@
     "@kooneko/livereload-webpack-plugin": "^1.2.1",
     "@loadable/component": "^5.16.3",
     "@pega/configs": "^0.6.0",
-    "@pega/constellationjs": "~23.1.1",
+    "@pega/constellationjs": "24.1.0-test-20240610",
     "@pega/cspell-config": "^0.7.1",
-    "@pega/dx-component-builder-sdk": "~23.1.14",
+    "@pega/dx-component-builder-sdk": "~0.24.1",
     "@pega/eslint-config": "^0.7.1",
     "@pega/pcore-pconnect-typedefs": "~2.1.1",
     "@pega/prettier-config": "^0.6.0",
-    "@pega/react-sdk-overrides": "~23.1.11",
+    "@pega/react-sdk-overrides": "~0.24.1",
     "@pega/stylelint-config": "^0.7.1",
     "@pega/tsconfig": "^0.7.1",
     "@playwright/test": "^1.40.1",

tests/config.js

@@ -21,6 +21,10 @@ const config = {
       user: {
         username: 'user.digv2',
         password: 'pega'
+      },
+      localizedUser: {
+        username: 'localization@DigV2',
+        password: 'pega'
       }
     }
   },

tests/e2e/Digv2/ComplexFields/DataReference.spec.js

@@ -199,6 +199,65 @@ test.describe('E2E test', () => {
 
     await page.locator('button:has-text("Previous")').click();
 
+    /** MultiSelect mode type test */
+    selectedSubCategory = page.locator('div[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
+    await selectedSubCategory.click();
+    await page.locator('li:has-text("Mode")').click();
+
+    selectedTestName = page.locator('div[data-test-id="6f64b45d01d11d8efd1693dfcb63b735"]');
+    await selectedTestName.click();
+    await page.locator('li:has-text("MultiSelect")').click();
+
+    /** Combo-Box mode type test */
+    let displayAs = page.locator('div[data-test-id="4aa668349e0970901aa6b11528f95223"]');
+    await displayAs.click();
+    await page.locator('li:has-text("Combo-Box")').click();
+
+    const selectProducts = page.locator('div[role="combobox"]');
+    await selectProducts.click();
+    await page.locator('li:has-text("Mobile")').click();
+    await page.locator('li:has-text("Telivision")').click();
+    await expect(selectProducts).toBeVisible();
+
+    await page.locator('button:has-text("Next")').click();
+
+    assignment = page.locator('div[id="Assignment"]');
+
+    await expect(assignment.locator('td >> text="Mobile"')).toBeVisible();
+    await expect(assignment.locator('td >> text="Telivision"')).toBeVisible();
+
+    await page.locator('button:has-text("Previous")').click();
+
+    await expect(selectProducts.locator('div[role="button"]:has-text("Mobile")')).toBeVisible();
+    await expect(selectProducts.locator('div[role="button"]:has-text("Telivision")')).toBeVisible();
+
+    let deleteProduct = await selectProducts.locator('div[role="button"]:has-text("Mobile")');
+    await deleteProduct.locator('svg[focusable="false"]').click();
+
+    await page.locator('button:has-text("Next")').click();
+
+    await expect(selectProducts.locator('div[role="button"]:has-text("Mobile")')).not.toBeVisible();
+
+    await page.locator('button:has-text("Previous")').click();
+
+    deleteProduct = await selectProducts.locator('div[role="button"]:has-text("Telivision")');
+    await deleteProduct.locator('svg[focusable="false"]').click();
+
+    /** Checkbox group mode type test */
+    displayAs = page.locator('div[data-test-id="4aa668349e0970901aa6b11528f95223"]');
+    await displayAs.click();
+    await page.locator('li:has-text("Checkbox group")').click();
+
+    await page.locator('label:has-text("Washing Machine")').click();
+    await page.locator('label:has-text("Mobile")').click();
+
+    await page.locator('button:has-text("Next")').click();
+
+    await expect(assignment.locator('td >> text="Washing Machine"')).toBeVisible();
+    await expect(assignment.locator('td >> text="Mobile"')).toBeVisible();
+
+    await page.locator('button:has-text("Previous")').click();
+
     /** Readonly mode type test */
     selectedSubCategory = page.locator('div[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
     await selectedSubCategory.click();
@@ -220,6 +279,37 @@ test.describe('E2E test', () => {
     // await expect(assignment.locator('input[value="75"]')).toBeVisible();
     await expect(assignment.locator('input[value="9f2584c2-5cb4-4abe-a261-d68050ee0f66"]')).toBeVisible();
 
+    await page.locator('button:has-text("Previous")').click();
+
+    /** Testing Sorting(both ascending and descending) */
+    selectedSubCategory = page.locator('div[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
+    await selectedSubCategory.click();
+    await page.locator('li:has-text("Options")').click();
+
+    selectedTestName = page.locator('div[data-test-id="6f64b45d01d11d8efd1693dfcb63b735"]');
+    await selectedTestName.click();
+    await page.locator('li:has-text("ListOfRecords")').click();
+
+    await page.locator('span:has-text("Product Name")').click();
+
+    const table = page.locator('div[id="list-view"]');
+    let tableCell = table.locator('tbody >> tr >> td >> nth=1');
+    // "---" should come at the top in the ascending order, since it's a Falsy value
+    await expect(await tableCell.textContent()).toBe('---');
+
+    await page.locator('span:has-text("Product Name")').click();
+
+    tableCell = table.locator('tbody >> tr >> td >> nth=1');
+    // "Luxury Product" should be at the top in the descending order
+    await expect(await tableCell.textContent()).toBe('Luxury Product');
+
+    const lastRow = table.locator('tbody >> tr >> nth=3');
+    tableCell = lastRow.locator('td >> nth=1');
+    // "---" should be at the bottom in the descending order
+    await expect(await tableCell.textContent()).toBe('---');
+
+    await page.locator('button:has-text("Next")').click();
+
     /** Submitting the case */
     await page.locator('button:has-text("submit")').click();
   }, 10000);

tests/e2e/Digv2/ComplexFields/EmbeddedData.spec.js

@@ -401,8 +401,55 @@ test.describe('E2E test', () => {
     await expect(assignment.locator('span >> text="02142"')).toBeVisible();
     await expect(assignment.locator('span >> text="+16175551212"')).toBeVisible();
 
+    /** Testing Sorting(both ascending and descending) */
+    selectedOption = page.locator('div[data-test-id="c6be2b6191e6660291b6b0c92bd2f0df"]');
+    await selectedOption.click();
+    await page.locator('li:has-text("ListOfRecords")').click();
+
+    selectedSubCategory = page.locator('div[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
+    await selectedSubCategory.click();
+    await page.locator('li:has-text("Table")').click();
+
+    /** Editable mode type tests */
+    selectedTestName = page.locator('div[data-test-id="6f64b45d01d11d8efd1693dfcb63b735"]');
+    await selectedTestName.click();
+    await page.locator('li:has-text("Editable")').click();
+
+    selectEditMode = page.locator('div[data-test-id="80c1db3a7b228760228004b1a532c71e"]');
+    await selectEditMode.click();
+    await page.locator('li:has-text("Table rows")').click();
+
+    /** Creating row by clicking on `+Add` button */
+    await page.locator('a:has-text("+ Add")').click();
+
+    /** Entering values in the second Row */
+    await page.locator('input[data-test-id="202003240938510823869"] >> nth=1').fill('Global St');
+    await page.locator('input[data-test-id="202003240938510831291"] >> nth=1').fill('Cambridge');
+    await page.locator('input[data-test-id="202003240938510831411"] >> nth=1').fill('MA');
+    await page.locator('input[data-test-id="202003240938510832734"] >> nth=1').fill('02142');
+
+    /** Creating row by clicking on `+Add` button */
+    await page.locator('a:has-text("+ Add")').click();
+
+    /** Entering values in the third Row */
+    await page.locator('input[data-test-id="202003240938510823869"] >> nth=2').fill('');
+    await page.locator('input[data-test-id="202003240938510831291"] >> nth=2').fill('Cambridge');
+    await page.locator('input[data-test-id="202003240938510831411"] >> nth=2').fill('MA');
+    await page.locator('input[data-test-id="202003240938510832734"] >> nth=2').fill('02142');
+
     await page.locator('button:has-text("Next")').click();
 
+    await page.locator('span:has-text("Street")').click();
+
+    const table = page.locator('div[id="simple-table-manual"]');
+    let tableCell = table.locator('tbody >> tr >> td >> nth=0');
+    await expect(await tableCell.textContent()).toBe('---');
+
+    await page.locator('span:has-text("Street")').click();
+
+    tableCell = table.locator('tbody >> tr >> td >> nth=0');
+    await expect(await tableCell.textContent()).toBe('Main St');
+
     /** Submitting the case */
     await page.locator('button:has-text("submit")').click();
   }, 10000);

tests/e2e/Digv2/FormFields/Boolean.spec.js

@@ -38,7 +38,10 @@ test.describe('E2E test', () => {
     await page.getByRole('option', { name: 'Required' }).click();
 
     // Checking required boolean field
+    await expect(page.locator('div >> legend:has-text("Required Boolean")')).toBeVisible();
+    await expect(page.locator('div >> p:has-text("Required field")')).toBeVisible();
     const requiredBooleanLabel = page.locator('label[data-test-id="325f4eb20dc7c90a4fb697cd6c6bf0ea"]');
+    await expect(await requiredBooleanLabel.locator('span').getByText('BooleanRequired')).toBeVisible();
     requiredBooleanLabel.click(); // check required field
     requiredBooleanLabel.click(); // uncheck required field
     await expect(page.locator('p.Mui-error.Mui-required')).toBeVisible();

tests/e2e/Digv2/FormFields/Currency.spec.js

@@ -42,9 +42,13 @@ test.describe('E2E test', () => {
     attributes = await common.getAttributes(notRequiredCurrency);
     await expect(attributes.includes('required')).toBeFalsy();
 
+    await expect(page.locator('div >> label').filter({ hasText: 'Required Currency *' })).toBeVisible();
     const requiredCurrency = page.locator('input[data-test-id="77af0bd660f2e0276e23a7db7d48235a"]');
+    await requiredCurrency.pressSequentially('20');
+    await notRequiredCurrency.click();
     attributes = await common.getAttributes(requiredCurrency);
     await expect(attributes.includes('required')).toBeTruthy();
+    await expect(await requiredCurrency.inputValue()).toBe('$20.00');
 
     /** Selecting Disable from the Sub Category dropdown */
     selectedSubCategory = page.locator('div[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
@@ -77,6 +81,7 @@ test.describe('E2E test', () => {
     const readonlyCurrency = page.locator('input[data-test-id="32bc05c9bac42b8d76ea72511afa89d0"]');
     attributes = await common.getAttributes(readonlyCurrency);
     await expect(attributes.includes('readonly')).toBeTruthy();
+    await expect(await readonlyCurrency.inputValue()).toBe('$20.00');
 
     const editableCurrency = page.locator('input[data-test-id="837e53069fc48e63debdee7fa61fbc1a"]');
 
@@ -85,6 +90,13 @@ test.describe('E2E test', () => {
     attributes = await common.getAttributes(editableCurrency);
     await expect(attributes.includes('readonly')).toBeFalsy();
 
+    const currencyAsDecimal = page.locator('input[data-test-id="a792300f2080cdbcf7a496220fa7a44e"]');
+    attributes = await common.getAttributes(currencyAsDecimal);
+    await expect(attributes.includes('readonly')).toBeTruthy();
+    await expect(await currencyAsDecimal.inputValue()).toBe('$20.00');
+    const symbol = page.locator('div:has-text("currencyAsDecimal")');
+    await expect(symbol.locator('p:has-text("$")')).toBeTruthy();
+
     /** Selecting Visibility from the Sub Category dropdown */
     selectedSubCategory = page.locator('div[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
     await selectedSubCategory.click();