From 3a3d7c37c25f2c798bb564f7379ca9aca87268cb Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:19 +0000
Subject: [PATCH] feat(nc-gui): playwright tests

---
 .../nc-gui/components/nc/DateWeekSelector.vue |   1 +
 .../smartsheet/calendar/DayView/DateField.vue |   1 +
 .../calendar/DayView/DateTimeField.vue        |   4 +-
 .../smartsheet/calendar/MonthView.vue         |   8 +-
 .../smartsheet/calendar/SideMenu.vue          |   8 +-
 .../smartsheet/calendar/YearView.vue          |   6 +-
 .../components/smartsheet/calendar/index.vue  |   5 +-
 .../composables/useCalendarViewStore.ts       |   2 +-
 .../Dashboard/Calendar/CalendarDayDateTime.ts |  46 +++
 .../pages/Dashboard/Calendar/CalendarMonth.ts |  46 +++
 .../Dashboard/Calendar/CalendarSideMenu.ts    |  38 ++
 .../Dashboard/Calendar/CalendarTopBar.ts      |  22 +-
 .../pages/Dashboard/Calendar/CalendarYear.ts  |  26 ++
 .../pages/Dashboard/Calendar/index.ts         |  25 +-
 .../pages/Dashboard/Sidebar/index.ts          |   2 +
 .../Dashboard/common/Toolbar/CalendarRange.ts |  21 +-
 .../pages/Dashboard/common/Toolbar/index.ts   |  13 +
 .../tests/db/views/viewCalendar.spec.ts       | 330 +++++++++++-------
 18 files changed, 460 insertions(+), 144 deletions(-)
 create mode 100644 tests/playwright/pages/Dashboard/Calendar/CalendarDayDateTime.ts
 create mode 100644 tests/playwright/pages/Dashboard/Calendar/CalendarMonth.ts
 create mode 100644 tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts
 create mode 100644 tests/playwright/pages/Dashboard/Calendar/CalendarYear.ts

diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index 04f8a2edee..0e3a1446bd 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -180,6 +180,7 @@ const paginate = (action: 'next' | 'prev') => {
             'rounded-md bg-brand-50 text-brand-500': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
           }"
           class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
+          data-testid="nc-calendar-date"
           @click="handleSelectDate(date)"
         >
           <span v-if="isActiveDate(date)" class="absolute z-2 h-1.5 w-1.5 rounded-full bg-brand-500 top-1 right-1"></span>
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
index 7e0e6ad519..eeaae6dd3d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
@@ -180,6 +180,7 @@ const dropEvent = (event: DragEvent) => {
     <div
       v-for="(record, rowIndex) in recordsAcrossAllRange"
       :key="rowIndex"
+      :data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
       :style="record.rowMeta.style"
       class="absolute mt-2"
       @mouseleave="hoverRecord = null"
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 2bd860fcb3..715e8be16b 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -566,7 +566,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
   <div
     v-if="recordsAcrossAllRange.record.length"
     ref="container"
-    class="w-full relative no-selection h-[calc(100vh-10rem)] overflow-y-auto nc-scrollbar-md"
+    class="w-full relative nc-calendar-day-view no-selection h-[calc(100vh-10rem)] overflow-y-auto nc-scrollbar-md"
   >
     <div
       v-for="(hour, index) in hours"
@@ -677,7 +677,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
       </NcButton>
     </div>
     <div class="absolute inset-0 pointer-events-none">
-      <div class="relative !ml-[60px]">
+      <div class="relative !ml-[60px]" data-testid="nc-calendar-day-record-container">
         <div
           v-for="(record, rowIndex) in recordsAcrossAllRange.record"
           :key="rowIndex"
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 8f2286dd01..ca3f0ed28f 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -695,7 +695,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
 </script>
 
 <template>
-  <div v-if="calendarRange" class="h-full prevent-select relative">
+  <div v-if="calendarRange" class="h-full prevent-select relative" data-testid="nc-calendar-month-view">
     <div class="grid grid-cols-7">
       <div
         v-for="(day, index) in days"
@@ -715,7 +715,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
       class="grid h-full pb-7.5"
       @drop="dropEvent"
     >
-      <div v-for="(week, weekIndex) in dates" :key="weekIndex" class="grid grid-cols-7 grow">
+      <div v-for="(week, weekIndex) in dates" :key="weekIndex" class="grid grid-cols-7 grow" data-testid="nc-calendar-month-week">
         <div
           v-for="(day, dateIndex) in week"
           :key="`${weekIndex}-${dateIndex}`"
@@ -725,6 +725,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
             '!text-gray-400': !isDayInPagedMonth(day),
           }"
           class="text-right relative group last:border-r-0 text-sm h-full border-r-1 border-b-1 border-gray-200 font-medium hover:bg-gray-50 text-gray-800 bg-white"
+          data-testid="nc-calendar-month-day"
           @click="selectDate(day)"
         >
           <div v-if="isUIAllowed('dataEdit')" class="flex justify-between p-1">
@@ -822,10 +823,11 @@ const isDateSelected = (date: dayjs.Dayjs) => {
         </div>
       </div>
     </div>
-    <div class="absolute inset-0 pointer-events-none mt-8 pb-7.5">
+    <div class="absolute inset-0 pointer-events-none mt-8 pb-7.5" data-testid="nc-calendar-month-record-container">
       <div
         v-for="(record, recordIndex) in recordsToDisplay.records"
         :key="recordIndex"
+        :data-testid="`nc-calendar-month-record-${record.row[displayField!.title!]}`"
         :data-unique-id="record.rowMeta.id"
         :style="{
           ...record.rowMeta.style,
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index eb55180f2b..df0110458c 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -269,9 +269,10 @@ onUnmounted(() => {
   <div
     :class="{
       'w-0': !props.visible,
-      'w-1/6 min-w-[22.1rem]': props.visible,
+      'w-1/6 min-w-[22.1rem] nc-calendar-side-menu-open': props.visible,
     }"
     class="h-full border-l-1 border-gray-200 transition-all"
+    data-testid="nc-calendar-side-menu"
   >
     <div
       :class="{
@@ -324,7 +325,7 @@ onUnmounted(() => {
             <component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500" />
           </template>
         </a-input>
-        <NcSelect v-model:value="sideBarFilterOption" class="min-w-36 !text-gray-800">
+        <NcSelect v-model:value="sideBarFilterOption" class="min-w-36 !text-gray-800" data-testid="nc-calendar-sidebar-filter">
           <a-select-option v-for="option in options" :key="option.value" :value="option.value" class="!text-gray-800">
             <NcTooltip :title="option.label" placement="top" show-on-truncate-only>
               <template #title>{{ option.label }}</template>
@@ -343,12 +344,14 @@ onUnmounted(() => {
         'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && height > 918,
       }"
         class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height"
+        data-testid="nc-calendar-side-menu-list"
         @scroll="sideBarListScrollHandle"
       >
         <NcButton
           v-if="isUIAllowed('dataEdit') && props.visible"
           v-e="['c:calendar:calendar-new-record-btn']"
           class="!absolute right-5 !border-brand-500 bottom-5 !h-12 !w-12"
+          data-testid="nc-calendar-side-menu-new-btn"
           type="secondary"
           @click="emit('new-record', { row: {} })"
         >
@@ -389,6 +392,7 @@ onUnmounted(() => {
                   : null
               "
               color="blue"
+              data-testid="nc-sidebar-record-card"
               @click="emit('expand-record', record)"
               @dragstart="dragStart($event, record)"
               @dragover.prevent
diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
index 6a747f61bc..6684ab27af 100644
--- a/packages/nc-gui/components/smartsheet/calendar/YearView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
@@ -11,7 +11,10 @@ const months = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-wrap gap-6 pb-4 items-center justify-center overflow-auto nc-scrollbar-md">
+  <div
+    class="flex flex-wrap gap-6 pb-4 items-center justify-center overflow-auto nc-scrollbar-md"
+    data-testid="nc-calendar-year-view"
+  >
     <NcDateWeekSelector
       v-for="(_, index) in months"
       :key="index"
@@ -19,6 +22,7 @@ const months = computed(() => {
       v-model:page-date="months[index]"
       v-model:selected-date="selectedDate"
       class="max-w-[350px]"
+      data-testid="nc-calendar-year-view-month-selector"
       disable-pagination
     />
   </div>
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index a0f2115469..4ed26fcd0d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -167,7 +167,7 @@ const headerText = computed(() => {
           <NcDropdown v-model:visible="calendarRangeDropdown" :auto-close="false" :trigger="['click']">
             <NcButton :class="{ '!w-24': activeCalendarView === 'year' }" class="w-45" full-width size="small" type="secondary">
               <div class="flex w-full px-3 py-1 w-full items-center justify-between">
-                <span class="font-bold text-center text-brand-500">{{ headerText }}</span>
+                <span class="font-bold text-center text-brand-500" data-testid="nc-calendar-active-date">{{ headerText }}</span>
                 <component :is="iconMap.arrowDown" class="h-4 w-4 text-gray-700" />
               </div>
             </NcButton>
@@ -233,6 +233,9 @@ const headerText = computed(() => {
           >
             Go to Today
           </NcButton>
+          <span class="opacity-0" data-testid="nc-active-calendar-view">
+            {{ activeCalendarView }}
+          </span>
         </div>
         <NcTooltip>
           <template #title> Toggle Sidebar </template>
diff --git a/packages/nc-gui/composables/useCalendarViewStore.ts b/packages/nc-gui/composables/useCalendarViewStore.ts
index ddf68e437c..fa78da7c3a 100644
--- a/packages/nc-gui/composables/useCalendarViewStore.ts
+++ b/packages/nc-gui/composables/useCalendarViewStore.ts
@@ -665,7 +665,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
             ...{},
             ...{ filterArrJson: JSON.stringify([...sideBarFilter.value]) },
           })
-        : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: filterJSON.value })
+        : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: sideBarFilter.value })
 
       formattedSideBarData.value = formatData(res!.list)
       isSidebarLoading.value = false
diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarDayDateTime.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarDayDateTime.ts
new file mode 100644
index 0000000000..59d6524bea
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/Calendar/CalendarDayDateTime.ts
@@ -0,0 +1,46 @@
+import { expect, Locator } from '@playwright/test';
+import BasePage from '../../Base';
+import { CalendarPage } from './index';
+
+export class CalendarMonthPage extends BasePage {
+  readonly parent: CalendarPage;
+
+  constructor(parent: CalendarPage) {
+    super(parent.rootPage);
+    this.parent = parent;
+  }
+
+  get() {
+    return this.rootPage.getByTestId('nc-calendar-day-view');
+  }
+
+  getRecordContainer() {
+    return this.get().getByTestId('nc-calendar-day-record-container');
+  }
+
+  async dragAndDrop({ record, to }: { record: string; to: { rowIndex: number; columnIndex: number } }) {
+    const recordContainer = this.getRecordContainer();
+    const recordCard = recordContainer.getByTestId(`nc-calendar-month-record-${record}`);
+    const toDay = this.get().getByTestId('nc-calendar-month-day').nth(to.columnIndex).nth(to.rowIndex);
+    const cord = await toDay.boundingBox();
+
+    await recordCard.hover();
+    await this.rootPage.mouse.down({ button: 'right' });
+
+    await this.rootPage.mouse.move(cord.x + cord.width / 2, cord.y + cord.height / 2);
+    await this.rootPage.mouse.up();
+  }
+
+  async selectDate({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) {
+    const week = this.get().getByTestId('nc-calendar-month-week');
+
+    const day = week.nth(rowIndex).getByTestId('nc-calendar-month-day').nth(columnIndex);
+    await day.click({
+      force: true,
+      position: {
+        x: 0,
+        y: 1,
+      },
+    });
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarMonth.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarMonth.ts
new file mode 100644
index 0000000000..5fdf198dd9
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/Calendar/CalendarMonth.ts
@@ -0,0 +1,46 @@
+import { expect, Locator } from '@playwright/test';
+import BasePage from '../../Base';
+import { CalendarPage } from './index';
+
+export class CalendarMonthPage extends BasePage {
+  readonly parent: CalendarPage;
+
+  constructor(parent: CalendarPage) {
+    super(parent.rootPage);
+    this.parent = parent;
+  }
+
+  get() {
+    return this.rootPage.getByTestId('nc-calendar-month-view');
+  }
+
+  getRecordContainer() {
+    return this.get().getByTestId('nc-calendar-month-record-container');
+  }
+
+  async dragAndDrop({ record, to }: { record: string; to: { rowIndex: number; columnIndex: number } }) {
+    const recordContainer = this.getRecordContainer();
+    const recordCard = recordContainer.getByTestId(`nc-calendar-month-record-${record}`);
+    const toDay = this.get().getByTestId('nc-calendar-month-day').nth(to.columnIndex).nth(to.rowIndex);
+    const cord = await toDay.boundingBox();
+
+    await recordCard.hover();
+    await this.rootPage.mouse.down({ button: 'right' });
+
+    await this.rootPage.mouse.move(cord.x + cord.width / 2, cord.y + cord.height / 2);
+    await this.rootPage.mouse.up();
+  }
+
+  async selectDate({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) {
+    const week = this.get().getByTestId('nc-calendar-month-week');
+
+    const day = week.nth(rowIndex).getByTestId('nc-calendar-month-day').nth(columnIndex);
+    await day.click({
+      force: true,
+      position: {
+        x: 0,
+        y: 1,
+      },
+    });
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts
new file mode 100644
index 0000000000..ba1e0a2af7
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts
@@ -0,0 +1,38 @@
+import { expect, Locator } from '@playwright/test';
+import BasePage from '../../Base';
+import { CalendarPage } from './index';
+
+export class CalendarSideMenuPage extends BasePage {
+  readonly parent: CalendarPage;
+
+  readonly new_record_btn: Locator;
+
+  constructor(parent: CalendarPage) {
+    super(parent.rootPage);
+    this.parent = parent;
+
+    this.new_record_btn = this.get().getByTestId('nc-calendar-side-menu-new-btn');
+  }
+
+  get() {
+    return this.rootPage.getByTestId('nc-calendar-side-menu');
+  }
+
+  async updateFilter({ filter }: { filter: string }) {
+    const filterInput = this.get().getByTestId('nc-calendar-sidebar-filter');
+    await filterInput.click();
+    await this.rootPage.locator('.rc-virtual-list-holder-inner > div').locator(`text="${filter}"`).click();
+  }
+
+  async verifySideBarRecords({ records }: { records: string[] }) {
+    const sideBar = this.get().getByTestId('nc-calendar-side-menu-list');
+
+    const sideBarRecords = await sideBar.getByTestId('nc-sidebar-record-card');
+
+    await expect(sideBarRecords).toHaveCount(records.length);
+
+    for (let i = 0; i < records.length; i++) {
+      await expect(sideBarRecords.nth(i)).toContainText(records[i]);
+    }
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts
index 0eac1c1b67..b42fd450e9 100644
--- a/tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts
+++ b/tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts
@@ -1,4 +1,4 @@
-import { Locator } from '@playwright/test';
+import { expect, Locator } from '@playwright/test';
 import BasePage from '../../Base';
 import { CalendarPage } from './index';
 
@@ -26,6 +26,16 @@ export class CalendarTopbarPage extends BasePage {
     return this.rootPage.getByTestId('nc-calendar-topbar');
   }
 
+  async getActiveDate() {
+    return this.get().getByTestId('nc-calendar-active-date').textContent();
+  }
+
+  async verifyActiveCalendarView({ view }: { view: string }) {
+    const activeView = this.get().getByTestId('nc-active-calendar-view');
+
+    await expect(activeView).toContainText(view);
+  }
+
   async clickPrev() {
     await this.prev_btn.click();
   }
@@ -36,6 +46,16 @@ export class CalendarTopbarPage extends BasePage {
     await this.today_btn.click();
   }
 
+  async moveToDate({ date, action }: { date: string; action: 'prev' | 'next' }) {
+    while ((await this.getActiveDate()) !== date) {
+      if (action === 'prev') {
+        await this.clickPrev();
+      } else {
+        await this.clickNext();
+      }
+    }
+  }
+
   async toggleSideBar() {
     await this.side_bar_btn.click();
     await this.rootPage.waitForTimeout(500);
diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarYear.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarYear.ts
new file mode 100644
index 0000000000..0b8cdb2c4a
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/Calendar/CalendarYear.ts
@@ -0,0 +1,26 @@
+import { expect, Locator } from '@playwright/test';
+import BasePage from '../../Base';
+import { CalendarPage } from './index';
+
+export class CalendarYearPage extends BasePage {
+  readonly parent: CalendarPage;
+
+  constructor(parent: CalendarPage) {
+    super(parent.rootPage);
+    this.parent = parent;
+  }
+
+  get() {
+    return this.rootPage.getByTestId('nc-calendar-year-view');
+  }
+
+  getMonth({ index }: { index: number }) {
+    return this.get().getByTestId('nc-calendar-year-view-month-selector').nth(index);
+  }
+
+  async selectDate({ monthIndex, dayIndex }: { monthIndex: number; dayIndex: number }) {
+    const month = this.getMonth({ index: monthIndex });
+    const day = month.getByTestId('nc-calendar-date').nth(dayIndex);
+    await day.click({ force: true });
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/Calendar/index.ts b/tests/playwright/pages/Dashboard/Calendar/index.ts
index fbb37520a7..1911eb1edf 100644
--- a/tests/playwright/pages/Dashboard/Calendar/index.ts
+++ b/tests/playwright/pages/Dashboard/Calendar/index.ts
@@ -1,14 +1,21 @@
 import { DashboardPage } from '..';
 import BasePage from '../../Base';
 import { ToolbarPage } from '../common/Toolbar';
+import { expect } from '@playwright/test';
 import { TopbarPage } from '../common/Topbar';
 import { CalendarTopbarPage } from './CalendarTopBar';
+import { CalendarSideMenuPage } from './CalendarSideMenu';
+import { CalendarMonthPage } from './CalendarMonth';
+import { CalendarYearPage } from './CalendarYear';
 
 export class CalendarPage extends BasePage {
   readonly dashboard: DashboardPage;
   readonly toolbar: ToolbarPage;
   readonly topbar: TopbarPage;
   readonly calendarTopbar: CalendarTopbarPage;
+  readonly sideMenu: CalendarSideMenuPage;
+  readonly calendarMonth: CalendarMonthPage;
+  readonly calendarYear: CalendarYearPageß;
 
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
@@ -16,10 +23,26 @@ export class CalendarPage extends BasePage {
     this.toolbar = new ToolbarPage(this);
     this.topbar = new TopbarPage(this);
     this.calendarTopbar = new CalendarTopbarPage(this);
+    this.sideMenu = new CalendarSideMenuPage(this);
+    this.calendarMonth = new CalendarMonthPage(this);
+    this.calendarYear = new CalendarYearPage(this);
   }
 
   get() {
-    return this.get().getByTestId('nc-calendar-wrapper');
+    return this.dashboard.rootPage.getByTestId('nc-calendar-wrapper');
+  }
+
+  async verifySideBarClosed() {
+    const sideBar = this.get().getByTestId('nc-calendar-side-menu');
+    const classList = await sideBar.evaluate(el => [...el.classList]);
+    expect(classList).not.toContain('nc-calendar-side-menu-open');
+  }
+
+  async verifySideBarOpen() {
+    const sideBar = this.get().getByTestId('nc-calendar-side-menu');
+
+    const classList = await sideBar.evaluate(el => [...el.classList]);
+    expect(classList).toContain('nc-calendar-side-menu-open');
   }
 
   async waitLoading() {
diff --git a/tests/playwright/pages/Dashboard/Sidebar/index.ts b/tests/playwright/pages/Dashboard/Sidebar/index.ts
index c3db7f8bca..7b3d3d22fd 100644
--- a/tests/playwright/pages/Dashboard/Sidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/Sidebar/index.ts
@@ -100,6 +100,8 @@ export class SidebarPage extends BasePage {
       createViewTypeButton = this.rootPage.getByTestId('sidebar-view-create-kanban');
     } else if (type === ViewTypes.GALLERY) {
       createViewTypeButton = this.rootPage.getByTestId('sidebar-view-create-gallery');
+    } else if (type === ViewTypes.CALENDAR) {
+      createViewTypeButton = this.rootPage.getByTestId('sidebar-view-create-calendar');
     }
 
     await this.rootPage.waitForTimeout(750);
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/CalendarRange.ts b/tests/playwright/pages/Dashboard/common/Toolbar/CalendarRange.ts
index b960bc3f85..f74469c833 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/CalendarRange.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/CalendarRange.ts
@@ -1,5 +1,7 @@
 import BasePage from '../../../Base';
 import { ToolbarPage } from './index';
+import { getTextExcludeIconText } from '../../../../tests/utils/general';
+import { expect } from '@playwright/test';
 
 export class ToolbarCalendarRangePage extends BasePage {
   readonly toolbar: ToolbarPage;
@@ -19,11 +21,24 @@ export class ToolbarCalendarRangePage extends BasePage {
   }
 
   async newCalendarRange({ fromTitle, toTitle }: { fromTitle: string; toTitle?: string }) {
-    await this.get().getByTestId(`nc-calendar-range-from-field-selec`).click();
-    await this.rootPage.locator('.ant-picker-cell-in-view').locator(`:text("${fromTitle}")`).click();
+    await this.get().getByTestId(`nc-calendar-range-from-field-select`).click();
+    await this.rootPage.locator('.rc-virtual-list-holder-inner > div').locator(`text="${fromTitle}"`).click();
     if (toTitle) {
       await this.get().getByTestId(`nc-calendar-range-to-field-select`).click();
-      await this.rootPage.locator('.ant-picker-cell-in-view').locator(`:text("${toTitle}")`).click();
+      await this.rootPage.locator('.ant-select-item-option-content').locator(`:text("${toTitle}")`).click();
+    }
+  }
+
+  async verifyCalendarRange({ fromTitle, toTitle }: { fromTitle: string; toTitle?: string }) {
+    const from = await this.get().getByTestId('nc-calendar-range-from-field-select');
+
+    const fromFieldText = await getTextExcludeIconText(from);
+    expect(fromFieldText).toBe(fromTitle);
+
+    if (toTitle) {
+      const to = await this.get().getByTestId('nc-calendar-range-to-field-select');
+      const toFieldText = await getTextExcludeIconText(to);
+      expect(toFieldText).toBe(toTitle);
     }
   }
 }
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
index 22200f1e44..36f7ebbc20 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
@@ -19,6 +19,7 @@ import { getTextExcludeIconText } from '../../../../tests/utils/general';
 import { ToolbarGroupByPage } from './Groupby';
 import { ToolbarCalendarViewModePage } from './CalendarViewMode';
 import { CalendarPage } from '../../Calendar';
+import { ToolbarCalendarRangePage } from './CalendarRange';
 
 export class ToolbarPage extends BasePage {
   readonly parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage | CalendarPage;
@@ -33,12 +34,14 @@ export class ToolbarPage extends BasePage {
   readonly searchData: ToolbarSearchDataPage;
   readonly rowHeight: RowHeight;
   readonly calendarViewMode: ToolbarCalendarViewModePage;
+  readonly calendarRange: ToolbarCalendarRangePage;
 
   readonly btn_fields: Locator;
   readonly btn_sort: Locator;
   readonly btn_filter: Locator;
   readonly btn_rowHeight: Locator;
   readonly btn_groupBy: Locator;
+  readonly btn_calendarSettings: Locator;
 
   constructor(parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage | CalendarPage) {
     super(parent.rootPage);
@@ -54,12 +57,14 @@ export class ToolbarPage extends BasePage {
     this.searchData = new ToolbarSearchDataPage(this);
     this.rowHeight = new RowHeight(this);
     this.calendarViewMode = new ToolbarCalendarViewModePage(this);
+    this.calendarRange = new ToolbarCalendarRangePage(this);
 
     this.btn_fields = this.get().locator(`button.nc-fields-menu-btn`);
     this.btn_sort = this.get().locator(`button.nc-sort-menu-btn`);
     this.btn_filter = this.get().locator(`button.nc-filter-menu-btn`);
     this.btn_rowHeight = this.get().locator(`button.nc-height-menu-btn`);
     this.btn_groupBy = this.get().locator(`button.nc-group-by-menu-btn`);
+    this.btn_calendarSettings = this.get().getByTestId('nc-calendar-range-btn');
   }
 
   get() {
@@ -75,6 +80,14 @@ export class ToolbarPage extends BasePage {
     if (menuOpen) await this.fields.get().waitFor({ state: 'hidden' });
   }
 
+  async clickCalendarViewSettings() {
+    const menuOpen = await this.calendarRange.get().isVisible();
+    await this.btn_calendarSettings.click();
+
+    // Wait for the menu to close
+    if (menuOpen) await this.calendarRange.get().waitFor({ state: 'hidden' });
+  }
+
   async clickFields() {
     const menuOpen = await this.fields.get().isVisible();
 
diff --git a/tests/playwright/tests/db/views/viewCalendar.spec.ts b/tests/playwright/tests/db/views/viewCalendar.spec.ts
index a75105c48b..3dae8e3a87 100644
--- a/tests/playwright/tests/db/views/viewCalendar.spec.ts
+++ b/tests/playwright/tests/db/views/viewCalendar.spec.ts
@@ -3,11 +3,43 @@ import { DashboardPage } from '../../../pages/Dashboard';
 import { ToolbarPage } from '../../../pages/Dashboard/common/Toolbar';
 
 import setup, { unsetup } from '../../../setup';
-import { enableQuickRun, isPg, isSqlite } from '../../../setup/db';
 import { TopbarPage } from '../../../pages/Dashboard/common/Topbar';
 import { CalendarTopbarPage } from '../../../pages/Dashboard/Calendar/CalendarTopBar';
 
-const filmRatings = ['G', 'PG', 'PG-13', 'R', 'NC-17'];
+const dateRecords = [
+  {
+    Title: 'Team Catchup',
+    StartDate: '2024-01-01 09:00',
+    EndDate: '2024-01-01 10:00',
+  },
+  {
+    Title: 'Lunch with John',
+    StartDate: '2024-01-01 12:00',
+    EndDate: '2024-01-01 13:00',
+  },
+
+  {
+    Title: 'Meeting with Client',
+    StartDate: '2024-01-01 14:00',
+    EndDate: '2024-01-01 15:00',
+  },
+  {
+    Title: 'Meeting with Team',
+    StartDate: '2024-01-01 16:00',
+    EndDate: '2024-01-01 17:00',
+  },
+
+  {
+    Title: 'Meeting with Manager',
+    StartDate: '2024-01-01 18:00',
+    EndDate: '2024-01-01 19:00',
+  },
+  {
+    Title: 'Meeting with HR',
+    StartDate: '2024-01-01 20:00',
+    EndDate: '2024-01-01 21:00',
+  },
+];
 
 test.describe('View', () => {
   let dashboard: DashboardPage, toolbar: ToolbarPage, topbar: TopbarPage, calendarTopbar: CalendarTopbarPage;
@@ -20,7 +52,52 @@ test.describe('View', () => {
     topbar = dashboard.calendar.topbar;
     calendarTopbar = dashboard.calendar.calendarTopbar;
 
-    // await dashboard.treeView.openTable({ title: 'Film' });
+    await dashboard.treeView.createTable({
+      title: 'Social Media Calendar',
+      baseTitle: 'Getting Started',
+    });
+
+    await dashboard.treeView.openTable({ title: 'Social Media Calendar' });
+
+    await dashboard.grid.column.create({
+      title: 'StartDate',
+      type: 'DateTime',
+      dateFormat: 'YYYY-MM-DD',
+      timeFormat: 'HH:mm',
+    });
+
+    await dashboard.grid.column.create({
+      title: 'EndDate',
+      type: 'DateTime',
+      dateFormat: 'YYYY-MM-DD',
+      timeFormat: 'HH:mm',
+    });
+
+    for (let i = 0; i < dateRecords.length; i++) {
+      await dashboard.grid.addNewRow({
+        index: i,
+        columnHeader: 'Title',
+        value: dateRecords[i].Title,
+        networkValidation: false,
+      });
+    }
+
+    for (let i = 0; i < dateRecords.length; i++) {
+      await dashboard.grid.cell.dateTime.setDateTime({
+        index: i,
+        columnHeader: 'StartDate',
+        dateTime: dateRecords[i].StartDate,
+      });
+    }
+    for (let i = 0; i < dateRecords.length; i++) {
+      await dashboard.grid.cell.dateTime.setDateTime({
+        index: i,
+        columnHeader: 'EndDate',
+        dateTime: dateRecords[i].EndDate,
+      });
+    }
+
+    await dashboard.rootPage.waitForTimeout(5000);
   });
 
   test.afterEach(async () => {
@@ -28,142 +105,107 @@ test.describe('View', () => {
   });
 
   test('Calendar', async () => {
-    /*await dashboard.viewSidebar.createKanbanView({
-      title: 'Film Kanban',
+    await dashboard.viewSidebar.createCalendarView({
+      title: 'Calendar',
     });
+
     await dashboard.viewSidebar.verifyView({
-      title: 'Film Kanban',
+      title: 'Calendar',
       index: 0,
     });
 
-    // configure stack-by field
-    await toolbar.clickStackByField();
-    await toolbar.stackBy.click({ title: 'Rating' });
+    await dashboard.viewSidebar.openView({ title: 'Calendar' });
 
-    // menu overlaps the stack-by field; use escape key to close instead of clicking it explicitly
-    // click again to close menu
-    // await toolbar.clickStackByField();
-    await toolbar.rootPage.keyboard.press('Escape');
+    await toolbar.clickCalendarViewSettings();
 
-    const kanban = dashboard.kanban;
-    await kanban.verifyStackCount({ count: 6 });
-    await kanban.verifyStackOrder({
-      order: ['Uncategorized', 'G', 'PG', 'PG-13', 'R', 'NC-17'],
-    });
-    await kanban.verifyStackFooter({
-      count: [0, 178, 194, 223, 195, 210],
-    });
-    await kanban.verifyCardCount({
-      count: [0, 25, 25, 25, 25, 25],
+    await toolbar.calendarRange.newCalendarRange({
+      fromTitle: 'EndDate',
     });
 
-    // hide fields
-    await toolbar.fields.toggleShowAllFields();
-    await toolbar.fields.toggleShowAllFields();
-    await toolbar.fields.toggle({ title: 'Title' });
-    await kanban.verifyCardCount({
-      count: [0, 25, 25, 25, 25, 25],
-    });
+    await toolbar.clickCalendarViewSettings();
 
-    // verify card order
-    const order = [
-      ['ACE GOLDFINGER', 'AFFAIR PREJUDICE', 'AFRICAN EGG'],
-      ['ACADEMY DINOSAUR', 'AGENT TRUMAN', 'ALASKA PHANTOM'],
-      ['AIRPLANE SIERRA', 'ALABAMA DEVIL', 'ALTER VICTORY'],
-      ['AIRPORT POLLOCK', 'ALONE TRIP', 'AMELIE HELLFIGHTERS'],
-      ['ADAPTATION HOLES', 'ALADDIN CALENDAR', 'ALICE FANTASIA'],
-    ];
-    for (let i = 1; i <= order.length; i++)
-      await kanban.verifyCardOrder({
-        stackIndex: i,
-        order: order[i - 1],
-      });
+    const calendar = dashboard.calendar;
 
-    // // verify inter stack drag-drop
-    // await kanban.dragDropCard({
-    //   from: "ACE GOLDFINGER",
-    //   to: "ACADEMY DINOSAUR",
-    // });
+    await calendar.verifySideBarOpen();
 
-    // verify drag drop stack
-    await kanban.dragDropStack({
-      from: 1, // G
-      to: 2, // PG
-    });
-    await kanban.verifyStackOrder({
-      order: ['Uncategorized', 'PG', 'G', 'PG-13', 'R', 'NC-17'],
-    });
-    // verify drag drop stack
-    await kanban.dragDropStack({
-      from: 2, // G
-      to: 1, // PG
-    });
-    await kanban.verifyStackOrder({
-      order: ['Uncategorized', 'G', 'PG', 'PG-13', 'R', 'NC-17'],
+    await calendarTopbar.toggleSideBar();
+
+    await calendar.verifySideBarClosed();
+
+    await calendarTopbar.toggleSideBar();
+
+    await calendar.verifySideBarOpen();
+
+    await calendarTopbar.verifyActiveCalendarView({ view: 'month' });
+
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
+
+    await calendarTopbar.verifyActiveCalendarView({ view: 'week' });
+
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'day' });
+
+    await calendarTopbar.verifyActiveCalendarView({ view: 'day' });
+
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'month' });
+
+    await calendarTopbar.verifyActiveCalendarView({ view: 'month' });
+
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'year' });
+
+    await calendarTopbar.verifyActiveCalendarView({ view: 'year' });
+
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'month' });
+
+    await calendarTopbar.moveToDate({ date: 'January 2024', action: 'prev' });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: dateRecords.map(r => r.Title) });
+
+    await calendar.sideMenu.updateFilter({
+      filter: 'Without dates',
     });
 
-    // verify sort
-    await toolbar.sort.add({
-      title: 'Title',
-      ascending: false,
-      locallySaved: false,
+    await calendar.sideMenu.verifySideBarRecords({ records: Array(12).fill('') });
+
+    await calendar.sideMenu.updateFilter({
+      filter: 'All records',
     });
-    // verify card order
-    const order2 = [
-      ['YOUNG LANGUAGE', 'WEST LION'],
-      ['WORST BANGER', 'WORDS HUNTER'],
-    ];
-    for (let i = 1; i <= order2.length; i++)
-      await kanban.verifyCardOrder({
-        stackIndex: i,
-        order: order2[i - 1],
-      });
-    await toolbar.sort.reset();
-    // verify card order
-    const order3 = [
-      ['ACE GOLDFINGER', 'AFFAIR PREJUDICE', 'AFRICAN EGG'],
-      ['ACADEMY DINOSAUR', 'AGENT TRUMAN', 'ALASKA PHANTOM'],
-    ];
-    for (let i = 1; i <= order3.length; i++)
-      await kanban.verifyCardOrder({
-        stackIndex: i,
-        order: order3[i - 1],
-      });
 
-    // verify filter
-    await toolbar.clickFilter({
-      networkValidation: true,
+    await calendar.sideMenu.verifySideBarRecords({
+      records: [...dateRecords.map(r => r.Title), ...Array(12).fill('')],
     });
-    await toolbar.filter.add({
-      title: 'Title',
-      operation: 'is like',
-      value: 'BA',
-      locallySaved: false,
+
+    await calendar.sideMenu.updateFilter({
+      filter: 'In selected date',
     });
-    await toolbar.clickFilter();
 
-    // verify card order
-    const order4 = [
-      ['BAKED CLEOPATRA', 'BALLROOM MOCKINGBIRD'],
-      ['ARIZONA BANG', 'EGYPT TENENBAUMS'],
-    ];
-    for (let i = 1; i <= order4.length; i++)
-      await kanban.verifyCardOrder({
-        stackIndex: i,
-        order: order4[i - 1],
-      });
-    await toolbar.filter.reset();
-    const order5 = [
-      ['ACE GOLDFINGER', 'AFFAIR PREJUDICE', 'AFRICAN EGG'],
-      ['ACADEMY DINOSAUR', 'AGENT TRUMAN', 'ALASKA PHANTOM'],
-    ];
-    for (let i = 1; i <= order5.length; i++)
-      await kanban.verifyCardOrder({
-        stackIndex: i,
-        order: order5[i - 1],
-      });
+    await calendar.calendarMonth.selectDate({ rowIndex: 0, columnIndex: 0 });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: dateRecords.map(r => r.Title) });
+
+    await calendar.calendarMonth.selectDate({ rowIndex: 0, columnIndex: 3 });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: [] });
 
-    await dashboard.rootPage.waitForTimeout(1000);*/
+    /* await calendar.calendarMonth.dragAndDrop({
+      record: dateRecords[0].Title,
+      to: { rowIndex: 0, columnIndex: 3 },
+    });*/
+
+    await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'year' });
+
+    await calendar.calendarYear.selectDate({ monthIndex: 0, dayIndex: 0 });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: dateRecords.map(r => r.Title) });
+
+    await calendar.sideMenu.updateFilter({ filter: 'In selected date' });
+
+    await calendar.calendarYear.selectDate({ monthIndex: 0, dayIndex: 3 });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: [] });
+
+    await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'day' });
+
+    await dashboard.rootPage.waitForTimeout(10000);
   });
 
   test('Calendar view operations', async () => {
@@ -292,29 +334,59 @@ test.describe('View', () => {
     });*/
   });
 
-  test.skip('Calendar shared view operations', async ({ page }) => {
+  test.only('Calendar shared view operations', async ({ page }) => {
     test.slow();
-    /*
-    await dashboard.viewSidebar.createKanbanView({
-      title: 'Film Kanban',
+    await dashboard.viewSidebar.createCalendarView({
+      title: 'Calendar',
     });
+
     await dashboard.viewSidebar.verifyView({
-      title: 'Film Kanban',
+      title: 'Calendar',
       index: 0,
     });
 
+    await dashboard.rootPage.waitForTimeout(12000);
+
     // Share view
-    await toolbar.fields.toggle({ title: 'Rating' });
     const sharedLink = await topbar.getSharedViewUrl();
-    // await toolbar.shareView.close();
 
     // sign-out
     await dashboard.signOut();
 
-    // Open shared view & verify stack count
+    // Open shared view & verify Data
     await page.goto(sharedLink);
     await page.reload();
-    const kanban = dashboard.kanban;
-    await kanban.verifyStackCount({ count: 6 });*/
+
+    const calendar = dashboard.calendar;
+
+    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'month' });
+
+    await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
+
+    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'week' });
+
+    await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'day' });
+
+    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'day' });
+
+    await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'month' });
+
+    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'month' });
+
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'year' });
+
+    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'year' });
+
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'month' });
+
+    await calendar.calendarTopbar.moveToDate({ date: 'January 2024', action: 'prev' });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: dateRecords.map(r => r.Title) });
+
+    await calendar.sideMenu.updateFilter({
+      filter: 'Without dates',
+    });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: Array(12).fill('') });
   });
 });