qunit-assert-classes

    1.0.2 • Public • Published

    Build Status NPM version

    QUnit Classes assertion plugin

    A set of assertions for checking thats an element has ( or does not have ) any number of classes. The check is order independent and gives a diff of the expected classes. Accepts either a single Dom node or a jQuery object containing exactly one element.

    NOTE: While this accepts jQuery objects it has no dependency on jQuery

    Usage

    assert.hasClasses( element, classes [, message] );
    assert.lacksClasses( element, classes [, message] );
     
    assert.hasClassesStrict( element, classes [, message] );
     
    assert.hasClassRegex( element, RexExp [, message] );
    assert.lacksClassRegex( element, RexExp [, message] );
     
    assert.hasClassStart( element, start [, message] );
    assert.lacksClassStart( element, start [, message] );
     
    assert.hasClassPartial( element, partial [, message] );
    assert.lacksClassPartial( element, partial [, message] );
     
    assert.lacksAllClasses( element [, message] );
    assert.hasSomeClass( element [, message] );
     

    Where:

    • element: a jQuery object or DOM Element ( must be a single element, collections not allowed )
    • classes: a space seperated string of classes
    • message: a custom message to replace default message of "Element must (not) have classes"
    • RegExp: a valid regular expression to be used to match against individual class names
    • start: a string that should match the begining of any class
    • partial: a string of a partial class name that should be matched against any of the classes

    Examples

    Example 1: hasClasses with DOM Element

    <div class="class1 class2"></div>
    QUnit.test('Example hasClasses unit test', function( assert ) {
      var element = document.getElementById( "test" );
     
      assert.hasClasses( element, "class1 class2" ); // Passes
      assert.hasClasses( element, "class3", "custom message" ); // Fails
    });

    Example 2: lacksClasses with jQuery object

    <div class="class1 class2"></div>
    QUnit.test('Example lacksClasses unit test', function( assert ) {
      var element = $( "#test" );
     
      assert.lacksClasses( element, "missing-class" ); // Passes
      assert.lacksClasses( element, "class1 missing-class-2", "custom message" ); // Fails
    });

    Example 3: hasClassesStrict

    <div class="class1 class2"></div>
    QUnit.test('Example hasClassesStrict unit test', function( assert ) {
      var element = document.getElementById( "test" );
     
      assert.hasClassesStrict( element, "class1 class2" ); // Passes
      assert.hasClassesStrict( element, "class1", "custom message" ); // Fails
    });

    Example 4: hasClassRegex

    <div class="class1 class2"></div>
    QUnit.test('Example hasClassesRegex unit test', function( assert ) {
      var element = document.getElementById( "test" );
     
      assert.hasClassRegex( element, /^(clas)([a-z]){1}([0-9])$/ ); // Passes
     
      // Fails this only matches against individual classes
      assert.hasClassRegex( element, /^(([a-z]){5}([0-9]|[0-9]\s)){2}$/, "custom message" );
    });

    Example 5: lacksClassRegex

    <div class="class1 class2"></div>
    QUnit.test('Example hasClassesRegex unit test', function( assert ) {
      var element = document.getElementById( "test" );
     
      assert.lacksClassRegex( element, /boom/ ); // Passes
      assert.lacksClassRegex( element, /^(class)/, "custom message" ); // Fails
    });

    Example 6: hasClassStart

    <div class="class1 class2"></div>
    QUnit.test('Example hasClassStart unit test', function( assert ) {
      var element = document.getElementById( "test" );
     
      assert.hasClassStart( element, "cla" ); // Passes
      assert.hasClassStart( element, "lass", "custom message" ); // Fails
    });

    Example 7: lacksClassStart

    <div class="class1 class2"></div>
    QUnit.test('Example lacksClassStart unit test', function( assert ) {
      var element = document.getElementById( "test" );
     
      assert.lacksClassStart( element, "foo" ); // Passes
      assert.lacksClassStart( element, "cla", "custom message" ); // Fails
    });

    Example 8: hasClassPartial

    <div class="class1 class2"></div>
    QUnit.test('Example hasClassPartial unit test', function( assert ) {
      var element = document.getElementById( "test" );
     
      assert.hasClassPartial( element, "lass" ); // Passes
      assert.hasClassPartial( element, "foo", "custom message" ); // Fails
    });

    Example 9: lacksClassPartial

    <div class="class1 class2"></div>
    QUnit.test('Example lacksClassStart unit test', function( assert ) {
      var element = document.getElementById( "test" );
     
      assert.lacksClassPartial( element, "foo" ); // Passes
      assert.lacksClassPartial( element, "lass", "custom message" ); // Fails
    });

    Example 10: lacksAllClasses - checks to make sure an element contains no classes

    <div class=""></div>
    QUnit.test('Example lacksAllClasses unit test', function( assert ) {
      var element = document.getElementById( "test" );
     
      assert.lacksAllClasses( element ); // Passes
      assert.lacksAllClasses( element, "custom message" ); // Fails
    });

    Example 10: hasSomeClass - checks to make sure an element has some class does not matter what

    <div class="class1 class2"></div>
    QUnit.test('Example hasSomeClass unit test', function( assert ) {
      var element = document.getElementById( "test" );
     
      assert.hasSomeClass( element ); // Passes
      assert.hasSomeClass( element, "custom message" ); // Fails
    });

    Install

    npm i qunit-assert-classes

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • avatar