Calendars - render tests (#2032)

* Expandable - open (CalendarList) - day press render test

* Updating testIDs to have a complete flow

* Test driver - bug

* Fix testIDs and add tests to expandable knob behavior

* Fix TS error

* Change expandableHeader testID to expandableContainer

* Change testID of week calendar

* Change header testID to staticHeader

* removed comma

* Change header testID to title

* renaming stuff

* Change week testID to weekNumber

* Add documentation for testIDs

* rename variable

* Fix tests that depends on time

* render tests - fixes

* CalendarList - add render tests

* format item title from date

* Test list length

* add list props tests

* Removing initialNumToRender tests

* testUtils - adding getMonthTitle; moving driver to tests folder; moving calendar tests and driver to tests directory

* moving drivers out of _tests_ dir

* fix import paths

* props tests

* ExpandableCalendar - add render tests

* ExpandableCalendar - tests - add WeekCalendar day press

* WeekCalendar - add render tests

* fix tests for master merge

Co-authored-by: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>

package.json

@@ -47,6 +47,7 @@
     "@babel/runtime": "^7.12.5",
     "@testing-library/react-native": "^11.0.0",
     "@tsconfig/docusaurus": "^1.0.4",
+    "@types/jest": "^29.0.1",
     "@types/lodash": "^4.14.170",
     "@types/react": "^17.0.44",
     "@types/react-native": "^0.64.19",

src/calendar-list/__tests__/index.spec.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import CalendarList from '../index';
+import {CalendarListDriver} from '../driver';
+//@ts-expect-error
+import {getMonthTitle} from '../../testUtils';
+
+const CURRENT = '2022-09-09';
+const NEXT_MONTH = '2022-10-09';
+const PREV_MONTH = '2022-08-09';
+const nextMonthData = {dateString: '2022-10-09', day: 9, month: 10, timestamp: 1665273600000, year: 2022};
+const prevMonthData = {dateString: '2022-08-09', day: 9, month: 8, timestamp: 1660003200000, year: 2022};
+
+const testIdCalendarList = 'myCalendarList';
+const onMonthChangeMock = jest.fn();
+const onVisibleMonthsChangeMock = jest.fn();
+const pastScrollRange = 10;
+const futureScrollRange = 5;
+// const initialVisibleItems = [
+//   {
+//     "index": 50,
+//     "isViewable": true,
+//     "item": "2022-09-09T00:00:00.000Z",
+//     "key": "50"
+//   }
+// ];
+// const changed = [
+//   {
+//     "index": 51,
+//     "isViewable": true,
+//     "item": "2022-10-09T00:00:00.000Z",
+//     "key": "51"
+//   },
+//   {
+//     "index": 50,
+//     "isViewable": false,
+//     "item": "2022-09-09T00:00:00.000Z",
+//     "key":"50"
+//   }
+// ];
+// const visibleItems = [
+//   {
+//     "index": 51,
+//     "isViewable": true,
+//     "item": "2022-10-09T00:00:00.000Z",
+//     "key": "51"
+//   }
+// ];
+
+const defaultProps = {
+  testID: testIdCalendarList,
+  current: CURRENT,
+  onMonthChange: onMonthChangeMock,
+  onVisibleMonthsChange: onVisibleMonthsChangeMock
+};
+
+const TestCase = props => {
+  return <CalendarList {...defaultProps} {...props} />;
+};
+
+describe('CalendarList', () => {
+  describe('Props', () => {
+    describe('past/futureScrollRange', () => {
+      const driver = new CalendarListDriver(
+        testIdCalendarList,
+        <TestCase pastScrollRange={pastScrollRange} futureScrollRange={futureScrollRange} />
+      );
+
+      beforeEach(() => {
+        jest.useFakeTimers();
+        driver.render();
+      });
+
+      it('should have correct number of list items', () => {
+        expect(driver.getListProps().data.length).toBe(pastScrollRange + futureScrollRange + 1);
+      });
+    });
+  });
+
+  describe('Horizontal Mode', () => {
+    const driver = new CalendarListDriver(testIdCalendarList, <TestCase horizontal={true} staticHeader={true} />);
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+      driver.render();
+
+      onMonthChangeMock.mockClear();
+      onVisibleMonthsChangeMock.mockClear();
+    });
+
+    // afterEach(() => driver.clear());
+
+    describe('Init', () => {
+      it('should display current month', () => {
+        // static header
+        expect(driver.getStaticHeaderTitle()).toBe(getMonthTitle(CURRENT));
+
+        // list
+        expect(driver.getListProps().horizontal).toBe(true);
+        expect(driver.getListProps().data.length).toBe(101);
+        expect(driver.getListProps().initialScrollIndex).toBe(50);
+        expect(driver.getListProps().initialNumToRender).toBe(1);
+
+        // list items
+        expect(driver.getListItem(CURRENT)).toBeDefined();
+        expect(driver.getListItemTitle(CURRENT)).toBeDefined();
+
+        // events
+        expect(onMonthChangeMock).not.toHaveBeenCalled();
+        expect(onVisibleMonthsChangeMock).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('Static Header Arrows', () => {
+      it('should change month on right arrow press', () => {
+        driver.pressRightArrow();
+
+        expect(onMonthChangeMock).toHaveBeenCalledWith(nextMonthData);
+        expect(onVisibleMonthsChangeMock).toHaveBeenCalledWith([nextMonthData]);
+
+        expect(driver.getStaticHeaderTitle()).toBe(getMonthTitle(NEXT_MONTH));
+
+        // NOTE: check visible list item - only first item is rendered and arrow press doesn't actually scrolls the list
+        // expect(driver.getListItemTitle(NEXT_MONTH)).toBeDefined();
+      });
+
+      it('should change month on left arrow press', () => {
+        driver.pressLeftArrow();
+
+        expect(onMonthChangeMock).toHaveBeenCalledWith(prevMonthData);
+        expect(onVisibleMonthsChangeMock).toHaveBeenCalledWith([prevMonthData]);
+
+        expect(driver.getStaticHeaderTitle()).toBe(getMonthTitle(PREV_MONTH));
+      });
+    });
+
+    // describe('List Scroll', () => {
+    //   it('scroll to next month', () => {
+    //     driver.fireOnViewableItemsChanged(changed, visibleItems);
+
+    //     expect(onMonthChangeMock).toHaveBeenCalled();
+    //     expect(onMonthChangeMock).toHaveBeenCalledWith(nextMonthData);
+    //     expect(onVisibleMonthsChangeMock).toHaveBeenCalledWith([nextMonthData]);
+
+    //     expect(driver.getStaticHeaderTitle()).toBe(getMonthTitle(NEXT_MONTH));
+    //   });
+    // });
+  });
+});

src/calendar-list/driver.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import {fireEvent, render, screen, within} from '@testing-library/react-native';
+//@ts-expect-error
+import {getMonthTitle} from '../testUtils';
+
+export class CalendarListDriver {
+  testID: string;
+  element: React.ReactElement;
+
+  constructor(testID: string, element: React.ReactElement) {
+    this.testID = testID;
+    this.element = element;
+    this.render(element);
+  }
+
+  render(element = this.element): ReturnType<typeof render> {
+    if (!element) throw 'Element is missing';
+    return render(element);
+  }
+
+  /** List */
+
+  // fireOnViewableItemsChanged(changed: any[], visibleItems: any[]) {
+  //   fireEvent(screen.getByTestId(this.testID), 'viewabilityConfigCallbackPairs.onViewableItemsChanged', {info: {changed: changed, viewableItems: visibleItems}});
+  // }
+
+  getListProps() {
+    const props = screen.getByTestId(`${this.testID}.list`).props;
+    return props;
+  }
+
+  getItemTestID(date: string) {
+    const [year, month] = date.split('-');
+    return `${this.testID}.item_${year}-${month}`;
+  }
+
+  getListItem(date: string) {
+    return screen.getByTestId(this.getItemTestID(date));
+  }
+
+  getListItemTitle(date: string) {
+    return within(this.getListItem(date)).getByText(getMonthTitle(date));
+  }
+
+  /** Static header */
+
+  get staticHeaderTestID() {
+    return `${this.testID}.staticHeader`;
+  }
+
+  getStaticHeader() {
+    return screen.getByTestId(this.staticHeaderTestID);
+  }
+
+  getStaticHeaderTitle() {
+    return screen.getByTestId(`${this.staticHeaderTestID}.title`).children[0];
+  }
+
+  getStaticHeaderLeftArrow() {
+    return screen.getByTestId(`${this.staticHeaderTestID}.leftArrow`);
+  }
+
+  getStaticHeaderRightArrow() {
+    return screen.getByTestId(`${this.staticHeaderTestID}.rightArrow`);
+  }
+
+  pressLeftArrow() {
+    fireEvent(this.getStaticHeaderLeftArrow(), 'onPress');
+  }
+
+  pressRightArrow() {
+    fireEvent(this.getStaticHeaderRightArrow(), 'onPress');
+  }
+
+  /** Day press */
+
+  getDayTestID(date: string) {
+    const [year, month] = date.split('-');
+    return `${this.testID}.item_${year}-${month}.day_${date}`;
+  }
+
+  getDay(date: string) {
+    return screen.getByTestId(this.getDayTestID(date));
+  }
+
+  selectDay(date: string) {
+    fireEvent(this.getDay(date), 'onPress');
+  }
+}

src/calendar-list/index.tsx

@@ -281,7 +281,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
   ]);
 
   return (
-    <View style={style.current.flatListContainer}>
+    <View style={style.current.flatListContainer} testID={testID}>
       <FlatList
         // @ts-expect-error
         ref={list}
@@ -294,7 +294,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
         initialNumToRender={range.current}
         initialScrollIndex={initialDateIndex}
         viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
-        testID={testID}
+        testID={`${testID}.list`}
         onLayout={onLayout}
         removeClippedSubviews={removeClippedSubviews}
         pagingEnabled={pagingEnabled}

src/calendar/index.spec.js → src/calendar/__tests__/index.spec.js

@@ -2,8 +2,8 @@ import XDate from 'xdate';
 import React from 'react';
 import {getTextNodes} from 'react-component-driver';
 import {advanceTo, clear as clearDate} from 'jest-date-mock';
-import {getDaysArray, partial} from '../testUtils';
-import {CalendarDriver} from './driver';
+import {getDaysArray, partial} from '../../testUtils';
+import {CalendarDriver} from '../driver';
 
 describe('Calendar', () => {
   let currentDate;

src/calendar/driver.js

@@ -3,7 +3,6 @@ import {swipeDirections} from 'react-native-swipe-gestures';
 import Calendar from '.';
 import {BasicDayDriver} from './day/basic/driver';
 import {CalendarHeaderDriver} from './header/driver';
-import {SELECT_DATE_SLOT, WEEK_NUMBER} from '../testIDs';
 
 export class CalendarDriver extends ComponentDriver {
   constructor(testID = 'calendar') {

src/calendar/index.tsx

@@ -283,6 +283,7 @@ const Calendar = (props: CalendarProps) => {
     <GestureComponent {...gestureProps}>
       <View
         style={[style.current.container, propsStyle]}
+        testID={testID}
         accessibilityElementsHidden={accessibilityElementsHidden} // iOS
         importantForAccessibility={importantForAccessibility} // Android
       >

src/expandableCalendar/WeekCalendar/__tests__/index.spec.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import WeekCalendar from '../index';
+import {WeekCalendarDriver} from '../driver';
+
+const CURRENT = '2022-09-09';
+
+const testIdWeekCalendar = 'myWeekCalendar';
+
+const defaultProps = {
+  testID: testIdWeekCalendar,
+  current: CURRENT
+};
+
+const TestCase = props => {
+  return <WeekCalendar {...defaultProps} {...props} />;
+};
+
+describe('WeekCalendar', () => {
+  describe('Week', () => {
+    const driver = new WeekCalendarDriver(testIdWeekCalendar, <TestCase />);
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+      driver.render();
+    });
+
+    // afterEach(() => driver.clear());
+
+    describe('Init', () => {
+      it('should display current week', () => {
+        // list
+        expect(driver.getListProps().horizontal).toBe(true);
+        expect(driver.getListProps().data.length).toBe(13);
+        expect(driver.getListProps().initialScrollIndex).toBe(6);
+
+        // list items
+        expect(driver.getListItem(CURRENT)).toBeDefined();
+      });
+    });
+  });
+});

src/expandableCalendar/WeekCalendar/driver.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import {fireEvent, render, screen} from '@testing-library/react-native';
+
+export class WeekCalendarDriver {
+  testID: string;
+  element: React.ReactElement;
+  renderTree: ReturnType<typeof render>;
+
+  constructor(testID: string, element: React.ReactElement) {
+    this.testID = testID;
+    this.element = element;
+    this.renderTree = this.render(element);
+  }
+
+  render(element = this.element): ReturnType<typeof render> {
+    if (!element) throw 'Element is missing';
+    this.renderTree = render(element);
+    return this.renderTree;
+  }
+
+  getWeekCalendar() {
+    return this.renderTree.getByTestId(`${this.testID}.weekCalendar.list`);
+  }
+
+  /** List */
+
+  getListProps() {
+    const props = screen.getByTestId(`${this.testID}.list`).props;
+    return props;
+  }
+
+  getItemTestID(date: string) {
+    return `${this.testID}.week_${date}`;
+  }
+
+  getListItem(date: string) {
+    return screen.getByTestId(this.getItemTestID(date));
+  }
+
+  /** Day */
+
+  getDayTestID(date: string) {
+    return `${this.testID}.day_${date}`;
+  }
+
+  getDay(date: string) {
+    return this.renderTree?.getByTestId(this.getDayTestID(date));
+  }
+
+  selectDay(date: string) {
+    fireEvent(this.getDay(date), 'onPress');
+  }
+}