Escalando a entrega de UI com o Storybook- parte 2 (Injeção de dependências)

No artigo passado, eu fiz uma introdução sobre o Storybook, agora vou falar de uns conceitos mais avançados sobre o uso dessa ferramenta. Coisas que você vai ter que usar em projetos reais.

Injeção de dependências

O moduleMetadata é uma grande sacada do Storybook, que nele podemos fazer nossa injeção de dependências de componentes, serviços e módulos auxiliares. Lembrando que a intenção é fazer nossas peças de Lego o mais independente possível da aplicação, não conseguimos fugir de termos serviços e outros componentes utilizados no componente demonstrado, para montar peças maiores e mais reutilizáveis.

Da mesma maneira que fazemos a injeção de dependências no TestBed quando vamos testar o componente podemos fazer praticamente a mesma coisa. É possível injetar os serviços reais ou fake, somente para não termos problemas de excução ou para não precisarmos passar por alguma integração da aplicação (isso é muito util!).

Aqui temos bastante coisa interessante:

• O componente app-foobar, que é da aplicação;
• O componente mat-icon, do material;
• Injetamos o serviço FoobarService, que é bem simples;
• Injetamos o serviço ComplexService, que o nome ja diz, é complexo e vamos mockar esse cara;

Temos aqui a injeção de dependências necessárias para que nosso componente possa ser apresentado. Como comentei anteriormente é bem parecido com o que fazemos para testar um componente.

Por ordem atribuições:

• Imports -> do módulo do MatIconModule para satisfazer a dependência do mat-icon;
• Declarations -> do componente a ser demonstrado, SomeComponent, e o componente FoobarComponent reusado no template do app-some;
• Provides -> do FoobarService e o mock do ComplexService;

Capturando os eventos de Output do Componente

Agora a única coisa que falta para terminarmos de fazer uma story de um componente real é conseguir capturar os eventos emitidos pelos componentes. Sim, temos como fazer isso.

Da mesma maneira que enviamos os propriedades de Input para o componente, conseguimos capturar os eventos de Output deles. Isso é mais uma sacada sensacional do Storybook.

Quando se pensa em desenvolver um componente temos que validar o comportamento do mesmo. Fazemos isso com teste — nem todos fazem — mas é possivel ter essa verificação no Storybook.

Por default temos instalados alguns addons, como é possível ver nas stories iniciais. Lá temos demostração de Notes, Links, e a super útil Action!

O Addon Action nos permite, justamente, fazer a captura de eventos de um específico Output do componente e printar o resultado na tab Action Logger do Storybook.

Voltando à stories default que ganhamos ao instalar o Storybook. Lá temos uma story demonstrando o uso da action, e do Notes também.

O componente Button possui um Output onClick, que emite um evento, ao clicar. Esse evento será capturado e o valor emitido será logado na tab Action Logger.

Você pode ter achado estranho essa tela do Storybook. É que ela já está turbinada com vários Addons que nos ajudam na produtividade e organização do nosso show room de componentes.

O gif da demonstação do action é de um projeto que eu fiz para demonstrar algumas features do Storybook. Lá você poderá consultar a forma de configuração deles além da demonstração do funcionamento. Você pode ver no meu Github!

Se você não leu o primeiro artigo, é bem importante, pois eu explico alguns conceitos e falo sobre a configuração e instação.