Stycznia | 2014 | Paul Galvin SharePoint przestrzeni

Intro

Już badają jednostki badań i sprawdzić zasięg JavaScript jak działa na nowych aplikacji SharePoint dla programu SharePoint online w biurze 365 Apartament. Ścieżki oczywiste badań doprowadziły mnie do Qunit.js i zaraz po tym, do Blanket.js.

QUnit pozwól mi się testy jednostkowe i zgrupuj je do modułów. Moduł jest tylko prostym sposobem organizowania związanych z testów. (Nie jestem pewien, że używam go zgodnie z przeznaczeniem, ale to działa dla mnie do tej pory z małych zestaw testów, które do tej pory zostały zdefiniowane).

Blanket.js integruje się z Qunit i pokaże mi rzeczywistej linii JavaScript, które były- i co ważniejsze – nie zostały rzeczywiście wykonane podczas uruchamiania testów. To jest "zasięgu"-linie, które wykonywane są objęte badanie, podczas gdy inni nie są.

Tworzenie dobrych testów i oglądania zasięgu, możemy zmniejszyć ryzyko, że nasz kod ma ukryte wady. Dobre czasy.

Qunit

Zakładając, że Visual Studio projektu ustawić, Zacznij Pobieranie pakietu z JavaScript http://qunitjs.com. Dodaj odpowiednie CSS i JavaScript do rozwiązania. Kopalnia wygląda jak ten:

Rysunek 1

Jak widać, Był przy pomocy 1.13.0 w tym czasie napisałem ten post blog. Nie zapomnij, aby pobrać i dodać plik CSS.

Że z drogi, następnym krokiem jest stworzenie pewnego rodzaju badania przewodów i odwołać Qunit bitów. Jestem testowania kilka funkcji w pliku skryptu o nazwie "QuizUtil.js", więc stworzyłem stronę HTML o nazwie "QuizUtil_test.html", jak pokazano:

Rysunek 2

Oto kod:

<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/ 1999/xhtml">
<głowa>
    <Tytuł>QuizUtil test z Qunit</Tytuł>
    <link rel= "arkusz stylów" href="../CSS/qunit-1.13.0.css" />
    <skrypt Typ= text/javascript"" src="QuizUtil.js" danych okładka></skrypt>
    <skrypt typ ="text/javascript" src ="qunit-1.13.0.js"></skrypt>
    <skrypt typ ="text/javascript" src ="blanket.min.js"></skrypt>

    <skrypt>
        moduł("getIDFromLookup");
        badania("QuizUtil getIDFromLookupField", Funkcja () {
            var goodValue = "1;#Paul Galvin";

            równe(getIDFromLookupField(goodValue) + 1, 2), "Identyfikator [" + goodValue + "] + 1 powinno być 2";
            równe(getIDFromLookupField(niezdefiniowana), niezdefiniowana, "Niezdefiniowany argumentów wejściowych powinien zwracać wynik niezdefiniowany.");
            równe(getIDFromLookupField(""), niezdefiniowana, "Pustych argumentów wejściowych powinien zwracać wartość undefined.");
            równe(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), niezdefiniowana,"Należy zawsze zwraca wynik kabriolet całkowitą");
            równe(getIDFromLookupField("2;#Niektóre inne osoby"), "2", "Sprawdzanie [2;#Niektóre inne osoby].");
            równe(getIDFromLookupField("9834524;#długa wartość"), "9834524", "Dużą wartość badania.");
            notEqual(getIDFromLookupField("5;#ktoś", 6), 6, "Badania notEqual (5 nie jest równa 6 Ten przykładowy: [5;#ktoś]");

        });

        moduł("htmlEscape");
        badania("QuizUtil htmlEscape()", Funkcja () {
            równe(htmlEscape("<"), "&lt;", "Ucieczki mniej niż operator ('<')");
            równe(htmlEscape("<DIV class =  "someclass">Jakiś tekst</DIV>"), "&lt;DIV class =&quot;someclass&quot;&gt;Jakiś tekst&lt;/DIV&gt;", "Bardziej złożonych testów ciąg.");
        });

        moduł("getDateAsCaml");
        badania("QuizUtil getDateAsCaml()", Funkcja () {
            równe(getDateAsCaml(Nowy Data("12/31/2013")), "2013-12-31T:00:00:00", "Zakodowanego Data badania: [12/31/2013]");
            równe(getDateAsCaml(Nowy Data("01/05/2014")), "2014-01-05T:00:00:00", "Zakodowanego Data badania: [01/05/2014]");
            równe(getDateAsCaml(Nowy Data("01/31/2014")), "2014-01-31T:00:00:00", "Zakodowanego Data badania: [01/31/2014]");
            równe(getTodayAsCaml(), getDateAsCaml(Nowy Data()), "getTodayAsCaml() powinna być równa getDateAsCaml(nowy termin())");
            równe(getDateAsCaml("wartość bzdury"), niezdefiniowana, "Postarać się daty wartość bzdury.");
            równe(getDateAsCaml(niezdefiniowana), niezdefiniowana, "Staramy się od dnia [niezdefiniowana] Data.");
        });

        moduł("getParameterByName");
        badania("QuizUtil getParameterByName (ciąg kwerendy)", Funkcja () {
            równe(getParameterByName(niezdefiniowana), niezdefiniowana, "Staramy się niezdefiniowanych parametrów należy powrót niezdefiniowany.");
            równe(getParameterByName("nie istnieje"), niezdefiniowana, "Postarać się wartość parametru, gdy wiemy, że parametr nie istnieje.");

        });

        moduł("Ciasteczka");
        badania("QuizUtil różne funkcje plików cookie.", Funkcja () {
            równe(setCookie("badanie", "1", -1), getCookieValue("badanie"), "Pobierz plik cookie, ustawiłem powinno działać.");
            równe(setCookie("anycookie", "1", -1), PRAWDA, "Ustawienie prawidłowe gotowanie powinno zwraca 'true'.");
            równe(setCookie('Nazwa ciasteczka szalony !@#$%"%\^&*(()?/><.,", "1", -1), PRAWDA, "Ustawienia nazwy zły cookie należy zwrócić 'false'.");
            równe(setCookie(niezdefiniowana, "1", -1), niezdefiniowana, "Przekazywanie niezdefiniowane jako Nazwa ciasteczka.");
            równe(getCookieValue("nie istnieje"), "", "Cookie nie istnieją badania.");
        });

    </skrypt>
</głowa>
<organ>
    <DIV Identyfikator= "qunit"></DIV>
    <DIV Identyfikator= "qunit uchwyt"></DIV>

</organ>
</HTML>

Tu są osobisty rzeczy dzieje się tutaj:

Odwoływanie się do mojego kodu (QuizUtil.js)
Odwoływanie się do Qunity.js
Określanie niektórych modułów (getIDFromLookup, Ciasteczka, i inni)
Wprowadzenie do <DIV> których identyfikator jest "qunit".

Następnie, Tylko podciągnąć tej strony i masz cos takiego:

Rysunek 3

Jeśli spojrzeć na górze, masz kilka możliwości, dwa z nich są ciekawe:

Ukryj przeszedł testy: Dość oczywiste. Pomoże Ci się w oczy po prostu zobacz obszary problemowe i nie dużo bałaganu.
Moduł: (spadek w dół): Będzie to filtr testy do tylko tych grup testów, które chcesz.

Co do testów, siebie-kilka uwag:

Jest rzeczą oczywistą, że należy napisać kod, tak, że jest to sprawdzalne w pierwszej kolejności. Za pomocą narzędzia mogą pomóc egzekwowania tej dyscypliny. Na przykład, Miał funkcję o nazwie "getTodayAsCaml()”. To nie jest bardzo testować, ponieważ zajmuje żadnego argumentu wejściowego i przetestować go na rzecz równości, musimy stale aktualizować kod testu w celu odzwierciedlenia bieżącej daty. Mi przepisano go przez dodanie danych parametru wejściowego, a następnie przekazywanie bieżącej daty, kiedy chcę daty w formacie CAML.
Ramach Qunit dokumenty własne testy i wydaje się dość solidne. To można zrobić proste rzeczy, jak badania na rzecz równości i posiada również wsparcie dla połączenia stylu ajax (zarówno "prawdziwe" lub wyśmiewali, przy pomocy twój ulubieniec mocker).
Przechodzi proces również zmusza do myślenia poprzez krawędzi przypadkach – co się dzieje z "nieokreślone" lub wartość null jest przekazywana do funkcja. To sprawia, że martwe proste do testowania tych scenariuszy się. Dobre rzeczy.

Relacje z Blanket.js

Blanket.js uzupełnia Qunit przez śledzenie rzeczywistej linii kodu, które są wykonać w trakcie prowadzenia testów. Integruje prawo do Qunit więc choć to zupełnie oddzielny aplikacja, ładnie gra – to naprawdę wygląda to jeden app bez szwu.

To jest blanket.js w akcji:

Rysunek 4

Rysunek 5

(Rzeczywiście trzeba kliknąć na pole "Włącz zasięgu" u góry [patrz rysunek 3] Aby to umożliwić.)

Wyróżnione wiersze na rysunku 5 nie zostały wykonane przez jednego z moich testów, więc trzeba opracować test, który powoduje je wykonać, jeśli chcę pełne pokrycie.

Dostać blanket.js pracy przez następujące kroki:

Pobierz za darmo z http://blanketjs.org/.
Dodaj to do swojego projektu
Aktualizacja strony wykorzystać badania (QuizUtil_test.html w moim przypadku) w następujący sposób:
1. Kod referencyjny
2. Udekoruj swój <skrypt> odwołanie takiego:

    <skrypt Typ= text/javascript"" src="QuizUtil.js" danych okładka></skrypt>

Blanket.js wybiera się atrybut "dane okładka" i ma swoją magię. Haki do Qunit, aktualizacje interfejsu dodać opcję "Włącz zasięgu" i voila!

Podsumowanie (TL; DR)

Użyj Qunit do napisania swojej sprawy.

Pobierz za darmo to
Dodaj to do swojego projektu
Napisz stronę testową uprząż
Tworzenie testów
- Refaktoringu część kodu należy testować
- Bądź kreatywny! Myślę, że Crazy, możliwe scenariusze i tak je przetestować.

Użyj blanket.js do zapewnienia pokrycia

Upewnij się, że działa Qunit
Pobierz za darmo blanket.js i dodać go do projektu
Dodać go do uprzęży Strona testowa:
- Dodaj odwołanie do blanket.js
- Dodaj atrybut "dane okładka" do swojej <skrypt> Tag
Uruchomienia testów Qunit.

Nigdy nie zrobił to przed i miał pewne elementarne rzeczy działa w kilka godzin.

Szczęśliwy badania!

</koniec>

Subskrybowanie mój blog.

Follow me on Twitter wiek na http://www.twitter.com/pagalvin

Paul Galvin SharePoint przestrzeni

miesięczne archiwum: Stycznia 2014

Biedny człowiek jest buforowanie w JavaScript

Jak: Konfigurowanie zakresu badań i testów jednostkowych z QUnit.js i Blanket.js dla biura 365 Aplikacji SharePoint

Intro

Qunit

Relacje z Blanket.js

Podsumowanie (TL; DR)