fix: set a specifc date to date field input on the story (#3919)

* fix: set a specifc date to date field input on the story and set the state on record store family selector

* test: add an interaction test to verify the specific date
This commit is contained in:
Mohamed Houssein Douici 2024-02-25 22:05:34 +01:00 committed by GitHub
parent 51c6570d7c
commit 01f21d2fb8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 3 deletions

View File

@ -8,7 +8,7 @@ import { FieldContextProvider } from '../../../__stories__/FieldContextProvider'
import { useDateTimeField } from '../../../hooks/useDateTimeField'; import { useDateTimeField } from '../../../hooks/useDateTimeField';
import { DateFieldInput, DateFieldInputProps } from '../DateFieldInput'; import { DateFieldInput, DateFieldInputProps } from '../DateFieldInput';
const formattedDate = new Date(); const formattedDate = new Date(2022, 1, 1);
const DateFieldValueSetterEffect = ({ value }: { value: Date }) => { const DateFieldValueSetterEffect = ({ value }: { value: Date }) => {
const { setFieldValue } = useDateTimeField(); const { setFieldValue } = useDateTimeField();
@ -94,7 +94,14 @@ export default meta;
type Story = StoryObj<typeof DateFieldInputWithContext>; type Story = StoryObj<typeof DateFieldInputWithContext>;
export const Default: Story = {}; export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const div = await canvas.findByText('Feb 1, 2022');
await expect(div.innerText).toContain('Feb 1, 2022');
},
};
export const ClickOutside: Story = { export const ClickOutside: Story = {
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {

View File

@ -1,6 +1,7 @@
import { selectorFamily } from 'recoil'; import { selectorFamily } from 'recoil';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
export const recordStoreFamilySelector = selectorFamily({ export const recordStoreFamilySelector = selectorFamily({
key: 'recordStoreFamilySelector', key: 'recordStoreFamilySelector',
@ -12,6 +13,8 @@ export const recordStoreFamilySelector = selectorFamily({
<T>({ fieldName, recordId }: { fieldName: string; recordId: string }) => <T>({ fieldName, recordId }: { fieldName: string; recordId: string }) =>
({ set }, newValue: T) => ({ set }, newValue: T) =>
set(recordStoreFamilyState(recordId), (prevState) => set(recordStoreFamilyState(recordId), (prevState) =>
prevState ? { ...prevState, [fieldName]: newValue } : null, prevState
? { ...prevState, [fieldName]: newValue }
: ({ [fieldName]: newValue } as ObjectRecord),
), ),
}); });