test(playwright): add method to verify selected options

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/cell/MultiSelect.vue

@@ -212,6 +212,7 @@ async function addIfMissingAndSave() {
         vModel.value = [...vModel.value];
         tempVal.splice(0, tempVal.length);
       }
+
     } else {
       activeOptCreateInProgress.value--
     }
@@ -281,7 +282,7 @@ const search = () => {
     <template #tagRender="{ value: val, onClose }">
       <a-tag
         v-if="options.find((el) => el.title === val)"
-        class="rounded-tag"
+        class="rounded-tag nc-selected-option"
         :style="{ display: 'flex', alignItems: 'center' }"
         :color="options.find((el) => el.title === val)?.color"
         :closable="(active || editable) && (vModel.length > 1 || !column?.rqd)"

tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts

@@ -136,13 +136,24 @@ export class SelectOptionCellPageObject extends BasePage {
     await selectCell.locator('.ant-select-selection-search-input').press('Enter');
 
     if (multiSelect) await selectCell.locator('.ant-select-selection-search-input').press('Escape');
+    // todo: wait for update api call
+  }
 
-    // await this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option).click();
-    //
-    //
-    // await this.rootPage
-    //   .getByTestId(`select-option-${columnHeader}-${index}`)
-    //   .getByText(option)
-    //   .waitFor({ state: 'hidden' });
+  async verifySelectedOptions({
+    index,
+    options,
+    columnHeader,
+  }: {
+    columnHeader: string;
+    options: string[];
+    index: number;
+  }) {
+    const selectCell = this.get({ index, columnHeader });
+
+    let counter = 0;
+    for (const option of options) {
+      await expect(selectCell.locator(`.nc-selected-option`).nth(counter)).toHaveText(option);
+      counter++;
+    }
   }
 }

tests/playwright/tests/columnMultiSelect.spec.ts

@@ -129,7 +129,7 @@ test.describe('Multi select', () => {
     await grid.column.delete({ title: 'MultiSelect' });
   });
 
-  test.only('Add new option directly from cell', async () => {
+  test('Add new option directly from cell', async () => {
     await grid.cell.selectOption.addNewOption({
       index: 0,
       columnHeader: 'MultiSelect',
@@ -144,13 +144,12 @@ test.describe('Multi select', () => {
       multiSelect: true,
     });
 
-    await grid.cell.selectOption.verifyOptions({
+    await grid.cell.selectOption.verifySelectedOptions({
       index: 0,
       columnHeader: 'MultiSelect',
       options: ['Option added from cell 1', 'Option added from cell 2'],
     });
-    await new Promise(resolve => setTimeout(resolve, 100000));
 
-    await grid.column.delete({ title: 'SingleSelect' });
+    await grid.column.delete({ title: 'MultiSelect' });
   });
 });