Kendi bünyesinde barındırılan geliştirici portalını test et

ŞUNLAR IÇIN GEÇERLIDIR: Geliştirici | Temel | Temel v2 | Standart | Standart v2 | Premium | Premium v2

Bu makalede, şirket içinde barındırılan portalınız için birim testlerinin ve uçtan uca testlerin nasıl ayarlanacağı açıklanmaktadır.

Birim testleri oluşturma

Birim testi, küçük işlev parçalarını doğrulamaya yönelik bir yaklaşımdır. Birim testi, uygulamanın diğer bölümlerinden bağımsız olarak çalışır.

Örnek senaryo

Bu senaryoda, bir parola girişi denetimini test ediyorsun. Yalnızca en az şu parolaları içeren parolaları kabul eder:

• Bir harf
• Bir numara
• Bir özel karakter

Bu gereksinimleri doğrulama testi aşağıdaki gibi görünür:

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

Proje yapısı

Birim testini doğrulanan bileşenin yanında tutmak yaygın bir durumdır.

component.ts
component.spec.ts

Sahte HTTP istekleri

Bir bileşenin HTTP istekleri göndermesini beklediğiniz durumlar vardır. Bileşen farklı türde yanıtlara düzgün tepki vermelidir. Belirli HTTP yanıtlarının benzetimini yapmak için kullanın MockHttpClient. Projenin diğer birçok bileşeni tarafından kullanılan arabirimi uygular HttpClient .

const httpClient = new MockHttpClient();

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

Uçtan uca testler oluşturma

Uçtan uca test, kullanıcının gerçekleştirmesini beklediğiniz tam adımları uygulayan belirli bir kullanıcı senaryoyu çalıştırır. Azure API Management geliştirici portalı gibi bir web uygulamasında kullanıcı içerikte gezinerek belirli sonuçlar elde etmek için seçenekleri seçer.

Kullanıcı gezintisini çoğaltmak için Puppeteer gibi tarayıcı işleme yardımcı kitaplıklarını kullanabilirsiniz. Kullanıcı eylemlerinin simülasyonunu yapmanızı ve varsayılan senaryoları otomatikleştirmenizi sağlar. Puppeteer ayrıca testin herhangi bir aşamasında sayfaların veya bileşenlerin ekran görüntülerini de otomatik olarak alır. Sapmaları ve olası regresyonları yakalamak için bunları daha sonra önceki sonuçlarla karşılaştırın.

Örnek senaryo

Bu senaryoda, bir kullanıcı oturum açma akışını doğrulamanız gerekir. Bu senaryo için aşağıdaki adımlar gerekir:

1. Tarayıcıyı açın ve oturum açma sayfasına gidin.
2. E-posta adresini girin.
3. Parolayı girin.
4. Oturum aç'ı seçin.
5. Kullanıcının Giriş sayfasına yönlendirildiğini doğrulayın.
6. Sayfanın Profil menü öğesini içerdiğini doğrulayın. Başarıyla oturum açtığınız olası göstergelerden biridir.

Testi otomatik olarak çalıştırmak için tam olarak aynı adımlarla bir betik oluşturun:

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

UI bileşen eşlemeleri

Kullanıcı akışları genellikle aynı sayfalardan veya bileşenlerden geçer. Her sayfada bulunan ana web sitesi menüsü iyi bir örnektir.

Her test için aynı seçicilerin yapılandırılmasını ve güncelleştirilmesini önlemek için bir UI bileşeni eşlemesi oluşturun. Örneğin, önceki örnekteki 2 ile 6 arasında adımları yalnızca iki satırla değiştirebilirsiniz:

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

Test yapılandırması

Bazı senaryolar için önceden oluşturulmuş veriler veya yapılandırma gerekir. Örneğin, sosyal medya hesaplarıyla kullanıcı oturum açma adımlarını otomatikleştirmeniz gerekebilir. Bu verileri hızlı veya kolay bir şekilde oluşturmak zordur.

Bu amaçla, test senaryonuza özel bir yapılandırma dosyası ekleyebilirsiniz. Test betikleri dosyadan gerekli verileri alabilir. Derleme ve test işlem hattına bağlı olarak, testler belirtilmiş bir güvenli depodan gizli bilgileri alabilir.

Projenizin validate.config.json klasöründe depolanacak bir src örneği burada verilmiştir.

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

Başsız ve normal testler

Chrome veya Microsoft Edge gibi modern tarayıcılar, otomasyonu hem başsız modda hem de normal modda çalıştırmanıza olanak tanır. Tarayıcı, başsız modda grafik kullanıcı arabirimi olmadan çalışır. Yine de aynı sayfayı ve Belge Nesne Modeli (DOM) işlemelerini yürütür. Tarayıcı kullanıcı arabirimi genellikle teslim işlem hatlarında gerekli değildir. Bu durumda, testleri başsız modda çalıştırmak harika bir seçenektir.

Bir test betiği geliştirirken, tarayıcıda tam olarak neler olduğunu görmek yararlı olur. Normal modu kullanmak için iyi bir zaman.

Modlar arasında geçiş yapmak için dosyadaki headless seçenek constants.ts seçeneğini değiştirin. tests Projenizdeki klasörde bulunur:

export const LaunchOptions = {
    headless: false
};

Bir diğer kullanışlı seçenek de ' dir slowMo. Testin yürütülmesini her eylem arasında duraklatır:

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

Testleri çalıştırma

Bu projede testleri çalıştırmanın iki yerleşik yolu vardır:

npm komutu

npm run test

Test Gezgini

VS Code için Test Gezgini uzantısı kullanın. Örneğin , Mocha Test Gezgini'nin kullanışlı bir kullanıcı arabirimi ve kaynak kodun her değişikliğinde testleri otomatik olarak çalıştırma seçeneği vardır:

İlgili içerik

Geliştirici portalı hakkında daha fazla bilgi edinin:

• Azure API Management geliştirici portalına genel bakış
• Geliştirici portalını kendi kendine barındırma