test: covering all pages

gabriel-logan · Sep 4, 2024 · 3641ba3 · 3641ba3
1 parent 2307fe2
commit 3641ba3
Show file tree

Hide file tree

Showing 4 changed files with 288 additions and 12 deletions.
diff --git a/src/pages/ChangeLandModal.tsx b/src/pages/ChangeLandModal.tsx
@@ -84,17 +84,20 @@ export default function ChangeLangModal({
 
 	return (
 		<Modal
+			testID="modal-change-lang"
 			visible={modalChangeLang}
 			onRequestClose={() => setModalChangeLang(false)}
 			transparent
 		>
 			<TouchableOpacity
+				testID="modal-background"
 				style={stylesWithTheme.modalContainer}
 				onPress={() => setModalChangeLang(false)}
 			>
 				<ScrollView style={stylesWithTheme.scrollContainer}>
 					{languages.map((languageCode) => (
 						<TouchableOpacity
+							testID={`language-button-${languageCode}`}
 							style={stylesWithTheme.languageButton}
 							onPress={() => {
 								changeLanguage(languageCode);
@@ -108,6 +111,7 @@ export default function ChangeLangModal({
 						</TouchableOpacity>
 					))}
 					<TouchableOpacity
+						testID="language-button-klingon"
 						style={[
 							stylesWithTheme.languageButton,
 							stylesWithTheme.marginBotton35,

diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
@@ -45,11 +45,7 @@ export default function Main({ navigation }: NavigationPropsTypes) {
 		newSelectedTheme: typeof theme | "system"
 	) => {
 		if (newSelectedTheme === "system") {
-			if (systemTheme) {
-				toggleTheme(systemTheme);
-			} else {
-				toggleTheme("light");
-			}
+			toggleTheme(systemTheme);
 			// Define o tema com base no sistema (usando useColorScheme)
 		} else {
 			toggleTheme(newSelectedTheme);
@@ -61,13 +57,14 @@ export default function Main({ navigation }: NavigationPropsTypes) {
 
 	useEffect(() => {
 		(async () => {
-			const getThemeCoice = (await AsyncStorage.getItem("themeSelected")) as
-				| typeof theme
-				| null;
-			if (getThemeCoice) {
-				setSelectedTheme(getThemeCoice);
-			}
 			try {
+				const getThemeCoice = (await AsyncStorage.getItem("themeSelected")) as
+					| typeof theme
+					| null;
+				if (getThemeCoice) {
+					setSelectedTheme(getThemeCoice);
+				}
+
 				const termsAccept = await AsyncStorage.getItem("termsAccept");
 				if (!termsAccept || !JSON.parse(termsAccept)) {
 					navigation.reset({
@@ -133,7 +130,7 @@ export default function Main({ navigation }: NavigationPropsTypes) {
 					modalChangeLang={modalChangeLang}
 					setModalChangeLang={setModalChangeLang}
 				/>
-				<View style={stylesWithTheme.themeContainer}>
+				<View testID="theme-switch" style={stylesWithTheme.themeContainer}>
 					<Text style={stylesWithTheme.themeTitle}>{t("Escolha o Tema:")}</Text>
 					<View style={stylesWithTheme.themeOption}>
 						<Text style={stylesWithTheme.themeText}>{t("Tema claro")}</Text>

diff --git a/src/pages/__tests__/ChangeLandModal.test.tsx b/src/pages/__tests__/ChangeLandModal.test.tsx
@@ -0,0 +1,116 @@
+import { fireEvent, render, screen } from "@testing-library/react-native";
+
+import ChangeLangModal from "../ChangeLandModal";
+
+const languageMappings: Record<string, string> = {
+	af: "Afrikaans",
+	ar: "العربية",
+	bg: "български",
+	ca: "Català",
+	cs: "Čeština",
+	cy: "Cymraeg",
+	da: "Dansk",
+	de: "Deutsch",
+	el: "Ελληνικά",
+	en: "English",
+	es: "Español",
+	fa: "فارسی",
+	fi: "Suomi",
+	fr: "Français",
+	he: "עברית",
+	hi: "हिन्दी",
+	hr: "Hrvatski",
+	hu: "Magyar",
+	id: "Bahasa Indonesia",
+	is: "Íslenska",
+	it: "Italiano",
+	ja: "日本語",
+	ko: "한국어",
+	lt: "Lietuvių",
+	lv: "Latviešu",
+	ms: "Bahasa Melayu",
+	mt: "Malti",
+	nb: "Norsk (Bokmål)",
+	nl: "Nederlands",
+	pl: "Polski",
+	ptBR: "Português (BR)",
+	ptPT: "Português (PT)",
+	ro: "Română",
+	ru: "Русский",
+	sk: "Slovenčina",
+	sl: "Slovenščina",
+	srLatn: "Srpski (Latinica)",
+	sv: "Svenska",
+	sw: "Kiswahili (Latin)",
+	th: "ไทย",
+	tr: "Türkçe",
+	uk: "Українська",
+	ur: "اردو",
+	vi: "Tiếng Việt",
+	zh: "中文",
+	zhHans: "简体中文",
+	zhHant: "繁體中文",
+};
+
+describe("ChangeLandModal", () => {
+	it("should render correctly", () => {
+		render(<ChangeLangModal modalChangeLang setModalChangeLang={jest.fn()} />);
+	});
+
+	it("should render klingon language independently", () => {
+		render(<ChangeLangModal modalChangeLang setModalChangeLang={jest.fn()} />);
+
+		expect(screen.getByText(/Klingon/)).toBeTruthy();
+	});
+
+	it("should render all languages", () => {
+		render(<ChangeLangModal modalChangeLang setModalChangeLang={jest.fn()} />);
+
+		Object.values(languageMappings).forEach((language) => {
+			expect(screen.getByText(language)).toBeTruthy();
+		});
+	});
+
+	it("should close modal when background is clicked", async () => {
+		const setModalChangeLang = jest.fn();
+		render(
+			<ChangeLangModal
+				modalChangeLang
+				setModalChangeLang={setModalChangeLang}
+			/>
+		);
+
+		const background = screen.getByTestId("modal-background");
+		const modal = screen.getByTestId("modal-change-lang");
+
+		fireEvent.press(background);
+
+		expect(setModalChangeLang).toHaveBeenCalledWith(false);
+
+		modal.props.onRequestClose();
+	});
+
+	it("should change language when a language is clicked", () => {
+		const setModalChangeLang = jest.fn();
+		render(
+			<ChangeLangModal
+				modalChangeLang
+				setModalChangeLang={setModalChangeLang}
+			/>
+		);
+
+		const newArrayOfLanguages = [...Object.keys(languageMappings), "klingon"];
+
+		newArrayOfLanguages.forEach((languageCode) => {
+			const languageButton = screen.getByTestId(
+				`language-button-${languageCode}`
+			);
+
+			fireEvent.press(languageButton);
+		});
+
+		expect(setModalChangeLang).toHaveBeenCalledTimes(
+			newArrayOfLanguages.length - 1
+		);
+	});
+});
diff --git a/src/pages/__tests__/Main.test.tsx b/src/pages/__tests__/Main.test.tsx
@@ -0,0 +1,159 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import {
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from "@testing-library/react-native";
+import { Alert } from "react-native";
+
+import ThemeProvider from "../../components/ThemeContext";
+import type { NavigationType } from "../../types/navigationProps";
+import Main from "../Main";
+
+const navigation = {
+	navigate: jest.fn(),
+	dispatch: jest.fn(),
+	reset: jest.fn(),
+	goBack: jest.fn(),
+	isFocused: jest.fn(),
+} as unknown as NavigationType;
+
+describe("Main Page", () => {
+	it("should render the main page", async () => {
+		render(<Main navigation={navigation} />);
+
+		const title = await screen.findByText(/Bem-vindo ao 2Devs/i);
+
+		expect(title).toBeDefined();
+	});
+
+	describe("External Links", () => {
+		it("should open rate play store link", async () => {
+			render(<Main navigation={navigation} />);
+
+			const rateButton = await screen.findByText("Avalie o aplicativo");
+
+			fireEvent.press(rateButton);
+		});
+	});
+
+	describe("Change Language Modal", () => {
+		it("should render the change language modal", async () => {
+			render(<Main navigation={navigation} />);
+
+			const changeLangModal = await screen.findByText("Alterar idioma");
+
+			expect(changeLangModal).toBeDefined();
+
+			fireEvent.press(changeLangModal);
+		});
+	});
+
+	describe("Change Theme Switches", () => {
+		it("should render the theme switches", async () => {
+			render(<Main navigation={navigation} />);
+
+			const themeSwitch = await screen.findByTestId("theme-switch");
+
+			expect(themeSwitch).toBeDefined();
+		});
+
+		it("should change the theme when the switch is toggled", async () => {
+			render(
+				<ThemeProvider>
+					<Main navigation={navigation} />
+				</ThemeProvider>
+			);
+
+			const switches = await screen.findAllByRole("switch");
+
+			const lightSwitch = switches[0];
+			const darkSwitch = switches[1];
+			const systemSwitch = switches[2];
+
+			expect(lightSwitch).toBeDefined();
+			expect(darkSwitch).toBeDefined();
+			expect(systemSwitch).toBeDefined();
+
+			expect(lightSwitch.props.value).toBe(true);
+
+			fireEvent(darkSwitch, "onValueChange", true);
+
+			await waitFor(() => {
+				expect(darkSwitch.props.value).toBe(true);
+			});
+
+			await waitFor(() => {
+				expect(lightSwitch.props.value).toBe(false);
+			});
+
+			await waitFor(() => {
+				expect(systemSwitch.props.value).toBe(false);
+			});
+
+			fireEvent(systemSwitch, "onValueChange", true);
+
+			await waitFor(() => {
+				expect(systemSwitch.props.value).toBe(true);
+			});
+
+			await waitFor(() => {
+				expect(lightSwitch.props.value).toBe(false);
+			});
+
+			await waitFor(() => {
+				expect(darkSwitch.props.value).toBe(false);
+			});
+
+			fireEvent(lightSwitch, "onValueChange", true);
+
+			await waitFor(() => {
+				expect(lightSwitch.props.value).toBe(true);
+			});
+
+			await waitFor(() => {
+				expect(darkSwitch.props.value).toBe(false);
+			});
+
+			await waitFor(() => {
+				expect(systemSwitch.props.value).toBe(false);
+			});
+		});
+	});
+
+	describe("useEffect", () => {
+		describe("Verify Terms Acceptance", () => {
+			it("should navigate to Initial if terms were not accepted", async () => {
+				(AsyncStorage.getItem as jest.Mock).mockResolvedValueOnce(
+					'{"key": "value",}'
+				);
+
+				render(<Main navigation={navigation} />);
+
+				await waitFor(() => {
+					expect(navigation.reset).toHaveBeenCalledWith({
+						index: 0,
+						routes: [{ name: "Initial" }],
+					});
+				});
+			});
+
+			it("should show an alert if AsyncStorage.getItem throws an error", async () => {
+				jest.spyOn(Alert, "alert");
+
+				(AsyncStorage.getItem as jest.Mock).mockRejectedValueOnce(
+					new Error("AsyncStorage error")
+				);
+
+				render(<Main navigation={navigation} />);
+
+				await waitFor(() => {
+					expect(Alert.alert).toHaveBeenCalledWith(
+						"Alguma coisa errada aconteceu, contate o desenvolvedor"
+					);
+				});
+			});
+		});
+	});
+});