• passes: 35
  • failures: 0
  • duration: 0.16s
  • chai-jq

    • test meta

      • name

        • shows 'Object' with no element name7ms ‣

          expect(function () {
            expect($("<div />")).to.have.$val("a");
          }).to.throw("expected [object Object] to have val 'a' " +
                      "but found ''");
        • works with element id3ms ‣

          expect(function () {
            expect($("<div id=\"foo\" />")).to.have.$val("a");
          }).to.throw("expected '#foo' to have val 'a' but found ''");
        • works with element classes6ms ‣

          expect(function () {
            expect($("<div class=\"foo\" />")).to.have.$val("a");
          }).to.throw("expected '.foo' to have val 'a' but found ''");
          
          expect(function () {
            expect($("<div class=\"foo bar\" />")).to.have.$val("a");
          }).to.throw("expected '.foo.bar' to have val 'a' but found ''");
        • works with mixed id's and classes4ms ‣

          expect(function () {
            expect($("<div id=\"foo\" class=\"a b c\" />")).to.have.$val("a");
          }).to.throw("expected '#foo.a.b.c' to have val 'a' but found ''");
          
          expect(function () {
            expect($("<div class=\"foo bar\" />")).to.have.$val("a");
          }).to.throw("expected '.foo.bar' to have val 'a' but found ''");
    • $val

      • works with no val3ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture)
          .to.have.$val("").and
          .to.not.have.$val("bar");
        
        expect(function () {
          expect($fixture).to.have.$val("foo");
        }).to.throw("expected '#test' to have val 'foo' but found ''");
      • works with no matched element4ms ‣

        // NOTE: On ie9/win7 in Sauce Labs, the failure message is an
        // `Unspecified error.` if an empty selector is not attached /
        // searched from the DOM. So `var $fixture = $("#NO_MATCH");` would
        // cause this. However, `.find` from something attached to DOM works
        // like normal, hence the selector below.
        var $fixture = this.$fixture.find("#NO_MATCH");
        
        expect($fixture)
          .to.have.$val(undefined).and
          .to.not.have.$val("bar");
        
        expect(function () {
          expect($fixture).to.have.$val("foo");
        }).to.throw(
          "expected <EMPTY OBJECT> to have val 'foo' but found 'undefined'");
      • can override error messages3ms ‣

        var $fixture = this.$fixture;
        
        expect(function () {
          expect($fixture).to.have.$val("foo", "MY ERROR MSG");
        }).to.throw("MY ERROR MSG");
      • matches basic vals2ms ‣

        var $fixture = this.$fixture;
        
        $fixture.val("MY_VALUE");
        
        expect($fixture)
          .to.have.$val("MY_VALUE").and
          .to.not.have.$val("bar");
        
        expect(function () {
          expect($fixture).to.have.$val("a");
        }).to.throw("expected '#test' to have val 'a' but found 'MY_VALUE'");
        
        expect($("<input value='foo' />"))
          .to.have.$val("foo").and
          .to.have.$val(/^foo/);
      • matches regexes with basic val3ms ‣

        var $fixture = this.$fixture;
        
        $fixture.val("RE_VAL");
        
        expect($fixture)
          .to.have.$val(/RE_VAL/).and
          .to.have.$val(/re_val/i).and
          .to.have.$val(/.*/).and
          .to.have.$val(/./).and
          .to.have.$val(/^R/).and
          .to.have.$val(/VAL$/);
        
        expect($fixture)
          .not
            .to.have.$val("bar").and
            .to.have.$val(/re_val/).and
            .to.have.$val(/$E/).and
            .to.have.$val(/A^/);
        
        expect(function () {
          expect($fixture).to.have.$val("a");
        }).to.throw("expected '#test' to have val 'a' but found 'RE_VAL'");
    • $class

      • works with no class2ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture)
          .to.have.$class("").and
          .to.not.have.$class("bar");
        
        expect(function () {
          expect($fixture).to.have.$class("foo");
        }).to.throw("expected '#test' to have class 'foo' but found ''");
      • matches single classes in elements2ms ‣

        var $fixture = this.$fixture;
        
        $fixture.prop("class", "MY_CLASS");
        
        expect($fixture)
          .to.have.$class("MY_CLASS").and
          .to.not.have.$val("bar");
        
        expect(function () {
          expect($fixture).to.have.$class("a");
        }).to.throw("expected '#test.MY_CLASS' to have class 'a' " +
                    "but found 'MY_CLASS'");
      • matches multiple classes in elements3ms ‣

        var $fixture = this.$fixture;
        
        $fixture.prop("class", "CLS1 CLS2");
        
        expect($fixture)
          .to.have.$class("CLS1").and
          .to.have.$class("CLS2").and
          .to.not.have.$val("CLS3");
        
        expect(function () {
          expect($fixture).to.have.$class("a");
        }).to.throw("expected '#test.CLS1.CLS2' to have class 'a' " +
                    "but found 'CLS1 CLS2'");
        
        expect($("<div class='foo bar' />"))
          .to.have.$class("foo").and
          .to.have.$class("bar");
    • $visible, $hidden

      • verifies element visibility19ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture)
          .to.be.$visible.and
          .to.not.be.$hidden;
        
        $fixture.hide();
        
        expect($fixture)
          .to.be.$hidden.and
          .to.not.be.$visible;
        
        expect(function () {
          expect($fixture).to.be.$visible;
        }).to.throw("expected '#test' to be visible");
        
        $fixture.show();
        
        expect(function () {
          expect($fixture).to.be.$hidden;
        }).to.throw("expected '#test' to be hidden");
      • verifies element visibility on zero-sizes1ms ‣

        expect($("<div style=\"width: 0; height: 0;\" />"))
          .to.be.$hidden.and
          .to.not.be.$visible;
      • verifies visibility if parent is hidden2ms ‣

        var $fixture = this.$fixture;
        
        $fixture.wrap("<div />");
        
        expect($fixture)
          .to.be.$visible.and
          .to.not.be.$hidden;
        
        $fixture.parent().hide();
        
        expect($fixture)
          .to.be.$hidden.and
          .to.not.be.$visible;
    • $attr

      • matches attribute2ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture)
          .to.have.$attr("id", "test").and
          .to.have.$attr("foo", "fun time").and
          .to.not
            .have.$attr("id", "te").and
            .have.$attr("foo", "time");
        
        expect(function () {
          expect($fixture).to.have.$attr("foo", "fun");
        }).to.throw("expected '#test' to have attr('foo') 'fun' " +
                    "but found '" + "fun time" + "'");
      • checks presence of attribute6ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture).to.have.$attr("id");
        expect($fixture).to.have.$attr("foo");
        expect(this.$fixture).to.not.have.$attr("bar");
        
        expect(function () {
          expect($fixture).to.have.$attr("bar");
        }).to.throw("expected '#test' to have attr('bar')");
        
        expect(function () {
          expect($fixture).to.not.have.$attr("foo");
        }).to.throw("expected '#test' not to have attr('foo')");
      • changes context to attribute0ms ‣

        expect(this.$fixture).to.have.$attr("foo").and
          .to.equal("fun time").and
          .to.match(/^f/).and
          .to.not.have.length(2);
      • does not change context for negated attribute0ms ‣

        expect(this.$fixture).to.not
          .have.$attr("bar").and
          .have.$attr("baz").and
          .have.$attr("boy");
      • matches attribute subsets3ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture)
          .to.contain.$attr("id", "test").and
          .to.contain.$attr("id", "te").and
          .to.contain.$attr("foo", "fun time").and
          .to.contain.$attr("foo", "fun").and
          .to.not
            .contain.$attr("id", "ate").and
            .contain.$attr("foo", "atime");
        
        expect(function () {
          expect($fixture).to.contain.$attr("foo", "funky");
        }).to.throw("expected '#test' to contain attr('foo') 'funky' " +
                    "but found '" + "fun time" + "'");
        
        expect($("<div id=\"hi\" foo=\"bar time\" />"))
          .to.have.$attr("id", "hi").and
          .to.contain.$attr("foo", "bar");
    • $data

      • matches data attribute3ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture)
          .to.have.$data("id", "test").and
          .to.have.$data("foo", "fun time").and
          .to.not
            .have.$data("id", "te").and
            .have.$data("foo", "time");
        
        expect($fixture)
          .to.have.$data("options").and
          .to.have.property("name", "John");
        
        expect(function () {
          expect($fixture).to.have.$data("foo", "fun");
        }).to.throw("expected '#test' to have data('foo') 'fun' " +
                    "but found '" + "fun time" + "'");
      • checks presence of data attribute7ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture).to.have.$data("id");
        expect($fixture).to.have.$data("foo");
        expect(this.$fixture).to.not.have.$data("bar");
        
        expect(function () {
          expect($fixture).to.have.$data("bar");
        }).to.throw("expected '#test' to have data('bar')");
        
        expect(function () {
          expect($fixture).to.not.have.$data("foo");
        }).to.throw("expected '#test' not to have data('foo')");
      • changes context to data attribute0ms ‣

        expect(this.$fixture).to.have.$data("foo").and
          .to.equal("fun time").and
          .to.match(/^f/).and
          .to.not.have.length(2);
      • does not change context for negated data attribute0ms ‣

        expect(this.$fixture).to.not
          .have.$data("bar").and
          .have.$data("baz").and
          .have.$data("boy");
      • matches data attribute subsets3ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture)
          .to.contain.$data("id", "test").and
          .to.contain.$data("id", "te").and
          .to.contain.$data("foo", "fun time").and
          .to.contain.$data("foo", "fun").and
          .to.not
            .contain.$data("id", "ate").and
            .contain.$data("foo", "atime");
        
        expect(function () {
          expect($fixture).to.contain.$data("foo", "funky");
        }).to.throw("expected '#test' to contain data('foo') 'funky' " +
                    "but found '" + "fun time" + "'");
        
        expect($("<div id=\"test\" data-id=\"hi\" data-foo=\"bar time\" />"))
          .to.have.$data("id", "hi").and
          .to.contain.$data("foo", "bar");
    • $prop

      • matches property2ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture)
          .to.have.$prop("nothave", undefined);
        
        expect($fixture)
          .to.have.$prop("checked", true).and
          .to.have.$prop("type", "checkbox").and
          .to.not
            .have.$prop("checked", false).and
            .have.$prop("type", "check");
        
        expect(function () {
          expect($fixture).to.have.$prop("checked", false);
        }).to.throw("expected '#test' to have prop('checked') false " +
                    "but found true");
        
        expect($("<input type=\"checkbox\" checked=\"checked\" />"))
          .to.have.$prop("checked", true).and
          .to.have.$prop("type", "checkbox");
      • checks presence of property6ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture).to.have.$prop("checked");
        expect($fixture).to.have.$prop("type");
        expect($fixture).to.not.have.$prop("bar");
        
        expect(function () {
          expect($fixture).to.have.$prop("bar");
        }).to.throw("expected '#test' to have prop('bar')");
        
        expect(function () {
          expect($fixture).to.not.have.$prop("type");
        }).to.throw("expected '#test' not to have prop('type')");
      • changes context to property1ms ‣

        expect(this.$fixture).to.have.$prop("type").and
          .to.equal("checkbox").and
          .to.match(/^c.*x$/).and
          .to.not.have.length(2);
      • does not change context for negated property0ms ‣

        expect(this.$fixture).to.not
          .have.$prop("bar").and
          .have.$prop("baz");
    • $html

      • matches HTML3ms ‣

        var $fixture = this.$fixture,
          html = "<div><em>Hi</em>there</div>";
        
        $fixture.html(html);
        
        expect($fixture)
          .to.have.$html(html).and
          .to.not.have.$html("<em>Hi</em>");
        
        expect(function () {
          expect($fixture).to.have.$html("there");
        }).to.throw("expected '#test' to have html 'there' " +
                    "but found '" + $fixture.html() + "'");
      • matches HTML subsets3ms ‣

        var $fixture = this.$fixture,
          html = "<div><em>Hi</em>there</div>";
        
        $fixture.html(html);
        
        expect($fixture)
          .to.contain.$html(html).and
          .to.contain.$html("<em>Hi</em>").and
          .to.not
            .contain.$html("<em>Ho</em>").and
            .contain.$html("<em>Ha</em>");
        
        expect(function () {
          expect($fixture).to.contain.$html("hi");
        }).to.throw("expected '#test' to contain html 'hi' " +
                    "but found '" + $fixture.html() + "'");
        
        expect($("<div><span>foo</span></div>"))
          .to.have.$html("<span>foo</span>").and
          .to.contain.$html("foo");
    • $text

      • matches text2ms ‣

        var $fixture = this.$fixture,
          html = "<div><em>Hi</em> there</div>";
        
        $fixture.html(html);
        
        expect($fixture)
          .to.have.$text("Hi there").and
          .to.not.have.$text("Hi");
        
        expect(function () {
          expect($fixture).to.have.$text("there");
        }).to.throw("expected '#test' to have text 'there' " +
                    "but found '" + $fixture.text() + "'");
      • matches text subsets3ms ‣

        var $fixture = this.$fixture,
          html = "<div><em>Hi</em> there</div>";
        
        $fixture.html(html);
        
        expect($fixture)
          .to.contain.$text("Hi there").and
          .to.contain.$text("Hi").and
          .to.not
            .contain.$text("Ho").and
            .contain.$text("Ha");
        
        expect(function () {
          expect($fixture).to.contain.$text("hi");
        }).to.throw("expected '#test' to contain text 'hi' " +
                    "but found '" + $fixture.text() + "'");
        
        expect($("<div><span>foo</span> bar</div>"))
          .to.have.$text("foo bar").and
          .to.contain.$text("foo");
    • $css

      • matches explicit CSS properties4ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture)
          .to.have.$css("width", "50px").and
          .to.not
            .have.$css("width", "100px").and
            .have.$css("height", "50px");
        
        expect($fixture)
          .to.contain.$css("border", "1px dotted").and
          .to.contain.$css("border", "dotted").and
          .to.not
            .contain.$css("border", "solid").and
            .contain.$css("border", "2px");
        
        expect($("<p style=\"float: left; display: none;\" />"))
          .to.have.$css("float", "left").and
          .to.have.$css("display", "none");
      • matches computed CSS properties3ms ‣

        var $fixture = this.$fixture;
        
        expect($fixture)
          .to.have.$css("border-top-style", "dotted").and
          .to.not
            .have.$css("border-top-style", "solid");
        
        expect(function () {
          expect($fixture).to.have.$css("width", "100px");
        }).to.throw("expected [object Object] to have css('width') '100px' " +
                    "but found '50px'");