Testar o portal de desenvolvimento auto-hospedado

APLICA-SE A: Developer | Básico | Básico v2 | Padrão | Padrão v2 | Prémio | Premium v2

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

Testes de unidade

Um teste de unidade é uma abordagem para validar pequenas partes da funcionalidade. É feito de forma isolada de outras partes da aplicação.

Cenário de exemplo

Nesse cenário, você está testando um controle de entrada de senha. Só aceita palavras-passe que contenham, pelo menos:

• Uma carta

• Um número

• Um caractere especial

Assim, 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 deve validar.

component.ts
component.spec.ts

Solicitações HTTP simuladas

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

const httpClient = new MockHttpClient();

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

Testes ponto a ponto

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

Para replicar a navegação do usuário, você pode usar bibliotecas auxiliares de manipulação do navegador, como o Puppeteer. Ele permite simular ações do usuário e automatizar cenários assumidos. O Puppeteer também tira automaticamente capturas de tela de páginas ou componentes em qualquer etapa do teste. Compare-os mais tarde com resultados anteriores para detetar desvios e potenciais regressões.

Cenário de exemplo

Nesse cenário, você precisa validar um fluxo de entrada do usuário. Este cenário exigiria as seguintes etapas:

1. Abra o navegador e navegue até a página de login.

2. Digite o endereço de e-mail.

3. Introduza a palavra-passe.

4. Selecione Iniciar sessão.

5. Verifique se o usuário foi redirecionado para a página inicial.

6. Verifique se a página inclui o item do menu Perfil. É um dos possíveis indicadores de que você entrou com sucesso.

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

// 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);

Nota

Strings como "#email", "#password" e "#signin" são seletores semelhantes a CSS que identificam elementos HTML na página. Consulte a especificação W3C dos seletores de nível 3 para saber mais.

Mapas de componentes da interface do usuário

Os fluxos de usuários 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 configurar e atualizar os mesmos seletores para cada teste. Por exemplo, você pode substituir as etapas 2 a 6 no exemplo anterior por apenas duas linhas:

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

Configuração de teste

Certos cenários podem exigir dados ou configurações pré-criados. Por exemplo, pode ser necessário automatizar o login do usuário com contas de mídia social. É difícil criar esses dados de forma rápida ou fácil.

Para isso, você pode adicionar um arquivo de configuração especial ao seu cenário de teste. Os scripts de teste podem pegar os dados necessários do arquivo. Dependendo do pipeline de compilação e teste, os testes podem extrair informações confidenciais de um repositório seguro designado.

Aqui está um exemplo de um validate.config.json que seria armazenado na src pasta do seu 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 sem cabeça vs normais

Os navegadores modernos, como o Chrome ou o Microsoft Edge, permitem-lhe executar a automatização tanto no modo headless como no modo normal. O navegador opera sem uma interface gráfica do usuário no modo headless. Ele ainda realiza as mesmas manipulações de página e DOM (Document Object Model). A interface do usuário do navegador geralmente não é necessária em pipelines de entrega. Nesse caso, executar testes no modo headless é uma ótima opção.

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

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

export const LaunchOptions = {
    headless: false
};

Outra opção útil é slowMo. Ele 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

Explorador de Testes

A extensão Test Explorer para VS Code (por exemplo, Mocha Test Explorer) tem uma interface do usuário conveniente e uma opção para executar testes automaticamente em cada alteração do código-fonte:

Conteúdo relacionado

Saiba mais sobre o portal do desenvolvedor:

• Descrição geral do portal do programador da Gestão de API do Azure

• Hospedar localmente o portal do desenvolvedor