Javascript QUnit test

Javascript QUnit test

The following small article is about the JQuery plug-in “jquery.backtotop.my”. This JQuery Plugin I created and tested in the year 2014. The Project is the result from three days working with the Grunt NodeJS Taskrunner.

Note

The plugin needs a redesign. However, the priorities are currently somewhere else. With today’s knowledge the tests would probably get better.

Screenshot



I installed a demo site on keepitnative.ch, where the plugin can be tested on mobile.

Idea

The JS to be tested is to be as simple as possible for a first experience with Javascript Unit Testing, in order to be able to concentrate well on JS Unit Testing.

Intro

The functionality of the plugin is quite simple. The php.net website, for example, uses a «Back to Top» button. When the user clicks on the «Back to Top» icon, instead of immediately jumping to the content. The Website smoothly jumps with a little speed and with an ease-out effect to the beginning of the web page. Scrolled until the target, an HTML anchor, is reached. I have the ease-out effect at the end of the scrolling, was omitted from my version, because then JQuery Ui or the JQuery Easing plugin would be required. That would be a little too much of the good. But we will see. The plugin can be tested with QUnit per Grunt command. The CSS styles can be changed and easily compiled with Grunt by LESS in CSS.

Requirements

  • A scroll button with “Glyphicons” icons
  • Button with FadeIn and FadeOut, if the web page text is above the screen height, the button is displayed.
  • After pressing the button, a linear scroll follows the position of the target HTML anchor.
    Tools

Tools

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

Books

You can view the program source on JQuery Backtotop.

The Article «Javascript QUnit test», is not an experience report, nor a tutorial on QUnit. The article is intended as an exercise retrospective.