[DatePicker] Date, locale mocking error about dooboo-ui-legacy HOT 20 CLOSED

@oh3vci Did you try locale props with 'kr-KR' or other timezones when you test? Did it work as like '월', '화'...?

from dooboo-ui-legacy.

@0916dhkim Cool. We can use snapshot test again for DatePicker.

from dooboo-ui-legacy.

@oh3vci Did you try locale props with 'kr-KR' or other timezones when you test? Did it work as like '월', '화'...?

Isn't it 'ko-KR', not 'kr-KR'?

@JeffGuKang I tried setting locale props to ko-KR in storybook. Korean characters show up correctly on web, but it does not work on Android. The same thing happens for locale="es-ES".

I guess it seems to be another bug of android or storybook. it works well in iOS.

Maybe, this is related issue in android.

from dooboo-ui-legacy.

@oh3vci It is working well now with #351. 👍

from dooboo-ui-legacy.

I think it will be solved by mocking as like

  jest
      .spyOn(Date, 'now')
      .mockImplementation(() => new Date('2020-09-01').valueOf())

from dooboo-ui-legacy.

Because date values are used a lot in test cases, I set a standard date instead of using spyOn.

from dooboo-ui-legacy.

@oh3vci It is not solved yet. Snapshots change everyday.

from dooboo-ui-legacy.

spyOn is not working with Date.

Related issues:

• jestjs/jest#2234
• jestjs/jest#6972

I finally mocked global.Date through

const standardDate = new Date('2020-09-01');
const _Date = Date;

// @ts-ignore
global.Date = jest.fn(() => standardDate);
global.Date.UTC = _Date.UTC;
global.Date.parse = _Date.parse;
global.Date.now = _Date.now;

But I couldn't mocking toLocaleString.

Already tried

1. jest.spyOn

const localeOption = {
  year: '2-digit',
  month: '2-digit',
  day: '2-digit',
};

const dateSpy = jest.spyOn(global.Date.prototype, 'toLocaleString')
  .mockImplementation(() => new Date().toLocaleString('UTC', localeOption));

2. installing full-icu for node 12 and earlier: not working

from dooboo-ui-legacy.

I think it's good to exclude snapshots from the Datepicker test.

from dooboo-ui-legacy.

@JeffGuKang How about we add today as a props for DatePicker? That would eliminate the need for mocking global.Date, and also allow us to use snapshot testing.

from dooboo-ui-legacy.

@JeffGuKang How about we add today as a props for DatePicker? That would eliminate the need for mocking global.Date, and also allow us to use snapshot testing.

But I couldn't control locale in dooboo-ui node environment for testing.
It seems to be dependent on the user's OS.

For example,

https://github.com/dooboolab/dooboo-ui/blob/29d45036764e2ab79566b13e6bb99a35d291d78b/main/DatePicker/Calendar/CalendarWeekDays.tsx#L37-L62

Weekdays would be 'Mon', 'Tue'... in en-EN. But in Korean OS, this appears to be '월', '화'...
And we cannot control locale manually as I said dooboolab-community/dooboo-ui#337 (comment).

from dooboo-ui-legacy.

We can except validation from specific area of snapshots through matcher. It can be the one of the solutions.

from dooboo-ui-legacy.

@JeffGuKang I suggest we use react-intl package for internationalization instead of toLocaleString and add today props to DatePicker component. react-intl (from FormatJS) allows developers to wrap components with IntlProvider, so we can provide { locale: 'en' } for testing and provide user-specific locale for production.

Here's the relevant documentation : https://formatjs.io/docs/guides/testing#jest
Excerpt:

import React from 'react'
import renderer from 'react-test-renderer'
import {IntlProvider} from 'react-intl'

const createComponentWithIntl = (children, props = {locale: 'en'}) => {
  return renderer.create(<IntlProvider {...props}>{children}</IntlProvider>)
}

export default createComponentWithIntl

import React from 'react'
import createComponentWithIntl from '../../utils/createComponentWithIntl'
import AppMain from '../AppMain'

test('app main should be rendered', () => {
  const component = createComponentWithIntl(<AppMain />)

  let tree = component.toJSON()

  expect(tree).toMatchSnapshot()

  tree.props.onClick()

  tree = component.toJSON()

  expect(tree).toMatchSnapshot()
})

from dooboo-ui-legacy.

As adding locale prop to component, I implemented already this approach without react-intl. Can you check this? #347

from dooboo-ui-legacy.

@oh3vci It looks good to me. So I guess we just need to test DatePicker with locale and today props defined.
BTW do we have any timezone related issue with DatePicker snapshot testing?

from dooboo-ui-legacy.

I think timezone issue is already solved problem,
because I set en to the value of the locale prop that is the locale parameter of toLocaleString method in test code.
So the test snapshot will no longer be affected by the OS.

from dooboo-ui-legacy.

@JeffGuKang I tried setting locale props to ko-KR in storybook. Korean characters show up correctly on web, but it does not work on Android. The same thing happens for locale="es-ES".

from dooboo-ui-legacy.

@oh3vci Did you try locale props with 'kr-KR' or other timezones when you test? Did it work as like '월', '화'...?

Isn't it 'ko-KR', not 'kr-KR'?

@JeffGuKang I tried setting locale props to ko-KR in storybook. Korean characters show up correctly on web, but it does not work on Android. The same thing happens for locale="es-ES".

I guess it seems to be another bug of android or storybook. it works well in iOS.

from dooboo-ui-legacy.

@oh3vci How about testing environment? Testing is not work as expectation with locale control or mocking.

from dooboo-ui-legacy.

@JeffGuKang locale props works inside jest.
I tested this first,

<DatePicker selectedDate={standardDate} locale={'ko-KR'} />

then this,

<DatePicker selectedDate={standardDate} locale={'en-US'} />

Here's the snapshot diff:

- Snapshot  - 7
+ Received  + 7

@@ -247,11 +247,11 @@
                              "color": "#ff424c",
                            },
                          ]
                        }
                      >
-                       일
+                       S
                      </Text>
                    </View>
                    <View
                      style={
                        Array [
@@ -279,11 +279,11 @@
                              "color": "#565656",
                            },
                          ]
                        }
                      >
-                       월
+                       M
                      </Text>
                    </View>
                    <View
                      style={
                        Array [
@@ -311,11 +311,11 @@
                              "color": "#565656",
                            },
                          ]
                        }
                      >
-                       화
+                       T
                      </Text>
                    </View>
                    <View
                      style={
                        Array [
@@ -343,11 +343,11 @@
                              "color": "#565656",
                            },
                          ]
                        }
                      >
-                       수
+                       W
                      </Text>
                    </View>
                    <View
                      style={
                        Array [
@@ -375,11 +375,11 @@
                              "color": "#565656",
                            },
                          ]
                        }
                      >
-                       목
+                       T
                      </Text>
                    </View>
                    <View
                      style={
                        Array [
@@ -407,11 +407,11 @@
                              "color": "#565656",
                            },
                          ]
                        }
                      >
-                       금
+                       F
                      </Text>
                    </View>
                    <View
                      style={
                        Array [
@@ -439,11 +439,11 @@
                              "color": "#565656",
                            },
                          ]
                        }
                      >
-                       토
+                       S
                      </Text>
                    </View>
                  </View>
                  <ScrollView
                    data={

from dooboo-ui-legacy.