Adiciona o teste para DarkModeEnabledContext

.github/workflows/lint.yml → .github/workflows/lint-and-test.yml

@@ -1,4 +1,4 @@
-name: Linter
+name: Linter and Tests
 
 on:
   push:
@@ -8,7 +8,7 @@ on:
 
 jobs:
   lint:
-    name: Run all front-end linters
+    name: Run all linters and tests
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -27,3 +27,6 @@ jobs:
 
       - name: Run linters
         run: make lint-no-fix
+
+      - name: Run tests
+        run: make test

Makefile

@@ -4,6 +4,10 @@ lint:
 		yarn eslint . --fix --ext js,jsx,ts,tsx
 		yarn tsc
 
+.PHONY: test
+test:
+		yarn test
+
 .PHONY: lint-no-fix
 lint-no-fix:
 		yarn prettier --check .

README.md

@@ -24,7 +24,7 @@ Depois, para inicializar o storybook, rode o script: `yarn storybook`.
 
 ## Processo de revisão
 
-O processo de revisão de código é feito por PRs do GitHub. É possível abrir um PR rodando por exemplo `gh pr create`. É uma boa prática rodar localmente o lint com o comando `make lint` antes de enviar o código para revisão, mas as verificações de lint acontecerão também no CI do GitHub de todo modo.
+O processo de revisão de código é feito por PRs do GitHub. É possível abrir um PR rodando por exemplo `gh pr create`. É uma boa prática rodar localmente o lint com o comando `make lint` e `make test` antes de enviar o código para revisão, mas as verificações de lint, e os testes automatizados, acontecerão também no CI do GitHub de todo modo.
 
 ## Deploy
 

jest.config.ts

@@ -9,6 +9,8 @@ const config: Config = {
   clearMocks: true,
   modulePathIgnorePatterns: ['/node_modules/', '/build/'],
   testRegex: '(__tests__/.*\\.)?test\\.(js|ts|tsx)$',
+  testEnvironment: 'jsdom',
+  setupFiles: ['<rootDir>/utils/jest-mocks/async-storage.js'],
 };
 
 export default config;

package.json

@@ -15,6 +15,7 @@
     "@storybook/react": "^7.0.26",
     "@storybook/react-webpack5": "^7.0.26",
     "@storybook/testing-library": "^0.0.14-next.2",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.0",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.0.33",
@@ -30,6 +31,7 @@
     "eslint-plugin-react": "^7.33.0",
     "fs": "^0.0.1-security",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "path": "^0.12.7",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",

themes/__tests__/DarkModeEnabledContext.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  DarkModeEnabledProvider,
+  defaultTheme,
+  useDarkMode,
+} from '../DarkModeEnabledContext';
+
+const ThemeDisplay = (): React.JSX.Element => {
+  const { theme } = useDarkMode();
+  return <p>Tema atual: {theme}</p>;
+};
+
+const ThemeToggle = (): React.JSX.Element => {
+  const { toggleDarkMode } = useDarkMode();
+  return <button onClick={toggleDarkMode}>Trocar de tema</button>;
+};
+
+const customRender = (): any => {
+  return render(
+    <DarkModeEnabledProvider>
+      <ThemeDisplay />
+      <ThemeToggle />
+    </DarkModeEnabledProvider>,
+    {}
+  );
+};
+
+beforeEach(async () => {
+  await AsyncStorage.clear();
+});
+
+test('DarkModeEnabledProvider shows defaultTheme', () => {
+  customRender();
+  expect(screen.getByText(/^Tema atual:/)).toHaveTextContent(
+    `Tema atual: ${defaultTheme}`
+  );
+});
+
+test('DarkModeEnabledProvider toggle theme to dark', () => {
+  customRender();
+  fireEvent.click(screen.getByText(/^Trocar de tema/));
+  expect(screen.getByText(/^Tema atual:/)).toHaveTextContent(
+    `Tema atual: dark`
+  );
+});
+
+test('DarkModeEnabledProvider theme is stored at toggle', async () => {
+  customRender();
+  fireEvent.click(screen.getByText(/^Trocar de tema/));
+  expect(screen.getByText(/^Tema atual:/)).toHaveTextContent(
+    `Tema atual: dark`
+  );
+
+  await AsyncStorage.getItem('dsa_theme').then((theme) => {
+    expect(theme).toBe('dark');
+  });
+});
+
+test('DarkModeEnabledProvider uses stored theme as current', async () => {
+  await AsyncStorage.setItem('dsa_theme', 'dark').then(async () => {
+    await AsyncStorage.getItem('dsa_theme').then(async (theme) => {
+      await act(async () => customRender()).then(() => {
+        expect(theme).toBe('dark');
+
+        setTimeout(() => {
+          expect(screen.getByText(/^Tema atual:/)).toHaveTextContent(
+            `Tema atual: dark`
+          );
+        }, 500);
+      });
+    });
+  });
+
+  fireEvent.click(screen.getByText(/^Trocar de tema/));
+  expect(screen.getByText(/^Tema atual:/)).toHaveTextContent(
+    `Tema atual: light`
+  );
+  await AsyncStorage.getItem('dsa_theme').then((theme) => {
+    expect(theme).toBe('light');
+  });
+});
+
+test('DarkModeEnabledProvider toggle back theme to light and persist correctly', async () => {
+  customRender();
+  fireEvent.click(screen.getByText(/^Trocar de tema/));
+  expect(screen.getByText(/^Tema atual:/)).toHaveTextContent(
+    `Tema atual: dark`
+  );
+
+  await AsyncStorage.getItem('dsa_theme').then((theme) => {
+    expect(theme).toBe('dark');
+  });
+
+  fireEvent.click(screen.getByText(/^Trocar de tema/));
+  expect(screen.getByText(/^Tema atual:/)).toHaveTextContent(
+    `Tema atual: light`
+  );
+
+  await AsyncStorage.getItem('dsa_theme').then((theme) => {
+    expect(theme).toBe('light');
+  });
+});

utils/jest-mocks/async-storage.js

@@ -0,0 +1,16 @@
+jest.mock('@react-native-community/async-storage', () => {
+  const mock = jest.requireActual(
+    '@react-native-community/async-storage/jest/async-storage-mock'
+  );
+
+  // Fixes a bug with the mock when merging on a key that doesn't hold any value yet
+  const { mergeItem } = mock;
+  mock.mergeItem = jest.fn((key, value, callback) => {
+    if (mock.__INTERNAL_MOCK_STORAGE__[key] === undefined) {
+      mock.__INTERNAL_MOCK_STORAGE__[key] = '{}';
+    }
+    return mergeItem(key, value, callback);
+  });
+
+  return mock;
+});