react-native-easy-calendar/lib/module/Components/Month.test.js

Customizable, easy-to-use, performant calendar components for React Native

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import dayjs from 'dayjs';
import LocaleData from 'dayjs/plugin/localeData';
import { render, fireEvent } from '@testing-library/react-native';
import { ThemeContext } from '../Contexts';
import { DefaultTheme } from '../Themes';
import { DefaultLocale } from '../Locales';
dayjs.extend(LocaleData);
import Month from './Month';
test('Month renders without error', () => {
  const month = new MonthPage({});
  expect(month.component).toBeTruthy();
});
test('Component calls onPress callback when clicked', () => {
  const onPress = jest.fn();
  const month = new MonthPage({
    onPress
  });
  fireEvent.press(month.component);
  expect(onPress).toHaveBeenCalledTimes(1);
});
describe('Enabling and disabling', () => {
  test('Disable clicking if prop ´isDisabled´ is true', () => {
    const month = new MonthPage({
      isDisabled: true
    });
    expect(month.component).toBeDisabled();
  });
  test('Enable clicking if prop ´isDisabled´ is false', () => {
    const month = new MonthPage({
      isDisabled: false
    });
    expect(month.component).toBeEnabled();
  });
});
describe('Theme context', () => {
  test('Container applies normal theme in enabled state', () => {
    const month = new MonthPage({
      isDisabled: false,
      isSelected: false
    });
    expect(month.component).toHaveStyle(theme.normalMonthContainer);
    expect(month.component).not.toHaveStyle(theme.selectedMonthContainer);
    expect(month.component).not.toHaveStyle(theme.disabledMonthContainer);
  });
  test('Container applies disabled theme in disabled state', () => {
    const month = new MonthPage({
      isDisabled: true
    });
    expect(month.component).toHaveStyle([theme.normalMonthContainer, theme.disabledMonthContainer]);
    expect(month.component).not.toHaveStyle(theme.selectedMonthContainer);
  });
  test('Container applies selected theme in selected state', () => {
    const month = new MonthPage({
      isSelected: true
    });
    expect(month.component).toHaveStyle([theme.normalMonthContainer, theme.selectedMonthContainer]);
    expect(month.component).not.toHaveStyle(theme.disabledMonthContainer);
  });
  test('Container applies selected + disabled themes in selected + disabled state', () => {
    const month = new MonthPage({
      isSelected: true,
      isDisabled: true
    });
    expect(month.component).toHaveStyle([theme.normalMonthContainer, theme.selectedMonthContainer, theme.disabledMonthContainer]);
  });
  test('Text applies normal theme in enabled state', () => {
    const month = new MonthPage({
      isDisabled: false,
      isSelected: false
    });
    expect(month.text).toHaveStyle(theme.normalMonthText);
    expect(month.text).not.toHaveStyle(theme.selectedMonthText);
    expect(month.text).not.toHaveStyle(theme.disabledMonthText);
  });
  test('Text applies disabled theme in disabled state', () => {
    const month = new MonthPage({
      isDisabled: true
    });
    expect(month.text).toHaveStyle([theme.normalMonthText, theme.disabledMonthText]);
    expect(month.text).not.toHaveStyle(theme.selectedMonthText);
  });
  test('Text applies selected theme in selected state', () => {
    const month = new MonthPage({
      isSelected: true
    });
    expect(month.text).toHaveStyle([theme.normalMonthText, theme.selectedMonthText]);
    expect(month.text).not.toHaveStyle(theme.disabledMonthText);
  });
  test('Text applies selected + disabled themes in selected + disabled state', () => {
    const month = new MonthPage({
      isSelected: true,
      isDisabled: true
    });
    expect(month.text).toHaveStyle([theme.normalMonthText, theme.selectedMonthText, theme.disabledMonthText]);
  });
});

class MonthPage {
  constructor({
    date = '2020-01-01',
    onPress = () => {},
    locale = DefaultLocale,
    isSelected = false,
    isDisabled = false
  }) {
    _defineProperty(this, "component", void 0);

    _defineProperty(this, "text", void 0);

    const {
      getByLabelText,
      getByTestId
    } = render( /*#__PURE__*/React.createElement(ThemeContext.Provider, {
      value: theme
    }, /*#__PURE__*/React.createElement(Month, {
      locale,
      date,
      onPress,
      isSelected,
      isDisabled
    })));
    const months = dayjs(date).localeData().monthsShort();
    const index = dayjs(date).month();
    this.component = getByLabelText(months[index]);
    this.text = getByTestId('month-text');
  }

} // Mix of properties which get overwritten and which don't


const theme = { ...DefaultTheme,
  normalMonthContainer: {
    marginTop: 10,
    backgroundColor: 'black'
  },
  selectedMonthContainer: {
    marginBottom: 10,
    backgroundColor: 'green'
  },
  disabledMonthContainer: {
    marginLeft: 10,
    backgroundColor: 'gray'
  },
  normalMonthText: {
    marginTop: 10,
    color: 'black'
  },
  selectedMonthText: {
    marginBottom: 10,
    color: 'green'
  },
  disabledMonthText: {
    marginLeft: 10,
    color: 'gray'
  }
};
export const testLocale = { ...DefaultLocale,
  monthsShort: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']
};
//# sourceMappingURL=Month.test.js.map