fix: calendar tests

nocodb · May 3, 2024 · 8da89b2 · 8da89b2
1 parent 036b46a
commit 8da89b2
Show file tree

Hide file tree

Showing 11 changed files with 119 additions and 100 deletions.
diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -201,7 +201,13 @@ const changeDate = (action: 'prev' | 'next') => {
           </template>
         </NcTooltip>
         <NcTooltip>
-          <NcButton class="!border-0" size="small" type="secondary" @click="changeDate('prev')">
+          <NcButton
+            class="!border-0"
+            data-testid="nc-calendar-prev-btn"
+            size="small"
+            type="secondary"
+            @click="changeDate('prev')"
+          >
             <component :is="iconMap.arrowLeft" class="h-4 w-4" />
           </NcButton>
           <template #title>
@@ -221,7 +227,13 @@ const changeDate = (action: 'prev' | 'next') => {
 
       <div v-if="!disablePagination" class="flex">
         <NcTooltip>
-          <NcButton class="!border-0" size="small" type="secondary" @click="changeDate('next')">
+          <NcButton
+            class="!border-0"
+            data-testid="nc-calendar-next-btn"
+            size="small"
+            type="secondary"
+            @click="changeDate('next')"
+          >
             <component :is="iconMap.arrowRight" class="h-4 w-4" />
           </NcButton>
           <template #title>

diff --git a/packages/nc-gui/components/nc/MonthYearSelector.vue b/packages/nc-gui/components/nc/MonthYearSelector.vue
@@ -120,7 +120,13 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
           </template>
         </NcTooltip>
         <NcTooltip>
-          <NcButton class="!border-0" size="small" type="secondary" @click="changeDate('prev')">
+          <NcButton
+            class="!border-0"
+            data-testid="nc-calendar-prev-btn"
+            size="small"
+            type="secondary"
+            @click="changeDate('prev')"
+          >
             <component :is="iconMap.arrowLeft" class="h-4 w-4" />
           </NcButton>
           <template #title>
@@ -134,7 +140,13 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
       }}</span>
       <div class="flex">
         <NcTooltip>
-          <NcButton class="!border-0" size="small" type="secondary" @click="changeDate('next')">
+          <NcButton
+            class="!border-0"
+            data-testid="nc-calendar-next-btn"
+            size="small"
+            type="secondary"
+            @click="changeDate('next')"
+          >
             <component :is="iconMap.arrowRight" class="h-4 w-4" />
           </NcButton>
           <template #title>

diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -76,6 +76,8 @@ const { allowCSVDownload } = useSharedView()
         <div class="flex-1" />
       </template>
 
+      <LazySmartsheetToolbarCalendarActiveView v-if="isCalendar" />
+
       <LazySmartsheetToolbarSearchData
         v-if="isGrid || isGallery || isKanban"
         :class="{

diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/ActiveView.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/ActiveView.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+const { activeCalendarView } = useCalendarViewStoreOrThrow()
+</script>
+
+<template>
+  <span class="opacity-0" data-testid="nc-active-calendar-view">
+    {{ activeCalendarView }}
+  </span>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Header.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Header.vue
@@ -27,7 +27,7 @@ const headerText = computed(() => {
 </script>
 
 <template>
-  <span class="font-semibold text-xl whitespace-nowrap"
+  <span class="font-semibold text-xl whitespace-nowrap" data-testid="nc-calendar-active-date"
     >{{ activeCalendarView === 'month' ? headerText.split(' ')[0] : headerText }}
     <template v-if="activeCalendarView === 'month'">
       {{ ` ${headerText.split(' ')[1]}` }}

diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts
@@ -7,11 +7,17 @@ export class CalendarSideMenuPage extends BasePage {
 
   readonly new_record_btn: Locator;
 
+  readonly prev_btn: Locator;
+  readonly next_btn: Locator;
+
   constructor(parent: CalendarPage) {
     super(parent.rootPage);
     this.parent = parent;
 
     this.new_record_btn = this.get().getByTestId('nc-calendar-side-menu-new-btn');
+
+    this.next_btn = this.get().getByTestId('nc-calendar-next-btn');
+    this.prev_btn = this.get().getByTestId('nc-calendar-prev-btn');
   }
 
   get() {
@@ -29,6 +35,24 @@ export class CalendarSideMenuPage extends BasePage {
     await searchInput.fill(query);
   }
 
+  async clickPrev() {
+    await this.prev_btn.click();
+  }
+  async clickNext() {
+    await this.next_btn.click();
+  }
+
+  async moveToDate({ date, action }: { date: string; action: 'prev' | 'next' }) {
+    while ((await this.parent.toolbar.getActiveDate()) !== date) {
+      console.log(await this.parent.toolbar.getActiveDate());
+      if (action === 'prev') {
+        await this.clickPrev();
+      } else {
+        await this.clickNext();
+      }
+    }
+  }
+
   async verifySideBarRecords({ records }: { records: string[] }) {
     let attempts = 0;
     let sideBarRecords: Locator;

diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts
diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarWeekDateTime.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarWeekDateTime.ts
@@ -29,6 +29,8 @@ export class CalendarWeekDateTimePage extends BasePage {
   }) {
     const recordContainer = this.getRecordContainer();
     const recordCard = recordContainer.getByTestId(`nc-calendar-week-record-${record}`);
+
+    await recordCard.scrollIntoViewIfNeeded();
     const toDay = this.get()
       .getByTestId('nc-calendar-week-day')
       .nth(to.dayIndex)

diff --git a/tests/playwright/pages/Dashboard/Calendar/index.ts b/tests/playwright/pages/Dashboard/Calendar/index.ts
@@ -3,7 +3,6 @@ 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';
@@ -16,7 +15,6 @@ 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;
@@ -30,7 +28,6 @@ export class CalendarPage extends BasePage {
     this.dashboard = dashboard;
     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);
@@ -60,4 +57,9 @@ export class CalendarPage extends BasePage {
   async waitLoading() {
     await this.rootPage.waitForTimeout(2000);
   }
+
+  async toggleSideBar() {
+    await this.get().getByTestId('nc-calendar-side-bar-btn').click();
+    await this.rootPage.waitForTimeout(500);
+  }
 }
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
@@ -42,6 +42,7 @@ export class ToolbarPage extends BasePage {
   readonly btn_rowHeight: Locator;
   readonly btn_groupBy: Locator;
   readonly btn_calendarSettings: Locator;
+  readonly today_btn: Locator;
 
   constructor(parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage | CalendarPage) {
     super(parent.rootPage);
@@ -65,6 +66,8 @@ export class ToolbarPage extends BasePage {
     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');
+
+    this.today_btn = this.get().getByTestId('nc-calendar-today-btn');
   }
 
   get() {
@@ -88,6 +91,10 @@ export class ToolbarPage extends BasePage {
     if (menuOpen) await this.calendarRange.get().waitFor({ state: 'hidden' });
   }
 
+  async getActiveDate() {
+    return this.get().getByTestId('nc-calendar-active-date').textContent();
+  }
+
   async clickFields() {
     const menuOpen = await this.fields.get().isVisible();
 
@@ -145,6 +152,12 @@ export class ToolbarPage extends BasePage {
     }
   }
 
+  async verifyActiveCalendarView({ view }: { view: string }) {
+    const activeView = this.get().getByTestId('nc-active-calendar-view');
+
+    await expect(activeView).toContainText(view);
+  }
+
   async clickFilter({
     // `networkValidation` is used to verify that api calls are made when the button is clicked
     // which happens when the filter is opened for the first time
@@ -206,6 +219,10 @@ export class ToolbarPage extends BasePage {
     await this.get().locator(`.nc-toolbar-btn.nc-height-menu-btn`).click();
   }
 
+  async clickToday() {
+    await this.today_btn.click();
+  }
+
   async verifyStackByButton({ title }: { title: string }) {
     await this.get().locator(`.nc-toolbar-btn.nc-kanban-stacked-by-menu-btn`).waitFor({ state: 'visible' });
     await expect(