Merge branch 'master' into releases/4.3.0

jest.base-config.front.js

@@ -51,7 +51,6 @@ module.exports = {
     '<rootDir>/packages/admin-test-utils/lib/setup/styled-components.js',
     '<rootDir>/packages/admin-test-utils/lib/setup/strapi.js',
   ],
-  testEnvironment: 'jsdom',
   transform: {
     '^.+\\.js$': ['@swc/jest', { jsc: { parser: { jsx: true, dynamicImport: true } } }],
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

package.json

@@ -99,11 +99,10 @@
     "glob": "7.2.3",
     "husky": "3.1.0",
     "istanbul": "~0.4.2",
-    "jest": "28.1.3",
+    "jest": "26.6.3",
-    "jest-circus": "28.1.3",
+    "jest-circus": "26.6.3",
-    "jest-cli": "28.1.3",
+    "jest-cli": "26.6.3",
-    "jest-environment-jsdom": "28.1.3",
+    "jest-watch-typeahead": "0.6.5",
-    "jest-watch-typeahead": "2.0.0",
     "lerna": "5.1.6",
     "lint-staged": "10.5.4",
     "lodash": "4.17.21",

packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/index.js

@@ -238,7 +238,8 @@ const EditViewDataManagerProvider = ({
         ['text', 'textarea', 'string', 'email', 'uid', 'select', 'select-one', 'number'].includes(
           type
         ) &&
-        !value
+        !value &&
+        value !== 0
       ) {
         inputValue = null;
       }

packages/core/helper-plugin/.gitignore

@@ -12,4 +12,5 @@ yarn-error.log
 .DS_Store
 npm-debug.log
 .idea
-stats.html
+stats.html
+coverage

packages/core/helper-plugin/lib/src/components/DateTimePicker/DateTimePicker.stories.mdx

@@ -4,7 +4,22 @@ import { useState } from 'react';
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import DateTimePicker from './index';
 
-<Meta title="components/DateTimePicker" component={DateTimePicker} />
+<Meta 
+  title="components/DateTimePicker" 
+  component={DateTimePicker}
+  argTypes={{
+    label: {
+      control: { 
+        type: 'text'
+      }
+    },
+    value: {
+      control: {
+        type: 'date'
+      }
+    }
+  }}
+/>
 
 # DateTimePicker
 
@@ -38,7 +53,6 @@ Description...
 <Canvas>
   <Story name="error">
     <DateTimePicker
-      label="Date time picker"
       hint="This is a super description"
       error="Very very very very very very very long error"
     />
@@ -54,7 +68,7 @@ Description...
     <DateTimePicker
       label="Date time picker"
       hint="This is a super description"
-      value="2021-10-13T10dd:00:00.000Z"
+      value="2021-10-13T10:00:00.000Z"
     />
   </Story>
 </Canvas>

packages/core/helper-plugin/lib/src/components/DateTimePicker/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Stack } from '@strapi/design-system/Stack';
@@ -109,6 +109,21 @@ const DateTimePicker = ({
     }
   };
 
+  useEffect(() => {
+    if (value) {
+      const parsedData = parseDate(value);
+      setDateValue(parsedData);
+      setTimeValue(
+        parsedData
+          ? `${parsedData.getHours()}:${parsedData.getMinutes()}:${parsedData.getSeconds()}`
+          : null
+      );
+    } else {
+      setDateValue(undefined);
+      setTimeValue(undefined);
+    }
+  }, [value]);
+
   return (
     <CustomField
       name={name}

packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/index.test.js

@@ -40,4 +40,67 @@ describe('DateTimePicker', () => {
 
     expect(datepicker.value).toBe('10/13/2021');
   });
+
+  it('should rerender a new value passed as props', () => {
+    const { rerender } = render(
+      <ThemeProvider theme={lightTheme}>
+        <DateTimePicker
+          value={new Date('2021-10-13T13:43:00.000Z')}
+          step={15}
+          onChange={() => {}}
+          name="datetimepicker"
+          label="Date time picker"
+          hint="This is a super description"
+        />
+      </ThemeProvider>
+    );
+
+    rerender(
+      <ThemeProvider theme={lightTheme}>
+        <DateTimePicker
+          value={new Date('2021-10-04T13:00:00.000Z')}
+          step={15}
+          onChange={() => {}}
+          name="datetimepicker"
+          label="Date time picker"
+          hint="This is a super description"
+        />
+      </ThemeProvider>
+    );
+
+    const datepicker = screen.getByTestId('datetimepicker-date');
+
+    expect(datepicker.value).toBe('10/4/2021');
+  });
+
+  it('should rerender an empty value if it is passed as props', () => {
+    const { rerender } = render(
+      <ThemeProvider theme={lightTheme}>
+        <DateTimePicker
+          value={new Date('2021-10-13T13:43:00.000Z')}
+          step={15}
+          onChange={() => {}}
+          name="datetimepicker"
+          label="Date time picker"
+          hint="This is a super description"
+        />
+      </ThemeProvider>
+    );
+
+    rerender(
+      <ThemeProvider theme={lightTheme}>
+        <DateTimePicker
+          step={15}
+          onChange={() => {}}
+          name="datetimepicker"
+          label="Date time picker"
+          hint="This is a super description"
+        />
+      </ThemeProvider>
+    );
+
+    const datepicker = screen.getByTestId('datetimepicker-date');
+
+    expect(datepicker.value).toBe('');
+  });
 });

packages/core/helper-plugin/package.json

@@ -34,6 +34,7 @@
     "prepublishOnly": "npm run build",
     "storybook": "start-storybook -p 6006",
     "test:front": "jest --config ./jest.config.front.js",
+    "test:front:cov": "jest --config ./jest.config.front.js --coverage --collectCoverageFrom='<rootDir>/packages/core/helper-plugin/lib/src/**/*.js' --coverageDirectory='<rootDir>/packages/core/helper-plugin/coverage'",
     "test:front:watch": "jest --config ./jest.config.front.js --watchAll",
     "watch": "yarn create:index && cross-env NODE_ENV=development webpack-cli -w"
   },

test/config/front/global-setup.js

@@ -1,3 +1,4 @@
 module.exports = async () => {
   process.env.TZ = 'UTC';
+  process.env.LANG = 'en_US.UTF-8';
 };