Os componentes foram desenvolvidos utilizando tecnologia de Web Components através do StencilJS.
Abaixo estão as ferramentas utilizadas e as versões recomendadas.
Lista de alguns comandos úteis para terminal
yarnInstalar as dependênciasyarn startInicializar servidor de desenvolvimento dos componentes e acessar através do browser em http://localhost:3333yarn buildGerar arquivos para distribuição e documentações automáticasyarn testIrá executar toda a suíte de testes unitários e end-to-endyarn test.watchIrá manter em observação os arquivos de testes para executá-los caso haja alteração (é bom para desenvolver cenários de testes)yarn lintIrá exibir um relatório com alertas e possíveis erros de escrita de código
Basta digitar yarn generate no terminal e seguir o passo a passo conforme solicitado.
- Por convenção, novos elementos devem possuir o prefixo
bth-em suas tags. - Este prefixo não deve estar presente nos nomes de classes/arquivos, somente nas tags.
O Stencil provê um ferramental para testes unitários (com Jest) e de integração (com Puppeteer).
Abaixo temos algumas documentações de referências.
- Stencil Testing Overview
- The Basics of Unit Testing in StencilJS - Josh Morony
- Jest.js Docs
- Puppeteer Docs
- JavaScript Testing Introduction Tutorial - Unit Tests, Integration Tests & e2e Tests
A extensão Coverage Gutters para Visual Studio Code pode ser utilizada para visualizar a cobertura por arquivo
É importante que os testes sejam pequenos e isolados, no intuito de testar um cenário bem específico.
A abordagem abaixo, organiza em 3 etapas um teste e é sugerida para a elaboração de novos cenários:
describe('descrição de um grupo de cenários de testes', () => {
it('descrição do cenário que será testado', async () => {
// 1. Organizar (Arrange): prepara-se o ambiente, dependências e componentes, configurando o estado necessário para o teste.
// 2. Atuar (Act): executar o código que terá seu comportamento testado
// 3. Verificar (Assert): verificar se o resultado esperado foi atingido, indicando se o teste passou ou não
});
})As características visuais e comportamentais devem ser respeitadas
- Estar de acordo com o Design System
- Componentes do menu de ferramentas devem ser responsivos, adequando-se ao formato para dispositivos móveis.
Abaixo segue algumas definições a fim de padronizar o projeto como um todo e algumas referências externas.
Havendo a necessidade de criação de named slots sugere-se um padrão de escrita com letra minúscula separando palavras por underline, assim diferenciamos do estilo de escrita das classes CSS e de tags HTML.
Ex: container_aplicacao, menu_ferramentas, corpo_painel_lateral, etc
Sugere-se utilizar camelCased, seguindo exemplos da documentação do Stencil.
Sempre que possível utilizar nomenclatura no passado.
Ex: componenteConectado, conteudoAdquirido, acaoRealizada
Os componentes que comportam o slot de ferramentas do menu, podem possuir indicadores visuais (badges) que indicam pendências ao usuaŕio.
Estes componentes, devem implementar a comunicação com o bth-app através de eventos do DOM que permite que a estrutura saiba que há componentes com pendências, podendo assim exibir o indicador abaixo para dispositos móveis.
Através do evento conteudoSinalizado é possível informar qual a origem e se possui ou não conteúdo sinalizado pendente de leitura.
Os componentes bth-notificacoes e o bth-novidades podem servir de referência de implementação deste recurso.
O Stencil possui um ferramental para auxiliar na construção de componentes que atendem às específicações de Web Components