v1.0 with SW PWA enabled

frontend/node_modules/react-day-picker/src/components/Month/Month.test.tsx

@@ -0,0 +1,230 @@
+import { screen } from '@testing-library/react';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render';
+import { getMonthCaption, getMonthGrid } from 'test/selectors';
+
+import { CustomComponents } from 'types/DayPickerBase';
+
+import { Month, MonthProps } from './Month';
+
+let root: HTMLDivElement;
+
+const displayMonth = new Date(2022, 10, 4);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const testStyles: Record<string, any> = {
+  caption_start: { color: 'red' },
+  caption_end: { background: 'blue' },
+  caption_between: { fontSize: 20 }
+};
+
+const testClassNames: Record<string, string> = {
+  caption_start: 'caption_start',
+  caption_end: 'caption_end',
+  caption_between: 'caption_between'
+};
+
+type Test = {
+  monthProps: MonthProps;
+  dayPickerProps: DayPickerProps;
+  expected: string[];
+  notExpected: string[];
+};
+
+function setup(props: MonthProps, dayPickerProps?: DayPickerProps) {
+  const view = customRender(<Month {...props} />, dayPickerProps);
+  root = view.container.firstChild as HTMLDivElement;
+}
+describe('when rendered', () => {
+  beforeEach(() => {
+    setup({ displayIndex: 0, displayMonth });
+  });
+  test('the caption id should be the aria-labelledby of the grid', () => {
+    const captionId = getMonthCaption().getAttribute('id');
+    const gridLabelledBy = getMonthGrid().getAttribute('aria-labelledby');
+    expect(captionId).toEqual(gridLabelledBy);
+  });
+});
+
+describe('when rendered with a custom id', () => {
+  const id = 'custom-id';
+  beforeEach(() => {
+    setup({ displayIndex: 0, displayMonth }, { id });
+  });
+  test('the caption id should include the display index', () => {
+    const captionId = getMonthCaption().getAttribute('id');
+    expect(captionId).toEqual('custom-id-0');
+  });
+
+  test('the table id should include the display index', () => {
+    const tableId = getMonthGrid().getAttribute('id');
+    expect(tableId).toEqual('custom-id-grid-0');
+  });
+});
+
+describe('when using a custom Caption component', () => {
+  const components: CustomComponents = {
+    Caption: () => <>custom caption foo</>
+  };
+  beforeEach(() => {
+    setup({ displayIndex: 0, displayMonth }, { components });
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getByText('custom caption foo')).toBeInTheDocument();
+  });
+});
+
+describe('when dir is ltr', () => {
+  const testLtr: Test[] = [
+    {
+      monthProps: {
+        displayIndex: 0,
+        displayMonth
+      },
+      dayPickerProps: {
+        numberOfMonths: 1,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_start', 'caption_end'],
+      notExpected: ['caption_between']
+    },
+    {
+      monthProps: {
+        displayIndex: 0,
+        displayMonth
+      },
+      dayPickerProps: {
+        numberOfMonths: 2,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_start'],
+      notExpected: ['caption_between', 'caption_end']
+    },
+    {
+      monthProps: {
+        displayIndex: 1,
+        displayMonth
+      },
+      dayPickerProps: {
+        numberOfMonths: 2,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_end'],
+      notExpected: ['caption_start', 'caption_between']
+    },
+    {
+      monthProps: {
+        displayIndex: 1,
+        displayMonth
+      },
+      dayPickerProps: {
+        numberOfMonths: 3,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_between'],
+      notExpected: ['caption_start', 'caption_end']
+    }
+  ];
+
+  describe.each(testLtr)(
+    'when displayIndex is $monthProps.displayIndex and numberOfMonths is $dayPickerProps.numberOfMonths',
+    ({ monthProps, dayPickerProps, expected, notExpected }) => {
+      beforeEach(() => {
+        setup(monthProps, dayPickerProps);
+      });
+      test.each(expected)(`the root should have the %s class`, (name) =>
+        expect(root).toHaveClass(testClassNames[name])
+      );
+      test.each(expected)(`the root should have the %s style`, (name) =>
+        expect(root).toHaveStyle(testStyles[name])
+      );
+      test.each(notExpected)(`the root should not have the %s class`, (name) =>
+        expect(root).not.toHaveClass(testClassNames[name])
+      );
+    }
+  );
+});
+
+describe('when dir is rtl', () => {
+  const testRtl: Test[] = [
+    {
+      monthProps: {
+        displayIndex: 0,
+        displayMonth
+      },
+      dayPickerProps: {
+        dir: 'rtl',
+        numberOfMonths: 1,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_start', 'caption_end'],
+      notExpected: ['caption_between']
+    },
+    {
+      monthProps: {
+        displayIndex: 0,
+        displayMonth
+      },
+      dayPickerProps: {
+        dir: 'rtl',
+        numberOfMonths: 2,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_end'],
+      notExpected: ['caption_between', 'caption_start']
+    },
+    {
+      monthProps: {
+        displayIndex: 1,
+        displayMonth
+      },
+      dayPickerProps: {
+        dir: 'rtl',
+        numberOfMonths: 2,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_start'],
+      notExpected: ['caption_end', 'caption_between']
+    },
+    {
+      monthProps: {
+        displayIndex: 1,
+        displayMonth
+      },
+      dayPickerProps: {
+        dir: 'rtl',
+        numberOfMonths: 3,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_between'],
+      notExpected: ['caption_start', 'caption_end']
+    }
+  ];
+
+  describe.each(testRtl)(
+    'when displayIndex is $monthProps.displayIndex and numberOfMonths is $dayPickerProps.numberOfMonths',
+    ({ monthProps, dayPickerProps, expected, notExpected }) => {
+      beforeEach(() => {
+        setup(monthProps, dayPickerProps);
+      });
+      test.each(expected)(`the root should have the %s class`, (name) =>
+        expect(root).toHaveClass(testClassNames[name])
+      );
+      test.each(expected)(`the root should have the %s style`, (name) =>
+        expect(root).toHaveStyle(testStyles[name])
+      );
+      test.each(notExpected)(`the root should not have the %s class`, (name) =>
+        expect(root).not.toHaveClass(testClassNames[name])
+      );
+    }
+  );
+});