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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.testLocale = void 0;

var _react = _interopRequireDefault(require("react"));

var _dayjs = _interopRequireDefault(require("dayjs"));

var _localeData = _interopRequireDefault(require("dayjs/plugin/localeData"));

var _reactNative = require("@testing-library/react-native");

var _Contexts = require("../Contexts");

var _Themes = require("../Themes");

var _Locales = require("../Locales");

var _Month = _interopRequireDefault(require("./Month"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

_dayjs.default.extend(_localeData.default);

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
  });

  _reactNative.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 = _Locales.DefaultLocale,
    isSelected = false,
    isDisabled = false
  }) {
    _defineProperty(this, "component", void 0);

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

    const {
      getByLabelText,
      getByTestId
    } = (0, _reactNative.render)( /*#__PURE__*/_react.default.createElement(_Contexts.ThemeContext.Provider, {
      value: theme
    }, /*#__PURE__*/_react.default.createElement(_Month.default, {
      locale,
      date,
      onPress,
      isSelected,
      isDisabled
    })));
    const months = (0, _dayjs.default)(date).localeData().monthsShort();
    const index = (0, _dayjs.default)(date).month();
    this.component = getByLabelText(months[index]);
    this.text = getByTestId('month-text');
  }

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


const theme = { ..._Themes.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'
  }
};
const testLocale = { ..._Locales.DefaultLocale,
  monthsShort: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']
};
exports.testLocale = testLocale;
//# sourceMappingURL=Month.test.js.map