DEV Community: Dedicio Coelho

Como instalar o Storybook em um projeto Vue + Webpack

Dedicio Coelho — Thu, 22 Feb 2024 14:29:54 +0000

O Storybook por padrão agora instala suas configurações padrões baseado no Vite, porém se já tem um projeto que já utiliza o Webpack, ele não vai funcionar.

Para configurar o Storybook então, precisa definir qual é o builder do projeto usando o parâmetro --builder webpack5.

Basta rodar o código abaixo para adicionar ao seu projeto:

npx storybook@latest init --builder webpack5

Ele adicionará um diretório stories com arquivos de exemplo que pode usar para se guiar em como criar as documentações ou excluir caso não vá usar.

Importante configurar no arquivo .storybook/main.js o local e formato dos arquivos de docmentação que você usará no seu projeto:

  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],

Nota:
O NPM 7+ instala peerDependecies por padrão, mas se isso for um problema para o seu projeto, adicione também o parâmetro --legacy-peer-deps.

npx --legacy-peer-deps storybook@latest init --builder webpack5

Solução encontrada nessa issue

Como instalar act no Ubuntu ou Pop!OS

Dedicio Coelho — Tue, 23 Jan 2024 13:20:05 +0000

O pacote act ajuda você a testar suas Github Actions localmente.

Para instalar manualmente ele na sua distro Linux, é bem simples.

Baixe o arquivo compactado com a sua versão de hardware disponível no site oficial.

No exemplo, vamos baixar a versão amd64/x86_64:

wget -qO act.tag.gz https://github.com/nektos/act/releases/latest/download/act_Linux_x86_64.tar.gz

O comando acima baixará o arquivo para o diretório atual com o nome de act.tar.gz.

O próximo passo é descompactar o arquivo no diretório correto, como faremos abaixo:

sudo tar xf act.tar.gz -C /usr/local/bin act

Neste comando, o arquivo executável é salvo no diretório /usr/local/bin com o nome act.

Feito isso, já pode excluir o arquivo compactado que foi baixado:

rm -rf act.tag.gz

Para verificar que está instalado corretamente, você pode rodar o comando:

act --version

É isso! Já pode testar suas Github Actions na sua máquina.

Este tutorial foi retirado da versão em inglês em lindevs.com.

Como testar watch do Vue.js usando Jest

Dedicio Coelho — Tue, 06 Apr 2021 15:10:01 +0000

O Vue.js tem uma propriedade watch que serve para "observar" o valor de uma variável e ser executado sempre que esse valor for alterado.

Como essa propriedade serve para executar ações extras que não tenham alguma ligação a variável que dispara, existem alguns detalhes que devem ser seguidos para testar essa ação.

O componente exemplo para o teste é esse abaixo, tendo um data text que é usado no v-model do input

<template>
  <div>
    <input v-model="text">
    <p>Impactou: {{ otherText }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: '',
      otherText: '',
    };
  },
  watch: {
    text(value) {
      this.otherText = value;
    },
  },
};
</script>

Para testar o watch, precisamos usar um código no estilo abaixo:

  it('testing watch', async () => {
    const text = 'example value';
    const wrapper = shallowMount(App);
    const input = wrapper.find('input');

    expect(wrapper.vm.otherText).toBe('');

    input.element.value = text;
    input.trigger('input');
    await wrapper.vm.$nextTick();

    expect(wrapper.vm.otherText).toBe(text);
  });

Explicando o código:

Primeiro montamos o componente e pegamos o elemento input.

A ideia para testar o watch é sempre pegarmos o valor inicial da variável, executar a ação que ocorrerá no componente, aquela que altera a variável "assistida" pelo watch, e então verificar se houve algum efeito na variável que deveria ser afetada.

Verificando o valor antes:
expect(wrapper.vm.otherText).toBe('');

Executando a ação:
input.trigger('input');

Verificando o valor depois:
expect(wrapper.vm.otherText).toBe(text);

Como o ideal é testar um comportamento mais próximo do real, evite testar algo alterando o valor direto na instância do componente, como wrapper.vm.text = 'value'. Por isso aqui, inserimos um valor ao input e emitimos o evento input.

Detalhe

Caso o seu watch venha a verificar se um valor alterado volte ao valor padrão, será necessário executar a ação mais de uma vez, já que se você executar uma ação passando o valor igual ao valor anterior, o watch não é disparado.

Photo by Yassin Mohammadi on Unsplash

Como saber se um número é par ou ímpar em JavaScript?

Dedicio Coelho — Tue, 26 Jan 2021 02:23:34 +0000

As vezes é necessário saber, via programação, se um número é par ou ímpar. Mas como fazer isso em JavaScript?

Método 1

const isOddOrEven = (number) => {
  return number % 2 ? 'Is Odd!' : 'Is Even!';
}

console.log(isOddOrEven(3)); // Is Odd!

Nesse método, testamos a divisão por 2 do número passado, usando o operador %, que em vez de retornar o resultado de uma divisão, ele retorna o resto.

Qual a sacada? Todos os números pares são divisíveis por 2, ou seja, o resto da divisão de um número par por 2 é sempre 0.

Então caso essa operação retorne algum valor acima de 0, o número passado é ímpar.

Método 2

const isOddOrEven = (number) => {
  return value & 1 ? 'Is Odd!' : 'Is Even!';
}

console.log(isOddOrEven(3)); // Is Odd!

Nesse método, utilizando do operador &, que é um operador JavaScript da categoria bitwise ou "bit a bit".

Essa categoria trabalha com os valores no formato de base 2, ou seja, binários. Aquelas representações em 1s e 0s. (Ex: valor 5 em decimal é igual a 101 em binário)

Para operação to tipo bit a bit, o JavaScript converte por padrão todos os operandos para inteiros de 32 bits (Ex: 10100000000000000110000000000001)

Detalhe: caso o número convertido seja maior que 32 bits, os bits mais significativos são descartados, então não é recomendável usar operações bit a bit no JavaScript caso necessite usar números muito grandes, como cálculos com números primos.

Agora voltando a lógica do método...

O operador & retorna 1 para cada posição de bit em que ambos os operandos tinham um bit 1.

Qual a sacada? Estamos comparando ali os números com o número 1, que em binário seria 00000000000000000000000000000001, ou seja, apenas os números ímpares possuem o primeiro bit com valor 1, que é o único bit do número 1_(decimal)_ que também tem valor 1.

É isso!

São apenas dois métodos simples, mas o que eu queria passar aqui é a lógica de como resolver o problema de saber se um número é par ou ímpar.

Você também vai querer adicionar outras validações e muitos outros dilemas para deixar seu método super completo e a prova de quebra.

Mas o legal é entender como foram pensadas as lógicas para resolver problemas em programação, que podem ajudar na hora de resolver aquele seu problema de código que não é tão simples ou é muito específico ao contexto em que só você mexe.

Boa sorte!

Outros links: