test: tests for date field type

packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue

@@ -175,14 +175,15 @@ const dropEvent = (event: DragEvent) => {
     v-if="recordsAcrossAllRange.length"
     ref="container"
     class="w-full relative h-[calc(100vh-10.8rem)] overflow-y-auto nc-scrollbar-md"
+    data-testid="nc-calendar-day-view"
     @drop="dropEvent"
   >
     <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"
+      data-testid="nc-calendar-day-record-card"
       @mouseleave="hoverRecord = null"
       @mouseover="hoverRecord = record.rowMeta.id as string"
     >

packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

@@ -339,6 +339,7 @@ onUnmounted(() => {
             '!border-brand-500': searchQuery.value.length > 0,
           }"
           class="!rounded-lg !h-8 !border-gray-200 !px-4"
+          data-testid="nc-calendar-sidebar-search"
           placeholder="Search records"
         >
           <template #prefix>

packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue

@@ -595,7 +595,8 @@ const dropEvent = (event: DragEvent) => {
           '!border-1 !border-t-0 border-brand-500': dayjs(date).isSame(selectedDate, 'day'),
         }"
         class="flex flex-col border-r-1 min-h-[100vh] last:border-r-0 items-center w-1/7"
-        @click="selectedDate = date"
+        data-testid="nc-calendar-week-day"
+        @click="selectedDate = dayjs(date)"
       ></div>
     </div>
     <div
@@ -605,7 +606,6 @@ const dropEvent = (event: DragEvent) => {
       <div
         v-for="(record, id) in calendarData"
         :key="id"
-        :data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`"
         :data-unique-id="record.rowMeta.id"
         :style="{
           ...record.rowMeta.style,
@@ -615,6 +615,7 @@ const dropEvent = (event: DragEvent) => {
               : 'none',
         }"
         class="absolute group draggable-record pointer-events-auto"
+        data-testid="nc-calendar-week-record-card"
         @mousedown="dragStart($event, record)"
         @mouseleave="hoverRecord = null"
         @mouseover="hoverRecord = record.rowMeta.id"

packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

@@ -775,11 +775,11 @@ const viewMore = (hour: dayjs.Dayjs) => {
         </div>
       </div>
 
-      <div class="absolute pointer-events-none inset-0 !mt-[25px]">
+      <div class="absolute pointer-events-none inset-0 !mt-[25px]" data-testid="nc-calendar-week-record-container">
         <div
           v-for="(record, rowIndex) in recordsAcrossAllRange.records"
           :key="rowIndex"
-          :data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`"
+          :data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
           :data-unique-id="record.rowMeta!.id"
           :style="record.rowMeta!.style"
           class="absolute draggable-record w-1/7 group cursor-pointer pointer-events-auto"

tests/playwright/pages/Dashboard/Calendar/CalendarDayDate.ts

@@ -0,0 +1,26 @@
+import BasePage from '../../Base';
+import { CalendarPage } from './index';
+import { expect } from '@playwright/test';
+
+export class CalendarDayDatePage extends BasePage {
+  readonly parent: CalendarPage;
+
+  constructor(parent: CalendarPage) {
+    super(parent.rootPage);
+    this.parent = parent;
+  }
+
+  get() {
+    return this.rootPage.getByTestId('nc-calendar-day-view');
+  }
+
+  async verifyRecord(data: { records: string[] }) {
+    const records = await this.get().getByTestId('nc-calendar-day-record-card');
+
+    await expect(records).toHaveCount(data.records.length);
+
+    for (let i = 0; i < data.records.length; i++) {
+      await expect(records.nth(i)).toContainText(data.records[i]);
+    }
+  }
+}

tests/playwright/pages/Dashboard/Calendar/CalendarDayDateTime.ts

@@ -23,9 +23,21 @@ export class CalendarDayDateTimePage extends BasePage {
     const toDay = this.get().getByTestId('nc-calendar-day-hour').nth(hourIndex);
     const cord = await toDay.boundingBox();
 
+    await recordCard.scrollIntoViewIfNeeded();
     await recordCard.hover();
-    await this.rootPage.mouse.down({ button: 'right' });
+    await this.rootPage.mouse.down();
+    await this.rootPage.waitForTimeout(500);
+
+    await toDay.scrollIntoViewIfNeeded();
+
+    // Bit Flaky
+    await this.rootPage.waitForTimeout(500);
+
     await this.rootPage.mouse.move(cord.x + cord.width / 2, cord.y + cord.height / 2);
+
+    // Bit Flaky
+    await this.rootPage.waitForTimeout(500);
+
     await this.rootPage.mouse.up();
   }
 

tests/playwright/pages/Dashboard/Calendar/CalendarMonth.ts

@@ -20,13 +20,19 @@ export class CalendarMonthPage extends BasePage {
   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 toDay = this.get()
+      .getByTestId('nc-calendar-month-week')
+      .nth(to.rowIndex)
+      .getByTestId('nc-calendar-month-day')
+      .nth(to.columnIndex);
     const cord = await toDay.boundingBox();
 
     await recordCard.hover();
-    await this.rootPage.mouse.down({ button: 'right' });
+    await this.rootPage.mouse.down();
 
-    await this.rootPage.mouse.move(cord.x + cord.width / 2, cord.y + cord.height / 2);
+    await this.rootPage.waitForTimeout(500);
+
+    await this.rootPage.mouse.move(cord.x + cord.width / 2, cord.y + cord.height / 2, { steps: 10 });
     await this.rootPage.mouse.up();
   }
 

tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts

@@ -24,6 +24,11 @@ export class CalendarSideMenuPage extends BasePage {
     await this.rootPage.locator('.rc-virtual-list-holder-inner > div').locator(`text="${filter}"`).click();
   }
 
+  async searchRecord({ query }: { query: string }) {
+    const searchInput = this.get().getByTestId('nc-calendar-sidebar-search');
+    await searchInput.fill(query);
+  }
+
   async verifySideBarRecords({ records }: { records: string[] }) {
     const sideBar = this.get().getByTestId('nc-calendar-side-menu-list');
 

tests/playwright/pages/Dashboard/Calendar/CalendarWeekDate.ts

@@ -0,0 +1,45 @@
+import BasePage from '../../Base';
+import { CalendarPage } from './index';
+
+export class CalendarWeekDatePage extends BasePage {
+  readonly parent: CalendarPage;
+
+  constructor(parent: CalendarPage) {
+    super(parent.rootPage);
+    this.parent = parent;
+  }
+
+  get() {
+    return this.rootPage.getByTestId('nc-calendar-week-view');
+  }
+
+  getRecordContainer() {
+    return this.get().getByTestId('nc-calendar-week-record-container');
+  }
+
+  async dragAndDrop({ record, dayIndex }: { record: string; dayIndex: number }) {
+    const recordContainer = this.getRecordContainer();
+    const recordCard = recordContainer.getByTestId(`nc-calendar-week-record-${record}`);
+    const toDay = this.get().getByTestId('nc-calendar-week-day').nth(dayIndex);
+    const cord = await toDay.boundingBox();
+
+    await recordCard.hover();
+    await this.rootPage.mouse.down();
+    await this.rootPage.waitForTimeout(500);
+
+    await this.rootPage.mouse.move(cord.x + cord.width / 2, cord.y + cord.height / 2);
+    await this.rootPage.mouse.up();
+  }
+
+  async selectDay({ dayIndex }: { dayIndex: number }) {
+    const day = this.get().getByTestId('nc-calendar-week-day').nth(dayIndex);
+
+    await day.click({
+      force: true,
+      position: {
+        x: 0,
+        y: 1,
+      },
+    });
+  }
+}

tests/playwright/pages/Dashboard/Calendar/CalendarWeekDateTime.ts

@@ -17,14 +17,29 @@ export class CalendarWeekDateTimePage extends BasePage {
     return this.get().getByTestId('nc-calendar-week-record-container');
   }
 
-  async dragAndDrop({ record, hourIndex }: { record: string; hourIndex: number }) {
+  async dragAndDrop({
+    record,
+    to,
+  }: {
+    record: string;
+    to: {
+      dayIndex: number;
+      hourIndex: number;
+    };
+  }) {
     const recordContainer = this.getRecordContainer();
     const recordCard = recordContainer.getByTestId(`nc-calendar-week-record-${record}`);
-    const toDay = this.get().getByTestId('nc-calendar-day-hour').nth(hourIndex);
+    const toDay = this.get()
+      .getByTestId('nc-calendar-week-day')
+      .nth(to.dayIndex)
+      .getByTestId('nc-calendar-week-hour')
+      .nth(to.hourIndex);
     const cord = await toDay.boundingBox();
 
     await recordCard.hover();
-    await this.rootPage.mouse.down({ button: 'right' });
+    await this.rootPage.mouse.down();
+    await this.rootPage.waitForTimeout(500);
+
     await this.rootPage.mouse.move(cord.x + cord.width / 2, cord.y + cord.height / 2);
     await this.rootPage.mouse.up();
   }

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

@@ -9,6 +9,8 @@ import { CalendarMonthPage } from './CalendarMonth';
 import { CalendarYearPage } from './CalendarYear';
 import { CalendarDayDateTimePage } from './CalendarDayDateTime';
 import { CalendarWeekDateTimePage } from './CalendarWeekDateTime';
+import { CalendarDayDatePage } from './CalendarDayDate';
+import { CalendarWeekDatePage } from './CalendarWeekDate';
 
 export class CalendarPage extends BasePage {
   readonly dashboard: DashboardPage;
@@ -20,6 +22,8 @@ export class CalendarPage extends BasePage {
   readonly calendarYear: CalendarYearPage;
   readonly calendarDayDateTime: CalendarDayDateTimePage;
   readonly calendarWeekDateTime: CalendarWeekDateTimePage;
+  readonly calendarDayDate: CalendarDayDatePage;
+  readonly calendarWeekDate: CalendarWeekDatePage;
 
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
@@ -32,6 +36,8 @@ export class CalendarPage extends BasePage {
     this.calendarYear = new CalendarYearPage(this);
     this.calendarDayDateTime = new CalendarDayDateTimePage(this);
     this.calendarWeekDateTime = new CalendarWeekDateTimePage(this);
+    this.calendarDayDate = new CalendarDayDatePage(this);
+    this.calendarWeekDate = new CalendarWeekDatePage(this);
   }
 
   get() {

tests/playwright/pages/Dashboard/Grid/Column/index.ts

@@ -28,10 +28,6 @@ export class ColumnPageObject extends BasePage {
     return this.grid.get().locator(`.nc-grid-header > th`).nth(index);
   }
 
-  private getColumnHeader(title: string) {
-    return this.grid.get().locator(`th[data-title="${title}"]`).first();
-  }
-
   async clickColumnHeader({ title }: { title: string }) {
     await this.getColumnHeader(title).click();
   }
@@ -221,7 +217,7 @@ export class ColumnPageObject extends BasePage {
   }
 
   async selectType({ type }: { type: string }) {
-    await this.get().locator('.ant-select-selector > .ant-select-selection-item').click();
+    await this.get().locator('.ant-select-selector > .ant-select-selection-item').first().click();
 
     await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').waitFor();
     await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').fill(type);
@@ -275,7 +271,6 @@ export class ColumnPageObject extends BasePage {
     await this.rootPage.locator('.ant-modal.active').waitFor({ state: 'hidden' });
   }
 
-  // opening edit modal in table header  double click
   // or in the dropdown edit click
   async openEdit({
     title,
@@ -299,6 +294,8 @@ export class ColumnPageObject extends BasePage {
 
     await this.get().waitFor({ state: 'visible' });
 
+    await this.selectType({ type });
+
     switch (type) {
       case 'Formula':
         await this.get().locator('.nc-formula-input').fill(formula);
@@ -329,6 +326,8 @@ export class ColumnPageObject extends BasePage {
     }
   }
 
+  // opening edit modal in table header  double click
+
   async editMenuShowMore() {
     await this.rootPage.locator('.nc-more-options').click();
   }
@@ -480,4 +479,8 @@ export class ColumnPageObject extends BasePage {
     const cell = this.rootPage.locator(`th[data-title="${title}"]`);
     return await cell.evaluate(el => el.getBoundingClientRect().width);
   }
+
+  private getColumnHeader(title: string) {
+    return this.grid.get().locator(`th[data-title="${title}"]`).first();
+  }
 }

tests/playwright/tests/db/views/viewCalendar.spec.ts

@@ -104,7 +104,7 @@ test.describe('View', () => {
     await unsetup(context);
   });
 
-  test('Calendar', async () => {
+  test('Calendar Sidebar Verify Sidebar Filter, Calendar View Mode', async () => {
     // Create & Verify Calendar View
     await dashboard.viewSidebar.createCalendarView({
       title: 'Calendar',
@@ -172,10 +172,20 @@ test.describe('View', () => {
 
     await calendar.sideMenu.verifySideBarRecords({ records: Array(12).fill('') });
 
+    await calendar.sideMenu.searchRecord({ query: 'ooooooo' });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: [] });
+
     await calendar.sideMenu.updateFilter({
       filter: 'All records',
     });
 
+    await calendar.sideMenu.searchRecord({ query: 'Team' });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: ['Team Catchup', ['Meeting with Team']] });
+
+    await calendar.sideMenu.searchRecord({ query: '' });
+
     await calendar.sideMenu.verifySideBarRecords({
       records: [...dateRecords.map(r => r.Title), ...Array(12).fill('')],
     });
@@ -192,11 +202,6 @@ test.describe('View', () => {
 
     await calendar.sideMenu.verifySideBarRecords({ records: [] });
 
-    /* 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 });
@@ -246,6 +251,80 @@ test.describe('View', () => {
     await calendar.calendarWeekDateTime.selectHour({ dayIndex: 0, hourIndex: 1 });
 
     await calendar.sideMenu.verifySideBarRecords({ records: [] });
+
+    await dashboard.viewSidebar.deleteView({ title: 'Calendar' });
+  });
+
+  test('Calendar Drag and Drop & Undo Redo Operations', async () => {
+    await dashboard.viewSidebar.createCalendarView({
+      title: 'Calendar',
+    });
+
+    await dashboard.viewSidebar.verifyView({
+      title: 'Calendar',
+      index: 0,
+    });
+
+    await dashboard.viewSidebar.openView({ title: 'Calendar' });
+
+    await calendarTopbar.moveToDate({ date: 'January 2024', action: 'prev' });
+
+    const calendar = dashboard.calendar;
+
+    await calendar.calendarMonth.dragAndDrop({
+      record: 'Team Catchup',
+      to: {
+        columnIndex: 3,
+        rowIndex: 0,
+      },
+    });
+
+    await calendar.calendarMonth.selectDate({
+      rowIndex: 0,
+      columnIndex: 3,
+    });
+
+    await calendar.sideMenu.updateFilter({ filter: 'In selected date' });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: ['Team Catchup'] });
+
+    await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
+
+    await calendarTopbar.moveToDate({
+      date: '1 - 7 Jan 24',
+      action: 'prev',
+    });
+
+    await calendar.calendarWeekDateTime.dragAndDrop({
+      record: 'Team Catchup',
+      to: {
+        dayIndex: 0,
+        hourIndex: 10,
+      },
+    });
+
+    await calendar.sideMenu.updateFilter({ filter: 'In selected hours' });
+
+    await calendar.calendarWeekDateTime.selectHour({ dayIndex: 0, hourIndex: 10 });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: ['Team Catchup'] });
+
+    await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'day' });
+
+    await dashboard.rootPage.waitForTimeout(5000);
+
+    await calendar.calendarDayDateTime.dragAndDrop({
+      record: 'Team Catchup',
+      hourIndex: 5,
+    });
+
+    await calendar.calendarDayDateTime.selectHour({ hourIndex: 5 });
+
+    await calendar.sideMenu.updateFilter({ filter: 'In selected hours' });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: ['Team Catchup'] });
+
+    await dashboard.viewSidebar.deleteView({ title: 'Calendar' });
   });
 
   test('Calendar shared view operations', async ({ page }) => {
@@ -303,4 +382,55 @@ test.describe('View', () => {
 
     await calendar.sideMenu.verifySideBarRecords({ records: Array(12).fill('') });
   });
+
+  test('Calendar Operations Date Fields', async () => {
+    await dashboard.grid.column.openEdit({
+      title: 'StartDate',
+      type: 'Date',
+      dateFormat: 'YYYY-MM-DD',
+    });
+
+    await dashboard.grid.column.save({ isUpdated: true });
+
+    await dashboard.viewSidebar.createCalendarView({
+      title: 'Calendar',
+    });
+
+    await dashboard.viewSidebar.verifyView({
+      title: 'Calendar',
+      index: 0,
+    });
+
+    await dashboard.viewSidebar.openView({ title: 'Calendar' });
+
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
+
+    await calendarTopbar.verifyActiveCalendarView({ view: 'week' });
+
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'day' });
+
+    await calendarTopbar.verifyActiveCalendarView({ view: 'day' });
+
+    const calendar = dashboard.calendar;
+
+    await calendarTopbar.moveToDate({ date: '1 January 2024', action: 'prev' });
+
+    await calendar.calendarDayDate.verifyRecord({ records: dateRecords.map(r => r.Title) });
+
+    await calendarTopbar.moveToDate({ date: '2 January 2024', action: 'next' });
+
+    await calendar.calendarDayDate.verifyRecord({ records: [] });
+
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
+
+    await calendar.calendarWeekDate.selectDay({ dayIndex: 0 });
+
+    await calendar.sideMenu.updateFilter({ filter: 'In selected date' });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: dateRecords.map(r => r.Title) });
+
+    await calendar.calendarWeekDate.selectDay({ dayIndex: 1 });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: [] });
+  });
 });