test(playwright): add test for view icon change

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

packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue

@@ -169,7 +169,7 @@ function onStopEdit() {
       <div class="flex w-auto min-w-5" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
         <a-dropdown :trigger="['click']" @click.stop>
           <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
-            <GeneralViewIcon :meta="props.view"></GeneralViewIcon>
+            <GeneralViewIcon :meta="props.view" class="nc-view-icon"></GeneralViewIcon>
             <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
           </component>
 

tests/playwright/pages/Dashboard/ViewSidebar/index.ts

@@ -140,6 +140,27 @@ export class ViewSidebarPage extends BasePage {
     await this.verifyToast({ message: 'View created successfully' });
   }
 
+  async changeViewIcon({ title, icon }: { title: string; icon: string }) {
+    await this.get().locator(`[data-testid="view-sidebar-view-${title}"] .nc-view-icon`).click();
+
+    await this.rootPage.getByTestId('nc-emoji-filter').type(icon);
+    await this.rootPage.getByTestId('nc-emoji-container').locator(`.nc-emoji-item >> svg`).first().click();
+
+    await this.rootPage.getByTestId('nc-emoji-container').isHidden();
+    await expect(
+      this.get().locator(`[data-testid="view-sidebar-view-${title}"] [data-testid="nc-icon-emojione:${icon}"]`)
+    ).toHaveCount(1);
+  }
+
+  async verifyTabIcon({ title, icon }: { title: string; icon: string }) {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    await expect(
+      this.rootPage.locator(
+        `[data-testid="nc-tab-title"]:has-text("${title}") [data-testid="nc-tab-icon-emojione:${icon}"]`
+      )
+    ).toBeVisible();
+  }
+
   async validateRoleAccess(param: { role: string }) {
     const count = param.role === 'creator' ? 1 : 0;
     await expect(this.createGridButton).toHaveCount(count);

tests/playwright/tests/viewKanban.spec.ts

@@ -19,7 +19,7 @@ test.describe('View', () => {
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: 'Team & Auth' });
     await dashboard.treeView.openTable({ title: 'Film' });
-    
+
     if (isSqlite(context)) {
       await dashboard.treeView.deleteTable({ title: 'FilmList' });
     }
@@ -237,6 +237,11 @@ test.describe('View', () => {
         order: order2[i - 1],
       });
 
+    await dashboard.viewSidebar.changeViewIcon({
+      title: 'Kanban-1',
+      icon: 'american-football',
+    });
+
     await dashboard.viewSidebar.deleteView({ title: 'Kanban-1' });
     ///////////////////////////////////////////////
 

tests/playwright/tests/views.spec.ts

@@ -44,6 +44,11 @@ test.describe('Views CRUD Operations', () => {
       title: 'CityGallery',
       newTitle: 'CityGallery2',
     });
+
+    await dashboard.viewSidebar.changeViewIcon({
+      title: 'CityGallery',
+      icon: 'american-football',
+    });
     await dashboard.viewSidebar.verifyView({
       title: 'CityGallery2',
       index: 3,