diff --git a/.gitignore b/.gitignore index 5a0e8ed85..b69d396b9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ node_modules/ .expo/ dist/ +expo-env.d.ts npm-debug.* *.jks *.p8 diff --git a/App.tsx b/App.tsx index 2a9fb69e7..5ce588e97 100644 --- a/App.tsx +++ b/App.tsx @@ -161,16 +161,16 @@ export default function AppWithProviders() { } const useStyles = () => { - const { theme } = useAppTheme(); + // const { theme } = useAppTheme(); return useMemo( () => StyleSheet.create({ safe: { flex: 1, - backgroundColor: theme.colors.background.surface, + // backgroundColor: theme.colors.background.surface, }, }), - [theme] + [] ); }; diff --git a/__mocks__/expo-haptics.ts b/__mocks__/expo-haptics.ts new file mode 100644 index 000000000..cb1abec0b --- /dev/null +++ b/__mocks__/expo-haptics.ts @@ -0,0 +1,38 @@ +// Jest mock for expo-haptics + +/* + During Expo 52 upgrade haptics were failing in tests, so mocked it for now +*/ + +enum ImpactFeedbackStyle { + Light = "light", + Medium = "medium", + Heavy = "heavy", + Soft = "soft", + Rigid = "rigid", +} + +enum NotificationFeedbackType { + Success = "success", + Warning = "warning", + Error = "error", +} + +const impactAsync = jest.fn(async (style: ImpactFeedbackStyle) => {}); +const notificationAsync = jest.fn(async (type: NotificationFeedbackType) => {}); + +const MockedExpoHaptics = { + impactAsync, + notificationAsync, + ImpactFeedbackStyle, + NotificationFeedbackType, +}; + +export { + impactAsync, + notificationAsync, + ImpactFeedbackStyle, + NotificationFeedbackType, +}; + +export default MockedExpoHaptics; diff --git a/__mocks__/expo-image.ts b/__mocks__/expo-image.ts new file mode 100644 index 000000000..757b9e08e --- /dev/null +++ b/__mocks__/expo-image.ts @@ -0,0 +1,6 @@ +/* + During Expo 52 upgrade expo-image was failing in tests, so mocked it for now +*/ +import { Image } from "react-native"; + +export { Image }; diff --git a/app.config.ts b/app.config.ts index eb8f5fec5..3cf6fd0db 100644 --- a/app.config.ts +++ b/app.config.ts @@ -150,7 +150,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({ "expo-build-properties", { android: { - compileSdkVersion: 34, + compileSdkVersion: 35, targetSdkVersion: 34, buildToolsVersion: "34.0.0", minSdkVersion: 26, diff --git a/app.json b/app.json index 648574deb..d6e1c8d07 100644 --- a/app.json +++ b/app.json @@ -1,5 +1,6 @@ { "expo": { + "newArchEnabled": false, "version": "2.1.0", "ios": { "buildNumber": "57" diff --git a/babel.config.js b/babel.config.js index 591f7ada1..86f0ed3b6 100644 --- a/babel.config.js +++ b/babel.config.js @@ -17,7 +17,6 @@ module.exports = { { alias: { "fast-text-encoding": "text-encoding", - // crypto: "react-native-quick-crypto", crypto: "crypto-browserify", // This entrypoint mapping is done in @xmtp/user-preferences-bindings-wasm's "exports" in package.json // but we don't want to enable unstable_enablePackageExports for now in metro.config.js diff --git a/components/AndroidBackAction.tsx b/components/AndroidBackAction.tsx index 9f9ba453b..31e6114d7 100644 --- a/components/AndroidBackAction.tsx +++ b/components/AndroidBackAction.tsx @@ -1,5 +1,5 @@ import { HeaderBackButton } from "@react-navigation/elements"; -import { NativeStackNavigationProp } from "@react-navigation/native-stack/lib/typescript/src/types"; +import { NativeStackNavigationProp } from "@react-navigation/native-stack"; import { textSecondaryColor } from "@styles/colors"; import { useColorScheme } from "react-native"; diff --git a/components/Avatar.tsx b/components/Avatar.tsx index 4d7b58391..64362d59f 100644 --- a/components/Avatar.tsx +++ b/components/Avatar.tsx @@ -1,17 +1,17 @@ import { actionSecondaryColor, textSecondaryColor } from "@styles/colors"; import { AvatarSizes } from "@styles/sizes"; import { getFirstLetterForAvatar } from "@utils/getFirstLetterForAvatar"; -import { ImageBackground } from "expo-image"; +import { Image } from "expo-image"; import React, { useCallback, useState } from "react"; import { ColorSchemeName, - ImageStyle, Platform, StyleProp, StyleSheet, Text, useColorScheme, View, + ViewStyle, } from "react-native"; import Picto from "./Picto/Picto"; @@ -19,7 +19,7 @@ import Picto from "./Picto/Picto"; export type AvatarProps = { uri?: string | undefined; size?: number | undefined; - style?: StyleProp; + style?: StyleProp; color?: boolean; name?: string | undefined; // Inverts the color of the place holder @@ -47,18 +47,17 @@ function Avatar({ setDidError(false); }, []); return uri && !didError ? ( - <> - + - + /> + ) : ( ; + style?: StyleProp; defaultSource?: ImageSourcePropType; }; diff --git a/components/__tests__/Avatar.perf-test.tsx b/components/__tests__/Avatar.perf-test.tsx index 96db5bd7c..a6fd52066 100644 --- a/components/__tests__/Avatar.perf-test.tsx +++ b/components/__tests__/Avatar.perf-test.tsx @@ -4,10 +4,15 @@ import React from "react"; import { measureRenders } from "reassure"; import Avatar from "../Avatar"; +import { TestThemeProvider } from "@/design-system/test-utils/renderWithThemeProvider"; jest.setTimeout(600_000); -const TestComponent = ({ uri }: { uri?: string }) => ; +const TestComponent = ({ uri }: { uri?: string }) => ( + + + +); test("Empty Avatar 10 runs", async () => { const scenario = async () => { diff --git a/components/__tests__/Avatar.test.tsx b/components/__tests__/Avatar.test.tsx index 7b86bf6f1..f144924e0 100644 --- a/components/__tests__/Avatar.test.tsx +++ b/components/__tests__/Avatar.test.tsx @@ -4,6 +4,7 @@ import { render } from "@testing-library/react-native"; import React from "react"; import Avatar from "../Avatar"; // Adjust the path as needed +import { renderWithThemeProvider } from "@/design-system/test-utils/renderWithThemeProvider"; // Mock the useColorScheme hook to always return 'light' for consistency in tests jest.mock("react-native/Libraries/Utilities/useColorScheme", () => ({ @@ -13,17 +14,19 @@ jest.mock("react-native/Libraries/Utilities/useColorScheme", () => ({ describe("Avatar Component", () => { it("renders correctly with image URI", () => { - const { getByTestId } = render( + const { getByTestId } = renderWithThemeProvider( ); // Check if the ImageBackground is rendered with the correct URI const image = getByTestId("avatar-image"); - expect(image.props.source[0].uri).toBe("http://placebacon.net/400/300"); + expect(image.props.source.uri).toBe("http://placebacon.net/400/300"); }); it("renders correctly with name and without image URI", () => { - const { getByText } = render(); + const { getByText } = renderWithThemeProvider( + + ); // Check if the first letter of the name is rendered const letter = getByText("J"); @@ -31,7 +34,7 @@ describe("Avatar Component", () => { }); it("renders placeholder picto if no image URI or name is provided", () => { - const { getByTestId } = render(); + const { getByTestId } = renderWithThemeProvider(); // Check if the Picto component is rendered const picto = getByTestId("avatar-placeholder"); diff --git a/components/__tests__/Button.test.tsx b/design-system/Button/Button.test.tsx similarity index 81% rename from components/__tests__/Button.test.tsx rename to design-system/Button/Button.test.tsx index 972fed8e5..b7744c756 100644 --- a/components/__tests__/Button.test.tsx +++ b/design-system/Button/Button.test.tsx @@ -1,10 +1,9 @@ -// __tests__/Button.test.tsx - -import { render, fireEvent } from "@testing-library/react-native"; +import { fireEvent } from "@testing-library/react-native"; import React from "react"; import { Platform } from "react-native"; -import Button from "../Button/Button"; +import { Button } from "./Button"; +import { renderWithThemeProvider } from "@/design-system/test-utils/renderWithThemeProvider"; // Mock useColorScheme for consistent testing jest.mock("react-native/Libraries/Utilities/useColorScheme", () => ({ @@ -17,7 +16,7 @@ describe("Button Component", () => { it("renders correctly with primary variant", () => { Platform.OS = "ios"; // Set the platform to iOS - const { toJSON, getByText } = render( + const { toJSON, getByText } = renderWithThemeProvider(