Compartilhar via

Testar o portal do desenvolvedor auto-hospedado

APPLIES TO: Desenvolvedor | Básico | Básico v2 | Padrão | Standard v2 | Premium | Premium v2

Este artigo explica como configurar testes de unidade e testes de ponta a ponta para o portal auto-hospedado.

Criar testes de unidade

Um teste de unidade é uma abordagem para validar pequenas partes de funcionalidade. Um teste de unidade opera isoladamente de outras partes do aplicativo.

Cenário de exemplo

Nesse cenário, você está testando um controle de entrada de senha. Ele só aceita senhas que contenham pelo menos:

  • Uma letra
  • Um número
  • Um caractere especial

O teste para validar esses requisitos tem esta aparência:

const passwordInput = new PasswordInput();

passwordInput.value = "";
expect(passwordInput.isValid).to.equal(false);

passwordInput.value = "password";
expect(passwordInput.isValid).to.equal(false);

passwordInput.value = "p@ssw0rd";
expect(passwordInput.isValid).to.equal(true);

Estrutura do projeto

É comum manter um teste de unidade ao lado do componente que ele valida.

component.ts
component.spec.ts

Solicitações HTTP fictícias

Há casos em que você espera que um componente faça solicitações HTTP. O componente deve reagir corretamente a um tipo diferente de respostas. Para simular respostas HTTP específicas, use MockHttpClient. Ele implementa a interface HttpClient usada por muitos outros componentes do projeto.

const httpClient = new MockHttpClient();

httpClient.mock()
    .get("/users/jane")
    .reply(200, {
        firstName: "Jane",
        lastName: "Doe"
    });

Criar testes de ponta a ponta

Um teste de ponta a ponta executa um cenário de usuário específico executando as etapas exatas que você espera que o usuário execute. Em um aplicativo Web como o portal do desenvolvedor do Gerenciamento de API do Azure, o usuário percorre o conteúdo e seleciona opções para obter determinados resultados.

Para replicar a navegação do usuário, você pode usar bibliotecas auxiliares de manipulação do navegador, como Puppeteer. Isso permite simular as ações do usuário e automatizar os cenários presumidos. O Puppeteer também faz capturas de tela automáticas de páginas ou componentes em qualquer estágio do teste. Compare-as mais tarde com os resultados anteriores para detectar desvios e possíveis regressões.

Cenário de exemplo

Nesse cenário, você precisa validar um fluxo de entrada do usuário. Esse cenário requer as etapas a seguir:

  1. Abra o navegador e navegue até a página de entrada.
  2. Insira um endereço de email.
  3. Digite a senha.
  4. Selecione Entrada.
  5. Verifique se o usuário foi redirecionado para a página inicial.
  6. Verifique se a página inclui o item de menu Perfil. É um dos possíveis indicadores de que você entrou com sucesso.

Para executar o teste automaticamente, crie um script com as mesmas etapas exatamente:

// 1. Open browser and navigate to the sign-in page.
const page = await browser.newPage();
await page.goto("https://contoso.com/signin");

// 2. Enter email.
await this.page.type("#email", "john.doe@contoso.com");

// 3. Enter password.
await this.page.type("#password", "p@s$w0rd");

// 4. Click Sign-in.
await this.page.click("#signin");

// 5. Verify that user got redirected to Home page.
expect(page.url()).to.equal("https://contoso.com");

// 6. Verify that the page includes the Profile menu item.
const profileMenuItem = await this.page.$("#profile");
expect(profileMenuItem).not.equals(null);

Observação

Cadeias de caracteres como #email, #passworde #signin são seletores semelhantes a CSS que identificam elementos HTML na página. Para obter mais informações, consulte a especificação W3C do Nível 3 dos Seletores.

Mapas de componentes da interface do usuário

Os fluxos de usuário geralmente passam pelas mesmas páginas ou componentes. Um bom exemplo é o menu principal do site que está presente em todas as páginas.

Crie um mapa de componentes da interface do usuário para evitar a configuração e atualização dos mesmos seletores para cada teste. Por exemplo, você pode substituir as etapas de 2 a 6 no exemplo anterior por apenas duas linhas:

const signInWidget = new SigninBasicWidget(page);
await signInWidget.signInWithBasic({ email: "...", password: "..." });

Configuração de teste

Determinados cenários exigem dados ou configurações pré-criados. Por exemplo, talvez seja necessário automatizar a entrada do usuário com contas de mídia social. É difícil criar esses dados de forma rápida ou fácil.

Para essa finalidade, você pode adicionar um arquivo de configuração especial ao cenário de teste. Os scripts de teste podem escolher os dados necessários do arquivo. Dependendo do pipeline de compilação e teste, os testes podem extrair os segredos de um repositório seguro nomeado.

Este é um exemplo de um validate.config.json que seria armazenado na pasta src do projeto.

{
    "environment": "validation",
    "urls": {
        "home": "https://contoso.com",
        "signin": "https://contoso.com/signin",
        "signup": "https://contoso.com/signup/"
    },
    "signin": {
        "firstName": "John",
        "lastName": "Doe",
        "credentials": {
            "basic": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            },
            "aadB2C": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            }
        }
    },
    "signup": {
        "firstName": "John",
        "lastName": "Doe",
        "credentials": {
            "basic": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            }
        }
    }
}

Testes normais versus sem periféricos

Os navegadores modernos, como o Chrome ou o Microsoft Edge, permitem executar a automação no modo sem cabeça e no modo normal. O navegador opera sem uma interface gráfica do usuário no modo sem periféricos. Ele ainda executa as mesmas manipulações de página e DOM (Modelo de Objeto do Documento). A interface do usuário do navegador geralmente não é necessária nos pipelines de entrega. Nesse caso, a execução de testes no modo sem periféricos é uma ótima opção.

Quando você desenvolve um script de teste, é útil ver o que está acontecendo exatamente no navegador. É um bom momento para usar o modo normal.

Para alternar entre os modos, mude a opção headless no arquivo constants.ts. Está na pasta tests do projeto:

export const LaunchOptions = {
    headless: false
};

Outra opção útil é slowMo. Ela pausa a execução do teste entre cada ação:

export const LaunchOptions = {
    slowMo: 200 // milliseconds
};

Executar testes

Há duas maneiras internas de executar testes neste projeto:

comando npm

npm run test

Gerenciador de Testes

Use uma extensão do Gerenciador de Testes para VS Code. Por exemplo, o Gerenciador de Testes do Mocha tem uma interface do usuário conveniente e uma opção para executar testes automaticamente em cada alteração do código-fonte:

Captura de tela do Gerenciador de Testes do Visual Studio Code

Conteúdo relacionado

Saiba mais sobre o portal do desenvolvedor:

  • Last updated on