test: added some more tests

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

@@ -184,7 +184,7 @@ const dropEvent = (event: DragEvent) => {
       :style="record.rowMeta.style"
       class="absolute mt-2"
       @mouseleave="hoverRecord = null"
-      @mouseover="hoverRecord = record.rowMeta.id"
+      @mouseover="hoverRecord = record.rowMeta.id as string"
     >
       <LazySmartsheetRow :row="record">
         <LazySmartsheetCalendarRecordCard

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

@@ -566,7 +566,8 @@ const viewMore = (hour: dayjs.Dayjs) => {
   <div
     v-if="recordsAcrossAllRange.record.length"
     ref="container"
-    class="w-full relative nc-calendar-day-view no-selection h-[calc(100vh-10rem)] overflow-y-auto nc-scrollbar-md"
+    class="w-full relative no-selection h-[calc(100vh-10rem)] overflow-y-auto nc-scrollbar-md"
+    data-testid="nc-calendar-day-view"
   >
     <div
       v-for="(hour, index) in hours"
@@ -575,6 +576,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
         '!border-brand-500': hour.isSame(selectedTime),
       }"
       class="flex w-full min-h-20 relative border-1 group hover:bg-gray-50 border-white border-b-gray-100"
+      data-testid="nc-calendar-day-hour"
       @click="selectedTime = hour"
     >
       <div class="pt-2 px-4 text-xs text-gray-500 font-semibold h-20">
@@ -681,6 +683,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
         <div
           v-for="(record, rowIndex) in recordsAcrossAllRange.record"
           :key="rowIndex"
+          :data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
           :data-unique-id="record.rowMeta.id"
           :style="record.rowMeta.style"
           class="absolute draggable-record group cursor-pointer pointer-events-auto"

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

@@ -16,6 +16,8 @@ const { isUIAllowed } = useRoles()
 
 const { appInfo } = useGlobal()
 
+const meta = inject(MetaInj, ref())
+
 const { t } = useI18n()
 
 const {
@@ -250,6 +252,24 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
   }
 })
 
+const newRecord = () => {
+  const row = {
+    ...rowDefaultData(meta.value?.columns),
+  }
+
+  if (activeCalendarView.value === 'day') {
+    row[calendarRange.value[0]!.fk_from_col!.title!] = selectedDate.value.format('YYYY-MM-DD HH:mm:ssZ')
+  } else if (activeCalendarView.value === 'week') {
+    row[calendarRange.value[0]!.fk_from_col!.title!] = selectedDateRange.value.start.format('YYYY-MM-DD HH:mm:ssZ')
+  } else if (activeCalendarView.value === 'month') {
+    row[calendarRange.value[0]!.fk_from_col!.title!] = (selectedDate.value ?? selectedMonth.value).format('YYYY-MM-DD HH:mm:ssZ')
+  } else if (activeCalendarView.value === 'year') {
+    row[calendarRange.value[0]!.fk_from_col!.title!] = selectedDate.value.format('YYYY-MM-DD HH:mm:ssZ')
+  }
+
+  emit('new-record', { row, oldRow: {}, rowMeta: { new: true } })
+}
+
 const height = ref(0)
 
 const heightListener = () => {
@@ -353,7 +373,7 @@ onUnmounted(() => {
           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: {} })"
+          @click="newRecord"
         >
           <div class="px-4 flex items-center gap-2 justify-center">
             <component :is="iconMap.plus" class="h-6 w-6 text-lg text-brand-500" />

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

@@ -574,7 +574,7 @@ const dropEvent = (event: DragEvent) => {
 </script>
 
 <template>
-  <div class="flex relative flex-col prevent-select" @drop="dropEvent">
+  <div class="flex relative flex-col prevent-select" data-testid="nc-calendar-week-view" @drop="dropEvent">
     <div class="flex">
       <div
         v-for="(date, weekIndex) in weekDates"
@@ -598,10 +598,14 @@ const dropEvent = (event: DragEvent) => {
         @click="selectedDate = date"
       ></div>
     </div>
-    <div class="absolute nc-scrollbar-md overflow-y-auto mt-9 pointer-events-none inset-0">
+    <div
+      class="absolute nc-scrollbar-md overflow-y-auto mt-9 pointer-events-none inset-0"
+      data-testid="nc-calendar-week-record-container"
+    >
       <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,

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

@@ -724,7 +724,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
 </script>
 
 <template>
-  <div class="w-full relative prevent-select" @drop="dropEvent">
+  <div class="w-full relative prevent-select" data-testid="nc-calendar-week-view" @drop="dropEvent">
     <div class="flex absolute bg-gray-50 w-full top-0">
       <div
         v-for="date in datesHours"
@@ -739,7 +739,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
       </div>
     </div>
     <div ref="container" class="h-[calc(100vh-11.7rem)] relative flex w-full mt-7.1 overflow-y-auto nc-scrollbar-md">
-      <div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7">
+      <div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7" data-testid="nc-calendar-week-day">
         <div
           v-for="(hour, hourIndex) in date"
           :key="hourIndex"
@@ -748,6 +748,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
             '!border-l-0': date[0].day() === selectedDateRange.start?.day(),
           }"
           class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-gray-200 first:border-l-none border-1 border-r-gray-50 border-t-gray-50"
+          data-testid="nc-calendar-week-hour"
           @click="
             () => {
               selectedTime = hour
@@ -778,6 +779,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
         <div
           v-for="(record, rowIndex) in recordsAcrossAllRange.records"
           :key="rowIndex"
+          :data-testid="`nc-calendar-week-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"

packages/nc-gui/composables/useCalendarViewStore.ts

@@ -631,6 +631,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
           break
         case 'day':
           selectedDate.value = action === 'next' ? selectedDate.value.add(1, 'day') : selectedDate.value.subtract(1, 'day')
+          selectedTime.value = selectedDate.value
           if (pageDate.value.year() !== selectedDate.value.year()) {
             pageDate.value = selectedDate.value
           } else if (pageDate.value.month() !== selectedDate.value.month()) {
@@ -788,16 +789,18 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
         pageDate.value = selectedDate.value
         selectedDate.value = selectedDateRange.value.start
         selectedMonth.value = selectedDateRange.value.start
+        selectedTime.value = selectedDateRange.value.start
       } else if (oldValue === 'month') {
         selectedDate.value = selectedMonth.value
         pageDate.value = selectedDate.value
+        selectedTime.value = selectedDate.value
         selectedDateRange.value = {
           start: selectedDate.value.startOf('week'),
           end: selectedDate.value.endOf('week'),
         }
       } else if (oldValue === 'day') {
         pageDate.value = selectedDate.value
-
+        selectedTime.value = selectedDate.value
         selectedMonth.value = selectedDate.value
         selectedDateRange.value = {
           start: selectedDate.value.startOf('week'),
@@ -805,6 +808,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
         }
       } else if (oldValue === 'year') {
         selectedMonth.value = selectedDate.value
+        selectedTime.value = selectedDate.value
         pageDate.value = selectedDate.value
         selectedDateRange.value = {
           start: selectedDate.value.startOf('week'),
@@ -825,7 +829,6 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     watch(pageDate, async () => {
       if (activeCalendarView.value === 'year') return
-      console.log('pageDate changed')
       await fetchActiveDates()
     })
 

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

@@ -1,8 +1,7 @@
-import { expect, Locator } from '@playwright/test';
 import BasePage from '../../Base';
 import { CalendarPage } from './index';
 
-export class CalendarMonthPage extends BasePage {
+export class CalendarDayDateTimePage extends BasePage {
   readonly parent: CalendarPage;
 
   constructor(parent: CalendarPage) {
@@ -18,24 +17,21 @@ export class CalendarMonthPage extends BasePage {
     return this.get().getByTestId('nc-calendar-day-record-container');
   }
 
-  async dragAndDrop({ record, to }: { record: string; to: { rowIndex: number; columnIndex: number } }) {
+  async dragAndDrop({ record, hourIndex }: { record: string; hourIndex: 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 recordCard = recordContainer.getByTestId(`nc-calendar-day-record-${record}`);
+    const toDay = this.get().getByTestId('nc-calendar-day-hour').nth(hourIndex);
     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({
+  async selectHour({ hourIndex }: { hourIndex: number }) {
+    const hour = this.get().getByTestId('nc-calendar-day-hour').nth(hourIndex);
+    await hour.click({
       force: true,
       position: {
         x: 0,

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

@@ -1,4 +1,3 @@
-import { expect, Locator } from '@playwright/test';
 import BasePage from '../../Base';
 import { CalendarPage } from './index';
 

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

@@ -0,0 +1,44 @@
+import BasePage from '../../Base';
+import { CalendarPage } from './index';
+
+export class CalendarWeekDateTimePage 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, hourIndex }: { record: string; 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 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 selectHour({ hourIndex, dayIndex }: { dayIndex: number; hourIndex: number }) {
+    const day = this.get().getByTestId('nc-calendar-week-day').nth(dayIndex);
+
+    const hour = day.getByTestId('nc-calendar-week-hour').nth(hourIndex);
+    await hour.click({
+      force: true,
+      position: {
+        x: 0,
+        y: 1,
+      },
+    });
+  }
+}

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

@@ -7,6 +7,8 @@ import { CalendarTopbarPage } from './CalendarTopBar';
 import { CalendarSideMenuPage } from './CalendarSideMenu';
 import { CalendarMonthPage } from './CalendarMonth';
 import { CalendarYearPage } from './CalendarYear';
+import { CalendarDayDateTimePage } from './CalendarDayDateTime';
+import { CalendarWeekDateTimePage } from './CalendarWeekDateTime';
 
 export class CalendarPage extends BasePage {
   readonly dashboard: DashboardPage;
@@ -15,7 +17,9 @@ export class CalendarPage extends BasePage {
   readonly calendarTopbar: CalendarTopbarPage;
   readonly sideMenu: CalendarSideMenuPage;
   readonly calendarMonth: CalendarMonthPage;
-  readonly calendarYear: CalendarYearPageß;
+  readonly calendarYear: CalendarYearPage;
+  readonly calendarDayDateTime: CalendarDayDateTimePage;
+  readonly calendarWeekDateTime: CalendarWeekDateTimePage;
 
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
@@ -26,6 +30,8 @@ export class CalendarPage extends BasePage {
     this.sideMenu = new CalendarSideMenuPage(this);
     this.calendarMonth = new CalendarMonthPage(this);
     this.calendarYear = new CalendarYearPage(this);
+    this.calendarDayDateTime = new CalendarDayDateTimePage(this);
+    this.calendarWeekDateTime = new CalendarWeekDateTimePage(this);
   }
 
   get() {

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

@@ -105,6 +105,7 @@ test.describe('View', () => {
   });
 
   test('Calendar', async () => {
+    // Create & Verify Calendar View
     await dashboard.viewSidebar.createCalendarView({
       title: 'Calendar',
     });
@@ -116,6 +117,7 @@ test.describe('View', () => {
 
     await dashboard.viewSidebar.openView({ title: 'Calendar' });
 
+    // Update Calendar range
     await toolbar.clickCalendarViewSettings();
 
     await toolbar.calendarRange.newCalendarRange({
@@ -124,6 +126,7 @@ test.describe('View', () => {
 
     await toolbar.clickCalendarViewSettings();
 
+    // Verify Sidebar
     const calendar = dashboard.calendar;
 
     await calendar.verifySideBarOpen();
@@ -136,6 +139,7 @@ test.describe('View', () => {
 
     await calendar.verifySideBarOpen();
 
+    // Verify Calendar View Modes
     await calendarTopbar.verifyActiveCalendarView({ view: 'month' });
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
@@ -158,6 +162,8 @@ test.describe('View', () => {
 
     await calendarTopbar.moveToDate({ date: 'January 2024', action: 'prev' });
 
+    // Verify Sidebar Records & Filters
+
     await calendar.sideMenu.verifySideBarRecords({ records: dateRecords.map(r => r.Title) });
 
     await calendar.sideMenu.updateFilter({
@@ -205,133 +211,41 @@ test.describe('View', () => {
 
     await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'day' });
 
-    await dashboard.rootPage.waitForTimeout(10000);
-  });
+    await calendar.calendarTopbar.moveToDate({
+      date: '1 January 2024',
+      action: 'prev',
+    });
 
-  test('Calendar view operations', async () => {
-    /*test.slow();
+    await calendar.sideMenu.verifySideBarRecords({ records: dateRecords.map(r => r.Title) });
 
-    await dashboard.viewSidebar.createKanbanView({
-      title: 'Film Kanban',
-    });
-    await dashboard.viewSidebar.verifyView({
-      title: 'Film Kanban',
-      index: 0,
-    });
+    await calendar.calendarDayDateTime.selectHour({ hourIndex: 10 });
 
-    await toolbar.sort.add({
-      title: 'Title',
-      ascending: false,
-      locallySaved: false,
-    });
+    await calendar.sideMenu.updateFilter({ filter: 'In selected hours' });
 
-    await toolbar.clickFilter();
-    await toolbar.filter.add({
-      title: 'Title',
-      operation: 'is like',
-      value: 'BA',
-      locallySaved: false,
-    });
-    await toolbar.clickFilter();
+    await calendar.sideMenu.verifySideBarRecords({ records: ['Team Catchup'] });
 
-    await toolbar.fields.toggleShowAllFields();
-    await toolbar.fields.toggleShowAllFields();
-    await toolbar.fields.toggle({ title: 'Title' });
+    await calendar.calendarDayDateTime.selectHour({ hourIndex: 1 });
 
-    await dashboard.viewSidebar.copyView({ title: 'Film Kanban' });
-    await dashboard.viewSidebar.verifyView({
-      title: 'Kanban',
-      index: 1,
-    });
-    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, 4, 5, 8, 6, 6],
-    });
-    await kanban.verifyCardCount({
-      count: [0, 4, 5, 8, 6, 6],
-    });
-    // verify card order
-    const order2 = [
-      ['BAREFOOT MANCHURIAN', 'BARBARELLA STREETCAR'],
-      ['WORST BANGER', 'PRESIDENT BANG'],
-    ];
-    for (let i = 1; i <= order2.length; i++)
-      await kanban.verifyCardOrder({
-        stackIndex: i,
-        order: order2[i - 1],
-      });
+    await calendar.sideMenu.verifySideBarRecords({ records: [] });
 
-    await dashboard.viewSidebar.changeViewIcon({
-      title: 'Kanban',
-      icon: 'american-football',
-      iconDisplay: '🏈',
+    await calendar.calendarTopbar.moveToDate({
+      date: '3 January 2024',
+      action: 'next',
     });
 
-    await dashboard.viewSidebar.deleteView({ title: 'Kanban' });
-    ///////////////////////////////////////////////
+    await calendar.sideMenu.verifySideBarRecords({ records: [] });
 
-    await dashboard.viewSidebar.openView({ title: 'Film Kanban' });
+    await toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
 
-    // add new stack
-    await kanban.addNewStack({ title: 'Test' });
-    await dashboard.rootPage.waitForTimeout(1000);
-    await kanban.verifyStackCount({ count: 7 });
-    await kanban.verifyStackOrder({
-      order: ['Uncategorized', 'G', 'PG', 'PG-13', 'R', 'NC-17', 'Test'],
-    });
+    await calendar.calendarWeekDateTime.selectHour({ dayIndex: 0, hourIndex: 10 });
 
-    // collapse stack
-    await kanban.verifyCollapseStackCount({ count: 0 });
-    await kanban.collapseStack({ index: 0 });
-    await kanban.verifyCollapseStackCount({ count: 1 });
-    await kanban.expandStack({ index: 0 });
-    await kanban.verifyCollapseStackCount({ count: 0 });
-
-    // add record to stack & verify
-    await toolbar.fields.toggleShowAllFields();
-    await toolbar.fields.toggleShowAllFields();
-    await toolbar.fields.toggleShowSystemFields();
-    await toolbar.fields.toggle({ title: 'LanguageId' });
-    await toolbar.fields.toggle({ title: 'Title' });
-    await toolbar.sort.reset();
-    await toolbar.filter.reset();
-
-    await kanban.addCard({ stackIndex: 6 });
-    await dashboard.expandedForm.fillField({
-      columnTitle: 'Title',
-      value: 'New record',
-    });
-    await dashboard.expandedForm.fillField({
-      columnTitle: 'LanguageId',
-      value: '1',
-    });
-    // todo: Check why kanban doesnt reload the rows data
-    await dashboard.expandedForm.save({ waitForRowsData: false });
-    // kludge: reload the page
-    await dashboard.rootPage.reload();
-
-    await kanban.verifyStackCount({ count: 7 });
-    await kanban.verifyStackOrder({
-      order: ['Uncategorized', 'G', 'PG', 'PG-13', 'R', 'NC-17', 'Test'],
-    });
-    await kanban.verifyCardCount({
-      count: [0, 25, 25, 25, 25, 25, 1],
-    });
+    await calendar.sideMenu.updateFilter({ filter: 'In selected hours' });
 
-    // delete stack
-    await kanban.deleteStack({ index: 6 });
-    await dashboard.rootPage.waitForTimeout(1000);
-    await kanban.verifyStackCount({ count: 6 });
-    await kanban.verifyStackOrder({
-      order: ['Uncategorized', 'G', 'PG', 'PG-13', 'R', 'NC-17'],
-    });
-    await kanban.verifyCardCount({
-      count: [1, 25, 25, 25, 25, 25],
-    });*/
+    await calendar.sideMenu.verifySideBarRecords({ records: ['Team Catchup'] });
+
+    await calendar.calendarWeekDateTime.selectHour({ dayIndex: 0, hourIndex: 1 });
+
+    await calendar.sideMenu.verifySideBarRecords({ records: [] });
   });
 
   test('Calendar shared view operations', async ({ page }) => {