fix: filter tests

packages/nc-gui/components/dashboard/settings/BaseSettings.vue

@@ -24,12 +24,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex p-4 justify-center overflow-auto gap-8">
+  <div class="flex p-4 nc-base-settings justify-center overflow-auto gap-8">
     <!-- Left Pane -->
     <div class="flex flex-col">
       <div class="h-full w-60">
         <div
           v-if="isEeUI && hasPermissionForSnapshots"
+          data-testid="snapshots-tab"
           :class="{
             'active-menu': activeMenu === 'snapshots',
           }"
@@ -48,6 +49,7 @@ onMounted(() => {
             'active-menu': activeMenu === 'visibility',
           }"
           class="gap-3 !hover:bg-gray-50 transition-all text-nc-content-gray flex rounded-lg items-center cursor-pointer py-1.5 px-3"
+          data-testid="visibility-tab"
           @click="selectMenu('visibility')"
         >
           <GeneralIcon icon="ncEye" />

packages/nc-gui/components/dashboard/settings/BaseSettings/Visibility.vue

@@ -48,7 +48,7 @@ async function showNullAndEmptyInFilterOnChange(evt: boolean) {
 </script>
 
 <template>
-  <div class="item-card flex flex-col w-full">
+  <div data-testid="nc-settings-subtab-visibility" class="item-card flex flex-col w-full">
     <div class="text-nc-content-gray-emphasis font-semibold text-lg">
       {{ $t('labels.visibilityAndDataHandling') }}
     </div>
@@ -63,7 +63,7 @@ async function showNullAndEmptyInFilterOnChange(evt: boolean) {
           <span class="text-nc-content-gray font-semibold flex-1">
             {{ $t('msg.info.showM2mTables') }}
           </span>
-          <NcSwitch v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']" class="ml-2" />
+          <NcSwitch v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']" class="nc-settings-meta-misc-m2m ml-2" />
         </div>
         <span class="text-gray-500">{{ $t('msg.info.showM2mTablesDesc') }}</span>
       </div>
@@ -73,7 +73,7 @@ async function showNullAndEmptyInFilterOnChange(evt: boolean) {
           <span class="text-nc-content-gray font-semibold flex-1">
             {{ $t('msg.info.showNullInCells') }}
           </span>
-          <NcSwitch v-model:checked="showNull" v-e="['c:settings:show-null']" class="ml-2" />
+          <NcSwitch v-model:checked="showNull" v-e="['c:settings:show-null']" class="ml-2 nc-settings-show-null" />
         </div>
         <span class="text-gray-500">{{ $t('msg.info.showNullInCellsDesc') }}</span>
       </div>
@@ -86,7 +86,7 @@ async function showNullAndEmptyInFilterOnChange(evt: boolean) {
           <NcSwitch
             v-model:checked="showNullAndEmptyInFilter"
             v-e="['c:settings:show-null-and-empty-in-filter']"
-            class="ml-2"
+            class="ml-2 nc-settings-show-null-and-empty-in-filter"
             @change="showNullAndEmptyInFilterOnChange"
           />
         </div>

tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts

@@ -10,11 +10,11 @@ export class MiscSettingsPage extends BasePage {
   }
 
   get() {
-    return this.settings.get().locator(`[data-testid="nc-settings-subtab-Misc"]`);
+    return this.settings.get().locator(`[data-testid="nc-settings-subtab-visibility"]`);
   }
 
   async clickShowM2MTables() {
-    const clickAction = () => this.get().locator('input[type="checkbox"]').first().click();
+    const clickAction = () => this.get().locator('.nc-settings-meta-misc-m2m').first().click();
     await this.waitForResponse({
       uiAction: clickAction,
       requestUrlPathToMatch: 'tables?includeM2M',
@@ -24,7 +24,7 @@ export class MiscSettingsPage extends BasePage {
 
   async clickShowNullEmptyFilters() {
     await this.waitForResponse({
-      uiAction: () => this.get().locator('input[type="checkbox"]').last().click(),
+      uiAction: () => this.rootPage.locator('.nc-settings-show-null-and-empty-in-filter').first().click(),
       requestUrlPathToMatch: '/api/v1/db/meta/projects',
       httpMethodsToMatch: ['PATCH'],
     });

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

@@ -33,7 +33,7 @@ export class SettingsPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator('.nc-modal-settings');
+    return this.rootPage.locator('.nc-base-settings');
   }
 
   async selectTab({ tab, subTab }: { tab: SettingTab; subTab?: SettingsSubTab }) {
@@ -41,18 +41,12 @@ export class SettingsPage extends BasePage {
     if (subTab) await this.get().locator(`li[data-menu-id="${subTab}"]`).click();
   }
 
-  async selectSubTab({ subTab }: { subTab: SettingsSubTab }) {
-    await this.get().locator(`li[data-menu-id="${subTab}"]`).click();
-  }
-
   async close() {
     await this.get().locator('[data-testid="settings-modal-close-button"]').click();
     await this.get().waitFor({ state: 'hidden' });
   }
 
   async toggleNullEmptyFilters() {
-    await this.selectTab({ tab: SettingTab.ProjectSettings, subTab: SettingsSubTab.Miscellaneous });
     await this.miscellaneous.clickShowNullEmptyFilters();
-    await this.close();
   }
 }

tests/playwright/tests/db/features/filters.spec.ts

@@ -120,6 +120,7 @@ test.describe('Filter Tests: Numerical', () => {
     // Enable NULL & EMPTY filters
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'numberBased' });
 
     let eqStringDerived = eqString;
     let isLikeStringDerived = isLikeString;
@@ -309,6 +310,7 @@ test.describe('Filter Tests: Text based', () => {
     // Enable NULL & EMPTY filters
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'textBased' });
 
     const filterList = [
       {
@@ -429,6 +431,7 @@ test.describe('Filter Tests: Select based', () => {
     // Enable NULL & EMPTY filters
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'selectBased' });
 
     const filterList = [
       {
@@ -561,6 +564,7 @@ test.describe('Filter Tests: Date based', () => {
     // Enable NULL & EMPTY filters
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'dateTimeBased' });
 
     // records array with time set to 00:00:00; store time in unix epoch
     const recordsTimeSetToZero = records.list.map(r => {
@@ -865,6 +869,7 @@ test.describe('Filter Tests: AddOn', () => {
     // Enable NULL & EMPTY filters
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'addOnTypes', networkResponse: false });
 
     const filterList = [
       {
@@ -970,6 +975,7 @@ test.describe('Filter Tests: Link to another record, Lookup, Rollup', () => {
     // Enable NULL & EMPTY filters
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'Country', networkResponse: false });
 
     // add filter for CityList column
     const filterList = [
@@ -1008,6 +1014,7 @@ test.describe('Filter Tests: Link to another record, Lookup, Rollup', () => {
     // Enable NULL & EMPTY filters
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'City', networkResponse: false });
 
     // add filter for CityList column
     const filterList = [
@@ -1047,6 +1054,7 @@ test.describe('Filter Tests: Link to another record, Lookup, Rollup', () => {
     // Enable NULL & EMPTY filters
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'City', networkResponse: false });
 
     // add filter for CityList column
     const filterList = [
@@ -1149,6 +1157,7 @@ test.describe('Filter Tests: Toggle button', () => {
     // Enable NULL & EMPTY button
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'Country', networkResponse: false });
 
     // Verify filter options
     await verifyFilterOperatorList({
@@ -1180,6 +1189,7 @@ test.describe('Filter Tests: Toggle button', () => {
     // Disable NULL & EMPTY button
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'Country', networkResponse: false });
     // wait for toast message
     await dashboard.verifyToast({ message: 'Null / Empty filters exist. Please remove them first.' });
 
@@ -1189,6 +1199,7 @@ test.describe('Filter Tests: Toggle button', () => {
     // Disable NULL & EMPTY button
     await dashboard.gotoSettings();
     await dashboard.settings.toggleNullEmptyFilters();
+    await dashboard.treeView.openTable({ title: 'Country', networkResponse: false });
   });
 });