From 6034e18543e1c269648f3d13ee86c1bdc63523e1 Mon Sep 17 00:00:00 2001 From: Rohit Agrawal Date: Sat, 16 Dec 2023 14:45:37 -0800 Subject: [PATCH] test: Fixed unit tests --- docs/docs/utils/hooks/useDimensions.mdx | 37 - docs/sidebars.js | 1 - docs/src/css/custom.css | 1 - package.json | 4 - .../pearl.spec.tsx.snap} | 104 +- .../Atoms/Box/__snapshots__/Box.spec.tsx.snap | 19 +- .../Center/__snapshots__/Center.spec.tsx.snap | 26 +- .../__snapshots__/Divider.spec.tsx.snap | 144 +- .../Icon/__snapshots__/Icon.spec.tsx.snap | 72 +- .../Atoms/Pressable/Pressable.spec.tsx | 2 + src/components/Atoms/Pressable/Pressable.tsx | 15 +- .../__snapshots__/Pressable.spec.tsx.snap | 201 +- .../Screen/__snapshots__/Screen.spec.tsx.snap | 54 +- .../Spacer/__snapshots__/Spacer.spec.tsx.snap | 148 +- .../__snapshots__/Spinner.spec.tsx.snap | 2618 ++++---- .../Stack/__snapshots__/Stack.spec.tsx.snap | 1579 +++-- .../Text/__snapshots__/Text.spec.tsx.snap | 28 +- .../Avatar/__snapshots__/Avatar.spec.tsx.snap | 3315 ++++++---- .../Badge/__snapshots__/Badge.spec.tsx.snap | 3057 +++++++--- .../Button/__snapshots__/Button.spec.tsx.snap | 4050 +++++++++---- .../__snapshots__/CheckBox.spec.tsx.snap | 5327 +++++++++++------ src/components/Molecules/Image/Image.spec.tsx | 27 +- .../Image/__snapshots__/Image.spec.tsx.snap | 2966 ++++++--- .../Input/__snapshots__/Input.spec.tsx.snap | 1025 ++-- .../Radio/__snapshots__/Radio.spec.tsx.snap | 4418 +++++++++----- .../grid/__snapshots__/Center.spec.tsx.snap | 32 - .../grid/__snapshots__/grid.spec.tsx.snap | 29 + .../atoms/pressable/moti-pressable.tsx | 215 + .../__snapshots__/skeleton.spec.tsx.snap | 54 + .../__snapshots__/Button.spec.tsx.snap | 1927 ------ .../__snapshots__/icon-button.spec.tsx.snap | 2427 ++++++++ .../__snapshots__/Button.spec.tsx.snap | 1927 ------ .../__snapshots__/textarea.spec.tsx.snap | 1036 ++++ .../video/__snapshots__/video.spec.tsx.snap | 415 ++ src/hooks/index.ts | 1 - .../useMotiWithStyleProps.spec.tsx.snap | 113 +- .../useStyledProps.spec.tsx.snap | 101 +- src/hooks/tests/useStyledProps.spec.tsx | 9 +- src/hooks/useDimensions.tsx | 7 - src/hooks/useMotiWithStyleProps.ts | 4 +- src/hooks/useResponsiveProp.ts | 4 +- src/hooks/useStateWithStyleProps.ts | 4 +- src/hooks/useStyleProps.ts | 4 +- src/theme/src/dimensions-context.tsx | 45 - src/theme/src/theme-context.tsx | 9 +- src/theme/tests/style-functions.spec.tsx | 12 - src/theme/tests/theme-functions.spec.ts | 2 +- src/theme/utils/utils.ts | 9 +- .../tests/responsive-size/default.spec.ts | 27 +- ... android machines with less height.spec.ts | 23 +- ...ndroid machines with medium height.spec.ts | 23 +- .../high-res android machines.spec.ts | 25 +- .../tests/responsive-size/iphone-5.spec.ts | 25 +- .../iphone-5s-and-older-androids.spec.ts | 23 +- .../tests/responsive-size/iphone-6s.spec.ts | 23 +- .../responsive-size/large-devices.spec.ts | 23 +- .../responsive-size/large-phablets.spec.ts | 23 +- .../responsive-size/older-phablets.spec.ts | 23 +- .../small-android-machines.spec.ts | 23 +- .../special-case-androids.spec.ts | 23 +- .../weird-android-sizes.spec.ts | 23 +- 61 files changed, 23594 insertions(+), 14337 deletions(-) delete mode 100644 docs/docs/utils/hooks/useDimensions.mdx rename src/{hooks/tests/__snapshots__/pearlify.spec.tsx.snap => __snapshots__/pearl.spec.tsx.snap} (62%) delete mode 100644 src/components/atoms/grid/__snapshots__/Center.spec.tsx.snap create mode 100644 src/components/atoms/grid/__snapshots__/grid.spec.tsx.snap create mode 100644 src/components/atoms/pressable/moti-pressable.tsx create mode 100644 src/components/atoms/skeleton/__snapshots__/skeleton.spec.tsx.snap delete mode 100644 src/components/molecules/icon-button/__snapshots__/Button.spec.tsx.snap create mode 100644 src/components/molecules/icon-button/__snapshots__/icon-button.spec.tsx.snap delete mode 100644 src/components/molecules/progress/__snapshots__/Button.spec.tsx.snap create mode 100644 src/components/molecules/textarea/__snapshots__/textarea.spec.tsx.snap create mode 100644 src/components/molecules/video/__snapshots__/video.spec.tsx.snap delete mode 100644 src/hooks/useDimensions.tsx delete mode 100644 src/theme/src/dimensions-context.tsx diff --git a/docs/docs/utils/hooks/useDimensions.mdx b/docs/docs/utils/hooks/useDimensions.mdx deleted file mode 100644 index 20540ecf..00000000 --- a/docs/docs/utils/hooks/useDimensions.mdx +++ /dev/null @@ -1,37 +0,0 @@ ---- -sidebar_position: 5 -title: useDimensions ---- - -The `useDimensions` hook is a utility in Pearl UI that allows you to get the value of the dimensions context. This hook is particularly useful in components where you need to know the dimensions of the window. - -## Import - -```js -import { useDimensions } from "pearl-ui"; -``` - -## Return value - -The `useDimensions` hook returns an object with the following properties: - -- `width`: The current width of the window. -- `height`: The current height of the window. - -## Usage - -Here's an example of how you can use `useDimensions` in a component to adjust its layout based on the window's dimensions: - -```jsx -import { useDimensions } from "pearl-ui"; - -function MyComponent() { - const { width, height } = useDimensions(); - - return ( -
- I'm a component that adjusts its size based on the window's dimensions! -
- ); -} -``` diff --git a/docs/sidebars.js b/docs/sidebars.js index c5455139..9ec041e5 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -115,7 +115,6 @@ module.exports = { "utils/hooks/useTheme", "utils/hooks/useStyleProps", "utils/hooks/useMotiWithStyleProps", - "utils/hooks/useDimensions", "utils/hooks/useColorScheme", "utils/hooks/useColorModeValue", "utils/hooks/useResponsiveProp", diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 1619ded3..9434dda8 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -300,7 +300,6 @@ html[data-theme="dark"] .menu__link[href*="Badge"]:after { .menu__link[href*="Switch"]:before, .menu__link[href*="responsivity"]:before, .menu__link[href*="animation-support"]:before, -.menu__link[href*="useDimensions"]:before, .menu__link[href*="useMotiWithStyleProps"]:before, .menu__link[href*="useDynamicStateStyle"]:before, .menu__link[href*="useFocusedState"]:before, diff --git a/package.json b/package.json index fc7af050..22aa7163 100644 --- a/package.json +++ b/package.json @@ -135,10 +135,6 @@ { "name": "beta", "prerelease": true - }, - { - "name": "alpha", - "prerelease": true } ], "prepare": [ diff --git a/src/hooks/tests/__snapshots__/pearlify.spec.tsx.snap b/src/__snapshots__/pearl.spec.tsx.snap similarity index 62% rename from src/hooks/tests/__snapshots__/pearlify.spec.tsx.snap rename to src/__snapshots__/pearl.spec.tsx.snap index 1e3b491a..3f262aa7 100644 --- a/src/hooks/tests/__snapshots__/pearlify.spec.tsx.snap +++ b/src/__snapshots__/pearl.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`pearl/atoms passes the snapshot test for a component 1`] = ` component 1`] = ` color="success.400" fontFamily="body" fontWeight="hairline" - style={ - Object { - "display": "flex", + style={{}} + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } > @@ -26,21 +29,21 @@ exports[`pearl/atoms passes the snapshot test for a component 1`] = ` exports[`pearl/atoms passes the snapshot test for a component 1`] = ` component 1`] = ` } } style={ - Object { + { "backgroundColor": "#FF8371", - "display": "flex", "elevation": 28, "height": 200, "shadowColor": "#1A2138", - "shadowOffset": Object { + "shadowOffset": { "height": 28, "width": 0, }, @@ -64,6 +66,13 @@ exports[`pearl/atoms passes the snapshot test for a component 1`] = ` "width": 200, } } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } /> `; @@ -71,15 +80,18 @@ exports[`pearl/atoms passes the snapshot test for a component 1`] = ` exports[`pearl/basic passes the snapshot test for a component 1`] = ` @@ -91,15 +103,18 @@ exports[`pearl/basic passes the snapshot test for a component 1`] = ` exports[`pearl/basic passes the snapshot test for a component 1`] = ` @@ -109,56 +124,59 @@ exports[`pearl/basic passes the snapshot test for a component 1`] = ` exports[`pearl/molecules passes the snapshot test for a component 1`] = ` diff --git a/src/components/Atoms/Box/__snapshots__/Box.spec.tsx.snap b/src/components/Atoms/Box/__snapshots__/Box.spec.tsx.snap index fd235ee5..a980217d 100644 --- a/src/components/Atoms/Box/__snapshots__/Box.spec.tsx.snap +++ b/src/components/Atoms/Box/__snapshots__/Box.spec.tsx.snap @@ -3,24 +3,25 @@ exports[`Atoms/Box passes the basic snapshot test 1`] = ` diff --git a/src/components/Atoms/Center/__snapshots__/Center.spec.tsx.snap b/src/components/Atoms/Center/__snapshots__/Center.spec.tsx.snap index 6124c454..e16e6501 100644 --- a/src/components/Atoms/Center/__snapshots__/Center.spec.tsx.snap +++ b/src/components/Atoms/Center/__snapshots__/Center.spec.tsx.snap @@ -3,26 +3,38 @@ exports[`Atoms/Center passes the snapshot test 1`] = ` diff --git a/src/components/Atoms/Divider/__snapshots__/Divider.spec.tsx.snap b/src/components/Atoms/Divider/__snapshots__/Divider.spec.tsx.snap index 724c3f25..277c02db 100644 --- a/src/components/Atoms/Divider/__snapshots__/Divider.spec.tsx.snap +++ b/src/components/Atoms/Divider/__snapshots__/Divider.spec.tsx.snap @@ -3,48 +3,68 @@ exports[`Atoms/Divider passes the snapshot test for different length modes 1`] = ` `; @@ -52,48 +72,68 @@ exports[`Atoms/Divider passes the snapshot test for different length modes 1`] = exports[`Atoms/Divider passes the snapshot test in dark mode 1`] = ` `; @@ -101,48 +141,68 @@ exports[`Atoms/Divider passes the snapshot test in dark mode 1`] = ` exports[`Atoms/Divider passes the snapshot test in light mode 1`] = ` `; diff --git a/src/components/Atoms/Icon/__snapshots__/Icon.spec.tsx.snap b/src/components/Atoms/Icon/__snapshots__/Icon.spec.tsx.snap index 8e3cd2ef..f29c3a96 100644 --- a/src/components/Atoms/Icon/__snapshots__/Icon.spec.tsx.snap +++ b/src/components/Atoms/Icon/__snapshots__/Icon.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`Atoms/Icon passes the snapshot test in dark mode 1`] = ` @@ -48,7 +59,7 @@ exports[`Atoms/Icon passes the snapshot test in dark mode 1`] = ` exports[`Atoms/Icon passes the snapshot test in light mode 1`] = ` diff --git a/src/components/Atoms/Pressable/Pressable.spec.tsx b/src/components/Atoms/Pressable/Pressable.spec.tsx index 237303f0..fd542784 100644 --- a/src/components/Atoms/Pressable/Pressable.spec.tsx +++ b/src/components/Atoms/Pressable/Pressable.spec.tsx @@ -2,6 +2,7 @@ import React from "react"; import Pressable from "./pressable"; import { fireEvent, render } from "@testing-library/react-native"; import { ThemeProvider } from "../../../theme/src/theme-context"; +import { MotiPressable } from "moti/interactions"; jest.useFakeTimers(); @@ -41,6 +42,7 @@ describe("Atoms/Pressable", () => { const component = await render( + Button press diff --git a/src/components/Atoms/Pressable/Pressable.tsx b/src/components/Atoms/Pressable/Pressable.tsx index 8d76d36d..22a409b3 100644 --- a/src/components/Atoms/Pressable/Pressable.tsx +++ b/src/components/Atoms/Pressable/Pressable.tsx @@ -2,16 +2,14 @@ import React from "react"; import { BoxProps } from "../box/box"; import { boxStyleFunctions } from "../../../theme/src/style-functions"; import { BasicComponentProps, StateProps } from "../../../theme/src/types"; -import { - MotiPressable, - MotiPressableProps, - mergeAnimateProp, -} from "moti/interactions"; -import _ from "lodash"; +import { MotiPressableProps, mergeAnimateProp } from "moti/interactions"; +import { PressableProps as RNPressableProps } from "react-native"; import { usePressedState } from "../../../hooks/state/usePressedState"; import { useDisabledState } from "../../../hooks/state/useDisabledState"; import { useStyleProps } from "../../../hooks/useStyleProps"; import { useMotiWithStyleProps } from "../../../hooks/useMotiWithStyleProps"; +import { MotiPressable } from "./moti-pressable"; +import _ from "lodash"; // Define the properties for the BasePressable component export type PressableProps = Omit & @@ -42,8 +40,9 @@ export type PressableProps = Omit & | "exit" | "exitTransition" | "animateInitialState" - > & - StateProps<"_pressed" | "_disabled"> & { + > & { testID?: RNPressableProps["testID"] } & StateProps< + "_pressed" | "_disabled" + > & { /** * Duration (in milliseconds) to wait after press down before calling onPressIn. * diff --git a/src/components/Atoms/Pressable/__snapshots__/Pressable.spec.tsx.snap b/src/components/Atoms/Pressable/__snapshots__/Pressable.spec.tsx.snap index 18368dcf..4a6a4326 100644 --- a/src/components/Atoms/Pressable/__snapshots__/Pressable.spec.tsx.snap +++ b/src/components/Atoms/Pressable/__snapshots__/Pressable.spec.tsx.snap @@ -3,94 +3,173 @@ exports[`Atoms/Pressable passes the snapshot test for basic setup 1`] = ` - - - Button press - + } + style={{}} + transition={ + { + "duration": 50, + } + } + > + Button press - + `; exports[`Atoms/Pressable passes the snapshot test when using style props 1`] = ` - - - Button press - + } + collapsable={false} + state={ + { + "__state": { + "_isReanimatedSharedValue": true, + "_value": { + "backgroundColor": "#6A7BFF", + "borderColor": "#C5CEE0", + "borderWidth": 2, + }, + "addListener": [Function], + "modify": [Function], + "removeListener": [Function], + "value": { + "backgroundColor": "#6A7BFF", + "borderColor": "#C5CEE0", + "borderWidth": 2, + }, + }, + } + } + style={ + { + "backgroundColor": "#6A7BFF", + "borderColor": "#C5CEE0", + "borderWidth": 2, + } + } + transition={ + { + "duration": 50, + } + } + > + Button press - + `; diff --git a/src/components/Atoms/Screen/__snapshots__/Screen.spec.tsx.snap b/src/components/Atoms/Screen/__snapshots__/Screen.spec.tsx.snap index 4a7f7aea..83f72d75 100644 --- a/src/components/Atoms/Screen/__snapshots__/Screen.spec.tsx.snap +++ b/src/components/Atoms/Screen/__snapshots__/Screen.spec.tsx.snap @@ -3,35 +3,30 @@ exports[`Atoms/Screen passes the snapshot test 1`] = ` diff --git a/src/components/Atoms/Spacer/__snapshots__/Spacer.spec.tsx.snap b/src/components/Atoms/Spacer/__snapshots__/Spacer.spec.tsx.snap index bd262e6e..4b71adea 100644 --- a/src/components/Atoms/Spacer/__snapshots__/Spacer.spec.tsx.snap +++ b/src/components/Atoms/Spacer/__snapshots__/Spacer.spec.tsx.snap @@ -3,43 +3,59 @@ exports[`Atoms/Spacer passes the snapshot test 1`] = ` @@ -47,26 +63,36 @@ exports[`Atoms/Spacer passes the snapshot test 1`] = ` accessibilityRole="text" accessible={true} allowFontScaling={true} + animate={ + { + "color": "#1A2138", + } + } animatedStyle={ - Object { - "value": Object { - "transform": Array [], + { + "value": { + "color": "#1A2138", }, } } collapsable={false} style={ - Object { + { "color": "#1A2138", - "display": "flex", "fontFamily": "Poppins-Regular", - "fontSize": 18.4, + "fontSize": 16.099999999999998, "fontStyle": "normal", "fontWeight": "400", "includeFontPadding": false, "letterSpacing": 0, - "lineHeight": 24, - "transform": Array [], + "lineHeight": 22, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } > @@ -74,38 +100,60 @@ exports[`Atoms/Spacer passes the snapshot test 1`] = ` @@ -113,26 +161,36 @@ exports[`Atoms/Spacer passes the snapshot test 1`] = ` accessibilityRole="text" accessible={true} allowFontScaling={true} + animate={ + { + "color": "#1A2138", + } + } animatedStyle={ - Object { - "value": Object { - "transform": Array [], + { + "value": { + "color": "#1A2138", }, } } collapsable={false} style={ - Object { + { "color": "#1A2138", - "display": "flex", "fontFamily": "Poppins-Regular", - "fontSize": 18.4, + "fontSize": 16.099999999999998, "fontStyle": "normal", "fontWeight": "400", "includeFontPadding": false, "letterSpacing": 0, - "lineHeight": 24, - "transform": Array [], + "lineHeight": 22, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } > diff --git a/src/components/Atoms/Spinner/__snapshots__/Spinner.spec.tsx.snap b/src/components/Atoms/Spinner/__snapshots__/Spinner.spec.tsx.snap index 52a5ce58..c372753e 100644 --- a/src/components/Atoms/Spinner/__snapshots__/Spinner.spec.tsx.snap +++ b/src/components/Atoms/Spinner/__snapshots__/Spinner.spec.tsx.snap @@ -3,22 +3,24 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] = ` @@ -122,8 +133,9 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] @@ -207,16 +222,18 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] @@ -319,8 +345,9 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] @@ -404,16 +434,18 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] @@ -516,8 +557,9 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] @@ -601,16 +646,18 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] @@ -713,8 +769,9 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] @@ -798,15 +858,17 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] @@ -910,8 +981,9 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] @@ -999,22 +1074,24 @@ exports[`Atoms/Spinner passes the snapshot test for different color schemes 1`] exports[`Atoms/Spinner passes the snapshot test for different sizes 1`] = ` @@ -2199,16 +2365,18 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` @@ -2516,11 +2705,17 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` accessibilityLabel="Loading indicator" accessibilityRole="progressbar" accessible={true} - animating={true} - spinnerSize={15} + animate={ + { + "color": "#6A7BFF", + } + } + collapsable={false} + rawSize={20} style={ - Object { + { "alignItems": "center", + "alignSelf": "flex-start", "color": "#6A7BFF", "flex": 0, "flexDirection": "row", @@ -2530,157 +2725,205 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` variant="bar" > @@ -2690,12 +2933,18 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` accessibilityLabel="Loading indicator" accessibilityRole="progressbar" accessible={true} - animating={true} + animate={ + { + "color": "#6A7BFF", + } + } + collapsable={false} + rawSize={20} sizeMultiplier={0.2} - spinnerSize={15} style={ - Object { + { "alignItems": "center", + "alignSelf": "flex-start", "color": "#6A7BFF", "flex": 0, "flexDirection": "row", @@ -2705,81 +2954,87 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` variant="dot" > @@ -2922,15 +3189,17 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` @@ -3016,15 +3294,17 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` @@ -3220,15 +3515,17 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` @@ -3332,8 +3638,9 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` @@ -3417,15 +3727,17 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` @@ -3579,81 +3904,107 @@ exports[`Atoms/Spinner passes the snapshot test for different variants 1`] = ` exports[`Atoms/Spinner passes the snapshot test if the spinner is expanded or not 1`] = ` @@ -3757,8 +4117,9 @@ exports[`Atoms/Spinner passes the snapshot test if the spinner is expanded or no @@ -3843,59 +4207,76 @@ exports[`Atoms/Spinner passes the snapshot test if the spinner is expanded or no @@ -3999,8 +4389,9 @@ exports[`Atoms/Spinner passes the snapshot test if the spinner is expanded or no diff --git a/src/components/Atoms/Stack/__snapshots__/Stack.spec.tsx.snap b/src/components/Atoms/Stack/__snapshots__/Stack.spec.tsx.snap index 0a715b75..df4c0846 100644 --- a/src/components/Atoms/Stack/__snapshots__/Stack.spec.tsx.snap +++ b/src/components/Atoms/Stack/__snapshots__/Stack.spec.tsx.snap @@ -3,246 +3,369 @@ exports[`Atoms/HStack passes the snapshot test 1`] = ` } - spacing="l" + divider={} style={ - Object { - "alignSelf": "flex-start", - "display": "flex", + { "flexDirection": "row", "flexWrap": "wrap", - "transform": Array [], + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } > @@ -252,246 +375,369 @@ exports[`Atoms/HStack passes the snapshot test 1`] = ` exports[`Atoms/Stack passes the snapshot test for horizontal direction 1`] = ` } - spacing="l" + divider={} style={ - Object { - "alignSelf": "flex-start", - "display": "flex", + { "flexDirection": "row", "flexWrap": "wrap", - "transform": Array [], + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } > @@ -501,247 +747,376 @@ exports[`Atoms/Stack passes the snapshot test for horizontal direction 1`] = ` exports[`Atoms/Stack passes the snapshot test for vertical direction 1`] = ` } - spacing="l" + divider={} style={ - Object { - "alignSelf": "flex-start", - "display": "flex", + { "flexDirection": "column", "flexWrap": "nowrap", - "marginTop": 24, - "transform": Array [], + "marginTop": "l", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } > @@ -751,246 +1126,369 @@ exports[`Atoms/Stack passes the snapshot test for vertical direction 1`] = ` exports[`Atoms/VStack passes the snapshot test 1`] = ` } - spacing="l" + divider={} style={ - Object { - "alignSelf": "flex-start", - "display": "flex", + { "flexDirection": "column", "flexWrap": "nowrap", - "transform": Array [], + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } > @@ -1000,254 +1498,477 @@ exports[`Atoms/VStack passes the snapshot test 1`] = ` exports[`Atoms/ZStack passes the snapshot test 1`] = ` diff --git a/src/components/Atoms/Text/__snapshots__/Text.spec.tsx.snap b/src/components/Atoms/Text/__snapshots__/Text.spec.tsx.snap index 905b0698..dc9d0440 100644 --- a/src/components/Atoms/Text/__snapshots__/Text.spec.tsx.snap +++ b/src/components/Atoms/Text/__snapshots__/Text.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`Atoms/Text passes the snapshot test 1`] = ` diff --git a/src/components/Molecules/Avatar/__snapshots__/Avatar.spec.tsx.snap b/src/components/Molecules/Avatar/__snapshots__/Avatar.spec.tsx.snap index 8f7015af..fd654148 100644 --- a/src/components/Molecules/Avatar/__snapshots__/Avatar.spec.tsx.snap +++ b/src/components/Molecules/Avatar/__snapshots__/Avatar.spec.tsx.snap @@ -3,125 +3,173 @@ exports[`Molecules/Avatar passes the snapshot test for different sizes 1`] = ` @@ -225,8 +282,9 @@ exports[`Molecules/Avatar passes the snapshot test for different sizes 1`] = ` @@ -312,98 +373,145 @@ exports[`Molecules/Avatar passes the snapshot test for different sizes 1`] = ` @@ -507,8 +624,9 @@ exports[`Molecules/Avatar passes the snapshot test for different sizes 1`] = ` @@ -594,98 +715,145 @@ exports[`Molecules/Avatar passes the snapshot test for different sizes 1`] = ` @@ -789,8 +966,9 @@ exports[`Molecules/Avatar passes the snapshot test for different sizes 1`] = ` @@ -876,97 +1057,138 @@ exports[`Molecules/Avatar passes the snapshot test for different sizes 1`] = ` @@ -1070,8 +1301,9 @@ exports[`Molecules/Avatar passes the snapshot test for different sizes 1`] = ` @@ -1158,163 +1393,250 @@ exports[`Molecules/Avatar passes the snapshot test for different sizes 1`] = ` RA - + J SG Y @@ -1489,72 +1897,106 @@ exports[`Molecules/Avatar passes the snapshot test for different sizes 1`] = ` exports[`Molecules/Avatar passes the snapshot test for fallback support 1`] = ` @@ -1562,131 +2004,184 @@ exports[`Molecules/Avatar passes the snapshot test for fallback support 1`] = ` accessibilityRole="text" accessible={true} allowFontScaling={true} + animate={ + { + "color": "#FFFFFF", + } + } animatedStyle={ - Object { - "value": Object { - "transform": Array [], + { + "value": { + "color": "#FFFFFF", }, } } collapsable={false} style={ - Object { + { "color": "#FFFFFF", - "display": "flex", "fontFamily": "Poppins-Regular", - "fontSize": 18.4, + "fontSize": 23, "fontStyle": "normal", "fontWeight": "400", "includeFontPadding": false, "letterSpacing": 0, - "lineHeight": 28, - "transform": Array [], + "lineHeight": 32, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } - variant="p1" + variant="p2" > RA @@ -1790,8 +2294,9 @@ exports[`Molecules/Avatar passes the snapshot test for fallback support 1`] = ` @@ -1877,44 +2385,71 @@ exports[`Molecules/Avatar passes the snapshot test for fallback support 1`] = ` @@ -1928,122 +2463,177 @@ exports[`Molecules/Avatar passes the snapshot test for fallback support 1`] = ` exports[`Molecules/Avatar passes the snapshot test when used in a group 1`] = ` - + @@ -2147,8 +2746,9 @@ exports[`Molecules/Avatar passes the snapshot test when used in a group 1`] = ` @@ -2235,79 +2838,124 @@ exports[`Molecules/Avatar passes the snapshot test when used in a group 1`] = ` @@ -2411,8 +3068,9 @@ exports[`Molecules/Avatar passes the snapshot test when used in a group 1`] = ` @@ -2497,59 +3158,99 @@ exports[`Molecules/Avatar passes the snapshot test when used in a group 1`] = ` +1 @@ -2562,142 +3263,190 @@ exports[`Molecules/Avatar passes the snapshot test when used in a group 1`] = ` exports[`Molecules/Avatar withBadge HOC works as expected 1`] = ` @@ -2801,8 +3559,9 @@ exports[`Molecules/Avatar withBadge HOC works as expected 1`] = ` @@ -2886,111 +3648,215 @@ exports[`Molecules/Avatar withBadge HOC works as expected 1`] = ` - - - - + } + collapsable={false} + onLayout={[Function]} + state={ + { + "__state": { + "_isReanimatedSharedValue": true, + "_value": { + "alignItems": "center", + "backgroundColor": "#38A169", + "borderRadius": 1000, + "bottom": -0, + "height": 15, + "justifyContent": "center", + "minWidth": 15, + "position": "absolute", + "right": -0, + "zIndex": 1300, + }, + "addListener": [Function], + "modify": [Function], + "removeListener": [Function], + "value": { + "alignItems": "center", + "backgroundColor": "#38A169", + "borderRadius": 1000, + "bottom": -0, + "height": 15, + "justifyContent": "center", + "minWidth": 15, + "position": "absolute", + "right": -0, + "zIndex": 1300, + }, + }, + } + } + style={ + { + "alignItems": "center", + "backgroundColor": "#38A169", + "borderRadius": 1000, + "bottom": -0, + "height": 15, + "justifyContent": "center", + "minWidth": 15, + "position": "absolute", + "right": -0, + "zIndex": 1300, + } + } + transition={ + { + "duration": 50, + } + } + /> + @@ -2998,219 +3864,410 @@ exports[`Molecules/Avatar withBadge HOC works as expected 1`] = ` accessibilityRole="text" accessible={true} allowFontScaling={true} + animate={ + { + "color": "#1A2138", + } + } animatedStyle={ - Object { - "value": Object { - "transform": Array [], + { + "value": { + "color": "#1A2138", }, } } collapsable={false} style={ - Object { + { "color": "#1A2138", - "display": "flex", "fontFamily": "Poppins-Regular", - "fontSize": 18.4, + "fontSize": 23, "fontStyle": "normal", "fontWeight": "400", "includeFontPadding": false, "letterSpacing": 0, - "lineHeight": 28, - "transform": Array [], + "lineHeight": 32, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } - variant="p1" + variant="p2" > RA - - - + - 0 - - + } + collapsable={false} + style={ + { + "color": "#FFFFFF", + "fontFamily": "Poppins-Medium", + "fontSize": 13.799999999999999, + "fontStyle": "normal", + "fontWeight": "500", + "includeFontPadding": false, + "letterSpacing": 0, + "lineHeight": 22, + "paddingHorizontal": 8, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + variant="p4" + > + 0 + - + - - - - + } + collapsable={false} + onLayout={[Function]} + state={ + { + "__state": { + "_isReanimatedSharedValue": true, + "_value": { + "alignItems": "center", + "backgroundColor": "#6A7BFF", + "borderRadius": 1000, + "bottom": -5, + "height": 30, + "justifyContent": "center", + "minWidth": 30, + "position": "absolute", + "right": -5, + "zIndex": 1300, + }, + "addListener": [Function], + "modify": [Function], + "removeListener": [Function], + "value": { + "alignItems": "center", + "backgroundColor": "#6A7BFF", + "borderRadius": 1000, + "bottom": -5, + "height": 30, + "justifyContent": "center", + "minWidth": 30, + "position": "absolute", + "right": -5, + "zIndex": 1300, + }, + }, + } + } + style={ + { + "alignItems": "center", + "backgroundColor": "#6A7BFF", + "borderRadius": 1000, + "bottom": -5, + "height": 30, + "justifyContent": "center", + "minWidth": 30, + "position": "absolute", + "right": -5, + "zIndex": 1300, + } + } + transition={ + { + "duration": 50, + } + } + > + - + diff --git a/src/components/Molecules/Badge/__snapshots__/Badge.spec.tsx.snap b/src/components/Molecules/Badge/__snapshots__/Badge.spec.tsx.snap index 90cabd1b..0894813c 100644 --- a/src/components/Molecules/Badge/__snapshots__/Badge.spec.tsx.snap +++ b/src/components/Molecules/Badge/__snapshots__/Badge.spec.tsx.snap @@ -3,959 +3,2227 @@ exports[`Molecules/Badge passes the snapshot test for different color schemes 1`] = ` - - - - 2 - - + } + variant="p4" + > + 2 + - - + - - - 2 - - + } + variant="p4" + > + 2 + - - + - - - 2 - - + } + variant="p4" + > + 2 + - - + - - - 2 - - + } + variant="p4" + > + 2 + - - + - - - 2 - - + } + variant="p4" + > + 2 + - + `; exports[`Molecules/Badge passes the snapshot test for different sizes 1`] = ` - - - - 2 - - - - - - - + 2 + + + + + - + - 2 - - - - - - - - - 2 - - + 2 + - - + - + 2 + + + + + - + - 2 - - + } + collapsable={false} + style={ + { + "color": "#FFFFFF", + "fontFamily": "Poppins-Medium", + "fontSize": 16.099999999999998, + "fontStyle": "normal", + "fontWeight": "500", + "includeFontPadding": false, + "letterSpacing": 0, + "lineHeight": 22, + "paddingHorizontal": 12, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + variant="p3" + > + 2 + - + `; exports[`Molecules/Badge passes the snapshot test for different values types 1`] = ` - + + + - + variant="p4" + > + 23 + - - + - + 2+ + + + + + - - 23 - - + } + collapsable={false} + state={ + { + "__state": { + "_isReanimatedSharedValue": true, + "_value": { + "alignItems": "center", + "backgroundColor": "#6A7BFF", + "borderRadius": 1000, + "height": 30, + "justifyContent": "center", + "minWidth": 30, + }, + "addListener": [Function], + "modify": [Function], + "removeListener": [Function], + "value": { + "alignItems": "center", + "backgroundColor": "#6A7BFF", + "borderRadius": 1000, + "height": 30, + "justifyContent": "center", + "minWidth": 30, + }, + }, + } + } + style={ + { + "alignItems": "center", + "backgroundColor": "#6A7BFF", + "borderRadius": 1000, + "height": 30, + "justifyContent": "center", + "minWidth": 30, + } + } + transition={ + { + "duration": 50, + } + } + > + - - + +`; + +exports[`Molecules/Badge passes the snapshot test for different variants 1`] = ` + + - - - 2+ - - + } + variant="p4" + > + 2 + - - + - - - + NEW + - + `; -exports[`Molecules/Badge passes the snapshot test for different variants 1`] = ` +exports[`Molecules/Badge withBadge HOC works as expected 1`] = ` - + @@ -963,281 +2231,184 @@ exports[`Molecules/Badge passes the snapshot test for different variants 1`] = ` accessibilityRole="text" accessible={true} allowFontScaling={true} - animatedStyle={ - Object { - "value": Object { - "transform": Array [], - }, - } - } - collapsable={false} - style={ - Object { + animate={ + { "color": "#FFFFFF", - "display": "flex", - "fontFamily": "Poppins-Medium", - "fontSize": 11.5, - "fontStyle": "normal", - "fontWeight": "500", - "includeFontPadding": false, - "letterSpacing": 0, - "lineHeight": 16, "paddingHorizontal": 8, - "transform": Array [], } } - variant="btn4" - > - 2 - - - - - - - - - NEW + 28 - - -`; - -exports[`Molecules/Badge withBadge HOC works as expected 1`] = ` - + - - - - - 28 - - - - - - - - - - - + } + collapsable={false} + onLayout={[Function]} + state={ + { + "__state": { + "_isReanimatedSharedValue": true, + "_value": { + "alignItems": "center", + "backgroundColor": "#6A7BFF", + "borderRadius": 1000, + "bottom": -5, + "height": 30, + "justifyContent": "center", + "minWidth": 30, + "position": "absolute", + "right": -5, + "zIndex": 1300, + }, + "addListener": [Function], + "modify": [Function], + "removeListener": [Function], + "value": { + "alignItems": "center", + "backgroundColor": "#6A7BFF", + "borderRadius": 1000, + "bottom": -5, + "height": 30, + "justifyContent": "center", + "minWidth": 30, + "position": "absolute", + "right": -5, + "zIndex": 1300, + }, + }, + } + } + style={ + { + "alignItems": "center", + "backgroundColor": "#6A7BFF", + "borderRadius": 1000, + "bottom": -5, + "height": 30, + "justifyContent": "center", + "minWidth": 30, + "position": "absolute", + "right": -5, + "zIndex": 1300, + } + } + transition={ + { + "duration": 50, + } + } + > + - + `; diff --git a/src/components/Molecules/Button/__snapshots__/Button.spec.tsx.snap b/src/components/Molecules/Button/__snapshots__/Button.spec.tsx.snap index 633310f5..f8adc64c 100644 --- a/src/components/Molecules/Button/__snapshots__/Button.spec.tsx.snap +++ b/src/components/Molecules/Button/__snapshots__/Button.spec.tsx.snap @@ -3,151 +3,657 @@ exports[`Molecules/Button passes the snapshot test for basic setup 1`] = ` - - + Button press + + + + +`; + +exports[`Molecules/Button passes the snapshot test for different color schemes 1`] = ` + + + + - + + + + + - Button press - - + } + collapsable={false} + style={ + { + "color": "#FFFFFF", + "fontFamily": "Poppins-Medium", + "fontSize": 16.099999999999998, + "fontStyle": "normal", + "fontWeight": "500", + "includeFontPadding": false, + "letterSpacing": 0, + "lineHeight": 22, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + variant="p3" + > + Secondary button + - + `; -exports[`Molecules/Button passes the snapshot test for different color schemes 1`] = ` +exports[`Molecules/Button passes the snapshot test for different icons 1`] = ` - - + + - Primary button + Button with left icon - - + - + @@ -209,18 +816,22 @@ exports[`Molecules/Button passes the snapshot test for different color schemes 1 accessibilityRole="text" accessible={true} allowFontScaling={true} + animate={ + { + "color": "#6A7BFF", + } + } animatedStyle={ - Object { - "value": Object { - "transform": Array [], + { + "value": { + "color": "#6A7BFF", }, } } collapsable={false} style={ - Object { - "color": "#FFFFFF", - "display": "flex", + { + "color": "#6A7BFF", "fontFamily": "Poppins-Medium", "fontSize": 16.099999999999998, "fontStyle": "normal", @@ -228,816 +839,1669 @@ exports[`Molecules/Button passes the snapshot test for different color schemes 1 "includeFontPadding": false, "letterSpacing": 0, "lineHeight": 22, - "transform": Array [], } } - variant="btn2" + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + variant="p3" > - Secondary button + Button with right icon + - + `; -exports[`Molecules/Button passes the snapshot test for different icons 1`] = ` +exports[`Molecules/Button passes the snapshot test for different sizes 1`] = ` - - + Button press + + + + + - + - - - Button with left icon - - - + } + animatedStyle={ + { + "value": { + "color": "#FFFFFF", + }, + } + } + collapsable={false} + style={ + { + "color": "#FFFFFF", + "fontFamily": "Poppins-Medium", + "fontSize": 13.799999999999999, + "fontStyle": "normal", + "fontWeight": "500", + "includeFontPadding": false, + "letterSpacing": 0, + "lineHeight": 22, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + variant="p4" + > + Button press + - - + - + Button press + + + + + + - - - Button with right icon - - - - + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + variant="p2" + > + Button press + - + `; -exports[`Molecules/Button passes the snapshot test for different sizes 1`] = ` +exports[`Molecules/Button passes the snapshot test for different variants 1`] = ` - - - - Button press - - - - - - - - - Button press - - + } + variant="p3" + > + Button press + - - + - + Button press + + + + + + - - Button press - - - - - - - - - Button press - - + } + variant="p3" + > + Button press + - + `; -exports[`Molecules/Button passes the snapshot test for different variants 1`] = ` +exports[`Molecules/Button passes the snapshot test for loading state 1`] = ` - - - - Button press - - - - - - - + - - Button press - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - Button press - - + } + variant="p3" + > + Basic loading button + - - -`; - -exports[`Molecules/Button passes the snapshot test for loading state 1`] = ` - + - - - Basic loading button - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Loading - - + } + collapsable={false} + style={ + { + "color": "#FFFFFF", + "fontFamily": "Poppins-Medium", + "fontSize": 16.099999999999998, + "fontStyle": "normal", + "fontWeight": "500", + "includeFontPadding": false, + "letterSpacing": 0, + "lineHeight": 22, + "marginLeft": 10, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + variant="p3" + > + Loading + - - + - - + + - Loading - - - - + /> + + - - + /> @@ -1836,92 +3149,173 @@ exports[`Molecules/Button passes the snapshot test for loading state 1`] = ` - + `; exports[`Molecules/Button passes the snapshot test when using style props 1`] = ` - - - + - Button press - - + } + collapsable={false} + style={ + { + "color": "#FFFFFF", + "fontFamily": "Poppins-Medium", + "fontSize": 16.099999999999998, + "fontStyle": "normal", + "fontWeight": "500", + "includeFontPadding": false, + "letterSpacing": 0, + "lineHeight": 22, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + variant="p3" + > + Button press + - + `; diff --git a/src/components/Molecules/CheckBox/__snapshots__/CheckBox.spec.tsx.snap b/src/components/Molecules/CheckBox/__snapshots__/CheckBox.spec.tsx.snap index aa30d4ae..90c4ec7c 100644 --- a/src/components/Molecules/CheckBox/__snapshots__/CheckBox.spec.tsx.snap +++ b/src/components/Molecules/CheckBox/__snapshots__/CheckBox.spec.tsx.snap @@ -3,155 +3,260 @@ exports[`Molecules/CheckBox passes the snapshot test for basic setup 1`] = ` - - - - - - Check me! - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Check me! + + + @@ -160,375 +265,607 @@ exports[`Molecules/CheckBox passes the snapshot test for basic setup 1`] = ` exports[`Molecules/CheckBox passes the snapshot test for different color schemes 1`] = ` - -  +  - - - - - Primary CheckBox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Primary CheckBox + + + - -  +  - - - - - Secondary CheckBox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Secondary CheckBox + + + @@ -537,741 +874,1205 @@ exports[`Molecules/CheckBox passes the snapshot test for different color schemes exports[`Molecules/CheckBox passes the snapshot test for different sizes 1`] = ` - + -  +  - - - - - Small Checkbox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Small Checkbox + + + - -  +  - - - - - Regular Checkbox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Regular Checkbox + + + - -  +  - - - - - Large Checkbox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Large Checkbox + + + - - + style={ + { + "flexDirection": "row", + "flexWrap": "wrap", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + -  +  - - - - - Extra Large Checkbox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Extra Large Checkbox + + + @@ -1280,375 +2081,607 @@ exports[`Molecules/CheckBox passes the snapshot test for different sizes 1`] = ` exports[`Molecules/CheckBox passes the snapshot test for different variants 1`] = ` - -  +  - - - - - Filled Checkbox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Filled Checkbox + + + - -  +  - - - - - Outline Checkbox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Outline Checkbox + + + @@ -1657,741 +2690,1211 @@ exports[`Molecules/CheckBox passes the snapshot test for different variants 1`] exports[`Molecules/CheckBox passes the snapshot test when in a checked/indeterminate state 1`] = ` - + style={ + { + "flexDirection": "row", + "flexWrap": "wrap", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > - - - - - Indeterminate Checkbox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Indeterminate Checkbox + + + - -  +  - - - - - Checked Checkbox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Checked Checkbox + + + - - - - - - Indeterminate Checkbox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Indeterminate Checkbox + + + - -  +  - - - - - Checked Checkbox - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Checked Checkbox + + + @@ -2400,603 +3903,629 @@ exports[`Molecules/CheckBox passes the snapshot test when in a checked/indetermi exports[`Molecules/CheckBox passes the snapshot test when in an error state 1`] = ` - -  +  - - - - - Error Checkbox - - - - - - - - -  - - + } + variant="p3" + > + Error Checkbox + - - - - - Error Checkbox with message - + - - This is an error message! - `; exports[`Molecules/CheckBox passes the snapshot test when using style props 1`] = ` - -  +  - - - - - Button press - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Button press + + + diff --git a/src/components/Molecules/Image/Image.spec.tsx b/src/components/Molecules/Image/Image.spec.tsx index 619c41de..24740174 100644 --- a/src/components/Molecules/Image/Image.spec.tsx +++ b/src/components/Molecules/Image/Image.spec.tsx @@ -50,10 +50,7 @@ describe("Molecules/Image", () => { }); const tree = (comp as any).toJSON(); - const imageSource = tree?.children[0].children[0].props.source; - expect(tree).toMatchSnapshot(); - expect(typeof imageSource).toBe("number"); }); it("passes the snapshot test for the various progressive loading indicators", async () => { @@ -157,14 +154,7 @@ describe("Molecules/Image", () => { }); const tree = (comp as any).toJSON(); - const imageSource = tree?.children[0].children[0].props.source; - expect(tree).toMatchSnapshot(); - expect(typeof imageSource).toBe("object"); - expect(typeof imageSource.uri).toBe("string"); - expect(imageSource.uri).toBe( - "https://wallpaperaccess.com/full/1713248.jpg" - ); }); it("triggers onError to be triggered and final image to be hidden in when an error occurs while fetching a remote image", () => { @@ -194,14 +184,15 @@ describe("Molecules/Image", () => { }); it("makes sure that the CacheManager works as expected", async () => { - await CacheManager.clearCache(); - const cacheSize = await CacheManager.getCacheSize(); - const finalPath = await CacheManager.get( - "https://wallpaperaccess.com/full/1713248.jpg", - {} - ).getPath(); - - expect(finalPath?.includes(".jpg")).toBeTruthy(); + await act(async () => { + await CacheManager.clearCache(); + const finalPath = await CacheManager.get( + "https://wallpaperaccess.com/full/1713248.jpg", + {} + ).getPath(); + + expect(finalPath?.includes(".jpg")).toBeTruthy(); + }); }); it("loads uses the filesystem url for remote images with caching", () => { diff --git a/src/components/Molecules/Image/__snapshots__/Image.spec.tsx.snap b/src/components/Molecules/Image/__snapshots__/Image.spec.tsx.snap index f0c26578..4b4e3cfb 100644 --- a/src/components/Molecules/Image/__snapshots__/Image.spec.tsx.snap +++ b/src/components/Molecules/Image/__snapshots__/Image.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`Molecules/Image loads uses the filesystem url for remote images with caching 1`] = ` - + + + - @@ -212,8 +294,9 @@ exports[`Molecules/Image loads uses the filesystem url for remote images with ca @@ -303,7 +389,7 @@ exports[`Molecules/Image loads uses the filesystem url for remote images with ca exports[`Molecules/Image loads uses the local url for local images 1`] = ` - + + + + +`; + +exports[`Molecules/Image loads uses the target url for remote images without caching 1`] = ` + + + } + > @@ -503,8 +720,9 @@ exports[`Molecules/Image loads uses the local url for local images 1`] = ` @@ -591,10 +812,10 @@ exports[`Molecules/Image loads uses the local url for local images 1`] = ` `; -exports[`Molecules/Image loads uses the target url for remote images without caching 1`] = ` +exports[`Molecules/Image passes the snapshot test for basic setup 1`] = ` - + + > + + - -`; - -exports[`Molecules/Image passes the snapshot test for basic setup 1`] = ` - - + + + - @@ -862,8 +1203,9 @@ exports[`Molecules/Image passes the snapshot test for basic setup 1`] = ` @@ -947,385 +1292,640 @@ exports[`Molecules/Image passes the snapshot test for basic setup 1`] = ` + +`; + +exports[`Molecules/Image passes the snapshot test for the fallback methods if there is an error while fetching the image 1`] = ` + - + + > + + - - - - - - - - - - - - - - - - - - - - - - - - - - + }, + "top": { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + }, + }, + "alignItems": "center", + "borderRadius": 8, + "bottom": 0, + "justifyContent": "center", + "left": 0, + "overflow": "hidden", + "position": "absolute", + "right": 0, + "top": 0, + "zIndex": 3, + }, + ] + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + - -`; - -exports[`Molecules/Image passes the snapshot test for the fallback methods if there is an error while fetching the image 1`] = ` - - + + > + + + +`; + +exports[`Molecules/Image passes the snapshot test for the various progressive loading indicators 1`] = ` + - + - + - - -`; - -exports[`Molecules/Image passes the snapshot test for the various progressive loading indicators 1`] = ` - - - - - - + - + + animatedStyle={ + { + "value": { + "borderRadius": 8, + "bottom": 0, + "height": "100%", + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + "width": "100%", + "zIndex": 1, + }, + } + } + blurRadius={0} + collapsable={false} + source={1} + style={ + { + "borderRadius": 8, + "bottom": 0, + "height": "100%", + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + "width": "100%", + "zIndex": 1, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + /> + - + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + `; @@ -1738,7 +2712,7 @@ exports[`Molecules/Image passes the snapshot test for the various progressive lo exports[`Molecules/Image triggers onError to be triggered and final image to be hidden in when an error occurs while fetching a remote image 1`] = ` @@ -1917,8 +2935,9 @@ exports[`Molecules/Image triggers onError to be triggered and final image to be diff --git a/src/components/Molecules/Input/__snapshots__/Input.spec.tsx.snap b/src/components/Molecules/Input/__snapshots__/Input.spec.tsx.snap index 84eead6f..2d889f35 100644 --- a/src/components/Molecules/Input/__snapshots__/Input.spec.tsx.snap +++ b/src/components/Molecules/Input/__snapshots__/Input.spec.tsx.snap @@ -3,52 +3,62 @@ exports[`Molecules/Input passes the snapshot test for basic setup 1`] = ` @@ -110,52 +132,62 @@ exports[`Molecules/Input passes the snapshot test for basic setup 1`] = ` exports[`Molecules/Input passes the snapshot test for different icons 1`] = ` - + + + @@ -307,51 +401,61 @@ exports[`Molecules/Input passes the snapshot test for different icons 1`] = ` exports[`Molecules/Input passes the snapshot test for different sizes 1`] = ` @@ -694,51 +876,61 @@ exports[`Molecules/Input passes the snapshot test for different sizes 1`] = ` exports[`Molecules/Input passes the snapshot test for different variants 1`] = ` @@ -889,51 +1121,64 @@ exports[`Molecules/Input passes the snapshot test for different variants 1`] = ` exports[`Molecules/Input passes the snapshot test when using style props 1`] = ` diff --git a/src/components/Molecules/Radio/__snapshots__/Radio.spec.tsx.snap b/src/components/Molecules/Radio/__snapshots__/Radio.spec.tsx.snap index 36b9b2a8..531afd5a 100644 --- a/src/components/Molecules/Radio/__snapshots__/Radio.spec.tsx.snap +++ b/src/components/Molecules/Radio/__snapshots__/Radio.spec.tsx.snap @@ -3,177 +3,293 @@ exports[`Molecules/Radio passes the snapshot test for basic setup 1`] = ` - - - - - - Check me! - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Check me! + + + @@ -182,345 +298,577 @@ exports[`Molecules/Radio passes the snapshot test for basic setup 1`] = ` exports[`Molecules/Radio passes the snapshot test for different color schemes 1`] = ` - - - - - - Primary Radio - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Primary Radio + + + - - - - - - Secondary Radio - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Secondary Radio + + + @@ -529,681 +877,1145 @@ exports[`Molecules/Radio passes the snapshot test for different color schemes 1` exports[`Molecules/Radio passes the snapshot test for different sizes 1`] = ` - - - - - - Small Radio - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Small Radio + + + - - - - - - Regular Radio - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Regular Radio + + + - - - - - - Large Radio - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Large Radio + + + - - - - - - Extra Large Radio - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Extra Large Radio + + + @@ -1212,345 +2024,577 @@ exports[`Molecules/Radio passes the snapshot test for different sizes 1`] = ` exports[`Molecules/Radio passes the snapshot test for different variants 1`] = ` - - - - - - Filled Radio - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Filled Radio + + + - - - - - - Outline Radio - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Outline Radio + + + @@ -1559,345 +2603,577 @@ exports[`Molecules/Radio passes the snapshot test for different variants 1`] = ` exports[`Molecules/Radio passes the snapshot test when in a checked state 1`] = ` - - - - - - Checked Radio - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Checked Radio + + + - - - - - - Checked Radio - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Checked Radio + + + @@ -1906,558 +3182,600 @@ exports[`Molecules/Radio passes the snapshot test when in a checked state 1`] = exports[`Molecules/Radio passes the snapshot test when in an error state 1`] = ` - - - - - - Error Radio - - - - - - - - - + } + variant="p3" + > + Error Radio + - - - - - Error Radio with message - + - - This is an error message! - `; exports[`Molecules/Radio passes the snapshot test when using style props 1`] = ` - - - - - - Button press - + collapsable={false} + style={ + { + "flexDirection": "row", + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", + } + } + > + + Button press + + + diff --git a/src/components/atoms/grid/__snapshots__/Center.spec.tsx.snap b/src/components/atoms/grid/__snapshots__/Center.spec.tsx.snap deleted file mode 100644 index 6124c454..00000000 --- a/src/components/atoms/grid/__snapshots__/Center.spec.tsx.snap +++ /dev/null @@ -1,32 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Atoms/Center passes the snapshot test 1`] = ` - - - This is centered - - -`; diff --git a/src/components/atoms/grid/__snapshots__/grid.spec.tsx.snap b/src/components/atoms/grid/__snapshots__/grid.spec.tsx.snap new file mode 100644 index 00000000..065d9d74 --- /dev/null +++ b/src/components/atoms/grid/__snapshots__/grid.spec.tsx.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Atoms/Grid passes the snapshot test 1`] = ` + + + +`; diff --git a/src/components/atoms/pressable/moti-pressable.tsx b/src/components/atoms/pressable/moti-pressable.tsx new file mode 100644 index 00000000..e8b4111e --- /dev/null +++ b/src/components/atoms/pressable/moti-pressable.tsx @@ -0,0 +1,215 @@ +import { MotiView } from "moti"; +import { + INTERACTION_CONTAINER_ID, + MotiPressableContext, +} from "moti/build/interactions/pressable/context"; +import { Hoverable } from "moti/build/interactions/pressable/hoverable"; +import { + MotiPressableInteractionState, + MotiPressableProps, + useMotiPressableContext, +} from "moti/interactions"; +import React, { useMemo, ReactNode, forwardRef } from "react"; +import { Pressable } from "react-native"; +import type { PressableProps, View } from "react-native"; +import { + useSharedValue, + runOnJS, + useDerivedValue, +} from "react-native-reanimated"; + +export const MotiPressable = forwardRef< + View, + MotiPressableProps & { testID: PressableProps["testID"] } +>(function MotiPressable(props, ref) { + const { + animate, + from, + exit, + children, + exitTransition, + transition: transitionProp, + style, + onPressOut, + onPressIn, + onHoverIn, + onHoverOut, + onKeyDown, + onKeyUp, + onPress, + onLongPress, + hitSlop, + disabled, + containerStyle, + dangerouslySilenceDuplicateIdsWarning = false, + id, + hoveredValue, + pressedValue, + onLayout, + onContainerLayout, + accessibilityActions, + accessibilityElementsHidden, + accessibilityHint, + accessibilityIgnoresInvertColors, + accessibilityLabel, + accessibilityLiveRegion, + accessibilityRole, + accessibilityState, + accessibilityValue, + accessibilityViewIsModal, + accessible, + onAccessibilityTap, + onAccessibilityAction, + onAccessibilityEscape, + importantForAccessibility, + onFocus, + onBlur, + href, + testID, + } = props; + + const _hovered = useSharedValue(false); + const _pressed = useSharedValue(false); + + const hovered = hoveredValue || _hovered; + const pressed = pressedValue || _pressed; + + const interaction = useDerivedValue( + () => ({ + hovered: hovered.value, + pressed: pressed.value, + }), + [hovered, pressed] + ); + + const transition = useDerivedValue(() => { + if (typeof transitionProp === "function") { + return transitionProp(interaction.value); + } + + return transitionProp || {}; + }, [transitionProp, interaction]); + + const __state = useDerivedValue(() => { + if (typeof animate === "function") { + return animate(interaction.value); + } + + return animate; + }, [animate, interaction]); + + const state = useMemo(() => ({ __state }), [__state]); + + const updateInteraction = + ( + event: keyof MotiPressableInteractionState, + enabled: boolean, + callback?: () => void + ) => + () => { + "worklet"; + + if (event === "hovered") { + hovered.value = enabled; + } else if (event === "pressed") { + pressed.value = enabled; + } + if (callback) { + runOnJS(callback)(); + } + }; + + const child = ( + + {typeof children == "function" ? children(interaction) : children} + + ); + + let node: ReactNode; + // if (Platform.OS === 'web' || Platform.OS === 'android') { + node = ( + + + {child} + + + ); + + const context = useMotiPressableContext(); + + if ( + !dangerouslySilenceDuplicateIdsWarning && + id && + context?.containers && + id in context.containers + ) { + console.error( + `[MotiPressable] Duplicate id ${id} used. This means that you incorrectly placed a component inside another one with the same id. + +To silence this warning without solving the actual issue, you can use the dangerouslySilenceDuplicateIdsWarning prop. But you should probably refactor your code instead.` + ); + } + + return ( + { + const interactions = { + containers: { + ...context?.containers, + [INTERACTION_CONTAINER_ID]: interaction, + }, + }; + if (id) { + (interactions.containers as any)[id] = interaction; + } + return interactions; + }, [context?.containers, id, interaction])} + > + {node} + + ); +}); diff --git a/src/components/atoms/skeleton/__snapshots__/skeleton.spec.tsx.snap b/src/components/atoms/skeleton/__snapshots__/skeleton.spec.tsx.snap new file mode 100644 index 00000000..cc170da8 --- /dev/null +++ b/src/components/atoms/skeleton/__snapshots__/skeleton.spec.tsx.snap @@ -0,0 +1,54 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Atoms/Skeleton passes the snapshot test 1`] = ` + + + + + +`; diff --git a/src/components/molecules/icon-button/__snapshots__/Button.spec.tsx.snap b/src/components/molecules/icon-button/__snapshots__/Button.spec.tsx.snap deleted file mode 100644 index 633310f5..00000000 --- a/src/components/molecules/icon-button/__snapshots__/Button.spec.tsx.snap +++ /dev/null @@ -1,1927 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Molecules/Button passes the snapshot test for basic setup 1`] = ` - - - - - - Button press - - - - - -`; - -exports[`Molecules/Button passes the snapshot test for different color schemes 1`] = ` - - - - - - Primary button - - - - - - - - - Secondary button - - - - - -`; - -exports[`Molecules/Button passes the snapshot test for different icons 1`] = ` - - - - - - - - Button with left icon - - - - - - - - - - - Button with right icon - - - - - - - -`; - -exports[`Molecules/Button passes the snapshot test for different sizes 1`] = ` - - - - - - Button press - - - - - - - - - Button press - - - - - - - - - Button press - - - - - - - - - Button press - - - - - -`; - -exports[`Molecules/Button passes the snapshot test for different variants 1`] = ` - - - - - - Button press - - - - - - - - - Button press - - - - - - - - - Button press - - - - - -`; - -exports[`Molecules/Button passes the snapshot test for loading state 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Basic loading button - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Loading - - - - - - - - - - - Loading - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`Molecules/Button passes the snapshot test when using style props 1`] = ` - - - - - - Button press - - - - - -`; diff --git a/src/components/molecules/icon-button/__snapshots__/icon-button.spec.tsx.snap b/src/components/molecules/icon-button/__snapshots__/icon-button.spec.tsx.snap new file mode 100644 index 00000000..c7d49a30 --- /dev/null +++ b/src/components/molecules/icon-button/__snapshots__/icon-button.spec.tsx.snap @@ -0,0 +1,2427 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Molecules/IconButton passes the snapshot test for basic setup 1`] = ` + + + + + + + +`; + +exports[`Molecules/IconButton passes the snapshot test for different color schemes 1`] = ` + + + + +  + + + + + + +  + + + + +`; + +exports[`Molecules/IconButton passes the snapshot test for different icons 1`] = ` + + + + +  + + + + + + +  + + + + +`; + +exports[`Molecules/IconButton passes the snapshot test for different sizes 1`] = ` + + + + +  + + + + + + +  + + + + + + +  + + + + + + +  + + + + +`; + +exports[`Molecules/IconButton passes the snapshot test for different variants 1`] = ` + + + + +  + + + + + + +  + + + + + + +  + + + + +`; + +exports[`Molecules/IconButton passes the snapshot test for loading state 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`Molecules/IconButton passes the snapshot test when using style props 1`] = ` + + + + +  + + + + +`; diff --git a/src/components/molecules/progress/__snapshots__/Button.spec.tsx.snap b/src/components/molecules/progress/__snapshots__/Button.spec.tsx.snap deleted file mode 100644 index 633310f5..00000000 --- a/src/components/molecules/progress/__snapshots__/Button.spec.tsx.snap +++ /dev/null @@ -1,1927 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Molecules/Button passes the snapshot test for basic setup 1`] = ` - - - - - - Button press - - - - - -`; - -exports[`Molecules/Button passes the snapshot test for different color schemes 1`] = ` - - - - - - Primary button - - - - - - - - - Secondary button - - - - - -`; - -exports[`Molecules/Button passes the snapshot test for different icons 1`] = ` - - - - - - - - Button with left icon - - - - - - - - - - - Button with right icon - - - - - - - -`; - -exports[`Molecules/Button passes the snapshot test for different sizes 1`] = ` - - - - - - Button press - - - - - - - - - Button press - - - - - - - - - Button press - - - - - - - - - Button press - - - - - -`; - -exports[`Molecules/Button passes the snapshot test for different variants 1`] = ` - - - - - - Button press - - - - - - - - - Button press - - - - - - - - - Button press - - - - - -`; - -exports[`Molecules/Button passes the snapshot test for loading state 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Basic loading button - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Loading - - - - - - - - - - - Loading - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`Molecules/Button passes the snapshot test when using style props 1`] = ` - - - - - - Button press - - - - - -`; diff --git a/src/components/molecules/textarea/__snapshots__/textarea.spec.tsx.snap b/src/components/molecules/textarea/__snapshots__/textarea.spec.tsx.snap new file mode 100644 index 00000000..eede2147 --- /dev/null +++ b/src/components/molecules/textarea/__snapshots__/textarea.spec.tsx.snap @@ -0,0 +1,1036 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Molecules/Textarea passes the snapshot test for basic setup 1`] = ` + + + + + + +`; + +exports[`Molecules/Textarea passes the snapshot test for different sizes 1`] = ` + + + + + + + + + + + + + + + + + + +`; + +exports[`Molecules/Textarea passes the snapshot test for different variants 1`] = ` + + + + + + + + + + +`; + +exports[`Molecules/Textarea passes the snapshot test when using style props 1`] = ` + + + + + + +`; diff --git a/src/components/molecules/video/__snapshots__/video.spec.tsx.snap b/src/components/molecules/video/__snapshots__/video.spec.tsx.snap new file mode 100644 index 00000000..20819bc2 --- /dev/null +++ b/src/components/molecules/video/__snapshots__/video.spec.tsx.snap @@ -0,0 +1,415 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Atoms/Video passes the snapshot test 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; diff --git a/src/hooks/index.ts b/src/hooks/index.ts index a7bbb1a7..feae3e0c 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -5,7 +5,6 @@ export { useColorScheme } from "./useColorScheme"; export { useTheme } from "./useTheme"; export { useColorModeValue } from "./useColorModeValue"; export { useAccessibleColor } from "./useAccessibleColor"; -export { useDimensions } from "./useDimensions"; export { useMotiWithStyleProps } from "./useMotiWithStyleProps"; export { useAnimationState } from "./useAnimationState"; export { useStateWithStyleProps } from "./useStateWithStyleProps"; diff --git a/src/hooks/tests/__snapshots__/useMotiWithStyleProps.spec.tsx.snap b/src/hooks/tests/__snapshots__/useMotiWithStyleProps.spec.tsx.snap index aecee1fc..006c7d10 100644 --- a/src/hooks/tests/__snapshots__/useMotiWithStyleProps.spec.tsx.snap +++ b/src/hooks/tests/__snapshots__/useMotiWithStyleProps.spec.tsx.snap @@ -3,27 +3,31 @@ exports[`useMotiWithStyleProps transforms Moti 'animate' props correctly 1`] = ` @@ -33,25 +37,26 @@ exports[`useMotiWithStyleProps transforms Moti 'animate' props correctly 1`] = ` exports[`useMotiWithStyleProps transforms Moti 'exit' props correctly 1`] = ` `; @@ -59,25 +64,25 @@ exports[`useMotiWithStyleProps transforms Moti 'exit' props correctly 1`] = ` exports[`useMotiWithStyleProps transforms Moti 'exitTransition' props correctly 1`] = ` `; @@ -85,27 +90,32 @@ exports[`useMotiWithStyleProps transforms Moti 'exitTransition' props correctly exports[`useMotiWithStyleProps transforms Moti 'from' props correctly 1`] = ` @@ -115,25 +125,32 @@ exports[`useMotiWithStyleProps transforms Moti 'from' props correctly 1`] = ` exports[`useMotiWithStyleProps transforms Moti 'state' props correctly 1`] = ` `; @@ -141,23 +158,23 @@ exports[`useMotiWithStyleProps transforms Moti 'state' props correctly 1`] = ` exports[`useMotiWithStyleProps transforms Moti 'transition' props correctly 1`] = ` diff --git a/src/hooks/tests/__snapshots__/useStyledProps.spec.tsx.snap b/src/hooks/tests/__snapshots__/useStyledProps.spec.tsx.snap index 2cc88ef6..e3eaf484 100644 --- a/src/hooks/tests/__snapshots__/useStyledProps.spec.tsx.snap +++ b/src/hooks/tests/__snapshots__/useStyledProps.spec.tsx.snap @@ -3,26 +3,38 @@ exports[`useStyleProps return correct style object for props 1`] = ` @@ -30,30 +42,40 @@ exports[`useStyleProps return correct style object for props 1`] = ` accessibilityRole="text" accessible={true} allowFontScaling={true} + animate={ + { + "color": "#1A2138", + } + } animatedStyle={ - Object { - "value": Object { - "transform": Array [], + { + "value": { + "color": "#1A2138", }, } } collapsable={false} style={ - Object { + { "color": "#1A2138", - "display": "flex", "fontFamily": "Poppins-Regular", - "fontSize": 18.4, + "fontSize": 16.099999999999998, "fontStyle": "normal", "fontWeight": "400", "includeFontPadding": false, "letterSpacing": 0, - "lineHeight": 24, - "transform": Array [], + "lineHeight": 22, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } > - 3 + 2 @@ -62,24 +84,25 @@ exports[`useStyleProps return correct style object for props 1`] = ` exports[`useStyleProps return empty style object for missing props 1`] = ` @@ -87,26 +110,36 @@ exports[`useStyleProps return empty style object for missing props 1`] = ` accessibilityRole="text" accessible={true} allowFontScaling={true} + animate={ + { + "color": "#1A2138", + } + } animatedStyle={ - Object { - "value": Object { - "transform": Array [], + { + "value": { + "color": "#1A2138", }, } } collapsable={false} style={ - Object { + { "color": "#1A2138", - "display": "flex", "fontFamily": "Poppins-Regular", - "fontSize": 18.4, + "fontSize": 16.099999999999998, "fontStyle": "normal", "fontWeight": "400", "includeFontPadding": false, "letterSpacing": 0, - "lineHeight": 24, - "transform": Array [], + "lineHeight": 22, + } + } + transition={ + { + "dampingRatio": 1, + "duration": 100, + "type": "spring", } } > diff --git a/src/hooks/tests/useStyledProps.spec.tsx b/src/hooks/tests/useStyledProps.spec.tsx index f4d8e6c7..b3710819 100644 --- a/src/hooks/tests/useStyledProps.spec.tsx +++ b/src/hooks/tests/useStyledProps.spec.tsx @@ -1,6 +1,6 @@ -import React, { useState } from "react"; +import React from "react"; import Text from "../../components/atoms/text/text"; -import { fireEvent, render } from "@testing-library/react-native"; +import { render } from "@testing-library/react-native"; import { ThemeProvider } from "../../theme/src/theme-context"; import Box from "../../components/atoms/box/box"; import { useStyleProps } from "../useStyleProps"; @@ -32,16 +32,17 @@ describe("useStyleProps", () => { expect(tree).toMatchSnapshot(); expect(comp.getByText("0")).toBeTruthy(); }); + it("return correct style object for props", () => { const comp = render( - + ); const tree = comp.toJSON(); expect(tree).toMatchSnapshot(); - expect(comp.getByText("3")).toBeTruthy(); + expect(comp.getByText("2")).toBeTruthy(); }); }); diff --git a/src/hooks/useDimensions.tsx b/src/hooks/useDimensions.tsx deleted file mode 100644 index 194731ce..00000000 --- a/src/hooks/useDimensions.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { useContext } from "react"; -import { DimensionsContext } from "../theme/src/dimensions-context"; - -/** - * Hook to get the value of the dimensions context - */ -export const useDimensions = () => useContext(DimensionsContext); diff --git a/src/hooks/useMotiWithStyleProps.ts b/src/hooks/useMotiWithStyleProps.ts index 118bdfd9..c6cf4641 100644 --- a/src/hooks/useMotiWithStyleProps.ts +++ b/src/hooks/useMotiWithStyleProps.ts @@ -2,7 +2,6 @@ import { useMemo } from "react"; import { getKeys } from "../theme/utils/type-helpers"; import { StyleFunctionContainer } from "../theme/src/types"; import { useTheme } from "./useTheme"; -import { useDimensions } from "./useDimensions"; import { composeCleanStyleProps, composeStyleProps } from "./utils/utils"; import { layoutPropertiesShorthand, @@ -10,6 +9,7 @@ import { } from "../theme/src/style-properties"; import _ from "lodash"; import { removeUndefined } from "../theme/utils/utils"; +import { useWindowDimensions } from "react-native"; const shorthandPropMapper = { ...layoutPropertiesShorthand, @@ -27,7 +27,7 @@ export const useMotiWithStyleProps = ( styleFunctions: StyleFunctionContainer[] ) => { const { theme, colorMode } = useTheme(); - const dimensions = useDimensions(); + const dimensions = useWindowDimensions(); // Compose style properties const buildStyleProperties = useMemo( diff --git a/src/hooks/useResponsiveProp.ts b/src/hooks/useResponsiveProp.ts index 788dd401..431ae773 100644 --- a/src/hooks/useResponsiveProp.ts +++ b/src/hooks/useResponsiveProp.ts @@ -1,11 +1,11 @@ import { useTheme } from "./useTheme"; -import { useDimensions } from "./useDimensions"; import { PropValue, ResponsiveValue } from "../theme/src/types"; import { getValueForScreenSize, isResponsiveObjectValue, } from "../theme/src/responsive-helpers"; import { useMemo } from "react"; +import { useWindowDimensions } from "react-native"; /** * Hook to get the appropriate value from a responsive style object based on the current screen size. @@ -14,7 +14,7 @@ import { useMemo } from "react"; */ export const useResponsiveProp = (propValue: ResponsiveValue) => { const { theme } = useTheme(); - const dimensions = useDimensions(); + const dimensions = useWindowDimensions(); // If the propValue is a responsive object value, get the appropriate value for the current screen size // Use useMemo to avoid unnecessary calculations on every render diff --git a/src/hooks/useStateWithStyleProps.ts b/src/hooks/useStateWithStyleProps.ts index 78f82dc9..ad499772 100644 --- a/src/hooks/useStateWithStyleProps.ts +++ b/src/hooks/useStateWithStyleProps.ts @@ -1,9 +1,9 @@ import _ from "lodash"; import { StyleFunctionContainer } from "../theme/src/types"; -import { useDimensions } from "./useDimensions"; import { useTheme } from "./useTheme"; import { composeCleanStyleProps, composeStyleProps } from "./utils/utils"; import { useMemo } from "react"; +import { useWindowDimensions } from "react-native"; /** * Returns a state object with style properties. @@ -16,7 +16,7 @@ export const useStateWithStyleProps = ( styleFunctions: StyleFunctionContainer[] ) => { const { theme, colorMode } = useTheme(); - const dimensions = useDimensions(); + const dimensions = useWindowDimensions(); // Compose the style functions const buildStyleProperties = useMemo( diff --git a/src/hooks/useStyleProps.ts b/src/hooks/useStyleProps.ts index f0723ca4..b1a72c74 100644 --- a/src/hooks/useStyleProps.ts +++ b/src/hooks/useStyleProps.ts @@ -1,9 +1,9 @@ import { useTheme } from "./useTheme"; import { StyleFunctionContainer } from "../theme/src/types"; -import { useDimensions } from "./useDimensions"; import { buildFinalStyleProps, composeStyleProps } from "./utils/utils"; import { useMemo } from "react"; import _ from "lodash"; +import { useWindowDimensions } from "react-native"; /** * Hook to convert the received style props to appropriate React Native styles @@ -16,7 +16,7 @@ export const useStyleProps = ( styleFunctions: StyleFunctionContainer[] ) => { const { theme, colorMode } = useTheme(); - const dimensions = useDimensions(); + const dimensions = useWindowDimensions(); // Compose the style functions const buildStyleProperties = useMemo( diff --git a/src/theme/src/dimensions-context.tsx b/src/theme/src/dimensions-context.tsx deleted file mode 100644 index 413fc666..00000000 --- a/src/theme/src/dimensions-context.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Dimensions } from "react-native"; -import React, { useState, useEffect } from "react"; -import { Dimensions as DimensionsType } from "./types"; - -export const DimensionsContext = React.createContext({ - width: 0, - height: 0, -}); - -/** - * Provides the dimensions of the window to the app. - * @param children The children to render. - */ -export const DimensionsProvider = ({ - children, -}: { - children: React.ReactNode; -}) => { - // Initialize dimensions state with the current window dimensions. - const [dimensions, setDimensions] = useState( - Dimensions.get("window") - ); - - // Update dimensions state when the window dimensions change. - const onChange = ({ window }: { window: DimensionsType }) => { - setDimensions(window); - }; - - // Add a listener for window dimension changes. - useEffect(() => { - const subscription = Dimensions.addEventListener("change", onChange); - - // Remove the listener when the component unmounts. - return () => - // Using removeEventListener is deprecated in react-native > 0.65 and will throw warning. Use .remove() if available. - subscription && subscription.remove ? subscription.remove() : undefined; - }, []); - - // Render the children with the dimensions context provider. - return ( - - {children} - - ); -}; diff --git a/src/theme/src/theme-context.tsx b/src/theme/src/theme-context.tsx index 1ce07fbb..eb0c4989 100644 --- a/src/theme/src/theme-context.tsx +++ b/src/theme/src/theme-context.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState, createContext } from "react"; import { useColorScheme } from "react-native"; import { baseTheme } from "./base/index"; import { FinalPearlTheme } from "./types"; -import { DimensionsProvider } from "./dimensions-context"; import { GestureHandlerRootView } from "react-native-gesture-handler"; export type ColorMode = "light" | "dark"; @@ -89,11 +88,9 @@ export const ThemeProvider: React.FC = ({ } as IThemeContext } > - - - {children} - - + + {children} + ); } diff --git a/src/theme/tests/style-functions.spec.tsx b/src/theme/tests/style-functions.spec.tsx index d01d3b89..d7a41e01 100644 --- a/src/theme/tests/style-functions.spec.tsx +++ b/src/theme/tests/style-functions.spec.tsx @@ -76,18 +76,6 @@ describe("createStyleFunctions", () => { expect(getByText(targetBackgroundColor)).toBeTruthy(); }); - it("throws error if the color is not present in palette", () => { - const { getByText } = render( - - ); - - expect(getByText(/does not exist in theme/i)).toBeTruthy(); - }); - it("maps color prop correctly", () => { const { getByText } = render( { expect(combinedTheme.palette.hasOwnProperty("custom-color")).toBe(true); expect(combinedTheme.palette.hasOwnProperty("primary")).toBe(true); expect(combinedTheme.spacing.hasOwnProperty("custom-xxxl")).toBe(true); - expect(combinedTheme.spacing.hasOwnProperty("s")).toBe(true); + expect(combinedTheme.spacing.hasOwnProperty("3")).toBe(true); }); }); diff --git a/src/theme/utils/utils.ts b/src/theme/utils/utils.ts index 27e98eed..c970c332 100644 --- a/src/theme/utils/utils.ts +++ b/src/theme/utils/utils.ts @@ -11,6 +11,7 @@ import { ColorPalette } from "../src/types"; */ export const generatePalette = ( color: ColorInput, + label: string, count: number = 9, similarity: number = 1.4 ) => { @@ -43,7 +44,7 @@ export const generatePalette = ( // Odd number of colors else { // Generate tints - const numTints = Math.ceil(count / 2); + const numTints = Math.floor(count / 2); const tintStep = 100 / (numTints * similarity); for (let i = 1; i <= numTints; i++) { @@ -54,12 +55,12 @@ export const generatePalette = ( } // Middle shade - const middleShadeIdx = Math.ceil(count / 2) + 1; + const middleShadeIdx = Math.floor(count / 2) + 1; const middleShadeLabel = parseInt(middleShadeIdx.toString().concat("00")); shades[middleShadeLabel] = tinyColor.toHexString(); // Generate dark shades - const numShades = Math.ceil(count / 2); + const numShades = Math.floor(count / 2); const darkenStep = 100 / (numShades * similarity); for (let i = 1; i <= numShades; i++) { @@ -68,7 +69,7 @@ export const generatePalette = ( } } - return shades; + return { [label]: shades }; }; /** diff --git a/src/utils/tests/responsive-size/default.spec.ts b/src/utils/tests/responsive-size/default.spec.ts index 8eb11316..ce6a3ee2 100644 --- a/src/utils/tests/responsive-size/default.spec.ts +++ b/src/utils/tests/responsive-size/default.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 1; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 400, height: 600 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 1), + }, + Dimensions: { + get: jest.fn(() => ({ width: 400, height: 600, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { @@ -25,12 +18,12 @@ describe("responsiveSize", () => { it("returns 0 for empty size", () => { const scaledSize = responsiveSize(); - expect(scaledSize).toEqual(0); + expect(scaledSize).toBe(0); }); it("returns the size itself by default", () => { const initialSize = 10; const scaledSize = responsiveSize(initialSize); - expect(scaledSize).toEqual(initialSize); + expect(scaledSize).toBe(initialSize); }); }); diff --git a/src/utils/tests/responsive-size/high-res android machines with less height.spec.ts b/src/utils/tests/responsive-size/high-res android machines with less height.spec.ts index 7048b650..61910fcd 100644 --- a/src/utils/tests/responsive-size/high-res android machines with less height.spec.ts +++ b/src/utils/tests/responsive-size/high-res android machines with less height.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 4; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 400, height: 600 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 4), + }, + Dimensions: { + get: jest.fn(() => ({ width: 400, height: 600, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { diff --git a/src/utils/tests/responsive-size/high-res android machines with medium height.spec.ts b/src/utils/tests/responsive-size/high-res android machines with medium height.spec.ts index 564cbb6f..fc3e61da 100644 --- a/src/utils/tests/responsive-size/high-res android machines with medium height.spec.ts +++ b/src/utils/tests/responsive-size/high-res android machines with medium height.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 4; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 400, height: 700 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 4), + }, + Dimensions: { + get: jest.fn(() => ({ width: 400, height: 700, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { diff --git a/src/utils/tests/responsive-size/high-res android machines.spec.ts b/src/utils/tests/responsive-size/high-res android machines.spec.ts index 3e74a499..df300370 100644 --- a/src/utils/tests/responsive-size/high-res android machines.spec.ts +++ b/src/utils/tests/responsive-size/high-res android machines.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 4; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 330, height: 600 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 4), + }, + Dimensions: { + get: jest.fn(() => ({ width: 400, height: 600, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { @@ -27,6 +20,6 @@ describe("responsiveSize", () => { const initialSize = 10; const scaledSize = responsiveSize(initialSize); - expect(scaledSize).toEqual(10); + expect(scaledSize).toEqual(12); }); }); diff --git a/src/utils/tests/responsive-size/iphone-5.spec.ts b/src/utils/tests/responsive-size/iphone-5.spec.ts index e52632c5..1eb061c9 100644 --- a/src/utils/tests/responsive-size/iphone-5.spec.ts +++ b/src/utils/tests/responsive-size/iphone-5.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 2.5; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 400, height: 600 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 2), + }, + Dimensions: { + get: jest.fn(() => ({ width: 320, height: 568, scale: 2, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { @@ -27,6 +20,6 @@ describe("responsiveSize", () => { const initialSize = 10; const scaledSize = responsiveSize(initialSize); - expect(scaledSize).toEqual(10); + expect(scaledSize).toEqual(9.5); }); }); diff --git a/src/utils/tests/responsive-size/iphone-5s-and-older-androids.spec.ts b/src/utils/tests/responsive-size/iphone-5s-and-older-androids.spec.ts index 50964a3d..c7be220e 100644 --- a/src/utils/tests/responsive-size/iphone-5s-and-older-androids.spec.ts +++ b/src/utils/tests/responsive-size/iphone-5s-and-older-androids.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 2.5; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 330, height: 600 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 2.5), + }, + Dimensions: { + get: jest.fn(() => ({ width: 330, height: 600, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { diff --git a/src/utils/tests/responsive-size/iphone-6s.spec.ts b/src/utils/tests/responsive-size/iphone-6s.spec.ts index 0acc029d..1a817c93 100644 --- a/src/utils/tests/responsive-size/iphone-6s.spec.ts +++ b/src/utils/tests/responsive-size/iphone-6s.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 2.5; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 400, height: 700 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 2), + }, + Dimensions: { + get: jest.fn(() => ({ width: 375, height: 667, scale: 2, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { diff --git a/src/utils/tests/responsive-size/large-devices.spec.ts b/src/utils/tests/responsive-size/large-devices.spec.ts index d6c243fd..da29ab86 100644 --- a/src/utils/tests/responsive-size/large-devices.spec.ts +++ b/src/utils/tests/responsive-size/large-devices.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 3.2; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 400, height: 800 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 3.2), + }, + Dimensions: { + get: jest.fn(() => ({ width: 400, height: 800, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { diff --git a/src/utils/tests/responsive-size/large-phablets.spec.ts b/src/utils/tests/responsive-size/large-phablets.spec.ts index 4b8adf18..c2987e40 100644 --- a/src/utils/tests/responsive-size/large-phablets.spec.ts +++ b/src/utils/tests/responsive-size/large-phablets.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 4; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 400, height: 800 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 4), + }, + Dimensions: { + get: jest.fn(() => ({ width: 400, height: 800, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { diff --git a/src/utils/tests/responsive-size/older-phablets.spec.ts b/src/utils/tests/responsive-size/older-phablets.spec.ts index 61e5037d..4f97c848 100644 --- a/src/utils/tests/responsive-size/older-phablets.spec.ts +++ b/src/utils/tests/responsive-size/older-phablets.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 2.5; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 400, height: 800 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 2.5), + }, + Dimensions: { + get: jest.fn(() => ({ width: 400, height: 800, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { diff --git a/src/utils/tests/responsive-size/small-android-machines.spec.ts b/src/utils/tests/responsive-size/small-android-machines.spec.ts index 46a970cf..86b2337d 100644 --- a/src/utils/tests/responsive-size/small-android-machines.spec.ts +++ b/src/utils/tests/responsive-size/small-android-machines.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 3.2; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 330, height: 600 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 1), + }, + Dimensions: { + get: jest.fn(() => ({ width: 400, height: 600, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { diff --git a/src/utils/tests/responsive-size/special-case-androids.spec.ts b/src/utils/tests/responsive-size/special-case-androids.spec.ts index 9f44e3e7..7ce688c2 100644 --- a/src/utils/tests/responsive-size/special-case-androids.spec.ts +++ b/src/utils/tests/responsive-size/special-case-androids.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 3.2; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 400, height: 700 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 3.2), + }, + Dimensions: { + get: jest.fn(() => ({ width: 400, height: 700, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => { diff --git a/src/utils/tests/responsive-size/weird-android-sizes.spec.ts b/src/utils/tests/responsive-size/weird-android-sizes.spec.ts index 972ffdcf..7be1917e 100644 --- a/src/utils/tests/responsive-size/weird-android-sizes.spec.ts +++ b/src/utils/tests/responsive-size/weird-android-sizes.spec.ts @@ -2,21 +2,14 @@ import responsiveSize from "../../responsive-size"; jest.useFakeTimers(); -jest.mock("react-native/Libraries/Utilities/PixelRatio", () => { - return { - get: jest.fn(() => { - return 3.2; - }), - }; -}); - -jest.mock("react-native/Libraries/Utilities/Dimensions", () => { - return { - get: jest.fn(() => { - return { width: 400, height: 600 }; - }), - }; -}); +jest.mock("react-native", () => ({ + PixelRatio: { + get: jest.fn(() => 3.2), + }, + Dimensions: { + get: jest.fn(() => ({ width: 400, height: 600, scale: 1, fontScale: 1 })), + }, +})); describe("responsiveSize", () => { beforeAll(() => {