Forem: Genilson fernandes

Trabalhando e otimizando testes com mocks de componentes

Genilson fernandes — Fri, 22 Mar 2024 03:59:53 +0000

Usar mock nos testes unitários é uma mão na roda quando se trata de otimizar os testes e até mesmo o desenvolvimento deles.

Como dito, quando falamos em mock, nada mais é do que criar uma implementação simbólica de uma função, hook, componente, seja como for. Esse será o ponto de partida. Claro que vale a pena verificar o que vale ou não a pena criar um mock, correto?

Primeiramente, vou ta explicando como funciona um mock de um componente, isso já vai valer para muita coisa, trago no próximo exemplo alguns métodos mais avançados, como mockImplementation, mockImplementationOnce.

Vamos lá, no react as vezes trabalhamos com muito componentes e às vezes eles já foram testado. Então, fica redundante durante um teste a gente tá chamando ele novamente, isso vai acontece muito se você usa composition pattern.

Exemplo:

import MenuButton from '../ui/MenuButton';

// ... Componente que usa o MenuButton

Aqui estamos importando esse MenuButton no menu, e sem seguida iremos testar no caso atual. Esse meu menu tem sua implantação interna e como agora iremos testar somente a ação de está sendo renderizado com as props recebidas, vamos mocar a importação do componente MenuButton.

vi.mock('MenuButton', () => ({
  MenuButton: () => <div data-testid="menuButton">menuButton</div>
}));

describe('Menu render', () => {
// ... teste

Assim fica o mock desse componente, veja que no primeiro argumento passamos o path e o segundo o que iria retornar, no caso, uma função que retorna um jsx. Então, agora na hora que o teste estiver sendo executado na DOM o que vai aparecer sera no Mock.


// SEM MOCK
 ✓ src/components/Menu/Menu.test.tsx (1)
   ✓ Menu render (1)
     ✓ should render correctly

 Test Files  1 passed (1)
      Tests  1 passed (1
   Duration  725ms

// COM MOCK

 ✓ src/components/Menu/Menu.test.tsx (1)
   ✓ Menu render (1)
     ✓ should render correctly

 Test Files  1 passed (1)
      Tests  1 passed (1)
    Duration  523ms

Como pode ver, um componente relativamente simples mas com um mock tivemos um ganho de tempo e performance

e isso, por hoje.

Como testar hooks com vitest

Genilson fernandes — Fri, 15 Mar 2024 17:47:41 +0000

O uso de hooks no React é uma prática valiosa para abstrair partes do nosso código, seja para realizar chamadas a APIs, lidar com cálculos complexos ou outras tarefas. entre tanto os hooks sejam extremamente úteis, é importante garantir que funcionem corretamente, especialmente em um ambiente controlado onde podemos definir a entrada e controlar a saída.

Abaixo criei um hook super simples que gerencia um estado de uma lista, algo comum no dia a dia como deve, nesse exemplo, vou mostrar a implementação e como testar, e as partes que estão sendo testadas.

aqui o exemplo de uso

Esse aqui é o hook

import { useState } from 'react';

const useList = <T>(initialList: T[]) => {
  const [list, setList] = useState<T[]>(initialList);

  const onToggle = (id: T) => {
    if (list.includes(id)) {
      setList(list.filter((item) => item !== id));
    } else {
      setList([...list, id]);
    }
  };

  const onSelectAll = (ids: T[]) => {
    setList(ids);
  };

  const isSelected = (id: T) => {
    return list.includes(id);
  };

  const onClear = () => {
    setList([]);
  };

  return { list, onToggle, onSelectAll, onClear, isSelected };
};

export default useList;

Como pode ver, ele retorna uma lista de ids em um array, e tem os métodos para controlar a lista: onSelectAll, isSelected, onClear e list.

Assim fica a chamada do hook

const { 
list,
onSelectAll,
onClear,
onToggle } = useList<number>([1, 2]);

Mas vamos os testes….

Primeiro de tudo, não vou ensinar como configura o ambiente de teste, não é difícil de fazer, com o vitest é quase automático.

Detalhes, antes de começar, o testing-library oferece dois métodos para gente testar hooks: act, renderHook, sendo o ACT, para lidar com atualizações de estado que causa efeito colaterais e o renderHook, como nome já diz, ele renderizar nosso hook em diferentes situações

it('should initialize with provided initial list', () => {
    const initialList = [1, 2, 3];
    const { result } = renderHook(() => useList<number>(initialList));
    expect(result.current.list).toEqual(initialList);
  });

  it('should toggle items in the list', () => {
    const { result } = renderHook(() => useList<number>([1, 2, 3]));
    act(() => {
      result.current.onToggle(2);
    });
    expect(result.current.list).toEqual([1, 3]);
    act(() => {
      result.current.onToggle(4);
    });
    expect(result.current.list).toEqual([1, 3, 4]);
  });

  it('should toggle all items in the list', () => {
    const { result } = renderHook(() => useList<number>([1, 2, 3]));
    act(() => {
      result.current.onSelectAll([1, 2, 3, 4]);
    });
    expect(result.current.list).toEqual([1, 2, 3, 4]);
    act(() => {
      result.current.onClear();
    });
    expect(result.current.list).toEqual([]);
  });

Como gosto de fazer, é que o teste seja autoexplicativo, trazendo consistência, seja para mim ou para quem vai ver o código e fazer modificações.

No primeiro caso, estamos testando se o hook foi iniciado corretamente, sem novidades até aqui.
No segundo caso, vamos iniciar o hook com uma lista de 3 itens e, em seguida, desmarcar o item 2. Como pode ser visto, essas ações que vão afetar o estado estão envoltas em um act, e em seguida o expect, que nesse caso, esperamos uma lista sem o id 2.
No terceiro caso, vamos marcar todos os itens e em seguida testar o terceiro método junto, que é o onClear. Como pode ser visto, esperamos um array vazio.

 it('should check if an item is selected', () => {
    const { result } = renderHook(() => useList<number>([1, 2, 3]));
    expect(result.current.isSelected(2)).toBe(true);
    expect(result.current.isSelected(4)).toBe(false);
  });

  it('should clear the list', () => {
    const { result } = renderHook(() => useList([1, 2, 3]));
    act(() => {
      result.current.onClear();
    });
    expect(result.current.list).toEqual([]);
  });

É comum acabarmos testando algo duas vezes, e neste caso, o onClear já tinha sido testado no caso 3. No entanto, para manter uma consistência e garantir que cada caso tenha seu próprio teste, vamos repeti-lo no caso 5.

Caso 4: Este caso testa a função que verifica se um item existe na lista. Veja que estamos fazendo algo novo aqui, que é primeiro testar o valor esperado e, em seguida, testar também um valor que não estará na lista. Isso garante a cobertura de ambos os casos, sendo importante nesta função.
Caso 5: Como mencionado, este caso já foi testado acima, então vou economizar palavras.

Assim ficou a coverage desse hook, apesar de simples, é importante testar essas pequenas abstrações do código, é isso hoje.

Use hook pagination

Genilson fernandes — Tue, 27 Feb 2024 20:41:00 +0000

Olá! Desenvolvi este hook para resolver um problema pessoal, mas quem sabe também possa ser útil para você.

Este hook gera uma sequência de páginas para renderizar na tela e permite controlar a ação do usuário ao navegar entre elas. É um código simples, mas que sempre me ajuda quando preciso criar esse tipo de interface de usuário.

const { currentPage, handlePageChange, nextPage, prevPage, range } =
  usePagination({
    initialPage: 1,
    totalPages: 20,
  });

// output;
// range => [1, '...', 3, 4, 5, '...', 20]

 handlePageChange(3)

// currentPage => 3
// range => [1, '...', 2, 3, 4, '...', 20]

Dito isso, eu desenvolvi o hook novamente e publiquei no npm. Investi tempo na documentação, seguindo uma abordagem orientada a testes para garantir consistência e segurança para o uso.

A documentação está disponível no Storybook e também no README, com um guia de como utilizar o hook. Você pode conferir a documentação aqui: [https://65de0e043d606805aeba4797--glowing-alfajores-c9ed2e.netlify.app/?path=/docs/hooks-usepagination--docs].

Qualquer sugestão, pode deixar abaixo ou pode voce mesmo aprimorar o hook!

npm: use-pagination-pull

Para hoje era isso , tchau!

Criando um componente para validar o status da senha do usuário

Genilson fernandes — Tue, 12 Dec 2023 15:19:08 +0000

Existem várias maneiras de validar se a senha do usuário está seguindo boas práticas. Uma delas é simplesmente pintar o input de vermelho e assustar o usuário, enquanto outra é mostrar o que ele precisa fazer e deixar claro o caminho para resolver o problema.

Com esse pensamento, criei um componente separado que pode ser acoplado a qualquer outro input, desde que ele tenha as mesmas validações do input original.

const PasswordCheckStatus = ({ password }: { password: string }) => {
  const hasUpper = /[A-Z]/.test(password);
  const hasSpecial = /[\W_]/.test(password);
  const hasNumber = /[0-9]/.test(password);

  const percentage = (hasUpper ? 33.3 : 0) + (hasSpecial ? 33.3 : 0) + (hasNumber ? 33.3 : 0);

  if (!password) {
    return null;
  }

  return (
    <div className="w-full bg-slate-200 h-[2px]">
      <div
        className={cn('h-full bg-slate-500 transition-all', {
          'bg-red-500': percentage < 60,
          'bg-yellow-500': percentage >= 60 && percentage < 80,
          'bg-green-500': percentage >= 80
        })}
        style={{ width: `${percentage}%` }}></div>
    </div>
  );
};

E assim ficou o código. A validação é a mesma que será utilizada no input. Usei regex e Tailwind para o estilo.

E como mencionei, utilizei-o como uma dependência do input.

Crei um ultils para simular um back end usando o local storage

Genilson fernandes — Tue, 05 Dec 2023 15:17:13 +0000

Absurdo, não é? Eu preciso simular um back-end porque, sendo um desenvolvedor full stack, ainda não criei meu próprio back-end para a minha aplicação. Problemas, não é mesmo?

Devido a essa pequena complicação, eu comecei a adiantar os métodos que, no futuro, seriam responsáveis por fazer as requisições para o back-end. Assim, mesmo sem esses endpoints, eu poderia avançar no desenvolvimento do front-end para depois conectar aos endpoints.

Não é a primeira vez que faço isso, então eu já sabia o que estava fazendo.

Primeiro, aqui está o utilitário que criei:

import generateHashId from './generateHashId';

type localStorageBaseType = {
  id: string;
  created_at: Date;
};

export class NotFoundError extends Error {
  constructor(message: string) {
    super(message);
    this.message = message;
  }
}

export class StorageError extends Error {
  constructor(message: string) {
    super(message);
    this.message = message;
  }
}

class LocalStorageUtil<T extends localStorageBaseType> {
  private key: string;

  constructor(key: string) {
    this.key = key;
  }

  // Obtém os dados do Local Storage para a chave especificada
  getData(): T[] {
    const data = localStorage.getItem(this.key);
    return data ? JSON.parse(data) : [];
  }

  getById(id: string): T | undefined {
    const data = this.getData();
    return data.find((item) => item.id === id);
  }
  // Salva os dados no Local Storage para a chave especificada
  saveData(data: T[]): void {
    localStorage.setItem(this.key, JSON.stringify(data));
  }

  updateItem(item: T): void {
    const data = this.getData();
    const findIndex = data.findIndex((i) => i.id === item.id);

    if (findIndex === -1) {
      throw new NotFoundError('Item not found');
    }

    if (findIndex !== -1) {
      data[findIndex] = item;
      this.saveData(data);
    }
  }

  // Adiciona um novo item aos dados existentes
  addItem(item: Omit<T, 'id' | 'created_at'>): void {
    if (!item) {
      throw new StorageError('data is required');
    }

    const data = this.getData();
    const newItem: T = {
      id: generateHashId(16),
      created_at: new Date(),
      ...item
    } as T;
    data.push(newItem);
    this.saveData(data);
  }

  // Remove um item específico dos dados
  removeItem(id: string): void {
    const data = this.getData();
    const filteredData = data.filter((item) => item.id !== id);
    this.saveData(filteredData);
  }

  // Remove todos os dados relacionados à chave especificada
  deleteData(): void {
    localStorage.removeItem(this.key);
  }
}

export default LocalStorageUtil;

Como pode ver, é uma classe que de dar alguns métodos, os principais de um CRUD. E o uso dela é bem simples, como pode ver, esta usando typescript o que já ajuda bastante.

Primeiro passo: instanciando a casse

Como ela é uma classe, precisamos instanciar ela em algum lugar, ai ficar sua vontade


const keys = {
  budgets: '@budgets'
};

export type Budgets = {
  name: string;
  value: number;
} & localStorageBaseType;


const budgetStorage = new LocalStorageUtil<Budgets>(keys.budgets);

export { budgetStorage };

O que é esse localStorageBaseType? é somente um tipo base para você da merge com o tipo que vc quer passar para a classe, ela vai usar para ajudar na tipagem dos metodos.

ela por baixo dos planos tem id e um created_at para ajudar nos métodos da classe de buscar e update.

Segundo passo: finalmente usando

O uso ficar bem fácil, é so pegar budgetStorage e começar usar os métodos.


budgetStorage.addItem({
  name: 'Salário',
  value: 1000
});

const budgets = budgetStorage.getData() 
// spec: {
// name: 'Salário', 
// value: 1000
// id: 'x1y2z3',
// created_at: '17/12/2023'
// }

budgetStorage.updateItem({
  name: 'Salário',
  id: 'x1y2z3',
  value: 2000,
  created_at: new Date()
});

// Para atualizar é so passar o item com o update que o
// metodo vai buscar pelo id para atualizar o item

Os outros métodos são bem fáceis de usar e com a ajuda o typescript, temos o removeItem, deleteData, getById.

lembrando que foi uma solução bem simples para ajudar a completar um etapa do projeto e claro que da pra melhorar. é isso.