top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Discuss About Qunit?

–1 vote
283 views

What is Qunit?

QUnit is a powerful, easy-to-use, JavaScript unit testing framework. It's used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code (and even capable of testing JavaScript code on the server-side).

Node Install

npm install -g qunitjs

Main Methods:

  • module
  • only
  • skip
  • start
  • test
  • todo

Example:

QUnit.module( "group a" );
QUnit.test( "a basic test example", function( assert ) {
  assert.ok( true, "this test is fine" );
});
QUnit.test( "a basic test example 2", function( assert ) {
  assert.ok( true, "this test is fine" );
});

QUnit.module( "group b" );
QUnit.test( "a basic test example 3", function( assert ) {
  assert.ok( true, "this test is fine" );
});
QUnit.test( "a basic test example 4", function( assert ) {
  assert.ok( true, "this test is fine" );
});

All tests inside a module callback function will be grouped into that module. The test names will all be preceded by the module name in the test results. Other modules can be nested inside this callback function, where their tests’ names will be labeled by their names recursively prefixed by their parent modules.

Video for Qunit

posted Apr 26, 2017 by Manish Tiwari

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

What is Angular App Exception Handling?

The AngularJS $exceptionHandler service allows you to catch and handle unanticipated JavaScript errors in a meaningful way.

Example:
app.factory('$exceptionHandler',function($log,ErrorService) {
    return function(exception,cause) {
        if(console) {
        }
        
    }
    ErrorService.send(exception,cause);
});

Any uncaught exception in angular expressions is delegated to this service. The default implementation simply delegates to $log.error which logs it into the browser console. In unit tests, if angular-mocks.js is loaded, this service is overridden by mock $exceptionHandler which aids in testing.

$exceptionHandler is very useful for sending errors to third party error logging services or helpdesk applications. Errors trapped inside of event callbacks are not propagated to this handler, but can manually be relayed to this handler by calling $exceptionHandler(e) from within a try catch block.

Video Tutorial for handling Exception Handling

https://www.youtube.com/watch?v=9xdIvUD2Jug

READ MORE

Providers
A provider is the most sophisticated method of all the providers. It allows you to have a complex creation function and configuration options. A provider is actually a configurable factory.

var app = angular.module('myModule',[]);

app.provider("myProvider", function() {
    this.value = "My Value";

    this.setValue = function(newValue) {
        this.value = newValue;
    };

    this.$get = function() {
        return this.value;
    };
});

app.config(function(myProviderProvider) { // ADDED config section
    // Note the extra "Provider" suffix
    myProviderProvider.setValue("New Value");
});

Services

A service is an injectable constructor. If you want you can specify the dependencies that you need in the function. A service is a singleton and will only be created once by AngularJS. 

app.service("myProvider", function() { 
    this.getValue = function() {
        return "My Value";
    };
});

 

Factories
A factory is an injectable function. A factory is a lot like a service in the sense that it is a singleton and dependencies can be specified in the function. The difference between a factory and a service is that a factory injects a plain function so AngularJS will call the function and a service injects a constructor.

app.factory("myProvider", function() { 
    return "My Value";
});


Value
A value is nothing more than a simple injectable value. The value can be a string, number but also a function.

var app = angular.module('myModule',[]);

app.value("Value1", "First Value");
app.value("Value2", "Second  Value");


Constants

A constant can be injected everywhere. The value of a constant can never be changed.


var app = angular.module('myModule',[]);


app.constant("Constant1", "First Constant Value");
app.constant("Constant2", "Second Constant Value");

Video Tutorial

https://www.youtube.com/watch?v=jpT8vn5AhpY

READ MORE

What is Content Security Policy?

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.

The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code to your site.

Configuring Content Security Policy involves adding the Content-Security-Policy HTTP header to a web page and giving it values to control resources the user agent is allowed to load for that page. 

For example, a page that uploads and displays images could allow images from anywhere, but restrict a form action to a specific endpoint. A properly designed Content Security Policy helps protect a page against a cross site scripting attack. 

Content-Security-Policy: <policy-directive>; <policy-directive>

Fetch Directives 
Fetch directives control locations from which certain resource types may be loaded.

Directive Lists

  • child-src
  • connect-src
  • default-src
  • font-src
  • frame-src
  • img-src
  • manifest-src
  • media-src
  • object-src
  • script-src
  • style-src
  • worker-src

Video for Content Security Policy

https://www.youtube.com/watch?v=JbfNWg6JS4U

READ MORE

What is Polymer.Js?

Polymer.js is a JavaScript library created by Google that allows reusing the HTML elements for building applications with components. Polymer is an open-source JavaScript library developed by Google developers

Polymer provides a number of features over vanilla Web Components:

  • Simplified way of creating custom elements
  • Both One-way and Two-way data binding
  • Computed properties
  • Conditional and repeat templates
  • Gesture events

Polymer.js places a hefty set of requirements on the browser, relying on a number of technologies that are in still in the process of standardization (by W3C) and are not yet present in today’s browsers. 

Examples include the shadow dom, template elements, custom elements, HTML imports, mutation observers, model-driven views, pointer events, and web animations. These are marvelous technologies, but at least as of now, that are yet-to-come to modern browsers.

The Polymer strategy is to have front-end developers leverage these leading-edge, still-to-come, browser-based technologies, which are currently in the process of standardization (by W3C), as they become available. 

The recommended polyfills are designed in such a way that (at least theoretically) will be seamless to replace once the native browser versions of these capabilities become available.

Video for Polymer.Js
https://www.youtube.com/watch?v=tvafAyxkuVk

READ MORE

What is Jest?

Jest is an open JavaScript testing library from Facebook. Its slogan is "Delightful JavaScript Testing". While Jest can be used to test any JavaScript library, it shines when it comes to React and React Native. 

Main Benefits

     1) Developer Ready

             Complete and ready to set-up JavaScript testing solution. Works out of the box for any React project.

      2) Instant Feedback 

                Fast interactive watch mode runs only test files related to changed files and is optimized to give signal quickly.

      3) Snapshot Testing

               Capture snapshots of React trees or other serializable values to simplify testing and to analyze how state changes over time.

Jest is used by Facebook to test all JavaScript code including React applications. One of Jest's philosophies is to provide an integrated "zero-configuration" experience. 

NPM and Yarn Command for Installation.

npm install --save-dev jest

yarn add --dev jest

Video for JEST Library

https://www.youtube.com/watch?v=7r4xVDI2vho

READ MORE

What is WinJs?

The Windows Library for JavaScript (abbreviated as WinJS) is an open source JavaScript library developed by Microsoft.

WinJS started as a technology that was specific to Windows Store apps, but has evolved to aim at working in any Web browser. WinJS provides helpers that facilitate the development of Windows Store apps using HTML5 and JavaScript. 

The library consists of modules and functions that expose the Windows Runtime in a way that is consistent with JavaScript coding conventions. WinJS makes it possible to add Windows UI controls in HTML. This is accompanied by support for data binding and a template engine.

Other JavaScript frameworks, such as JQuery, can work side-by-side with WinJS. The library comes with additional declaration files for a rich developer experience using TypeScript, a strict superset of JavaScript with annotations. 

TypeScript enables for code completion and refactoring while maintaining compatibility with JavaScript.

WinJS is a set of JavaScript toolkits that allow developers to build applications using HTML/JS/CSS technology forged with the following principles in mind:

Provide developers with a distinctive set of UI controls with high polish and performance with fundamental support for touch, mouse, keyboard, and accessibility

Provide developers with a cohesive set of components and utilities to build the scaffolding and infrastructure of their applications.

Steps to install

  1. git clone https://github.com/winjs/winjs.git
  2. cd winjs
  3. npm install -g grunt-cli
  4. npm install
  5. grunt

Video for WinJs 

https://www.youtube.com/watch?v=7I0R1yA7mrA

 

READ MORE

What is DevExterme.Js?

A Feature-Complete HTML5 JavaScript Data Grid Widget. The blazing-fast DevExtreme HTML5 Data Grid is a feature-rich data shaping and editing client-side widget which allows your end users to easily manage information and display it on-screen as business requirements dictate.

DevExtreme can be used with different technologies and supports deep integration with client-side libraries. 

They are

JQuery
Angular
React
Asp.Net MVC
Knockout
Angular.Js

Getting Started
After installation, you can add a widget to your app. Here's a simple button example:

<div id="buttonContainer"></div>
var element = document.getElementById('buttonContainer');
var button = new DevExpress.ui.dxButton(element, { text: 'Hello World!' });

Video for DevExterme.JS?

https://www.youtube.com/watch?v=KJpS2Iwrrg8​

READ MORE
...