Skip to content

Commit b36e616

Browse files
TheSonOfThompspark33
TheSonOfThomp
and
spark33
authored
Date Picker x React 17 (#2163)
* LG-3697: Expose value type for useLeafyGreenTable (#2127) * expose value type for useLeafyGreenTable * changeset * Remove unused code * change header value * Squashed commit of the following: commit 5a55659 Merge: 9578ad8 c080ec0 Author: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com> Date: Thu Jan 11 11:12:50 2024 -0500 Merge branch 'main' into adam/React17-renderHook commit 9578ad8 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Thu Jan 11 10:43:18 2024 -0500 Update hooks.spec.tsx commit c080ec0 Author: Sean Park <seanpark1107@gmail.com> Date: Wed Jan 10 23:16:32 2024 -0500 LG-3697: Expose value type for useLeafyGreenTable (#2127) * expose value type for useLeafyGreenTable * changeset * Remove unused code * change header value commit 44f32b6 Author: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com> Date: Wed Jan 10 17:14:50 2024 -0500 Update config.ts commit 030772e Author: Adam Thompson <adam.thompson@mongodb.com> Date: Wed Jan 10 15:43:51 2024 -0500 adds docs to Exists commit f7fdbfd Author: Adam Thompson <adam.thompson@mongodb.com> Date: Wed Jan 10 15:42:57 2024 -0500 moves globToRegex commit 55c3283 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Wed Jan 10 15:33:41 2024 -0500 adds comment for @ts-expect-error commit ee41597 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Wed Jan 10 12:32:55 2024 -0500 update testing-lib build script commit f11ddfe Author: Adam Thompson <adam.thompson@mongodb.com> Date: Wed Jan 10 12:04:59 2024 -0500 updates externalDependencies commit 9b6023b Author: Adam Thompson <adam.thompson@mongodb.com> Date: Wed Jan 10 11:49:18 2024 -0500 updates dependencies commit f921f8e Author: Adam Thompson <adam.thompson@mongodb.com> Date: Wed Jan 10 11:30:41 2024 -0500 adds changesets commit f25d2e8 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Wed Jan 10 11:18:03 2024 -0500 updates hooks & toast tests commit 232d059 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Wed Jan 10 11:17:52 2024 -0500 Creates `waitForState ` commit 085cad2 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Tue Jan 9 16:00:33 2024 -0500 update types in RTLOverrides commit 021551d Author: Adam Thompson <adam.thompson@mongodb.com> Date: Tue Jan 9 15:27:02 2024 -0500 remove `act` warnings commit 9e6e2a9 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Tue Jan 9 15:21:59 2024 -0500 Updates return value of `useToast.updateToast` commit 7700735 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Tue Jan 9 15:06:33 2024 -0500 update usage in `hooks` commit 3ce1187 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Tue Jan 9 14:07:32 2024 -0500 export `act` from @lg-tl commit 5292c24 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Tue Jan 9 13:53:21 2024 -0500 update usage in toast commit 488ad00 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Tue Jan 9 13:53:15 2024 -0500 update renderHook imports in basic packages commit b46ad88 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Tue Jan 9 13:25:08 2024 -0500 adds renderHook override to testing-lib * update dp tests * useControlledValue properly sets isControlled * Update hooks.spec.tsx --------- Co-authored-by: Sean Park <seanpark1107@gmail.com>
1 parent d548aca commit b36e616

32 files changed

+314
-141
lines changed

‎.changeset/bright-walls-glow.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@lg-tools/validate': patch
3+
---
4+
5+
- Adds `'@leafygreen-ui/testing-lib'` to list of external dependencies.
6+
- Updates handling of external dependencies with glob patterns

‎.changeset/fast-bananas-watch.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/toast': patch
3+
---
4+
5+
Updates `updateToast` function to consistently return the new toast object

‎.changeset/healthy-needles-learn.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@leafygreen-ui/leafygreen-provider': patch
3+
'@leafygreen-ui/hooks': patch
4+
'@leafygreen-ui/toast': patch
5+
'@leafygreen-ui/a11y': patch
6+
---
7+
8+
Updates test to import `renderHook` from `@leafygreen-ui/testing-lib`

‎.changeset/khaki-lies-carry.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/testing-lib': minor
3+
---
4+
5+
Exports `waitForState`, a wrapper around `act` that returns the result of the state update callback

‎.changeset/real-tomatoes-sneeze.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/table': minor
3+
---
4+
5+
Table now exposes an optional second generic type for useLeafyGreenTable that controls the type of the value

‎.changeset/strange-scissors-prove.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/testing-lib': minor
3+
---
4+
5+
Exports overrides for `renderHook` and `act` that will work in both a React 17 and React 18 test environment

‎packages/a11y/src/A11y.spec.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3-
import { renderHook } from '@testing-library/react-hooks';
43
import { axe } from 'jest-axe';
54

5+
import { renderHook } from '@leafygreen-ui/testing-lib';
6+
67
import { AriaLabelProps, AriaLabelPropsWithLabel } from './AriaLabelProps';
78
import {
89
prefersReducedMotion,

‎packages/date-picker/src/shared/context/SharedDatePickerContext.spec.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { PropsWithChildren } from 'react';
1+
import React from 'react';
22
import { act, waitFor } from '@testing-library/react';
3-
import { renderHook } from '@testing-library/react-hooks';
43

54
import { Month, newUTC } from '@leafygreen-ui/date-utils';
65
import { consoleOnce } from '@leafygreen-ui/lib';
6+
import { renderHook } from '@leafygreen-ui/testing-lib';
77

88
import { MAX_DATE, MIN_DATE } from '../constants';
99

@@ -17,16 +17,16 @@ import {
1717
const renderSharedDatePickerProvider = (
1818
props?: Partial<SharedDatePickerProviderProps>,
1919
) => {
20-
const { result, rerender } = renderHook<
21-
PropsWithChildren<{}>,
22-
SharedDatePickerContextProps
23-
>(useSharedDatePickerContext, {
24-
wrapper: ({ children }) => (
25-
<SharedDatePickerProvider label="" {...props}>
26-
{children}
27-
</SharedDatePickerProvider>
28-
),
29-
});
20+
const { result, rerender } = renderHook<SharedDatePickerContextProps, {}>(
21+
useSharedDatePickerContext,
22+
{
23+
wrapper: ({ children }) => (
24+
<SharedDatePickerProvider label="" {...props}>
25+
{children}
26+
</SharedDatePickerProvider>
27+
),
28+
},
29+
);
3030

3131
return { result, rerender };
3232
};

‎packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.spec.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
11
import React from 'react';
22
import { ChangeEventHandler } from 'react';
33
import { render } from '@testing-library/react';
4-
import { renderHook, RenderHookResult } from '@testing-library/react-hooks';
4+
import { RenderHookResult } from '@testing-library/react';
55
import userEvent from '@testing-library/user-event';
66

7+
import { act, renderHook } from '@leafygreen-ui/testing-lib';
8+
79
import { useControlledValue } from './useControlledValue';
810

911
const errorSpy = jest.spyOn(console, 'error');
1012

1113
const renderUseControlledValueHook = <T extends any>(
1214
...[valueProp, callback, initial]: Parameters<typeof useControlledValue<T>>
13-
): RenderHookResult<T, ReturnType<typeof useControlledValue<T>>> => {
15+
): RenderHookResult<
16+
ReturnType<typeof useControlledValue<T>>,
17+
typeof valueProp
18+
> => {
1419
const result = renderHook(v => useControlledValue(v, callback, initial), {
1520
initialProps: valueProp,
1621
});
1722

1823
return { ...result };
1924
};
2025

21-
describe('packages/hooks/useControlledValue', () => {
26+
describe('packages/date-picker/hooks/useControlledValue', () => {
2227
beforeEach(() => {
2328
errorSpy.mockImplementation(() => {});
2429
});
@@ -109,7 +114,7 @@ describe('packages/hooks/useControlledValue', () => {
109114
test('setting value to undefined should keep the component controlled', () => {
110115
const { rerender, result } = renderUseControlledValueHook('apple');
111116
expect(result.current.isControlled).toBe(true);
112-
rerender(undefined);
117+
act(() => rerender(undefined));
113118
expect(result.current.isControlled).toBe(true);
114119
});
115120

@@ -144,8 +149,10 @@ describe('packages/hooks/useControlledValue', () => {
144149
});
145150

146151
test('setValue updates the value', () => {
147-
const { result } = renderUseControlledValueHook<string>(undefined);
152+
const { result, rerender } =
153+
renderUseControlledValueHook<string>(undefined);
148154
result.current.setValue('banana');
155+
rerender();
149156
expect(result.current.value).toBe('banana');
150157
});
151158
});

‎packages/date-picker/src/shared/hooks/useControlledValue/useControlledValue.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,11 @@ export const useControlledValue = <T extends any>(
3737
// If the value prop changes from undefined to something defined,
3838
// then isControlled is set to true,
3939
// and will remain true for the life of the component
40-
const isControlled: boolean = useMemo(() => {
41-
return isControlled || !isUndefined(valueProp);
42-
}, [valueProp]);
40+
const [isControlled, setControlled] = useState(!isUndefined(valueProp));
41+
useEffect(() => {
42+
setControlled(isControlled || !isUndefined(valueProp));
43+
}, [isControlled, valueProp]);
44+
4345
const wasControlled = usePrevious(isControlled);
4446

4547
useEffect(() => {

0 commit comments

Comments
 (0)