DEV Community: Alan Pinhel

Como eu melhorei meus testes utilizando React Context

Alan Pinhel — Sun, 10 Mar 2024 14:15:19 +0000

A Context é uma excelente forma de gerenciar estados em aplicações React e hoje em dia em muitos cenários dispensam o uso de bibliotecas adicionais para tal fim.

Uma das vantagens é a facilidade e simplicidade de testar os componentes que fazem uso de contextos com react-testing-library.

Veja como costumo fazer nos meus projetos:

export type User = {
  name: string;
};

import { createContext } from 'react';
import { User } from './user';

export const UserContext = createContext<User>({} as User);

import useSWR from 'swr';
import { User } from './user';
import { UserContext } from './user-context';

type Props = {
  children: React.ReactNode;
};

export function UserProvider({ children }: Props) {
  const { data, isLoading, error } = useSWR<User>('/api/user');

  if (error) {
    return <div>Erro ao carregar usuário</div>;
  }

  if (isLoading) {
    return <div>Carregando...</div>;
  }

  return (
    <UserContext.Provider value={data || ({} as User)}>
      {children}
    </UserContext.Provider>
  );
}

import { useUser } from './useUser';

export function UserGreeter() {
  const user = useUser();

  if (user.name) {
    return <div>Olá, {user.name}!</div>;
  }

  return <div>Olá, visitante!</div>;
}

Vamos garantir no teste que a regra de saudação seja respeitada corretamente:

import { render, screen } from '@testing-library/react';
import { UserGreeter } from './user-greeter';
import { UserProviderMock } from './user-provider-mock';

describe('UserGreeter', () => {
  it('should greet the user', () => {
    render(
      <UserProviderMock>
        <UserGreeter />
      </UserProviderMock>,
    );

    expect(screen.getByText('Olá, John Doe!')).toBeInTheDocument();
  });

  it('should greet the anonymous user', () => {
    render(
      <UserProviderMock value={{}}>
        <UserGreeter />
      </UserProviderMock>,
    );

    expect(screen.getByText('Olá, visitante!')).toBeInTheDocument();
  });
});

Observe que criei o UserProviderMock com valores padrão, para evitar repetições em todos os testes dos componentes que dependem do User:

import { User } from './user';
import { UserContext } from './user-context';

type Props = {
  children: React.ReactNode;
  value?: Partial<User>;
};

export function UserProviderMock({ children, value }: Props) {
  return (
    <UserContext.Provider value={{ name: 'John Doe', ...value }}>
      {children}
    </UserContext.Provider>
  );
}

Você ainda acha necessário o uso de bibliotecas de gerenciamento de estado? Por favor, deixe sua opinião nos comentários.

Usando Callbacks em Hooks Customizados do React

Alan Pinhel — Mon, 04 Mar 2024 12:58:04 +0000

Tenho criado frequentemente hooks customizados, seja para reutilização de lógica ou extração de responsabilidade.

Há algum tempo, meu time deparou com o seguinte dilema: "como comunicar ao componente que utiliza um hook que um processo assíncrono terminou?".

Para entender melhor o cenário, veja o hook abaixo como exemplo:

function useApplyCoupon() {
  const [isApplying, setApplying] = useState(false);
  const { id } = useOrder();
  const { mutate } = useRemoteOrder();
  const { api } = useInfra();

  const applyCoupon = async (code: string) => {
    try {
      setApplying(true);
      await api.put(`.../orders/${id}/coupon`, { code });
      await mutate();
    } catch (error) {
      handleServerError(error);
    } finally {
      setApplying(false);
    }
  };

  return { applyCoupon, isApplying };
};

A utilização fica da seguinte forma:

type FormValues = {
  code: string;
};

function ProductInformation() {
  const methods = useForm<FormValues>();
  const { applyCoupon, isApplying } = useApplyCoupon();

  const handleSubmit = ({ code }: FormValues) => {
    applyCoupon(code);
  };

  return (
    <form onSubmit={methods.handleSubmit(handleSubmit)}>
      <TextInput
        id="code"
        placeholder="Inserir cupom"
        error={methods.formState.errors.code?.message}
        size="xs"
        sx={{ flex: 1 }}
        {...methods.register('code', { required: true })}
      />
      <Button size="xs" type="submit" loading={isApplying}>
        Aplicar
      </Button>
    </form>
  );
}

Agora, pense que após a ação de aplicar o cupom, queremos avisar o usuário se deu certo ou não.

Antes de eu compartilhar como meu time resolveu, deixem uma reação no post, pra eu saber se é um conteúdo relevante 🥺

Na época, a primeira tarefa com essa questão foi pega pelo Evandro, e ele resolveu de maneira muito simples, tornando-se um padrão nos nossos custom hooks, o que me motivou a compartilhar aqui.

Veja abaixo:

type Props = {
  onError?: () => void;
  onSuccess?: () => void;
};

function useApplyCoupon({ onError, onSuccess }: Props = {}) {
  const [isApplying, setApplying] = useState(false);
  const { id } = useOrder();
  const { mutate } = useRemoteOrder();
  const { api } = useInfra();

  const applyCoupon = async (code: string) => {
    try {
      setApplying(true);
      await api.put(`.../orders/${id}/coupon`, { code });
      await mutate();
      onSuccess?.();
    } catch (error) {
      if (axios.isAxiosError(error) && error.response?.status === 422) {
        onError?.();
        return;
      }
      handleServerError(error);
    } finally {
      setApplying(false);
    }
  };

  return { applyCoupon, isApplying };
};

Utilização:

type FormValues = {
  code: string;
};

function ProductInformation() {
  const [isOpenModal, { open: openModal }] = useDisclosure();
  const methods = useForm<FormValues>();
  const { applyCoupon, isApplying } = useApplyCoupon({
    onSuccess() {
      openModal();
      confetti({
        origin: { y: 0.6 },
        particleCount: 100,
        spread: 70,
        zIndex: 2000,
      });
    },
    onError() {
      methods.setFocus('code');
      methods.setError('code', {
        type: 'manual',
        message: 'O código do cupom inserido não é válido. Tente outro.',
      });
    },
  });

  const handleSubmit = ({ code }: FormValues) => {
    applyCoupon(code);
  };

  return (
    <form onSubmit={methods.handleSubmit(handleSubmit)}>
      <TextInput
        id="code"
        placeholder="Inserir cupom"
        error={methods.formState.errors.code?.message}
        size="xs"
        sx={{ flex: 1 }}
        {...methods.register('code', { required: true })}
      />
      <Button size="xs" type="submit" loading={isApplying}>
        Aplicar
      </Button>
    </form>
  );
}

O que achou? Provavelmente existem outras formas de resolver, e eu gostaria de saber como você faria. Deixe nos comentários.

Componentes Utilitários para Composição de Layouts

Alan Pinhel — Sat, 17 Feb 2024 15:13:26 +0000

É comum em bibliotecas de componentes conhecidas, a disponibilização de componentes utilitários que facilitam na composição de componentes maiores e consequentemente aumentam a produtividade na construção de interfaces. Por exemplo:

No entanto, também é comum ver projetos com a utilização de CSS-in-JS, desta forma:

import * as S from "./styles";

() => (
  <S.Layout>
    <S.HeaderContent>
      <S.Content>
        <S.Image />
      </S.Content>

      <S.HeaderTitleContent>
        <S.PageTitle>...</S.PageTitle>
        <S.PageDescription>...</S.PageDescription>
        <S.MoreDetailsLink>...</S.MoreDetailsLink>
      </S.HeaderTitleContent>
    </S.HeaderContent>

    <S.ClassSelection>...</S.ClassSelection>

    <S.ClassesList>
      <S.ButtonBox>
        <S.Button>...</S.Button>
      </S.ButtonBox>
    </S.ClassesList>

    <Divider full position="horizontal" />

    <div>
      <S.DynamicInformation>...</S.DynamicInformation>

      <Divider full position="horizontal" />

      <div>
        <S.DynamicContent>
          <S.Data>
            <S.Day>...</S.Day>
            <S.Month>...</S.Month>
            <S.Year>...</S.Year>
          </S.Data>
          <S.Content>
            <S.ContentLastChild>
              <S.ContentTitle>...</S.ContentTitle>
              <S.ContentDescription>...</S.ContentDescription>
            </S.ContentLastChild>
          </S.Content>
        </S.DynamicContent>

        <Divider full position="horizontal" />
      </div>
    </div>

    <S.Help>...</S.Help>
  </S.Layout>
);

Cada componente do grupo S tem um arquivo que exporta um Styled Component. Veja abaixo:

import { styled } from "@/stitches";

const Layout = styled("div", {
  padding: "$spacing2xl",
  maxWidth: "51.125rem", // 818px
  minWidth: "21.563rem", // 345px
});

export default Layout;

import { styled } from "@/stitches";

const HeaderContent = styled("div", {
  display: "flex",
  gap: "$spacingLg",
  marginBottom: "$spacingXl",
  flexDirection: "column",

  "@md": {
    flexDirection: "row",
  },
});

export default HeaderContent;

import { styled } from "@/stitches";

const Content = styled("div", {
  width: "17.813rem", // 285px
});

export default Content;

Enfim... (cansei, não vai rolar listar todos 😅). É possível notar que:

Há um gasto de esforço desnecessário (dar nome, criar um arquivo, exportar/importar, tudo isso para as vezes definir APENAS um atributo CSS. Isso não me parece prático).
Existe muito código repetido, é comum ver vários arquivos definindo tipografia, flex box, grid e espaçamento.
Dar nome para coisas abstratas é difícil e o resultado é algo como: XxxxContent, XxxxData, XxxxBox, XxxxWrapper e XxxxInfo.
Deduzir o que o código renderiza é bem trabalhoso, os estilos estão longes entre-si, longe do markup e com nomes não óbvios.

Veja um exemplo, de como ficaria a reescrita do código acima, utilizando componentes utilitários para isso:

import { Box, Flex, Text } from "@foo/components";

() => (
  <Box padding="2xl" css={{ maWidth: "51.125rem", minWidth: "21.563rem" }}>
    <Flex gap="lg" direction={{ "@initial": "column", "@md": "row" }}>
      <Box css={{ width: "17.813rem" }}>
        <Box as="img" css={{ width: "100%" }} />
      </Box>

      <Flex direction="column" justify="space-between">
        <Text as="h1" font="headingLgBold">
          ...
        </Text>
        <Text as="p" font="labelRegular">
          ...
        </Text>
        <Text as="p" font="captionRegular">
          ...
        </Text>
      </Flex>
    </Flex>

    <Text as="h3" font="labelBold" gutterBottom>
      ...
    </Text>

    <Flex wrap="wrap" gap="md">
      <Box css={{ width: "3.125rem" }}>
        <Button>...</Button>
      </Box>
    </Flex>

    <Divider full position="horizontal" />

    <Box css={{ marginBottom: "$spacingLg" }}>
      <Text as="p" font="titleRegular" gutterBottom>
        ...
      </Text>

      <Divider full position="horizontal" />

      <div>
        <Flex gap="lg" align="start" css={{ padding: "$spacingMd 0" }}>
          <Flex direction="column" align="center">
            <Text font="headingLgBold">...</Text>
            <Text font="headingSmRegular" transform="capitalize">
              ...
            </Text>
            <Text font="bodyRegular">...</Text>
          </Flex>

          <Flex direction="column">
            <Text as="p" font="labelBold" gutterBottom>
              ...
            </Text>
            <Text font="captionRegular">...</Text>
          </Flex>
        </Flex>

        <Divider full position="horizontal" />
      </div>
    </Box>

    <Text font="labelRegular">...</Text>
  </Box>
);

Consegue perceber como reaproveitamos mais código? Além disso, fica mais rápido compor o layout e facilita em manutenções futuras, pois é mais fácil de deduzir.

Gostou? Não concorda? Deixe suas experiências e dicas nos comentários.