Delen via

De zelf-hostende ontwikkelaarsportal testen

VAN TOEPASSING OP: Ontwikkelaar | Basic | Basic v2 | Standaard | Standard v2 | Premium | Premium v2

In dit artikel wordt uitgelegd hoe u eenheidstests en end-to-end tests instelt voor uw zelf-hostende portal.

Unittests

Een eenheidstest is een methode om kleine stukjes functionaliteit te valideren. Het wordt geïsoleerd van andere onderdelen van de toepassing.

Voorbeeldscenario

In dit scenario test u een besturingselement voor wachtwoordinvoer. Het accepteert alleen wachtwoorden met ten minste:

  • Eén letter

  • Eén getal

  • Eén speciaal teken

De test om deze vereisten te valideren ziet er als volgt uit:

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

Projectstructuur

Het is gebruikelijk om een eenheidstest naast het onderdeel te houden dat moet worden gevalideerd.

component.ts
component.spec.ts

Gesimuleerde HTTP-aanvragen

Er zijn gevallen waarin u verwacht dat een onderdeel HTTP-aanvragen doet. Het onderdeel moet op de juiste manier reageren op verschillende soorten reacties. Als u specifieke HTTP-antwoorden wilt simuleren, gebruikt u MockHttpClient. Hiermee wordt de HttpClient interface geïmplementeerd die door veel andere onderdelen van het project wordt gebruikt.

const httpClient = new MockHttpClient();

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

Complete tests

Een end-to-end-test voert een bepaald gebruikersscenario uit met exacte stappen die de gebruiker verwacht uit te voeren. In een webtoepassing zoals de Azure API Management-ontwikkelaarsportal bladert de gebruiker door de inhoud en selecteert de opties om bepaalde resultaten te bereiken.

Als u gebruikersnavigatie wilt repliceren, kunt u helperbibliotheken voor browserbewerkingen zoals Puppeteer gebruiken. Hiermee kunt u gebruikersacties simuleren en veronderstelde scenario's automatiseren. Puppeteer maakt ook automatisch schermopnamen van pagina's of onderdelen in een fase van de test. Vergelijk ze later met eerdere resultaten om afwijkingen en potentiële regressies te vangen.

Voorbeeldscenario

In dit scenario moet u een aanmeldingsstroom voor gebruikers valideren. Voor dit scenario zijn de volgende stappen vereist:

  1. Open de browser en navigeer naar de aanmeldingspagina.

  2. Voer het e-mailadres in.

  3. Voer het wachtwoord in.

  4. Selecteer Aanmelden.

  5. Controleer of de gebruiker is omgeleid naar de startpagina.

  6. Controleer of de pagina de menuopdracht Profiel bevat. Het is een van de mogelijke indicatoren waarmee u zich hebt aangemeld.

Als u de test automatisch wilt uitvoeren, maakt u een script met exact dezelfde stappen:

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

Notitie

Tekenreeksen zoals '#email', '#password' en '#signin' zijn CSS-achtige selectors die HTML-elementen op de pagina identificeren. Zie de W3C-specificatie selectors op niveau 3 voor meer informatie.

Toewijzingen van ui-onderdelen

Gebruikersstromen doorlopen vaak dezelfde pagina's of onderdelen. Een goed voorbeeld is het hoofdwebsitemenu dat op elke pagina aanwezig is.

Maak een ui-onderdeeltoewijzing om te voorkomen dat dezelfde selectors voor elke test worden geconfigureerd en bijgewerkt. U kunt bijvoorbeeld stap 2 tot en met 6 in het voorgaande voorbeeld vervangen door slechts twee regels:

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

Testconfiguratie

Voor bepaalde scenario's zijn mogelijk vooraf gemaakte gegevens of configuratie vereist. U moet bijvoorbeeld gebruikersaanmelding automatiseren met sociale media-accounts. Het is moeilijk om die gegevens snel of eenvoudig te maken.

Hiervoor kunt u een speciaal configuratiebestand toevoegen aan uw testscenario. De testscripts kunnen vereiste gegevens uit het bestand ophalen. Afhankelijk van de build- en testpijplijn kunnen de tests de geheimen ophalen uit een benoemd beveiligd archief.

Hier volgt een voorbeeld van een validate.config.json bestand dat wordt opgeslagen in de src map van uw project.

{
    "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 >"
            }
        }
    }
}

Headless versus normale tests

Met moderne browsers zoals Chrome of Microsoft Edge kunt u automatisering uitvoeren in zowel de headless-modus als de normale modus. De browser werkt zonder een grafische gebruikersinterface in de modus zonder hoofd. Er worden nog steeds dezelfde pagina- en DOM-bewerkingen (Document Object Model) uitgevoerd. De gebruikersinterface van de browser is meestal niet nodig in leveringspijplijnen. In dat geval is het uitvoeren van tests in de headless-modus een uitstekende optie.

Wanneer u een testscript ontwikkelt, is het handig om te zien wat er precies gebeurt in de browser. Dat is een goed moment om de normale modus te gebruiken.

Als u wilt schakelen tussen de modi, wijzigt u de optieoptie headless in het constants.ts bestand. Deze bevindt zich in de tests map in uw project:

export const LaunchOptions = {
    headless: false
};

Een andere handige optie is slowMo. Hiermee wordt de uitvoering van de test tussen elke actie onderbroken:

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

Tests uitvoeren

Er zijn twee ingebouwde manieren om tests in dit project uit te voeren:

npm-opdracht

npm run test

Test Explorer

De Test Explorer-extensie voor VS Code (bijvoorbeeld Mocha Test Explorer) heeft een handige gebruikersinterface en een optie om automatisch tests uit te voeren bij elke wijziging van de broncode:

Schermopname van Visual Studio Code Test Explorer

Volgende stappen

Meer informatie over de ontwikkelaarsportal: