fix!: handle DST correctly in date-related utils & fields

BREAKING CHANGE: `dayjs` export is now named `customDayjs`. BREAKING CHANGE: rsuite-override.css doesn't include calendar-related CSS anymore.
MTES-MCT · Apr 11, 2023 · 377450b · 377450b
1 parent 8e4d37d
commit 377450b
Show file tree

Hide file tree

Showing 42 changed files with 844 additions and 418 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -138,6 +138,16 @@ module.exports = {
         'cypress/no-pause': 'error'
       }
     },
+    {
+      files: ['./src/**/*.test.ts', './src/**/*.test.tsx'],
+      env: {
+        browser: true,
+        node: true
+      },
+      rules: {
+        '@typescript-eslint/naming-convention': 'off'
+      }
+    },
     {
       files: ['./src/cypress/**/*.ts'],
       plugins: ['cypress'],

diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -48,15 +48,10 @@ jobs:
           node-version: 18
       - name: Install
         run: yarn
-      - name: Set datetime & timezone
-        run: |
-          sudo timedatectl set-timezone '${{ matrix.timeZone }}'
-          sudo date -s '2030-${{ matrix.dst == 'DST' && '07' || '01' }}-01 00:00:00'
-      - name: Log datetime & timezone
-        run: timedatectl
       - name: Test
         run: yarn test:unit
-
+      - name: Upload coverage
+        run: yarn codecov
   test_unit_in_paris:
     name: Unit Test
     strategy:
@@ -77,7 +72,7 @@ jobs:
       - name: Set datetime & timezone
         run: |
           sudo timedatectl set-timezone '${{ matrix.timeZone }}'
-          sudo date -s '2030-${{ matrix.dst == 'DST' && '07' || '01' }}-01 00:00:00'
+          sudo date -s "$(date '+%Y')-${{ matrix.dst == 'DST' && '07' || '01' }}-01 00:00:00"
       - name: Log datetime & timezone
         run: timedatectl
       - name: Test

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -23,6 +23,35 @@ jobs:
         run: yarn
       - name: Test
         run: yarn test:e2e
+  test_e2e_in_paris:
+    name: E2E Test
+    strategy:
+      matrix:
+        timeZone: ["Europe/Paris"]
+        dst: ["", "DST"]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Firefox
+        uses: browser-actions/setup-firefox@latest
+        with:
+          firefox-version: 104.0.2
+      - name: Setup
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: 18
+      - name: Install
+        run: yarn
+      - name: Set datetime & timezone
+        run: |
+          sudo timedatectl set-timezone '${{ matrix.timeZone }}'
+          sudo date -s "$(date '+%Y')-${{ matrix.dst == 'DST' && '07' || '01' }}-01 00:00:00"
+      - name: Log datetime & timezone
+        run: timedatectl
+      - name: Test
+        run: yarn test:e2e
 
   # Release build sanity check with Playwright
   test_e2e_release:

diff --git a/.yarn/cache/rsuite-npm-5.24.1-df239590c7-d8463718e9.zip b/.yarn/cache/rsuite-npm-5.24.1-df239590c7-d8463718e9.zip
diff --git a/.yarn/cache/rsuite-npm-5.31.0-99c917f722-cad7a70ad5.zip b/.yarn/cache/rsuite-npm-5.31.0-99c917f722-cad7a70ad5.zip
diff --git a/...able-npm-5.10.2-690e7b5971-0ee480fe73.zip → ...able-npm-5.10.3-f8aa8a4d98-6bd549110a.zip b/...able-npm-5.10.2-690e7b5971-0ee480fe73.zip → ...able-npm-5.10.3-f8aa8a4d98-6bd549110a.zip
diff --git a/config/cypress/support/component-index.html b/config/cypress/support/component-index.html
@@ -5,6 +5,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Monitor UI</title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/rsuite/5.31.0/rsuite.min.css"
+      integrity="sha512-jKFkMrXzCRnLk9OLyCcyJ8SsHWDhIMiSOzlYNwkKV2dWN6+AoEG0V8FpQdleuUI+SRCZulqoJ5DVrnDIcuJGdw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
   </head>
   <body>
     <div data-cy-root></div>

diff --git a/e2e/base/fields/DatePicker.spec.tsx b/e2e/base/fields/DatePicker.spec.tsx
@@ -1,27 +1,46 @@
-import { composeStories } from '@storybook/testing-react'
-import dayjs from 'dayjs'
-
 import { GlobalDecoratorWrapper } from '../../../.storybook/components/GlobalDecorator'
-import * as baseStories from '../../../stories/fields/DatePicker.stories'
+import Meta, { _DatePicker as DatePickerStory } from '../../../stories/fields/DatePicker.stories'
 import { mountAndWait, outputShouldBe } from '../utils'
 
-const { _DatePicker: BaseStory } = composeStories(baseStories as any) as any
-
 context('Base', () => {
   beforeEach(() => {
     mountAndWait(
       <GlobalDecoratorWrapper>
-        <BaseStory />
+        <DatePickerStory {...Meta.args} withTime={false} />
+      </GlobalDecoratorWrapper>
+    )
+  })
+
+  it('Should fill, change and clear the date', () => {
+    cy.fill('A date', [2021, 12, 31])
+
+    outputShouldBe('2021-12-31T00:00:00.000Z')
+
+    cy.fill('A date', [2024, 3, 4])
+
+    outputShouldBe('2024-03-04T00:00:00.000Z')
+
+    cy.fill('A date', undefined)
+
+    outputShouldBe(undefined)
+  })
+})
+
+context('Base (with time)', () => {
+  beforeEach(() => {
+    mountAndWait(
+      <GlobalDecoratorWrapper>
+        <DatePickerStory {...Meta.args} withTime />
       </GlobalDecoratorWrapper>
     )
   })
 
   it('Should fill, change and clear the date', () => {
-    cy.fill('A date', dayjs('2021-12-31 04:56').toDate())
+    cy.fill('A date', [2021, 12, 31, 4, 56])
 
     outputShouldBe('2021-12-31T04:56:00.000Z')
 
-    cy.fill('A date', dayjs('2024-03-04 23:18').toDate())
+    cy.fill('A date', [2024, 3, 4, 23, 18])
 
     outputShouldBe('2024-03-04T23:18:00.000Z')
 

diff --git a/e2e/base/fields/DateRangePicker.spec.tsx b/e2e/base/fields/DateRangePicker.spec.tsx
@@ -1,27 +1,58 @@
-import { composeStories } from '@storybook/testing-react'
-import dayjs from 'dayjs'
-
 import { GlobalDecoratorWrapper } from '../../../.storybook/components/GlobalDecorator'
-import * as baseStories from '../../../stories/fields/DateRangePicker.stories'
+import Meta, { _DateRangePicker as DateRangePickerStory } from '../../../stories/fields/DateRangePicker.stories'
 import { mountAndWait, outputShouldBe } from '../utils'
 
-const { _DateRangePicker: BaseStory } = composeStories(baseStories as any) as any
-
 context('Base', () => {
   beforeEach(() => {
     mountAndWait(
       <GlobalDecoratorWrapper>
-        <BaseStory />
+        <DateRangePickerStory {...Meta.args} withTime={false} />
+      </GlobalDecoratorWrapper>
+    )
+  })
+
+  it('Should fill, change and clear the date range', () => {
+    cy.fill('A date range', [
+      [2021, 11, 20],
+      [2021, 12, 31]
+    ])
+
+    outputShouldBe(['2021-11-20T00:00:00.000Z', '2021-12-31T23:59:59.000Z'])
+
+    cy.fill('A date range', [
+      [2022, 3, 4],
+      [2024, 11, 30]
+    ])
+
+    outputShouldBe(['2022-03-04T00:00:00.000Z', '2024-11-30T23:59:59.000Z'])
+
+    cy.fill('A date range', undefined)
+
+    outputShouldBe(undefined)
+  })
+})
+
+context('Base (with time)', () => {
+  beforeEach(() => {
+    mountAndWait(
+      <GlobalDecoratorWrapper>
+        <DateRangePickerStory {...Meta.args} withTime />
       </GlobalDecoratorWrapper>
     )
   })
 
   it('Should fill, change and clear the date range', () => {
-    cy.fill('A date range', [dayjs('2021-11-20 23:35').toDate(), dayjs('2021-12-31 04:56').toDate()])
+    cy.fill('A date range', [
+      [2021, 11, 20, 23, 35],
+      [2021, 12, 31, 4, 56]
+    ])
 
     outputShouldBe(['2021-11-20T23:35:00.000Z', '2021-12-31T04:56:59.000Z'])
 
-    cy.fill('A date range', [dayjs('2022-03-04 07:24').toDate(), dayjs('2024-11-30 17:42').toDate()])
+    cy.fill('A date range', [
+      [2022, 3, 4, 7, 24],
+      [2024, 11, 30, 17, 42]
+    ])
 
     outputShouldBe(['2022-03-04T07:24:00.000Z', '2024-11-30T17:42:59.000Z'])
 

diff --git a/e2e/base/fields/MultiSelect.spec.tsx b/e2e/base/fields/MultiSelect.spec.tsx
@@ -76,8 +76,7 @@ context('With object options', () => {
   })
 
   it('Should fill, change and clear the selection', () => {
-    cy.get('.rs-picker-toggle-caret').click()
-    cy.get('[value="First Option Name"]').click()
+    cy.fill('A multiple select', ['First Option'])
 
     outputShouldBe([
       {
@@ -86,7 +85,7 @@ context('With object options', () => {
       }
     ])
 
-    cy.get('[value="Second Option Name"]').click()
+    cy.fill('A multiple select', ['First Option', 'Second Option'])
 
     outputShouldBe([
       {
@@ -99,13 +98,17 @@ context('With object options', () => {
       }
     ])
 
-    cy.get('[value="First Option Name"]').click()
+    cy.fill('A multiple select', ['Third Option'])
 
     outputShouldBe([
       {
-        id: 1,
-        name: 'Second Option Name'
+        id: 2,
+        name: 'Third Option Name'
       }
     ])
+
+    cy.fill('A multiple select', undefined)
+
+    outputShouldBe(undefined)
   })
 })
diff --git a/e2e/base/formiks/FormikDatePicker.spec.tsx b/e2e/base/formiks/FormikDatePicker.spec.tsx
@@ -1,29 +1,52 @@
-import { composeStories } from '@storybook/testing-react'
-import dayjs from 'dayjs'
-
 import { GlobalDecoratorWrapper } from '../../../.storybook/components/GlobalDecorator'
-import * as baseStories from '../../../stories/formiks/FormikDatePicker.stories'
+import Meta, { _FormikDatePicker as FormikDatePickerStory } from '../../../stories/formiks/FormikDatePicker.stories'
 import { mountAndWait, outputShouldBe } from '../utils'
 
-const { _FormikDatePicker: BaseStory } = composeStories(baseStories as any) as any
-
 context('Base', () => {
   beforeEach(() => {
     mountAndWait(
       <GlobalDecoratorWrapper>
-        <BaseStory />
+        <FormikDatePickerStory {...Meta.args} withTime={false} />
+      </GlobalDecoratorWrapper>
+    )
+  })
+
+  it('Should fill, change and clear the date', () => {
+    cy.fill('A date', [2021, 12, 31])
+
+    outputShouldBe({
+      myDate: '2021-12-31T00:00:00.000Z'
+    })
+
+    cy.fill('A date', [2024, 3, 4])
+
+    outputShouldBe({
+      myDate: '2024-03-04T00:00:00.000Z'
+    })
+
+    cy.fill('A date', undefined)
+
+    outputShouldBe({})
+  })
+})
+
+context('Base (with time)', () => {
+  beforeEach(() => {
+    mountAndWait(
+      <GlobalDecoratorWrapper>
+        <FormikDatePickerStory {...Meta.args} withTime />
       </GlobalDecoratorWrapper>
     )
   })
 
   it('Should fill, change and clear the date', () => {
-    cy.fill('A date', dayjs('2021-12-31 04:56').toDate())
+    cy.fill('A date', [2021, 12, 31, 4, 56])
 
     outputShouldBe({
       myDate: '2021-12-31T04:56:00.000Z'
     })
 
-    cy.fill('A date', dayjs('2024-03-04 23:18').toDate())
+    cy.fill('A date', [2024, 3, 4, 23, 18])
 
     outputShouldBe({
       myDate: '2024-03-04T23:18:00.000Z'

diff --git a/e2e/base/formiks/FormikDateRangePicker.spec.tsx b/e2e/base/formiks/FormikDateRangePicker.spec.tsx
@@ -1,29 +1,66 @@
-import { composeStories } from '@storybook/testing-react'
-import dayjs from 'dayjs'
-
 import { GlobalDecoratorWrapper } from '../../../.storybook/components/GlobalDecorator'
-import * as baseStories from '../../../stories/formiks/FormikDateRangePicker.stories'
+import Meta, {
+  _FormikDateRangePicker as FormikDateRangePickerStory
+} from '../../../stories/formiks/FormikDateRangePicker.stories'
 import { mountAndWait, outputShouldBe } from '../utils'
 
-const { _FormikDateRangePicker: BaseStory } = composeStories(baseStories as any) as any
-
 context('Base', () => {
   beforeEach(() => {
     mountAndWait(
       <GlobalDecoratorWrapper>
-        <BaseStory />
+        <FormikDateRangePickerStory {...Meta.args} withTime={false} />
+      </GlobalDecoratorWrapper>
+    )
+  })
+
+  it('Should fill, change and clear the date range', () => {
+    cy.fill('A date range', [
+      [2021, 11, 20],
+      [2021, 12, 31]
+    ])
+
+    outputShouldBe({
+      myDateRange: ['2021-11-20T00:00:00.000Z', '2021-12-31T23:59:59.000Z']
+    })
+
+    cy.fill('A date range', [
+      [2022, 3, 4],
+      [2024, 11, 30]
+    ])
+
+    outputShouldBe({
+      myDateRange: ['2022-03-04T00:00:00.000Z', '2024-11-30T23:59:59.000Z']
+    })
+
+    cy.fill('A date range', undefined)
+
+    outputShouldBe({})
+  })
+})
+
+context('Base (with time)', () => {
+  beforeEach(() => {
+    mountAndWait(
+      <GlobalDecoratorWrapper>
+        <FormikDateRangePickerStory {...Meta.args} withTime />
       </GlobalDecoratorWrapper>
     )
   })
 
   it('Should fill, change and clear the date range', () => {
-    cy.fill('A date range', [dayjs('2021-11-20 23:35').toDate(), dayjs('2021-12-31 04:56').toDate()])
+    cy.fill('A date range', [
+      [2021, 11, 20, 23, 35],
+      [2021, 12, 31, 4, 56]
+    ])
 
     outputShouldBe({
       myDateRange: ['2021-11-20T23:35:00.000Z', '2021-12-31T04:56:59.000Z']
     })
 
-    cy.fill('A date range', [dayjs('2022-03-04 07:24').toDate(), dayjs('2024-11-30 17:42').toDate()])
+    cy.fill('A date range', [
+      [2022, 3, 4, 7, 24],
+      [2024, 11, 30, 17, 42]
+    ])
 
     outputShouldBe({
       myDateRange: ['2022-03-04T07:24:00.000Z', '2024-11-30T17:42:59.000Z']