Javascript QUnit test

Javascript QUnit test

Der folgende kleine Artikel über das von mir erstellte und gestestete JQuery-Plugin «jquery.backtotop.my», ist das Ergebnis aus dem Jahr 2014, von drei Tagen Arbeit mit dem Grunt NodeJS Taskrunner.

Der Artikel «Javascript QUnit test», ist kein Erfahrungsbericht, noch ein Tutorial zu QUnit. Der Artikel ist als Übungs-Rückblick gedacht.

Hinweis

Der Plugin braucht ein Redesign. Jedoch sind die Prioritäten zur Zeit woanders. Die Tests würde ich mit heutigem Wissen besser hinbekommen.

Screenshot



Ich habe eine Demo-Webseite auf keepitnative.ch installiert, dort kann der Plugin auf Mobile getestet werden.

Idee

Das zu testende JS soll für eine erste Erfahrung mit Javascript Unit-Testing möglichst simpel sein, um sich gut auf das JS Unit-Testing konzentrieren zu können.

Einleitung

Die Funktionalität des Plugins ist ziemlich simpel. Die Website php.net zum Beispiel verwendet einen «Back to Top» Knopf. Mittels Javascript ScrollTo wird an den Beginn der php.net Webseite gescrolled. Wenn der Benutzer auf das «Back to Top»-Symbol klickt, dann wird anstatt sofort zu den Inhalten zu springen, reibungslos mit ein wenig Geschwindigkeit und mit einem Ease-out Effekt zum Anfang der Webseite gescrolled. Gescrolled wird bis das Ziel, ein HTML-Anker, erreicht ist. Ich habe den Ease-Out Effekt zum Schluss des Scrollens, wurde bei meiner Version weggelassen, weil dann JQuery Ui oder der JQuery-Easing-Plugin erforderlich sein würde. Das wäre ein wenig zu viel des Guten einen weiteren JQuery-Plugin zu verwenden. Aber wir werden sehen. Das Plugin kann mit QUnit per Grunt Befehl getestet werden, die CSS-Stile können geändert und leicht mit Grunt von LESS in CSS kompiliert werden.

Anforderungen

  • Ein Scroll-Knopf mit «Glyphicons»-Iconfonts
  • Schaltfläche mit FadeIn und FadeOut, wenn der Webseiten-Text über die Bildschirm-Höhe reicht wird der Knopf angezeigt.
  • Nach dem Drücken des Knopfes folgt ein linearer Scroll zur Position des Ziel-HTML-Ankers.

Werkzeuge

  • Grunt und NodeJS
  • NPM JQuery Init Scaffolding
  • Twitter Bootstrap 3
  • QUnit
  • JSHint
  • lessc
  • concat
  • Kopie für Iconfonts dist

Bücher

Sie können die Programm-Quelle auf JQuery Backtotop anschauen.

Der Artikel «Javascript QUnit test», ist kein Erfahrungsbericht, noch ein Tutorial zu QUnit. Der Artikel ist als Übungs-Rückblick gedacht.