Skip to content

Tests using react-testing-library #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kevindantas wants to merge 30 commits into
base: master
Choose a base branch
from
Open

Tests using react-testing-library #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
88d65b5
Install styled-components and update react version
Mar 15, 2019
c4576b9
Use `styled-components` to stylize the components
Mar 15, 2019
2de769d
Fix DayNumber CSS specificity
Mar 18, 2019
470daf9
Remove unused Sass styles/files
Mar 18, 2019
807c0b0
Setup `react-testing-library`
Mar 18, 2019
74d4f77
Add Month test cases using `react-testing-library`
Mar 18, 2019
e7db5ec
Use `jest-styled-components`
Mar 20, 2019
35f3317
Refactor DayCell to use style-components
Mar 20, 2019
b1cc9e2
Add test cases to DayCell
Mar 20, 2019
07a6cc9
Remove unused styles
Mar 20, 2019
36bd8f8
Use new syntax on `styled-components`
Mar 20, 2019
6e447ab
Add selection test cases for DateRange
Mar 20, 2019
1485d65
Add test cases for DefinedRange component
Mar 21, 2019
1335a36
Fix StaticRange hover style
kevindantas Mar 21, 2019
35391f2
Test DefinedRange preview range props
kevindantas Mar 21, 2019
f310dcf
Add title on the buttons and add Calendar test cases
kevindantas Mar 21, 2019
fcd5327
Add test when selecting endDate before startDate
kevindantas Mar 21, 2019
d41b862
Add test to the DateRangePicker
kevindantas Mar 22, 2019
0d330c7
Remove obsolete tests
kevindantas Mar 22, 2019
e256921
Optimize SVG image
kevindantas Mar 22, 2019
ef56209
Add testid on Month
kevindantas Mar 22, 2019
58c8143
Ignore `coverage` folder
kevindantas Mar 22, 2019
57ec0e7
Fix range preview bug
kevindantas Mar 22, 2019
8534aa0
FIx some layout issues on DayCell
kevindantas Mar 22, 2019
1ab4583
Remove unused styles
kevindantas Mar 22, 2019
cec8296
Fix ESLint errors
kevindantas Mar 22, 2019
d9d2cf1
Merge branch 'feature/use-styled-components' into feature/react-testi…
kevindantas Mar 22, 2019
d9946ce
Refactor `dayToday` styles
kevindantas Mar 22, 2019
9d6b0ec
Rename style InfiniteMonths styled component
kevindantas Mar 22, 2019
3a4697c
Refactor MonthAndYearPicker
kevindantas Mar 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ dist/
.idea
*.orig
lib/
coverage
1 change: 1 addition & 0 deletions jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@ module.exports = {
verbose: true,
setupFiles: ['<rootDir>/setupTests.js'],
testPathIgnorePatterns: ['/node_modules/', '/dist/', '/demo/dist/'],
setupTestFrameworkScriptFile: '<rootDir>/rtl.setup.js',
};
10 changes: 7 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@
"classnames": "^2.2.1",
"date-fns": "2.0.0-alpha.7",
"prop-types": "^15.5.10",
"react-list": "^0.8.8"
"react-list": "^0.8.8",
"styled-components": "^4.1.3"
},
"peerDependencies": {
"react": "^0.14 || ^15.0.0-rc || >=15.0"
Expand All @@ -64,16 +65,19 @@
"eslint-plugin-react": "^7.5.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.1.4",
"jest-dom": "^3.1.3",
"jest-styled-components": "^6.3.1",
"normalize.css": "^7.0.0",
"postcss": "^7.0.1",
"postcss-cli": "^6.0.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.10",
"precss": "^2.0.0",
"prettier": "^1.9.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react": "16.4.2",
"react-dom": "16.4.2",
"react-hot-loader": "^3.1.3",
"react-testing-library": "^6.0.0",
"style-loader": "^0.19.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7",
Expand Down
3 changes: 3 additions & 0 deletions rtl.setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import 'jest-dom/extend-expect';
import 'jest-styled-components';
import 'react-testing-library/cleanup-after-each';
142 changes: 36 additions & 106 deletions src/components/Calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,15 @@ import {
} from 'date-fns';
import defaultLocale from 'date-fns/locale/en-US';
import coreStyles from '../styles';
import {
DateDisplay,
CalendarWrapper,
Months,
InfiniteMonthsWrapper,
DateDisplayItem,
} from './styles/Calendar.styled.js';
import { WeekDays, WeekDay } from './styles/Month.styled.js';
import MonthAndYearPicker from './MonthAndYearPicker.js';

class Calendar extends PureComponent {
constructor(props, context) {
Expand All @@ -38,7 +47,6 @@ class Calendar extends PureComponent {
this.onDragSelectionStart = this.onDragSelectionStart.bind(this);
this.onDragSelectionEnd = this.onDragSelectionEnd.bind(this);
this.onDragSelectionMove = this.onDragSelectionMove.bind(this);
this.renderMonthAndYear = this.renderMonthAndYear.bind(this);
this.updatePreview = this.updatePreview.bind(this);
this.estimateMonthSize = this.estimateMonthSize.bind(this);
this.handleScroll = this.handleScroll.bind(this);
Expand Down Expand Up @@ -160,120 +168,47 @@ class Calendar extends PureComponent {
onShownDateChange && onShownDateChange(visibleMonth);
}
}
renderMonthAndYear(focusedDate, changeShownDate, props) {
const { showMonthArrow, locale, minDate, maxDate, showMonthAndYearPickers } = props;
const upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear();
const lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear();
const styles = this.styles;
return (
<div onMouseUp={e => e.stopPropagation()} className={styles.monthAndYearWrapper}>
{showMonthArrow ? (
<button
type="button"
className={classnames(styles.nextPrevButton, styles.prevButton)}
onClick={() => changeShownDate(-1, 'monthOffset')}>
<i />
</button>
) : null}
{showMonthAndYearPickers ? (
<span className={styles.monthAndYearPickers}>
<span className={styles.monthPicker}>
<select
value={focusedDate.getMonth()}
onChange={e => changeShownDate(e.target.value, 'setMonth')}>
{locale.localize.months().map((month, i) => (
<option key={i} value={i}>
{month}
</option>
))}
</select>
</span>
<span className={styles.monthAndYearDivider} />
<span className={styles.yearPicker}>
<select
value={focusedDate.getFullYear()}
onChange={e => changeShownDate(e.target.value, 'setYear')}>
{new Array(upperYearLimit - lowerYearLimit + 1)
.fill(upperYearLimit)
.map((val, i) => {
const year = val - i;
return (
<option key={year} value={year}>
{year}
</option>
);
})}
</select>
</span>
</span>
) : (
<span className={styles.monthAndYearPickers}>
{locale.localize.months()[focusedDate.getMonth()]} {focusedDate.getFullYear()}
</span>
)}
{showMonthArrow ? (
<button
type="button"
className={classnames(styles.nextPrevButton, styles.nextButton)}
onClick={() => changeShownDate(+1, 'monthOffset')}>
<i />
</button>
) : null}
</div>
);
}

renderWeekdays() {
const now = new Date();
return (
<div className={this.styles.weekDays}>
<WeekDays>
{eachDayOfInterval({
start: startOfWeek(now, this.dateOptions),
end: endOfWeek(now, this.dateOptions),
}).map((day, i) => (
<span className={this.styles.weekDay} key={i}>
{format(day, 'ddd', this.dateOptions)}
</span>
))}
</div>
}).map((day, i) => <WeekDay key={i}>{format(day, 'ddd', this.dateOptions)}</WeekDay>)}
</WeekDays>
);
}
renderDateDisplay() {
const { focusedRange, color, ranges, rangeColors } = this.props;
const defaultColor = rangeColors[focusedRange[0]] || color;
const styles = this.styles;
return (
<div className={styles.dateDisplayWrapper}>
<div>
{ranges.map((range, i) => {
if (range.showDateDisplay === false || (range.disabled && !range.showDateDisplay))
return null;
return (
<div
className={styles.dateDisplay}
key={i}
style={{ color: range.color || defaultColor }}>
<span
className={classnames(styles.dateDisplayItem, {
[styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 0,
})}
<DateDisplay key={i} style={{ color: range.color || defaultColor }}>
<DateDisplayItem
active={focusedRange[0] === i && focusedRange[1] === 0}
onFocus={() => this.handleRangeFocusChange(i, 0)}>
<input
disabled={range.disabled}
readOnly
value={this.formatDateDisplay(range.startDate, 'Early')}
/>
</span>
<span
className={classnames(styles.dateDisplayItem, {
[styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 1,
})}
</DateDisplayItem>
<DateDisplayItem
active={focusedRange[0] === i && focusedRange[1] === 1}
onFocus={() => this.handleRangeFocusChange(i, 1)}>
<input
disabled={range.disabled}
readOnly
value={this.formatDateDisplay(range.endDate, 'Continuous')}
/>
</span>
</div>
</DateDisplayItem>
</DateDisplay>
);
})}
</div>
Expand Down Expand Up @@ -356,17 +291,17 @@ class Calendar extends PureComponent {
minDate,
rangeColors,
color,
navigatorRenderer,
} = this.props;
const { scrollArea, focusedDate } = this.state;
const isVertical = direction === 'vertical';
const navigatorRenderer = this.props.navigatorRenderer || this.renderMonthAndYear;

const ranges = this.props.ranges.map((range, i) => ({
...range,
color: range.color || rangeColors[i] || color,
}));
return (
<div
<CalendarWrapper
className={classnames(this.styles.calendarWrapper, this.props.className)}
onMouseUp={() => this.setState({ drag: { status: false, range: {} } })}
onMouseLeave={() => {
Expand All @@ -377,11 +312,9 @@ class Calendar extends PureComponent {
{scroll.enabled ? (
<div>
{isVertical && this.renderWeekdays(this.dateOptions)}
<div
className={classnames(
this.styles.infiniteMonths,
isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
)}
<InfiniteMonthsWrapper
data-testid="infinite-months"
direction={direction}
onMouseLeave={() => onPreviewChange && onPreviewChange()}
style={{
width: scrollArea.calendarWidth + 11,
Expand Down Expand Up @@ -428,14 +361,10 @@ class Calendar extends PureComponent {
);
}}
/>
</div>
</InfiniteMonthsWrapper>
</div>
) : (
<div
className={classnames(
this.styles.months,
isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
)}>
<Months direction={direction}>
{new Array(this.props.months).fill(null).map((_, i) => {
const monthStep = addMonths(this.state.focusedDate, i);
return (
Expand All @@ -459,16 +388,14 @@ class Calendar extends PureComponent {
/>
);
})}
</div>
</Months>
)}
</div>
</CalendarWrapper>
);
}
}

Calendar.defaultProps = {
showMonthArrow: true,
showMonthAndYearPickers: true,
disabledDates: [],
classNames: {},
locale: defaultLocale,
Expand All @@ -489,11 +416,14 @@ Calendar.defaultProps = {
minDate: addYears(new Date(), -100),
rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
dragSelectionEnabled: true,
navigatorRenderer(focusedDate, changeShownDate, props) {
return (
<MonthAndYearPicker {...props} focusedDate={focusedDate} changeShownDate={changeShownDate} />
);
},
};

Calendar.propTypes = {
showMonthArrow: PropTypes.bool,
showMonthAndYearPickers: PropTypes.bool,
disabledDates: PropTypes.array,
minDate: PropTypes.object,
maxDate: PropTypes.object,
Expand Down
7 changes: 0 additions & 7 deletions src/components/Calendar.test.js
View file
Open in desktop

This file was deleted.

11 changes: 8 additions & 3 deletions src/components/DateRange.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import Calendar from './Calendar.js';
import { rangeShape } from './DayCell';
import { findNextRangeIndex, generateStyles } from '../utils.js';
import { isBefore, differenceInCalendarDays, addDays, min, isWithinInterval, max } from 'date-fns';
import classnames from 'classnames';
import coreStyles from '../styles';

class DateRange extends Component {
Expand All @@ -20,6 +19,7 @@ class DateRange extends Component {
};
this.styles = generateStyles([coreStyles, props.classNames]);
}

calcNewSelection(value, isSingleValue = true) {
const focusedRange = this.props.focusedRange || this.state.focusedRange;
const { ranges, onChange, maxDate, moveRangeOnFirstSelection, disabledDates } = this.props;
Expand Down Expand Up @@ -76,6 +76,7 @@ class DateRange extends Component {
nextFocusRange: nextFocusRange,
};
}

setSelection(value, isSingleValue) {
const { onChange, ranges, onRangeFocusChange } = this.props;
const focusedRange = this.props.focusedRange || this.state.focusedRange;
Expand All @@ -95,10 +96,12 @@ class DateRange extends Component {
});
onRangeFocusChange && onRangeFocusChange(newSelection.nextFocusRange);
}

handleRangeFocusChange(focusedRange) {
this.setState({ focusedRange });
this.props.onRangeFocusChange && this.props.onRangeFocusChange(focusedRange);
}

updatePreview(val) {
if (!val) {
this.setState({ preview: null });
Expand All @@ -107,8 +110,10 @@ class DateRange extends Component {
const { rangeColors, ranges } = this.props;
const focusedRange = this.props.focusedRange || this.state.focusedRange;
const color = ranges[focusedRange[0]].color || rangeColors[focusedRange[0]] || color;
this.setState({ preview: { ...val.range, color } });
const range = val.range || val;
this.setState({ preview: { ...range, color } });
}

render() {
return (
<Calendar
Expand All @@ -120,7 +125,7 @@ class DateRange extends Component {
}}
{...this.props}
displayMode="dateRange"
className={classnames(this.styles.dateRangeWrapper, this.props.className)}
className={this.props.className}
onChange={this.setSelection}
updateRange={val => this.setSelection(val, false)}
ref={target => {
Expand Down
7 changes: 0 additions & 7 deletions src/components/DateRange.test.js
View file
Open in desktop

This file was deleted.

Loading