DEV Community: Vitor Rios

Arquitetura Hexagonal: Exemplo com JS/TS

Vitor Rios — Mon, 06 Oct 2025 14:09:29 +0000

A Arquitetura Hexagonal, também conhecida como Ports and Adapters, é um modelo arquitetural criado por Alistair Cockburn para tornar aplicações mais modulares, flexíveis e testáveis. Essa abordagem separa a lógica de negócio das dependências externas, como bancos de dados, APIs e interfaces gráficas, garantindo um sistema desacoplado e de fácil manutenção.

🔄 O Conceito da Arquitetura Hexagonal

A ideia principal da Arquitetura Hexagonal é criar um núcleo independente que contenha as regras de negócio da aplicação, se comunicando com o mundo externo através de ports (portas) e adapters (adaptadores). Isso permite que diferentes tecnologias possam ser conectadas sem impactar diretamente no core da aplicação.

A representação visual da arquitetura é um hexágono, mas essa forma é apenas uma ilustração do conceito de múltiplas entradas e saídas.

Estrutura da Arquitetura Hexagonal

Core (Núcleo da Aplicação): Contém as regras de negócio e não deve depender de frameworks ou tecnologias específicas.
Ports (Portas): Interfaces que definem os pontos de interação da aplicação com o mundo externo.
Adapters (Adaptadores): Implementações concretas das portas, conectando a aplicação a bancos de dados, APIs externas, interfaces de usuário, entre outros.

Essa separação permite que mudanças no banco de dados, por exemplo, sejam feitas sem impactar o core da aplicação.

🛠️ Implementando uma Arquitetura Hexagonal em TypeScript

Vamos construir um sistema de cadastro de usuários seguindo a Arquitetura Hexagonal.

1. Criando a Port (Interface)

Começamos definindo uma interface que representa um repositório de usuários:

interface UserRepository {
  create(user: User): Promise<User>;
  findByEmail(email: string): Promise<User | null>;
}

Essa interface define o contrato que qualquer repositório de usuários deve seguir, independentemente da tecnologia utilizada.

2. Criando o Core (Serviço de Negócio)

Agora, criamos um serviço que usa a interface UserRepository para gerenciar usuários:

class UserService {
  constructor(private userRepository: UserRepository) {}

  async registerUser(email: string, name: string) {
    const existingUser = await this.userRepository.findByEmail(email);
    if (existingUser) throw new Error('User already exists');

    const newUser = { email, name };
    return this.userRepository.create(newUser);
  }
}

Aqui, o UserService não sabe se os dados serão armazenados em um banco relacional, NoSQL ou mesmo em um arquivo. Ele apenas interage com UserRepository.

3. Criando um Adapter (Implementação do Repositório para MongoDB)

Criamos um adaptador para o MongoDB, implementando a interface UserRepository:

class MongoUserRepository implements UserRepository {
  async create(user: User): Promise<User> {
    return await MongoDB.collection('users').insertOne(user);
  }

  async findByEmail(email: string): Promise<User | null> {
    return await MongoDB.collection('users').findOne({ email });
  }
}

Essa implementação pode ser substituída por outra (como um banco SQL) sem alterar o UserService.

4. Conectando Tudo na Aplicação

Criamos uma API Express para interagir com o UserService:

const userRepository = new MongoUserRepository();
const userService = new UserService(userRepository);

app.post('/register', async (req, res) => {
  try {
    const user = await userService.registerUser(req.body.email, req.body.name);
    res.status(201).json(user);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

Agora, nossa aplicação segue a Arquitetura Hexagonal, permitindo trocar de banco de dados facilmente, sem alterar a lógica de negócio.

✨ Benefícios da Arquitetura Hexagonal

🔄 Baixo acoplamento: O core da aplicação não depende de tecnologias específicas.

🔧 Fácil manutenção: Permite trocar partes da aplicação (como o banco de dados) sem alterar o core.

🔍 Maior testabilidade: Podemos testar a lógica de negócio isoladamente, substituindo adaptadores por mocks.

🚀 Flexibilidade: A mesma lógica de negócio pode ser utilizada em diferentes interfaces (API REST, CLI, UI, etc.).

💪 Conclusão

A Arquitetura Hexagonal é uma excelente abordagem para tornar aplicações mais modulares, organizadas e testáveis. Ela facilita a evolução do software, permitindo a troca de componentes sem impactar a lógica de negócio.

Se você trabalha com aplicações escaláveis e deseja evitar o alto acoplamento, considerar a Arquitetura Hexagonal pode ser um excelente caminho!

O que achou desse modelo arquitetural? Pretende utilizá-lo nos seus projetos? Deixe seu comentário! 🚀

Testando debounce e throttle no React com Jest [setTimeout]

Vitor Rios — Fri, 12 Sep 2025 10:31:57 +0000

Implementar debounce ou throttle no React é comum em buscas, inputs e eventos de scroll. Mas testar esse comportamento pode parecer desafiador à primeira vista — especialmente por envolver tempo, timers assíncronos e side effects.

Neste artigo, você vai aprender:

Diferença entre debounce e throttle
Como implementá-los no React
Como testá-los com Jest e @testing-library/react
Como usar jest.useFakeTimers() do jeito certo

🔍 O que é debounce e throttle?

🐢 `debounce`

Adia a execução até X ms após a última chamada.

🧠 Ideal para: buscas ao digitar, auto-saves, etc.

🐇 `throttle`

Executa no máximo uma vez a cada X ms, ignorando chamadas subsequentes.

🧠 Ideal para: scroll, resize, cliques rápidos, etc.

🧱 Implementando debounce no React

// SearchInput.tsx
import { useEffect, useState } from 'react';

type Props = {
  onSearch: (query: string) => void;
};

export function SearchInput({ onSearch }: Props) {
  const [value, setValue] = useState('');

  useEffect(() => {
    const timeout = setTimeout(() => {
      onSearch(value);
    }, 500);

    return () => clearTimeout(timeout);
  }, [value, onSearch]);

  return (
    <input
      placeholder="Search..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

🧪 Testando debounce com `jest.useFakeTimers()`

// SearchInput.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import { SearchInput } from './SearchInput';

jest.useFakeTimers();

test('calls onSearch after debounce delay', () => {
  const handleSearch = jest.fn();
  render(<SearchInput onSearch={handleSearch} />);

  const input = screen.getByPlaceholderText(/search/i);
  fireEvent.change(input, { target: { value: 'hello' } });

  // Ainda não chamou
  expect(handleSearch).not.toHaveBeenCalled();

  // Avança 500ms
  jest.advanceTimersByTime(500);

  expect(handleSearch).toHaveBeenCalledWith('hello');
});

⚡ Implementando throttle com lodash

// ThrottledButton.tsx
import { throttle } from 'lodash';
import { useCallback } from 'react';

export function ThrottledButton({ onClick }: { onClick: () => void }) {
  const throttled = useCallback(throttle(onClick, 1000), [onClick]);

  return <button onClick={throttled}>Click me fast!</button>;
}

🧪 Testando throttle com fake timers

// ThrottledButton.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import { ThrottledButton } from './ThrottledButton';

jest.useFakeTimers();

test('calls onClick only once in throttle window', () => {
  const handleClick = jest.fn();
  render(<ThrottledButton onClick={handleClick} />);

  const button = screen.getByText(/click me/i);
  fireEvent.click(button);
  fireEvent.click(button);
  fireEvent.click(button);

  expect(handleClick).toHaveBeenCalledTimes(1);

  jest.advanceTimersByTime(1000);
  fireEvent.click(button);

  expect(handleClick).toHaveBeenCalledTimes(2);
});

🧠 Dicas rápidas

Use jest.useFakeTimers() antes de renderizar o componente.
Sempre finalize com jest.useRealTimers() se for fazer outros testes depois.
Debounce pode ser testado com setTimeout; throttle exige lib como lodash ou lodash.throttle.

✅ Conclusão

Testar debounce e throttle é mais fácil do que parece quando você usa as ferramentas certas: fake timers + eventos simulados. Evite confiar apenas no comportamento visual — escrever testes sólidos é o que garante que seu input não dispare chamadas desnecessárias no futuro.

Testando Componentes com React Hook Form + Zod

Vitor Rios — Tue, 09 Sep 2025 10:08:51 +0000

A combinação entre React Hook Form (RHF) e Zod tem se tornado cada vez mais comum em projetos modernos. Ela proporciona uma forma simples, rápida e tipada de lidar com formulários e validações — mas como garantir que tudo isso está funcionando corretamente?

Neste artigo, vamos aprender como testar formulários que usam RHF + Zod, cobrindo:

Validação de campos
Submissão bem-sucedida
Mensagens de erro
Testes automatizados com Jest + Testing Library

🎯 O que vamos testar?

Vamos usar como base um formulário simples de login:

// LoginForm.tsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

type FormData = z.infer<typeof schema>;

export function LoginForm({ onSubmit }: { onSubmit: (data: FormData) => void }) {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input placeholder="Email" {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}

      <input type="password" placeholder="Password" {...register('password')} />
      {errors.password && <span>{errors.password.message}</span>}

      <button type="submit">Login</button>
    </form>
  );
}

🧪 Testes com `@testing-library/react`

Agora, vamos aos testes:

// LoginForm.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import { LoginForm } from './LoginForm';

describe('LoginForm', () => {
  it('shows validation errors when submitting empty form', async () => {
    const handleSubmit = jest.fn();
    render(<LoginForm onSubmit={handleSubmit} />);

    fireEvent.click(screen.getByRole('button', { name: /login/i }));

    expect(await screen.findByText(/invalid email/i)).toBeInTheDocument();
    expect(await screen.findByText(/at least 6 characters/i)).toBeInTheDocument();
    expect(handleSubmit).not.toHaveBeenCalled();
  });

  it('submits successfully with valid data', async () => {
    const handleSubmit = jest.fn();
    render(<LoginForm onSubmit={handleSubmit} />);

    fireEvent.input(screen.getByPlaceholderText(/email/i), {
      target: { value: 'test@example.com' },
    });
    fireEvent.input(screen.getByPlaceholderText(/password/i), {
      target: { value: '123456' },
    });

    fireEvent.click(screen.getByRole('button', { name: /login/i }));

    await screen.findByRole('button'); // espera render do submit
    expect(handleSubmit).toHaveBeenCalledWith({
      email: 'test@example.com',
      password: '123456',
    });
  });
});

✅ O que estamos validando aqui?

Que os erros de validação aparecem corretamente ao submeter o formulário vazio
Que a função onSubmit só é chamada quando os dados são válidos
Que o componente está de fato validando com base no schema Zod

🧠 Dicas extras

Para campos dinâmicos (como arrays ou steps), use useFieldArray + testes com múltiplos steps.
Utilize renderWithProviders() se seu formulário estiver dentro de Providers como Theme ou QueryClient.
Teste os campos com screen.getByPlaceholderText, getByLabelText, ou getByRole, e evite getByTestId a menos que não tenha alternativa.

🏁 Conclusão

Testar formulários com React Hook Form e Zod é simples quando você entende como os erros e validações são exibidos. Usar @testing-library/react junto com mocks como jest.fn() torna tudo mais previsível e confiável — e ainda te protege contra regressões no futuro.

Aposte nesse combo em seus projetos e garanta que os formulários estejam funcionando como esperado.

Mockando Endpoints com MSW em Testes com Jest e React Query

Vitor Rios — Fri, 05 Sep 2025 09:33:51 +0000

Quando usamos React Query em nossos projetos, temos uma série de funcionalidades poderosas ao nosso dispor: cache, refetch automático, invalidações, estados de carregamento e erro, etc. Mas tudo isso pode ser facilmente comprometido se mockarmos diretamente o useQuery nos testes.

Neste artigo, vamos ver como usar o MSW (Mock Service Worker) para simular endpoints reais nos testes, preservando toda a inteligência do React Query — e evitando mocks frágeis e irreais.

🚫 O que NÃO fazer: mockar o `useQuery` diretamente

jest.mock('@tanstack/react-query', () => ({
  useQuery: () => ({ data: [{ id: 1, name: 'Test' }], isLoading: false }),
}));

Esse tipo de mock “quebra” toda a mágica do React Query:

❌ Não testa cache, nem invalidation
❌ Não simula estados reais como loading/error
❌ Cria um acoplamento forte e frágil entre seu componente e o teste

✅ O que fazer: usar MSW para simular o endpoint real

Com MSW, você intercepta requisições reais (fetch/axios) e devolve respostas mockadas — sem perder a lógica de cache, revalidação e fallback do React Query.

📦 Setup do MSW no projeto

1. Instale a lib

npm install msw --save-dev

2. Crie seus handlers

// src/mocks/handlers.ts
import { rest } from 'msw';

export const handlers = [
  rest.get('/api/users', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([{ id: 1, name: 'Rayza' }, { id: 2, name: 'Vitor' }])
    );
  }),
];

3. Configure o servidor para testes

// src/mocks/server.ts
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

4. Integre com Jest

// src/setupTests.ts
import '@testing-library/jest-dom';
import { server } from './mocks/server';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

E adicione no jest.config.ts:

setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],

🧪 Exemplo prático: testando listagem de usuários

Componente

// UserList.tsx
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

export function UserList() {
  const { data, isLoading, error } = useQuery(['users'], async () => {
    const res = await axios.get('/api/users');
    return res.data;
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return (
    <ul>
      {data.map((user: any) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Teste com MSW

// UserList.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { UserList } from './UserList';

const queryClient = new QueryClient();

function renderWithClient(ui: React.ReactElement) {
  return render(
    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
  );
}

test('renders user list from mocked endpoint', async () => {
  renderWithClient(<UserList />);

  expect(screen.getByText(/loading/i)).toBeInTheDocument();

  await waitFor(() => {
    expect(screen.getByText('Rayza')).toBeInTheDocument();
    expect(screen.getByText('Vitor')).toBeInTheDocument();
  });
});

✅ Por que usar MSW?

Vantagens práticas:

✅ Você testa a integração real com a API (mesmo que fake)
✅ O React Query funciona de verdade: cache, refetch, status
✅ Você cobre casos de sucesso, erro, loading e até delay com ctx.delay()
✅ Mocks mais fáceis de manter e reutilizar em testes E2E (Playwright/Cypress)

✨ Conclusão

Evitar mocks diretos de useQuery é uma boa prática quando usamos React Query. Com o MSW, conseguimos simular uma API realista e manter todo o comportamento que faz do React Query uma ferramenta tão poderosa.

Mockar o endpoint, não o hook. Isso garante testes mais próximos da realidade, mais confiáveis e fáceis de evoluir.

Simplificando Testes com it.each no Jest

Vitor Rios — Wed, 30 Jul 2025 09:13:08 +0000

Escrever testes automatizados é essencial para garantir a qualidade e a estabilidade das aplicações modernas. Muitas vezes, no entanto, acabamos repetindo o mesmo bloco de código com variações mínimas nos dados de entrada. É aí que entra o it.each do Jest — um recurso que permite escrever testes parametrizados de forma clara, enxuta e poderosa.

Neste artigo, vamos explorar como usar it.each na prática, com exemplos que você pode aplicar no seu dia a dia como desenvolvedor(a).

✅ O que é `it.each`?

it.each (ou test.each) permite executar o mesmo teste com diferentes entradas. Em vez de duplicar vários blocos de it(...), você pode passar uma matriz de valores e o Jest vai rodar o teste para cada conjunto.

🚀 Exemplo básico: verificação de números positivos

it.each([1, 2, 3])('should be greater than zero: %i', (num) => {
  expect(num).toBeGreaterThan(0);
});

Neste exemplo simples, estamos garantindo que todos os números fornecidos são maiores que zero.

🛠 Exemplo real: soma de valores

Imagine que você tem uma função de soma simples e quer garantir que ela funcione corretamente para diferentes entradas:

function sum(a: number, b: number): number {
  return a + b;
}

it.each([
  [1, 2, 3],
  [2, 2, 4],
  [10, -5, 5],
])('should return %i + %i = %i', (a, b, expected) => {
  expect(sum(a, b)).toBe(expected);
});

📦 Exemplo com objetos: validação de entrada

Digamos que você tem uma função que valida se uma string não está vazia:

function isValidString(input: string): boolean {
  return input.trim().length > 0;
}

it.each([
  { input: 'Hello', expected: true },
  { input: ' ', expected: false },
  { input: '', expected: false },
])('should validate string "%s"', ({ input, expected }) => {
  expect(isValidString(input)).toBe(expected);
});

🏷 Exemplo com componente `Badge` e variações de cor

Imagine que você tem um componente Badge que aceita uma prop color com diferentes valores como "primary", "secondary", "success", etc.

// Badge.tsx
type BadgeProps = {
  color: 'primary' | 'secondary' | 'success' | 'danger';
  children: React.ReactNode;
};

export function Badge({ color, children }: BadgeProps) {
  return <span className={`badge badge-${color}`}>{children}</span>;
}

Agora você quer garantir que o componente renderiza corretamente para todas as cores permitidas:

import { render, screen } from '@testing-library/react';
import { Badge } from './Badge';

it.each([
  'primary',
  'secondary',
  'success',
  'danger',
] as const)('renders Badge with color "%s"', (color) => {
  render(<Badge color={color}>Test</Badge>);
  const badge = screen.getByText('Test');

  expect(badge).toBeInTheDocument();
  expect(badge).toHaveClass(`badge-${color}`);
});

🧠 Dica extra

Se você estiver usando uma lista central de cores no seu design system (como um array exportado), pode até importar essa lista para garantir que os testes sempre acompanhem as novas variações:

// badgeColors.ts
export const badgeColors = ['primary', 'secondary', 'success', 'danger'] as const;

import { badgeColors } from './badgeColors';

it.each(badgeColors)('renders Badge with color "%s"', (color) => {
  render(<Badge color={color}>Test</Badge>);
  expect(screen.getByText('Test')).toHaveClass(`badge-${color}`);
});

✨ Conclusão

O uso de it.each é uma forma poderosa e elegante de reduzir a duplicação e deixar seus testes mais legíveis. Ao parametrizar entradas, você cobre mais casos com menos código — o que é sempre uma vitória!

Se você ainda não usava esse recurso, recomendo começar com testes simples e, aos poucos, aplicar nos fluxos reais da sua aplicação.

Como Configurar Múltiplas Contas do GitHub em um Único Computador

Vitor Rios — Wed, 26 Feb 2025 13:04:43 +0000

Se você trabalha com mais de uma conta do GitHub, seja uma pessoal e outra corporativa, pode enfrentar problemas ao alternar entre elas no mesmo computador. Neste artigo, vamos configurar um ambiente onde você pode usar duas ou mais contas do GitHub sem conflitos.

1. Gerando Chaves SSH para Cada Conta

O GitHub usa chaves SSH para autenticação, então precisamos gerar uma chave para cada conta.

Passo 1: Criar as chaves SSH

Abra o terminal e execute os seguintes comandos:

ssh-keygen -t ed25519 -C "seu-email-pessoal@gmail.com" -f ~/.ssh/id_github_pessoal
ssh-keygen -t ed25519 -C "seu-email-trabalho@empresa.com" -f ~/.ssh/id_github_trabalho

Isso criará duas chaves privadas e públicas em ~/.ssh/:

id_github_pessoal e id_github_pessoal.pub
id_github_trabalho e id_github_trabalho.pub

Passo 2: Adicionar as chaves SSH ao agente SSH

Carregue as chaves para o ssh-agent:

ssh-add ~/.ssh/id_github_pessoal
ssh-add ~/.ssh/id_github_trabalho

Se o ssh-agent não estiver rodando, inicie-o:

eval "$(ssh-agent -s)"

Passo 3: Adicionar as chaves ao GitHub

Agora, você precisa adicionar as chaves SSH geradas em cada conta do GitHub.

Execute:

   cat ~/.ssh/id_github_pessoal.pub

Copie a chave e adicione-a na sua conta pessoal em GitHub > Settings > SSH and GPG keys.
Repita o processo para id_github_trabalho.pub na conta corporativa.

2. Configurando o Arquivo SSH para Gerenciar Múltiplas Contas

Para que o Git saiba qual chave usar para cada conta, editamos o arquivo ~/.ssh/config:

nano ~/.ssh/config

Adicione as seguintes configurações:

Host github.com-pessoal
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_github_pessoal
    IdentitiesOnly yes

Host github.com-trabalho
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_github_trabalho
    IdentitiesOnly yes

Agora, quando você clonar ou acessar repositórios, pode usar:

Para a conta pessoal: git@github.com-pessoal:usuario/repo.git
Para a conta do trabalho: git@github.com-trabalho:empresa/repo.git

3. Configurando o Git para Cada Conta

Agora, precisamos configurar o Git para usar o e-mail correto dependendo do repositório.

Opção 1: Configuração Local por Repositório

Vá até um repositório pessoal e defina o e-mail correto:

cd ~/meus-repositorios-pessoais/repo

git config user.email "seu-email-pessoal@gmail.com"
git config user.name "Seu Nome"

Agora, vá até um repositório corporativo e defina o e-mail da empresa:

cd ~/projetos-da-empresa/repo

git config user.email "seu-email-trabalho@empresa.com"
git config user.name "Seu Nome"

Opção 2: Configuração Global Automática

Se você quer que o Git alterne automaticamente dependendo do diretório, edite o arquivo global de configuração:

nano ~/.gitconfig

Adicione as configurações abaixo:

[includeIf "gitdir:~/meus-repositorios-pessoais/*"]
    path = ~/.gitconfig-pessoal

[includeIf "gitdir:~/projetos-da-empresa/*"]
    path = ~/.gitconfig-trabalho

Agora, crie os arquivos de configuração individuais:

nano ~/.gitconfig-pessoal

Adicione:

[user]
    email = seu-email-pessoal@gmail.com
    name = Seu Nome

Depois, para a conta corporativa:

nano ~/.gitconfig-trabalho

Adicione:

[user]
    email = seu-email-trabalho@empresa.com
    name = Seu Nome

Agora, qualquer repositório clonado dentro de ~/meus-repositorios-pessoais/ usará a conta pessoal, e qualquer repositório dentro de ~/projetos-da-empresa/ usará a conta corporativa automaticamente! 🚀

4. Como Clonar Repositórios com a Conta Correta

Ao clonar um repositório, sempre use o host SSH correto, por exemplo:

git clone git@github.com-pessoal:usuario/repo.git ~/meus-repositorios-pessoais/repo

Ou para a conta corporativa:

git clone git@github.com-trabalho:empresa/repo.git ~/projetos-da-empresa/repo

Se já clonou o repositório e quer corrigir a URL do origin, rode:

git remote set-url origin git@github.com-trabalho:empresa/repo.git

Conclusão

Com essas configurações, você pode trabalhar com múltiplas contas do GitHub sem precisar ficar alternando credenciais manualmente. Agora, cada repositório usará automaticamente a conta correta, garantindo um fluxo de trabalho mais produtivo e organizado. 🚀

Se tiver alguma dúvida, deixe um comentário! 😉

Mockando Constantes em Testes com Jest: Um Exemplo Prático

Vitor Rios — Fri, 10 Jan 2025 18:38:36 +0000

Ao trabalhar com constantes em seus projetos, às vezes é necessário alterar seus valores para testar diferentes cenários. Porém, constantes importadas diretamente não podem ser sobrescritas facilmente, o que pode dificultar a criação de testes. Neste artigo, veremos como usar o Jest para mockar constantes de forma dinâmica, garantindo testes isolados e confiáveis.

Vamos criar um exemplo fictício chamado adjustImageQuality, onde ajustamos a qualidade de uma imagem dependendo se estamos em um ambiente de produção.

Implementação

Arquivo `constants.js`

Definimos uma constante chamada IS_PRODUCTION que indica se estamos em um ambiente de produção:

// constants.js
export const IS_PRODUCTION = false;

Arquivo `adjustImageQuality.js`

Agora, criamos a função adjustImageQuality. Ela altera a qualidade da imagem apenas se o sistema estiver em produção:

// adjustImageQuality.js
import { IS_PRODUCTION } from "./constants";

export default function adjustImageQuality(img) {
  if (IS_PRODUCTION) {
    img.quality = 100; // Qualidade máxima em produção
  } else {
    img.quality = 50; // Qualidade reduzida em desenvolvimento
  }

  return img;
}

Escrevendo os Testes

Queremos testar o comportamento de adjustImageQuality para os dois cenários: produção (IS_PRODUCTION = true) e desenvolvimento (IS_PRODUCTION = false).

Arquivo `adjustImageQuality.test.js`

Utilizamos o Jest para mockar o valor de IS_PRODUCTION dinamicamente. O segredo é usar jest.mock e sobrescrever a constante com um getter personalizado.

// adjustImageQuality.test.js
import adjustImageQuality from "./adjustImageQuality";

// Mock para a constante IS_PRODUCTION
const mockIsProduction = jest.fn();

jest.mock("./constants", () => {
  const constants = jest.requireActual("./constants");
  return {
    ...constants,
    get IS_PRODUCTION() {
      return mockIsProduction();
    },
  };
});

beforeEach(() => {
  mockIsProduction.mockClear(); // Limpa os mocks antes de cada teste
});

test("sets image quality to 100 in production", () => {
  // Configura o mock para retornar true (produção)
  mockIsProduction.mockReturnValue(true);

  const img = { quality: 0 };

  const result = adjustImageQuality(img);

  expect(result.quality).toEqual(100);
});

test("sets image quality to 50 in development", () => {
  // Configura o mock para retornar false (desenvolvimento)
  mockIsProduction.mockReturnValue(false);

  const img = { quality: 0 };

  const result = adjustImageQuality(img);

  expect(result.quality).toEqual(50);
});

Explicação do Mock

1. Criando o Mock

Utilizamos o jest.mock para interceptar o módulo constants. Dentro dele, usamos o jest.requireActual para obter as exportações reais e adicionamos um getter para a constante IS_PRODUCTION.

jest.mock("./constants", () => {
  const constants = jest.requireActual("./constants");
  return {
    ...constants,
    get IS_PRODUCTION() {
      return mockIsProduction();
    },
  };
});

2. Mockando o Valor de `IS_PRODUCTION`

Dentro de cada teste, usamos mockReturnValue para simular diferentes valores para IS_PRODUCTION:

mockIsProduction.mockReturnValue(true) para produção.
mockIsProduction.mockReturnValue(false) para desenvolvimento.

3. Limpeza com `mockClear`

Antes de cada teste, limpamos o estado do mock para garantir que ele não interfira nos outros testes:

beforeEach(() => {
  mockIsProduction.mockClear();
});

Conclusão

Este padrão de mock para constantes permite que você controle dinamicamente valores usados na lógica de sua aplicação, garantindo testes isolados e confiáveis. Ele é especialmente útil quando você precisa testar comportamentos baseados em variáveis globais, configurações ou estados do sistema.

Com essa abordagem, você consegue cobrir cenários complexos sem comprometer a estrutura do seu código ou adicionar dependências externas desnecessárias.

O que é uma Aplicação White Label?

Vitor Rios — Fri, 09 Aug 2024 12:09:31 +0000

Uma aplicação "white label" é um produto ou serviço que é produzido por uma empresa (o fabricante) e depois rebatizado e vendido por outras empresas (os revendedores) como se fosse um produto próprio. Em outras palavras, uma aplicação white label é desenvolvida para ser personalizada e rebatizada para diferentes clientes ou marcas.

Características das Aplicações White Label

Personalização: Os revendedores podem customizar a aparência e a funcionalidade da aplicação para que ela pareça ser um produto exclusivo deles. Isso geralmente envolve a alteração de logotipos, cores, textos e, em alguns casos, funcionalidades específicas.
Economia de Tempo e Custos: Em vez de desenvolver um produto do zero, as empresas podem adquirir uma aplicação white label e rebatizá-la, economizando tempo e recursos significativos.
Manutenção e Atualizações: A manutenção, as atualizações e as melhorias contínuas da aplicação são normalmente realizadas pelo fabricante original, enquanto o revendedor cuida da distribuição e do suporte ao cliente final.
Flexibilidade: As aplicações white label são projetadas para serem flexíveis e escaláveis, permitindo que os revendedores adaptem o produto às necessidades específicas de seus mercados e clientes.

Exemplos de Aplicações White Label

Plataformas de e-commerce: Empresas como Shopify oferecem plataformas que podem ser personalizadas por revendedores para criar suas próprias lojas online.
Serviços de software como serviço (SaaS): Ferramentas como CRMs, sistemas de gerenciamento de projetos ou softwares de marketing por e-mail podem ser vendidas como soluções white label.
Aplicativos móveis: Aplicativos para serviços de entrega, fitness, viagens, etc., podem ser desenvolvidos como white label, permitindo que diferentes empresas os personalizem para suas marcas.
Sites de reserva de hotéis e viagens: Agências de viagens podem utilizar plataformas white label para oferecer serviços de reserva de hotéis, voos e pacotes de viagem sob sua própria marca.

Benefícios das Aplicações White Label

Rapidez de Mercado: Empresas podem lançar novos produtos rapidamente sem a necessidade de desenvolvimento do zero.
Redução de Riscos: Utilizar uma solução já desenvolvida e testada pode reduzir os riscos associados a bugs e falhas.
Foco no Negócio Principal: Permite que empresas foquem em suas competências principais, como marketing e vendas, deixando o desenvolvimento para o fornecedor da solução white label.
Escalabilidade: Facilidade de expandir os serviços conforme o negócio cresce, aproveitando as melhorias e atualizações contínuas do fabricante original.

Desvantagens das Aplicações White Label

Limitações de Personalização: Algumas soluções white label podem ter limitações em termos de personalização profunda.
Dependência do Fabricante: Empresas dependem do fabricante para manutenção e atualizações, o que pode ser um risco se o fabricante tiver problemas.
Diferença de Competição: Se muitas empresas utilizam a mesma solução white label, pode ser difícil se diferenciar dos concorrentes.

Conclusão

Uma aplicação white label é uma solução eficiente para empresas que desejam oferecer produtos e serviços sob sua própria marca sem a necessidade de desenvolver software do zero. Isso permite uma entrada mais rápida no mercado e um foco maior nas estratégias de negócio. Adotar uma abordagem white label pode ser um grande diferencial competitivo, economizando tempo e recursos, além de facilitar a integração de novos colaboradores e a reutilização de componentes já existentes.

Padrões de Projeto em React [HOCs, Render Props, Hooks]

Vitor Rios — Mon, 05 Aug 2024 15:49:05 +0000

Introdução

Os padrões de projeto são soluções comprovadas para problemas comuns no desenvolvimento de software. Em React, a aplicação desses padrões pode tornar seu código mais modular, reutilizável e fácil de manter. Neste artigo, exploraremos alguns dos padrões de projeto mais comuns e úteis em React: Higher Order Components (HOCs), Render Props e Hooks.

1. Higher Order Components (HOCs)

Higher Order Components (HOCs) são funções que recebem um componente e retornam um novo componente com funcionalidades adicionais. Eles são frequentemente usados para adicionar lógica comum a múltiplos componentes.

Exemplo de HOC

Vamos criar um HOC simples que adiciona funcionalidades de log ao clicar em um botão:

import React from 'react';

// Higher Order Component
const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    handleClick = () => {
      console.log('Button clicked!');
    };

    render() {
      return <WrappedComponent onClick={this.handleClick} {...this.props} />;
    }
  };
};

// Componente Original
const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

// Componente Envolvido com HOC
const ButtonWithLogger = withLogger(Button);

export default ButtonWithLogger;

2. Render Props

Render Props é uma técnica que permite compartilhar lógica entre componentes usando uma prop cujo valor é uma função. Essa função recebe os dados necessários para renderizar o conteúdo.

Exemplo de Render Props

Vamos criar um componente que gerencia o estado de visibilidade e fornece essa lógica através de render props:

import React, { useState } from 'react';

// Componente de Render Props
const Toggle = ({ children }) => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => setIsVisible(!isVisible);

  return children({ isVisible, toggleVisibility });
};

// Componente que utiliza Render Props
const App = () => (
  <Toggle>
    {({ isVisible, toggleVisibility }) => (
      <div>
        <button onClick={toggleVisibility}>Toggle</button>
        {isVisible && <p>Content is visible</p>}
      </div>
    )}
  </Toggle>
);

export default App;

3. Hooks

Hooks são uma adição recente ao React que permitem usar estado e outras funcionalidades do React sem escrever uma classe. Eles são uma alternativa poderosa e flexível aos HOCs e Render Props.

Exemplo de Hook Personalizado

Vamos criar um hook personalizado para gerenciar o estado de visibilidade:

import { useState } from 'react';

// Hook Personalizado
const useToggle = (initialState = false) => {
  const [isVisible, setIsVisible] = useState(initialState);

  const toggleVisibility = () => setIsVisible(!isVisible);

  return [isVisible, toggleVisibility];
};

// Componente que utiliza o Hook
const App = () => {
  const [isVisible, toggleVisibility] = useToggle();

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle</button>
      {isVisible && <p>Content is visible</p>}
    </div>
  );
};

export default App;

Comparação entre HOCs, Render Props e Hooks

Higher Order Components (HOCs):
- Quando usar: Adicionar comportamento a vários componentes sem modificar seu código.
- Benefícios: Reutilização de lógica, separação de preocupações.
- Desvantagens: Podem levar ao aninhamento excessivo de componentes (wrapper hell).
Render Props:
- Quando usar: Compartilhar lógica complexa entre componentes.
- Benefícios: Flexibilidade na composição de componentes.
- Desvantagens: Pode levar a código mais verboso e menos legível.
Hooks:
- Quando usar: Gerenciar estado e efeitos colaterais em componentes funcionais.
- Benefícios: Simplicidade, concisão, facilidade de composição.
- Desvantagens: Requer familiaridade com a API de Hooks.

Conclusão

Cada padrão de projeto em React tem seus próprios casos de uso e benefícios. Os Higher Order Components (HOCs) são úteis para adicionar comportamento comum a vários componentes, enquanto os Render Props permitem compartilhar lógica complexa de maneira flexível. Os Hooks, por sua vez, proporcionam uma maneira simples e poderosa de gerenciar estado e efeitos colaterais em componentes funcionais. Escolher o padrão certo depende das necessidades específicas do seu projeto e das preferências da sua equipe.

Implementar esses padrões de projeto em suas aplicações React pode tornar seu código mais modular, reutilizável e fácil de manter, resultando em uma base de código mais robusta e escalável.

Espero que este artigo tenha sido útil para você. Se tiver alguma dúvida ou sugestão, sinta-se à vontade para comentar!

Gerenciamento de Formulários Complexos em React com React Hook Form

Vitor Rios — Fri, 02 Aug 2024 03:47:32 +0000

Introdução

Gerenciar formulários em aplicações React pode ser uma tarefa desafiadora, especialmente quando se trata de formulários complexos. O React Hook Form é uma biblioteca que simplifica a manipulação de formulários, oferecendo uma API fácil de usar, com suporte a validação, integração com outras bibliotecas e excelente performance. Neste artigo, vamos explorar como utilizar o React Hook Form para gerenciar formulários complexos de maneira eficaz.

Benefícios do React Hook Form

Performance: Minimiza a quantidade de renderizações desnecessárias.
API Simples: Fácil de aprender e usar, com uma API baseada em hooks.
Validação Integrada: Suporte integrado para validação de formulários.
Compatibilidade: Integra-se facilmente com outras bibliotecas de UI e validação.

Instalação

Para começar, você precisa instalar o React Hook Form em seu projeto:

npm install react-hook-form

Criando um Formulário Simples

Vamos criar um formulário de exemplo para demonstrar os conceitos básicos do React Hook Form.

import React from 'react';
import { useForm } from 'react-hook-form';

const SimpleForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" {...register('name', { required: 'Name is required' })} />
        {errors.name && <p>{errors.name.message}</p>}
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" type="email" {...register('email', { required: 'Email is required' })} />
        {errors.email && <p>{errors.email.message}</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default SimpleForm;

Explicação do Código

useForm: Hook principal que retorna métodos e objetos para gerenciar o formulário.
register: Método para registrar campos de entrada no formulário.
handleSubmit: Função que lida com a submissão do formulário.
formState.errors: Objeto que contém os erros de validação.

Formulário Complexo com Vários Campos

Agora, vamos criar um formulário mais complexo, com múltiplos campos e validação.

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import Select from 'react-select';

const ComplexForm = () => {
  const { register, handleSubmit, control, formState: { errors } } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input id="firstName" {...register('firstName', { required: 'First Name is required' })} />
        {errors.firstName && <p>{errors.firstName.message}</p>}
      </div>

      <div>
        <label htmlFor="lastName">Last Name</label>
        <input id="lastName" {...register('lastName', { required: 'Last Name is required' })} />
        {errors.lastName && <p>{errors.lastName.message}</p>}
      </div>

      <div>
        <label htmlFor="age">Age</label>
        <input id="age" type="number" {...register('age', { min: { value: 18, message: 'You must be at least 18 years old' } })} />
        {errors.age && <p>{errors.age.message}</p>}
      </div>

      <div>
        <label htmlFor="gender">Gender</label>
        <Controller
          name="gender"
          control={control}
          render={({ field }) => (
            <Select
              {...field}
              options={[
                { value: 'male', label: 'Male' },
                { value: 'female', label: 'Female' },
                { value: 'other', label: 'Other' }
              ]}
            />
          )}
        />
      </div>

      <button type="submit">Submit</button>
    </form>
  );
};

export default ComplexForm;

Explicação do Código

Controller: Componente que permite integrar campos de entrada controlados, como react-select.
control: Objeto retornado pelo useForm que é usado pelo Controller para gerenciar os campos controlados.

Validação com Yup

O React Hook Form se integra facilmente com bibliotecas de validação como o Yup. Vamos adicionar validação com Yup ao nosso formulário.

Instalação do Yup

npm install yup @hookform/resolvers

Implementação

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import Select from 'react-select';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object().shape({
  firstName: yup.string().required('First Name is required'),
  lastName: yup.string().required('Last Name is required'),
  age: yup.number().min(18, 'You must be at least 18 years old').required('Age is required'),
  gender: yup.string().required('Gender is required'),
});

const FormWithYupValidation = () => {
  const { register, handleSubmit, control, formState: { errors } } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input id="firstName" {...register('firstName')} />
        {errors.firstName && <p>{errors.firstName.message}</p>}
      </div>

      <div>
        <label htmlFor="lastName">Last Name</label>
        <input id="lastName" {...register('lastName')} />
        {errors.lastName && <p>{errors.lastName.message}</p>}
      </div>

      <div>
        <label htmlFor="age">Age</label>
        <input id="age" type="number" {...register('age')} />
        {errors.age && <p>{errors.age.message}</p>}
      </div>

      <div>
        <label htmlFor="gender">Gender</label>
        <Controller
          name="gender"
          control={control}
          render={({ field }) => (
            <Select
              {...field}
              options={[
                { value: 'male', label: 'Male' },
                { value: 'female', label: 'Female' },
                { value: 'other', label: 'Other' }
              ]}
            />
          )}
        />
        {errors.gender && <p>{errors.gender.message}</p>}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
};

export default FormWithYupValidation;

Explicação do Código

yupResolver: Função que permite integrar Yup com React Hook Form.
schema: Esquema de validação definido com Yup.
useForm: Configurado com yupResolver para usar o esquema de validação.

Conclusão

Gerenciar formulários complexos em React pode ser simplificado com o uso do React Hook Form. Com sua API fácil de usar, suporte para validação integrada e excelente performance, React Hook Form é uma ferramenta poderosa para desenvolvedores. Ao integrar com outras bibliotecas como react-select e Yup, você pode criar formulários robustos e altamente funcionais.

Implementar React Hook Form em suas aplicações React pode transformar a maneira como você gerencia formulários, tornando o desenvolvimento mais eficiente e dinâmico.

Acessibilidade em Aplicações React

Vitor Rios — Mon, 22 Jul 2024 18:01:44 +0000

Introdução

Acessibilidade é um aspecto crucial no desenvolvimento de aplicações web, garantindo que todos os usuários, incluindo aqueles com deficiências, possam acessar e interagir com o conteúdo. Em aplicações React, é fundamental adotar práticas que promovam a acessibilidade desde o início do desenvolvimento. Neste artigo, exploraremos como tornar suas aplicações React mais acessíveis utilizando práticas recomendadas e ferramentas disponíveis.

Importância da Acessibilidade

Inclusão: Garante que todas as pessoas, independentemente de suas habilidades, possam usar a aplicação.
Conformidade Legal: Ajuda a cumprir normas e regulamentações, como a WCAG (Web Content Accessibility Guidelines) e o ADA (Americans with Disabilities Act).
Melhoria da UX: Uma aplicação acessível geralmente proporciona uma melhor experiência de usuário para todos.

Práticas Recomendadas para Acessibilidade em React

1. Utilizando Semântica HTML Apropriada

O uso correto de elementos HTML semânticos é a base para a acessibilidade. Elementos como <header>, <main>, <nav>, <section>, e <footer> ajudam a estruturar o conteúdo de forma lógica.

Exemplo:

const App = () => (
  <div>
    <header>
      <h1>Minha Aplicação Acessível</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">Sobre</a></li>
        <li><a href="#contact">Contato</a></li>
      </ul>
    </nav>
    <main>
      <section id="home">
        <h2>Home</h2>
        <p>Bem-vindo à nossa aplicação.</p>
      </section>
      <section id="about">
        <h2>Sobre</h2>
        <p>Informações sobre a aplicação.</p>
      </section>
      <section id="contact">
        <h2>Contato</h2>
        <p>Como nos contatar.</p>
      </section>
    </main>
    <footer>
      <p>&copy; 2023 Minha Aplicação</p>
    </footer>
  </div>
);

2. Uso de Atributos ARIA

Os atributos ARIA (Accessible Rich Internet Applications) fornecem informações adicionais ao leitor de tela sobre a funcionalidade dos elementos.

Exemplo:

const Modal = ({ isOpen, onClose, children }) => (
  isOpen ? (
    <div role="dialog" aria-modal="true" aria-labelledby="modal-title">
      <div>
        <h2 id="modal-title">Título do Modal</h2>
        {children}
        <button onClick={onClose} aria-label="Fechar Modal">Fechar</button>
      </div>
    </div>
  ) : null
);

3. Gerenciamento do Foco

Gerenciar o foco do teclado é crucial para a navegação de usuários que dependem do teclado.

Exemplo:

import { useEffect, useRef } from 'react';

const Modal = ({ isOpen, onClose, children }) => {
  const closeButtonRef = useRef(null);

  useEffect(() => {
    if (isOpen) {
      closeButtonRef.current.focus();
    }
  }, [isOpen]);

  return (
    isOpen ? (
      <div role="dialog" aria-modal="true" aria-labelledby="modal-title">
        <div>
          <h2 id="modal-title">Título do Modal</h2>
          {children}
          <button ref={closeButtonRef} onClick={onClose} aria-label="Fechar Modal">Fechar</button>
        </div>
      </div>
    ) : null
  );
};

4. Fornecendo Alternativas de Texto

Imagens, ícones e outros elementos visuais devem sempre ter uma alternativa de texto para serem acessíveis aos leitores de tela.

Exemplo:

const Avatar = ({ src, alt }) => (
  <img src={src} alt={alt} />
);

// Uso
<Avatar src="avatar.jpg" alt="Foto do Perfil de João" />

5. Componentes de Formulário Acessíveis

Os componentes de formulário devem ser etiquetados corretamente para garantir que os leitores de tela possam anunciar corretamente seus propósitos.

Exemplo:

const LoginForm = () => (
  <form>
    <div>
      <label htmlFor="username">Nome de Usuário</label>
      <input type="text" id="username" name="username" />
    </div>
    <div>
      <label htmlFor="password">Senha</label>
      <input type="password" id="password" name="password" />
    </div>
    <button type="submit">Login</button>
  </form>
);

6. Testes de Acessibilidade

Utilize ferramentas de testes de acessibilidade para garantir que sua aplicação atenda às diretrizes de acessibilidade.

Ferramentas Populares:

axe: Uma biblioteca que pode ser integrada aos testes unitários e de integração.
Lighthouse: Uma ferramenta automatizada que verifica a acessibilidade entre outras métricas.
Wave: Uma extensão do navegador que ajuda a avaliar a acessibilidade das páginas.

Implementando Testes com `axe`

npm install @axe-core/react

Exemplo de Uso:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import axe from '@axe-core/react';

if (process.env.NODE_ENV !== 'production') {
  axe(React, ReactDOM, 1000);
}

ReactDOM.render(<App />, document.getElementById('root'));

Conclusão

Acessibilidade é um aspecto essencial no desenvolvimento de aplicações web. Utilizando práticas recomendadas como a semântica HTML, atributos ARIA, gerenciamento de foco, alternativas de texto, componentes de formulário acessíveis e ferramentas de teste de acessibilidade, você pode garantir que sua aplicação React seja acessível para todos os usuários.

Implementar acessibilidade em suas aplicações React é uma prática essencial que beneficia todos os usuários. Adote essas práticas em seu fluxo de trabalho e faça a diferença na vida dos usuários que dependem de tecnologias assistivas.

JavaScript Moderno: Recursos Avançados para Desenvolvedores

Vitor Rios — Fri, 19 Jul 2024 17:13:00 +0000

Introdução

JavaScript tem evoluído rapidamente nos últimos anos, introduzindo uma série de recursos avançados que permitem aos desenvolvedores escrever código mais limpo, eficiente e robusto. Este artigo explora alguns desses recursos modernos, incluindo async/await, proxies e generators, destacando como eles podem ser utilizados para melhorar significativamente o desenvolvimento de software.

Async/Await

O que são?

Async/await é uma sintaxe adicionada ao JavaScript com o ECMAScript 2017 para simplificar o trabalho com promessas, tornando o código assíncrono tão fácil de escrever e entender quanto o código síncrono.

Benefícios e Uso

Código mais legível: Elimina a necessidade de encadeamento de then e catch, que pode se tornar confuso.
Tratamento de erros simplificado: Permite o uso de blocos try/catch convencionais para erros em operações assíncronas.
Melhor controle de fluxo: Facilita a execução sequencial e paralela de operações assíncronas.

Exemplo de Código

async function getUserData(userId) {
  try {
    const userDetails = await fetch(`/api/users/${userId}`);
    const userPosts = await fetch(`/api/users/${userId}/posts`);
    const userData = {userDetails: await userDetails.json(), userPosts: await userPosts.json()};
    return userData;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

Proxies

O que são?

Proxies em JavaScript permitem criar um objeto que envolve outro objeto ou função e intercepta operações, como leituras de propriedades, atribuições, enumeração, e funções de chamada.

Benefícios e Uso

Manipulação e validação de dados: Proxies podem validar a entrada antes de passá-la para o objeto ou função alvo.
Encapsulamento: Oculta certas propriedades ou métodos do objeto alvo.
Notificações de mudança: Pode ser usado para monitorar mudanças em objetos.

Exemplo de Código

let validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('Age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('Age seems invalid');
      }
    }
    obj[prop] = value;
    return true;
  }
};

let person = new Proxy({}, validator);
person.age = 100; // Funciona
person.age = 'young'; // Lança erro

Generators

O que são?

Generators são funções que podem ser pausadas e retomadas, o que é muito útil para tarefas que envolvem gerenciamento de estado ou iteração.

Benefícios e Uso

Geração de valores sob demanda: Útil para sequências que não precisam ser armazenadas na memória.
Controle de fluxo assíncrono: Podem ser combinados com promises para gerenciar fluxos de operações assíncronas.
Operações complexas de iteração: Simplificam a implementação de iteradores customizados.

Exemplo de Código

function* idGenerator() {
  let id = 0;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

Conclusão

Os recursos modernos de JavaScript, como async/await, proxies e generators, oferecem aos desenvolvedores ferramentas poderosas para escrever código mais expressivo e eficiente. A habilidade de manipular operações assíncronas com facilidade, interagir com objetos de maneira controlada e gerenciar estados complexos sem recorrer a código externo e bibliotecas adicionais são apenas algumas das vantagens que esses recursos fornecem. À medida que JavaScript continua a evoluir, esperam-se ainda mais melhorias que ampliarão as capacidades dos desenvolvedores modernos.

DEV Community: Vitor Rios

Arquitetura Hexagonal: Exemplo com JS/TS

🔄 O Conceito da Arquitetura Hexagonal

Estrutura da Arquitetura Hexagonal

🛠️ Implementando uma Arquitetura Hexagonal em TypeScript

1. Criando a Port (Interface)

2. Criando o Core (Serviço de Negócio)

3. Criando um Adapter (Implementação do Repositório para MongoDB)

4. Conectando Tudo na Aplicação

✨ Benefícios da Arquitetura Hexagonal

💪 Conclusão

Testando debounce e throttle no React com Jest [setTimeout]

🔍 O que é debounce e throttle?

🐢 debounce

🐇 throttle

🧱 Implementando debounce no React

🧪 Testando debounce com jest.useFakeTimers()

⚡ Implementando throttle com lodash

🧪 Testando throttle com fake timers

🧠 Dicas rápidas

✅ Conclusão

Testando Componentes com React Hook Form + Zod

🎯 O que vamos testar?

🧪 Testes com @testing-library/react

✅ O que estamos validando aqui?

🧠 Dicas extras

🏁 Conclusão

Mockando Endpoints com MSW em Testes com Jest e React Query

🚫 O que NÃO fazer: mockar o useQuery diretamente

✅ O que fazer: usar MSW para simular o endpoint real

📦 Setup do MSW no projeto

1. Instale a lib

2. Crie seus handlers

3. Configure o servidor para testes

4. Integre com Jest

🧪 Exemplo prático: testando listagem de usuários

Componente

Teste com MSW

✅ Por que usar MSW?

Vantagens práticas:

✨ Conclusão

Simplificando Testes com it.each no Jest

✅ O que é it.each?

🚀 Exemplo básico: verificação de números positivos

🛠 Exemplo real: soma de valores

📦 Exemplo com objetos: validação de entrada

🏷 Exemplo com componente Badge e variações de cor

🧠 Dica extra

✨ Conclusão

Como Configurar Múltiplas Contas do GitHub em um Único Computador

1. Gerando Chaves SSH para Cada Conta

Passo 1: Criar as chaves SSH

Passo 2: Adicionar as chaves SSH ao agente SSH

Passo 3: Adicionar as chaves ao GitHub

2. Configurando o Arquivo SSH para Gerenciar Múltiplas Contas

3. Configurando o Git para Cada Conta

Opção 1: Configuração Local por Repositório

Opção 2: Configuração Global Automática

4. Como Clonar Repositórios com a Conta Correta

Conclusão

Mockando Constantes em Testes com Jest: Um Exemplo Prático

Implementação

Arquivo constants.js

Arquivo adjustImageQuality.js

Escrevendo os Testes

Arquivo adjustImageQuality.test.js

Explicação do Mock

1. Criando o Mock

2. Mockando o Valor de IS_PRODUCTION

3. Limpeza com mockClear

Conclusão

O que é uma Aplicação White Label?

Características das Aplicações White Label

Exemplos de Aplicações White Label

Benefícios das Aplicações White Label

Desvantagens das Aplicações White Label

Conclusão

Padrões de Projeto em React [HOCs, Render Props, Hooks]

Introdução

1. Higher Order Components (HOCs)

🐢 `debounce`

🐇 `throttle`

🧪 Testando debounce com `jest.useFakeTimers()`

🧪 Testes com `@testing-library/react`

🚫 O que NÃO fazer: mockar o `useQuery` diretamente

✅ O que é `it.each`?

🏷 Exemplo com componente `Badge` e variações de cor

Arquivo `constants.js`

Arquivo `adjustImageQuality.js`

Arquivo `adjustImageQuality.test.js`

2. Mockando o Valor de `IS_PRODUCTION`

3. Limpeza com `mockClear`

Implementando Testes com `axe`