test: playwright pages

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

@@ -147,13 +147,13 @@ const headerText = computed(() => {
 </script>
 
 <template>
-  <div class="flex h-full flex-row">
+  <div class="flex h-full flex-row" data-testid="nc-calendar-wrapper">
     <div class="flex flex-col w-full">
-      <div class="flex justify-between p-3 items-center border-b-1 border-gray-200">
+      <div class="flex justify-between p-3 items-center border-b-1 border-gray-200" data-testid="nc-calendar-topbar">
         <div class="flex justify-start gap-3 items-center">
           <NcTooltip>
             <template #title> Previous </template>
-            <NcButton size="small" type="secondary" @click="paginateCalendarView('prev')">
+            <NcButton data-testid="nc-calendar-prev-btn" size="small" type="secondary" @click="paginateCalendarView('prev')">
               <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
             </NcButton>
           </NcTooltip>
@@ -197,12 +197,13 @@ const headerText = computed(() => {
           </NcDropdown>
           <NcTooltip>
             <template #title> Next </template>
-            <NcButton size="small" type="secondary" @click="paginateCalendarView('next')">
+            <NcButton data-testid="nc-calendar-next-btn" size="small" type="secondary" @click="paginateCalendarView('next')">
               <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
             </NcButton>
           </NcTooltip>
           <NcButton
             v-if="!isMobileMode"
+            data-testid="nc-calendar-today-btn"
             size="small"
             type="secondary"
             @click="
@@ -222,7 +223,13 @@ const headerText = computed(() => {
         </div>
         <NcTooltip>
           <template #title> Toggle Sidebar </template>
-          <NcButton v-if="!isMobileMode" size="small" type="secondary" @click="showSideMenu = !showSideMenu">
+          <NcButton
+            v-if="!isMobileMode"
+            data-testid="nc-calendar-side-bar-btn"
+            size="small"
+            type="secondary"
+            @click="showSideMenu = !showSideMenu"
+          >
             <component :is="iconMap.sidebar" class="h-4 w-4 text-gray-700 transition-all" />
           </NcButton>
         </NcTooltip>

packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue

@@ -35,12 +35,17 @@ watch(activeCalendarView, () => {
 </script>
 
 <template>
-  <div v-if="props.tab" class="flex flex-row relative p-1 mx-3 mt-3 mb-3 bg-gray-100 rounded-lg gap-x-0.5 nc-calendar-mode-tab">
+  <div
+    v-if="props.tab"
+    class="flex flex-row relative p-1 mx-3 mt-3 mb-3 bg-gray-100 rounded-lg gap-x-0.5 nc-calendar-mode-tab"
+    data-testid="nc-calendar-view-mode"
+  >
     <div :style="highlightStyle" class="highlight"></div>
     <div
       v-for="mode in ['day', 'week', 'month', 'year']"
       :key="mode"
       :class="{ active: activeCalendarView === mode }"
+      :data-testid="`nc-calendar-view-mode-${mode}`"
       class="tab"
       @click="setActiveCalendarMode(mode, $event)"
     >

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

@@ -0,0 +1,45 @@
+import { Locator } from '@playwright/test';
+import BasePage from '../../../Base';
+import { TopbarSharePage } from './Share';
+import { CalendarPage } from './index';
+
+export class CalendarTopbarPage extends BasePage {
+  readonly parent: CalendarPage;
+  readonly share: TopbarSharePage;
+
+  readonly today_btn: Locator;
+  readonly prev_btn: Locator;
+  readonly next_btn: Locator;
+
+  readonly side_bar_btn: Locator;
+
+  constructor(parent: CalendarPage) {
+    super(parent.rootPage);
+    this.parent = parent;
+
+    this.next_btn = this.get().getByTestId('nc-calendar-next-btn');
+    this.prev_btn = this.get().getByTestId('nc-calendar-prev-btn');
+    this.today_btn = this.get().getByTestId('nc-calendar-today-btn');
+
+    this.side_bar_btn = this.get().getByTestId('nc-calendar-side-bar-btn');
+  }
+
+  get() {
+    return this.rootPage.getByTestId('nc-calendar-topbar');
+  }
+
+  async clickPrev() {
+    await this.prev_btn.click();
+  }
+  async clickNext() {
+    await this.next_btn.click();
+  }
+  async clickToday() {
+    await this.today_btn.click();
+  }
+
+  async toggleSideBar() {
+    await this.side_bar_btn.click();
+    await this.rootPage.waitForTimeout(500);
+  }
+}

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

@@ -0,0 +1,28 @@
+import { DashboardPage } from '..';
+import BasePage from '../../Base';
+import { ToolbarPage } from '../common/Toolbar';
+import { TopbarPage } from '../common/Topbar';
+import { CalendarTopbarPage } from './CalendarTopBar';
+
+export class CalendarPage extends BasePage {
+  readonly dashboard: DashboardPage;
+  readonly toolbar: ToolbarPage;
+  readonly topbar: TopbarPage;
+  readonly calendarTopbar: CalendarTopbarPage;
+
+  constructor(dashboard: DashboardPage) {
+    super(dashboard.rootPage);
+    this.dashboard = dashboard;
+    this.toolbar = new ToolbarPage(this);
+    this.topbar = new TopbarPage(this);
+    this.calendarTopbar = new CalendarTopbarPage(this);
+  }
+
+  get() {
+    return this.get().getByTestId('nc-calendar-wrapper');
+  }
+
+  async waitLoading() {
+    await this.rootPage.waitForTimeout(2000);
+  }
+}

tests/playwright/pages/Dashboard/common/Toolbar/CalendarViewModel.ts

@@ -0,0 +1,19 @@
+import BasePage from '../../../Base';
+import { ToolbarPage } from './index';
+
+export class ToolbarCalendarViewModePage extends BasePage {
+  readonly toolbar: ToolbarPage;
+
+  constructor(toolbar: ToolbarPage) {
+    super(toolbar.rootPage);
+    this.toolbar = toolbar;
+  }
+
+  get() {
+    return this.rootPage.getByTestId('nc-calendar-view-mode');
+  }
+
+  changeCalendarView({ title }: { title: string }) {
+    await this.get().getByTestId(`nc-calendar-view-mode-${title}`).click();
+  }
+}

tests/playwright/pages/Dashboard/common/Toolbar/index.ts

@@ -17,6 +17,7 @@ import { RowHeight } from './RowHeight';
 import { MapPage } from '../../Map';
 import { getTextExcludeIconText } from '../../../../tests/utils/general';
 import { ToolbarGroupByPage } from './Groupby';
+import { ToolbarCalendarViewModePage } from './CalendarViewModel';
 
 export class ToolbarPage extends BasePage {
   readonly parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage;
@@ -30,6 +31,7 @@ export class ToolbarPage extends BasePage {
   readonly addEditStack: ToolbarAddEditStackPage;
   readonly searchData: ToolbarSearchDataPage;
   readonly rowHeight: RowHeight;
+  readonly calendarViewMode: ToolbarCalendarViewModePage;
 
   readonly btn_fields: Locator;
   readonly btn_sort: Locator;
@@ -50,6 +52,7 @@ export class ToolbarPage extends BasePage {
     this.addEditStack = new ToolbarAddEditStackPage(this);
     this.searchData = new ToolbarSearchDataPage(this);
     this.rowHeight = new RowHeight(this);
+    this.calendarViewMode = new ToolbarCalendarViewModePage(this);
 
     this.btn_fields = this.get().locator(`button.nc-fields-menu-btn`);
     this.btn_sort = this.get().locator(`button.nc-sort-menu-btn`);