Skip to content

Commit f735f63

Browse files
JBWatenbergScalityJBWatenbergScality
committed
Add FormattedDateTime components
1 parent dfffff2 commit f735f63

8 files changed

+384
-0
lines changed

‎global-setup.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = async () => {
2+
process.env.TZ = 'UTC';
3+
};

‎jest.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = {
22
clearMocks: true,
3+
globalSetup: './global-setup.js',
34
setupFilesAfterEnv: ['./setupTests.js'],
45
moduleNameMapper: {
56
'\\.(css|less)$': 'identity-obj-proxy',

‎package-lock.json

+36
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@fortawesome/free-regular-svg-icons": "^5.15.3",
3838
"@fortawesome/free-solid-svg-icons": "^5.15.3",
3939
"@fortawesome/react-fontawesome": "^0.1.14",
40+
"@js-temporal/polyfill": "^0.4.3",
4041
"@storybook/addon-actions": "^6.4.22",
4142
"@storybook/addon-essentials": "^6.4.22",
4243
"@storybook/addon-knobs": "^6.1.20",
@@ -94,6 +95,7 @@
9495
"vega-tooltip": "^0.27.0"
9596
},
9697
"peerDependencies": {
98+
"@js-temporal/polyfill": "^0.4.3",
9799
"@fortawesome/fontawesome-free": "^5.10.2",
98100
"@fortawesome/fontawesome-svg-core": "^1.2.35",
99101
"@fortawesome/free-regular-svg-icons": "^5.15.3",

‎src/lib/components/date/FormattedDateTime.spec.tsx

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import { render, screen } from '@testing-library/react';
2+
import { FormattedDateTime } from './FormattedDateTime';
3+
import userEvent from '@testing-library/user-event';
4+
5+
describe('FormatttedDateTime', () => {
6+
it('should display the date in the expected format', () => {
7+
//S
8+
render(
9+
<FormattedDateTime
10+
format="date"
11+
value={new Date('2022-10-01T00:00:00Z')}
12+
/>,
13+
);
14+
//V
15+
expect(screen.getByText('2022-10-01')).toBeInTheDocument();
16+
});
17+
18+
it('should display the date time in the expected format', () => {
19+
//S
20+
render(
21+
<FormattedDateTime
22+
format="date-time-second"
23+
value={new Date('2022-10-01T00:00:00Z')}
24+
/>,
25+
);
26+
//V
27+
expect(screen.getByText('2022-10-01 00:00:00')).toBeInTheDocument();
28+
});
29+
30+
it('should display a relative date with the right format when the date occured few seconds before', async () => {
31+
//S
32+
const today = new Date('2022-10-10T12:00:00Z');
33+
jest.useFakeTimers('modern');
34+
jest.setSystemTime(today);
35+
render(
36+
<FormattedDateTime
37+
format="relative"
38+
value={new Date('2022-10-10T11:59:37Z')}
39+
/>,
40+
);
41+
//V
42+
expect(screen.getByText('few seconds ago')).toBeInTheDocument();
43+
//E
44+
await userEvent.hover(screen.getByText('few seconds ago'));
45+
//V
46+
expect(screen.getByText('2022-10-10 11:59:37')).toBeInTheDocument();
47+
});
48+
49+
it('should display a relative date with the right format when the date occured 1 minute before', async () => {
50+
//S
51+
const today = new Date('2022-10-10T12:00:00Z');
52+
jest.useFakeTimers('modern');
53+
jest.setSystemTime(today);
54+
render(
55+
<FormattedDateTime
56+
format="relative"
57+
value={new Date('2022-10-10T11:59:00Z')}
58+
/>,
59+
);
60+
//V
61+
expect(screen.getByText('1 minute ago')).toBeInTheDocument();
62+
//E
63+
await userEvent.hover(screen.getByText('1 minute ago'));
64+
//V
65+
expect(screen.getByText('2022-10-10 11:59:00')).toBeInTheDocument();
66+
});
67+
68+
it('should display a relative date with the right format when the date occured 2 minutes before', async () => {
69+
//S
70+
const today = new Date('2022-10-10T12:00:00Z');
71+
jest.useFakeTimers('modern');
72+
jest.setSystemTime(today);
73+
render(
74+
<FormattedDateTime
75+
format="relative"
76+
value={new Date('2022-10-10T11:57:26Z')}
77+
/>,
78+
);
79+
//V
80+
expect(screen.getByText('2 minutes ago')).toBeInTheDocument();
81+
//E
82+
await userEvent.hover(screen.getByText('2 minutes ago'));
83+
//V
84+
expect(screen.getByText('2022-10-10 11:57:26')).toBeInTheDocument();
85+
});
86+
87+
it('should display a relative date with the right format when the date occured 1 day before', async () => {
88+
//S
89+
const today = new Date('2022-10-10T12:00:00Z');
90+
jest.useFakeTimers('modern');
91+
jest.setSystemTime(today);
92+
render(
93+
<FormattedDateTime
94+
format="relative"
95+
value={new Date('2022-10-09T11:57:26Z')}
96+
/>,
97+
);
98+
//V
99+
expect(screen.getByText('1 day ago')).toBeInTheDocument();
100+
//E
101+
await userEvent.hover(screen.getByText('1 day ago'));
102+
//V
103+
expect(screen.getByText('2022-10-09 11:57:26')).toBeInTheDocument();
104+
});
105+
106+
it('should display a relative date with the right format when the date occured 2 days before', async () => {
107+
//S
108+
const today = new Date('2022-10-10T12:00:00Z');
109+
jest.useFakeTimers('modern');
110+
jest.setSystemTime(today);
111+
render(
112+
<FormattedDateTime
113+
format="relative"
114+
value={new Date('2022-10-08T11:57:26Z')}
115+
/>,
116+
);
117+
//V
118+
expect(screen.getByText('2 days ago')).toBeInTheDocument();
119+
//E
120+
await userEvent.hover(screen.getByText('2 days ago'));
121+
//V
122+
expect(screen.getByText('2022-10-08 11:57:26')).toBeInTheDocument();
123+
});
124+
125+
it('should display a relative date with the right format when the date occured 1 month before', async () => {
126+
//S
127+
const today = new Date('2022-10-10T12:00:00Z');
128+
jest.useFakeTimers('modern');
129+
jest.setSystemTime(today);
130+
render(
131+
<FormattedDateTime
132+
format="relative"
133+
value={new Date('2022-09-08T11:57:26Z')}
134+
/>,
135+
);
136+
//V
137+
expect(screen.getByText('1 month ago')).toBeInTheDocument();
138+
//E
139+
await userEvent.hover(screen.getByText('1 month ago'));
140+
//V
141+
expect(screen.getByText('2022-09-08 11:57:26')).toBeInTheDocument();
142+
});
143+
144+
it('should display a relative date with the right format when the date occured 2 months before', async () => {
145+
//S
146+
const today = new Date('2022-10-10T12:00:00Z');
147+
jest.useFakeTimers('modern');
148+
jest.setSystemTime(today);
149+
render(
150+
<FormattedDateTime
151+
format="relative"
152+
value={new Date('2022-08-08T11:57:26Z')}
153+
/>,
154+
);
155+
//V
156+
expect(screen.getByText('2 months ago')).toBeInTheDocument();
157+
//E
158+
await userEvent.hover(screen.getByText('2 months ago'));
159+
//V
160+
expect(screen.getByText('2022-08-08 11:57:26')).toBeInTheDocument();
161+
});
162+
163+
it('should display a relative date with the right format when the date occured 2 months after', async () => {
164+
//S
165+
const today = new Date('2022-10-10T12:00:00Z');
166+
jest.useFakeTimers('modern');
167+
jest.setSystemTime(today);
168+
render(
169+
<FormattedDateTime
170+
format="relative"
171+
value={new Date('2022-12-12T11:57:26Z')}
172+
/>,
173+
);
174+
//V
175+
expect(screen.getByText('in 2 months')).toBeInTheDocument();
176+
//E
177+
await userEvent.hover(screen.getByText('in 2 months'));
178+
//V
179+
expect(screen.getByText('2022-12-12 11:57:26')).toBeInTheDocument();
180+
});
181+
});

0 commit comments

Comments
 (0)