Chegamos ao √ļltimo post da s√©rie de qualidade de c√≥digo em teste de software

Se voc√™ est√° chegando neste post agora e ainda n√£o leu os conte√ļdos anteriores, recomendo come√ßar por eles. Seguem os links:

Agora se voc√™ j√° leu os primeiros posts da s√©rie, vamos falar sobre a d√©cima e √ļltima¬†guideline do Better Code Hub: Escreva c√≥digo limpo.

Segundo o BCH:

  • C√≥digo limpo √© mais f√°cil de manter
  • Pr√≥-ativamente procure e remova¬†cheiros ruins¬†do c√≥digo
  • Remova coment√°rios desnecess√°rios, blocos de c√≥digo comentado e c√≥digo morto. Refatore exce√ß√Ķes pobremente implementadas, constantes m√°gicas e unidades ou vari√°veis mal nomeadas.

Código limpo é mais fácil de manter

Vejamos um exemplo de um teste escrito com o framework Cypress, onde o código não estava limpo.

// cypress/integration/vidbits.spec.js

describe("Vidbits", () => {
  context("Empty state", () => {
    it("creates two videos", () => {
      cy.exec("npm run drop-db");

      cy.visit("videos");

      cy.get(".add-video-button").click();

      cy.get("#video-title-input")
        .type("Chaos and intuition engineering");
      cy.get("#video-description-input")
        .type("GOTO 2016 ‚ÄĘ Chaos & Intuition Engineering at Netflix ‚ÄĘ Casey Rosenthal.");
      cy.get("#video-url-input")
        .type("https://www.youtube.com/embed/Q4nniyAarbs");

      cy.get("#submit-button").click();

      cy.visit("videos");

      cy.get(".add-video-button").click();

      cy.get("#video-title-input")
        .type("appear.in & Star Wars");
      cy.get("#video-description-input")
        .type("Sed ut perspiciatis unde omnis iste natus error.");
      cy.get("#video-url-input")
        .type("https://www.youtube.com/embed/vHTIYVHTSxA");

      cy.get("#submit-button").click();

      cy.visit("videos");

      cy.get(".video-card").its("length").should("eq", 2);
    });
  });
});

Perceba que o c√≥digo do teste √© longo e cheio de detalhes de implementa√ß√£o e duplica√ß√Ķes.

Agora, vejamos tal código refatorado com o uso de iteração em um array, comandos customizados e fixtures.

// cypress/integration/vidbits.spec.js

describe("Vidbits", () => {
  const videos = require("../fixtures/videos");

  context("Empty state", () => {
    beforeEach(() => cy.exec("npm run drop-db"));

    it("creates two videos", () => {
      videos.forEach(video => cy.createVideo(video));

      cy.visit("videos");

      cy.get(".video-card").its("length").should("eq", 2);
    });
  });
});

O teste demonstrado faz o mesmo que o anterior, por√©m √© focado somente no que importa para o teste, n√£o se importando em guardar os dados dos videos que ser√£o criados, nem mesmo nos detalhes para a cria√ß√£o de um video. Al√©m disso, neste c√≥digo n√£o h√° duplica√ß√Ķes, ou seja, n√£o h√° mais este¬†bad smell.

Vejamos agora o arquivo de fixtures cypress/fixtures/videos.json.

[
  {
    "title": "Chaos and intuition engineering",
    "description": "GOTO 2016 ‚ÄĘ Chaos & Intuition Engineering at Netflix ‚ÄĘ Casey Rosenthal.",
    "url": "https://www.youtube.com/embed/Q4nniyAarbs"
  },
  {
    "title": "appear.in & Star Wars",
    "description": "Sed ut perspiciatis unde omnis iste natus error.",
    "url": "https://www.youtube.com/embed/vHTIYVHTSxA"
  }
]

Perceba que tal arquivo tem a √ļnica responsabilidade de guardar os dados que ser√£o usados para cria√ß√£o dos videos no teste, nada mais.

E por fim, vejamos o comando customizado createVideo, criado no arquivo cypress/support/commands.js.

Cypress.Commands.add("createVideo", video => {
  cy.visit("videos/create");

  cy.get("#video-title-input")
    .type(video.title);
  cy.get("#video-description-input")
    .type(video.description);
  cy.get("#video-url-input")
    .type(video.url);

  cy.get("#submit-button").click();
});

Neste arquivo podemos ver os detalhes de como um video é criado (detalhes de implementação), podendo esta função ser reaproveitada onde necessário com apenas uma linha de código (cy.createVideo(someVideoObjectHere)).

Obs.: os códigos demonstrados até aqui podem ser visto antes e após a refatoração nestes links, em minha conta no GitHub.

Pró-ativamente procure e remova cheiros ruins (bad smells) do código

Conforme visto no exemplo anterior, removemos um cheiro ruim do código ao remover duplicação do código.

Existem outros cheiros ruins em código, portanto, recomendo a leitura dos code smells do Refactoring Guru.

Limpe o código

Sempre que perceber que determinada parte do código pode ser melhorada, o faça.

“N√£o deixe para amanh√£ o que voc√™ pode fazer hoje.”

Veja um exemplo simples de limpeza de código que o tornou mais simples de ser entendido.

git diff em uma limpeza de código

Neste caso, deixei mais claro para os leitores do c√≥digo o que aquele n√ļmero 3000 significava.

Porém, conforme comentado, existem outras formas de limpar código, tais como:

  • Remover¬†coment√°rios desnecess√°rios
    • Tal abordagem diminiu o tamanho do arquivo
    • E remove redund√Ęncias (quando por exemplo, o coment√°rio explica algo j√° explicado pelo pr√≥prio nome de uma fun√ß√£o ou m√©todo)
  • Remover¬†blocos de c√≥digo comentado e c√≥digo morto
    • Tal abordagem diminiu o tamanho do arquivo
    • Remove distra√ß√Ķes ao leitor
    • E remove c√≥digo implementado e nunca utilizado
  • Refatorar¬†exce√ß√Ķes pobremente implementadas
    • Torna o c√≥digo mais robusto
  • Nomeando propriamente¬†constantes m√°gicas
    • D√°-se melhor significado as coisas
  • E melhor nomeando¬†unidades ou vari√°veis mal nomeadas
    • D√°-se tamb√©m melhor significado as coisas

Espero que este √ļltimo conte√ļdo da s√©rie de¬†Qualidade de c√≥digo em teste de software lhe inspire a limpar o c√≥digo de seus projetos de software sempre que tiveres a oportudidade.

Aproveite também para conferir o infográfico da série.

E minha dica final é:

“N√£o deixe a oportunidade passar, pois √© a pr√°tica que o levar√° √† perfei√ß√£o.”


At√© a pr√≥xima e bons testes!¬†ūüĎčūüßź

Um coment√°rio em “Escreva c√≥digo limpo {ūüßĻ}

Deixe um coment√°rio

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Voc√™ est√° comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Voc√™ est√° comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Voc√™ est√° comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Voc√™ est√° comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s