big-moving.ru/api/jquery/plugins/jquery_chained-2.x/test/spec/ChainedSpec.js

368 lines
20 KiB
JavaScript
Raw Normal View History

2022-06-24 15:29:23 +05:00
/* jshint -W108 */
/* global describe, beforeEach, it, expect */
describe("Class based version of plugin", function() {
"use strict";
describe("having single set of selects", function() {
beforeEach(function() {
jasmine.getFixtures().set('<select id="mark" name="mark">' +
' <option value="">--</option>' +
' <option value="bmw">BMW</option>' +
' <option value="audi">Audi</option>' +
'</select>' +
'<select id="series" name="series">' +
' <option value="">--</option>' +
' <option value="series-1" data-chained="bmw">1 series</option>' +
' <option value="series-3" data-chained="bmw">3 series</option>' +
' <option value="series-5" data-chained="bmw">5 series</option>' +
' <option value="series-6" data-chained="bmw">6 series</option>' +
' <option value="series-7" data-chained="bmw">7 series</option>' +
' <option value="a1" data-chained="audi">A1</option>' +
' <option value="a3" data-chained="audi">A3</option>' +
' <option value="s3" data-chained="audi">S3</option>' +
' <option value="a4" data-chained="audi">A4</option>' +
' <option value="s4" data-chained="audi">S4</option>' +
' <option value="a5" data-chained="audi">A5</option>' +
' <option value="s5" data-chained="audi">S5</option>' +
' <option value="a6" data-chained="audi">A6</option>' +
' <option value="s6" data-chained="audi" selected="selected">S6</option>' +
' <option value="rs6" data-chained="audi">RS6</option>' +
' <option value="a8" data-chained="audi">A8</option>' +
'</select>' +
'<select id="model" name="model">' +
' <option value="">--</option>' +
' <option value="3-doors" data-chained="series-1">3 doors</option>' +
' <option value="5-doors" data-chained="series-1">5 doors</option>' +
' <option value="coupe" data-chained="series-1 series-3 series-6 a5 s5">Coupe</option>' +
' <option value="cabrio" data-chained="series-1 series-3 series-6">Cabrio</option>' +
' <option value="touring" data-chained="series-3 series-5">Touring</option>' +
' <option value="gran-tourismo" data-chained="series-5">Gran Tourismo</option>' +
' <option value="sedan" data-chained="series-3 series-5 series-7 a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option>' +
' <option value="sportback" data-chained="a3 s3 a5 s5">Sportback</option>' +
' <option value="cabriolet" data-chained="a3 a5 s5">Cabriolet</option>' +
' <option value="avant" data-chained="a4 s4 a6 s6 rs6">Avant</option>' +
' <option value="allroad" data-chained="a4 a6">Allroad</option>' +
'</select>' +
'<select id="engine" name="engine">' +
' <option value="">--</option> ' +
' <option value="25-petrol" data-chained="series-3 a3 a4">2.5 petrol</option>' +
' <option value="30-petrol" data-chained="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>' +
' <option value="30-diesel" data-chained="series-3+sedan series-5+sedan a5">3.0 diesel</option>' +
'</select>');
$("#series").chained("#mark");
$("#model").chained("#series");
$("#engine").chained("#series, #model");
});
it("should be chainable as jQuery plugin", function() {
var select = $("#mark").chained("#foo").addClass("bar");
expect(select.hasClass("bar")).toBe(true);
});
it("should make initial update", function() {
expect($("#mark > option").length).toBe(3);
expect($("#series > option").length).toBe(1);
expect($("#series")).toBeDisabled();
expect($("#model > option").length).toBe(1);
expect($("#model")).toBeDisabled();
});
it("should update series when mark changes", function() {
$("#mark").val("audi").trigger("change");
expect($("#mark > option").length).toBe(3);
expect($("#series > option").length).toBe(12);
expect($("#model > option").length).toBe(3);
$("#mark").val("bmw").trigger("change");
expect($("#mark > option").length).toBe(3);
expect($("#series > option").length).toBe(6);
expect($("#model > option").length).toBe(1);
});
it("should update model when series changes", function() {
$("#mark").val("bmw").trigger("change");
$("#series").val("series-3").trigger("change");
expect($("#mark > option").length).toBe(3);
expect($("#series > option").length).toBe(6);
expect($("#model > option").length).toBe(5);
});
it("should reset series and model when mark changes", function() {
$("#mark").val("audi").trigger("change");
$("#series").val("a6").trigger("change");
$("#mark").val("bmw").trigger("change");
expect($("#mark > option").length).toBe(3);
expect($("#series > option").length).toBe(6);
expect($("#model > option").length).toBe(1);
});
it("should disable input if only default value exists", function() {
$("#mark").val("audi").trigger("change");
$("#series").val("a6").trigger("change");
$("#mark").val("bmw").trigger("change");
expect($("#model > option:first").val()).toBe("");
expect($("#model").val()).toBe("");
expect($("#model")).toBeDisabled();
});
it("should be chained to two parents", function() {
$("#mark").val("bmw").trigger("change");
$("#series").val("series-3").trigger("change");
$("#model").val("coupe").trigger("change");
expect($("#engine > option").length).toBe(3);
expect($("#engine > option:last").val()).toBe("30-petrol");
$("#model").val("sedan").trigger("change");
expect($("#engine > option").length).toBe(4);
expect($("#engine > option:last").val()).toBe("30-diesel");
$("#series").val("series-6").trigger("change");
$("#model").val("coupe").trigger("change");
expect($("#engine > option").length).toBe(2);
});
it("should honour selected attribute in html", function() {
$("#mark").val("audi").trigger("change");
expect($("#series > option:selected").val()).toBe("s6");
});
});
describe("having multiple set of selects", function() {
beforeEach(function() {
jasmine.getFixtures().set('<select id="mark" class="mark" name="mark">' +
' <option value="">--</option>' +
' <option value="bmw">BMW</option>' +
' <option value="audi">Audi</option>' +
'</select>' +
'<select id="series" name="series" class="series">' +
' <option value="">--</option>' +
' <option value="series-1" data-chained="bmw">1 series</option>' +
' <option value="series-3" data-chained="bmw">3 series</option>' +
' <option value="series-5" data-chained="bmw">5 series</option>' +
' <option value="series-6" data-chained="bmw">6 series</option>' +
' <option value="series-7" data-chained="bmw">7 series</option>' +
' <option value="a1" data-chained="audi">A1</option>' +
' <option value="a3" data-chained="audi">A3</option>' +
' <option value="s3" data-chained="audi">S3</option>' +
' <option value="a4" data-chained="audi">A4</option>' +
' <option value="s4" data-chained="audi">S4</option>' +
' <option value="a5" data-chained="audi">A5</option>' +
' <option value="s5" data-chained="audi">S5</option>' +
' <option value="a6" data-chained="audi">A6</option>' +
' <option value="s6" data-chained="audi" selected="selected">S6</option>' +
' <option value="rs6" data-chained="audi">RS6</option>' +
' <option value="a8" data-chained="audi">A8</option>' +
'</select>' +
'<select id="model" class="model" name="model">' +
' <option value="">--</option>' +
' <option value="3-doors" data-chained="series-1">3 doors</option>' +
' <option value="5-doors" data-chained="series-1">5 doors</option>' +
' <option value="coupe" data-chained="series-1 series-3 series-6 a5 s5">Coupe</option>' +
' <option value="cabrio" data-chained="series-1 series-3 series-6">Cabrio</option>' +
' <option value="touring" data-chained="series-3 series-5">Touring</option>' +
' <option value="gran-tourismo" data-chained="series-5">Gran Tourismo</option>' +
' <option value="sedan" data-chained="series-3 series-5 series-7 a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option>' +
' <option value="sportback" data-chained="a3 s3 a5 s5">Sportback</option>' +
' <option value="cabriolet" data-chained="a3 a5 s5">Cabriolet</option>' +
' <option value="avant" data-chained="a4 s4 a6 s6 rs6">Avant</option>' +
' <option value="allroad" data-chained="a4 a6">Allroad</option>' +
'</select>' +
'<select id="engine" class="engine" name="engine">' +
' <option value="">--</option> ' +
' <option value="25-petrol" data-chained="series-3 a3 a4">2.5 petrol</option>' +
' <option value="30-petrol" data-chained="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>' +
' <option value="30-diesel" data-chained="series-3+sedan series-5+sedan a5">3.0 diesel</option>' +
'</select>' +
'<select id="mark-2" class="mark" name="mark">' +
' <option value="">--</option>' +
' <option value="bmw">BMW</option>' +
' <option value="audi">Audi</option>' +
'</select>' +
'<select id="series-2" class="series" name="series">' +
' <option value="">--</option>' +
' <option value="series-1" data-chained="bmw">1 series</option>' +
' <option value="series-3" data-chained="bmw">3 series</option>' +
' <option value="series-5" data-chained="bmw">5 series</option>' +
' <option value="series-6" data-chained="bmw">6 series</option>' +
' <option value="series-7" data-chained="bmw">7 series</option>' +
' <option value="a1" data-chained="audi">A1</option>' +
' <option value="a3" data-chained="audi">A3</option>' +
' <option value="s3" data-chained="audi">S3</option>' +
' <option value="a4" data-chained="audi">A4</option>' +
' <option value="s4" data-chained="audi">S4</option>' +
' <option value="a5" data-chained="audi">A5</option>' +
' <option value="s5" data-chained="audi">S5</option>' +
' <option value="a6" data-chained="audi">A6</option>' +
' <option value="s6" data-chained="audi" selected="selected">S6</option>' +
' <option value="rs6" data-chained="audi">RS6</option>' +
' <option value="a8" data-chained="audi">A8</option>' +
'</select>' +
'<select id="model-2" class="model" name="model">' +
' <option value="">--</option>' +
' <option value="3-doors" data-chained="series-1">3 doors</option>' +
' <option value="5-doors" data-chained="series-1">5 doors</option>' +
' <option value="coupe" data-chained="series-1 series-3 series-6 a5 s5">Coupe</option>' +
' <option value="cabrio" data-chained="series-1 series-3 series-6">Cabrio</option>' +
' <option value="touring" data-chained="series-3 series-5">Touring</option>' +
' <option value="gran-tourismo" data-chained="series-5">Gran Tourismo</option>' +
' <option value="sedan" data-chained="series-3 series-5 series-7 a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option>' +
' <option value="sportback" data-chained="a3 s3 a5 s5">Sportback</option>' +
' <option value="cabriolet" data-chained="a3 a5 s5">Cabriolet</option>' +
' <option value="avant" data-chained="a4 s4 a6 s6 rs6">Avant</option>' +
' <option value="allroad" data-chained="a4 a6">Allroad</option>' +
'</select>' +
'<select id="engine-2" class="engine" name="engine">' +
' <option value="">--</option> ' +
' <option value="25-petrol" data-chained="series-3 a3 a4">2.5 petrol</option>' +
' <option value="30-petrol" data-chained="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>' +
' <option value="30-diesel" data-chained="series-3+sedan series-5+sedan a5">3.0 diesel</option>' +
'</select>' +
'<select id="mark-3" class="mark" name="mark">' +
' <option value="">--</option>' +
' <option value="bmw">BMW</option>' +
' <option value="audi">Audi</option>' +
'</select>' +
'<select id="series-3" class="series" name="series">' +
' <option value="">--</option>' +
' <option value="series-1" data-chained="bmw">1 series</option>' +
' <option value="series-3" data-chained="bmw">3 series</option>' +
' <option value="series-5" data-chained="bmw">5 series</option>' +
' <option value="series-6" data-chained="bmw">6 series</option>' +
' <option value="series-7" data-chained="bmw">7 series</option>' +
' <option value="a1" data-chained="audi">A1</option>' +
' <option value="a3" data-chained="audi">A3</option>' +
' <option value="s3" data-chained="audi">S3</option>' +
' <option value="a4" data-chained="audi">A4</option>' +
' <option value="s4" data-chained="audi">S4</option>' +
' <option value="a5" data-chained="audi">A5</option>' +
' <option value="s5" data-chained="audi">S5</option>' +
' <option value="a6" data-chained="audi">A6</option>' +
' <option value="s6" data-chained="audi" selected="selected">S6</option>' +
' <option value="rs6" data-chained="audi">RS6</option>' +
' <option value="a8" data-chained="audi">A8</option>' +
'</select>' +
'<select id="model-3" class="model" name="model">' +
' <option value="">--</option>' +
' <option value="3-doors" data-chained="series-1">3 doors</option>' +
' <option value="5-doors" data-chained="series-1">5 doors</option>' +
' <option value="coupe" data-chained="series-1 series-3 series-6 a5 s5">Coupe</option>' +
' <option value="cabrio" data-chained="series-1 series-3 series-6">Cabrio</option>' +
' <option value="touring" data-chained="series-3 series-5">Touring</option>' +
' <option value="gran-tourismo" data-chained="series-5">Gran Tourismo</option>' +
' <option value="sedan" data-chained="series-3 series-5 series-7 a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option>' +
' <option value="sportback" data-chained="a3 s3 a5 s5">Sportback</option>' +
' <option value="cabriolet" data-chained="a3 a5 s5">Cabriolet</option>' +
' <option value="avant" data-chained="a4 s4 a6 s6 rs6">Avant</option>' +
' <option value="allroad" data-chained="a4 a6">Allroad</option>' +
'</select>' +
'<select id="engine-3" class="engine" name="engine">' +
' <option value="">--</option> ' +
' <option value="25-petrol" data-chained="series-3 a3 a4">2.5 petrol</option>' +
' <option value="30-petrol" data-chained="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>' +
' <option value="30-diesel" data-chained="series-3+sedan series-5+sedan a5">3.0 diesel</option>' +
'</select>');
$(".series").each(function() {
$(this).chained($(".mark", $(this).parent()));
});
$(".model").each(function() {
$(this).chained($(".series", $(this).parent()));
});
$(".engine").each(function() {
$(this).chained([
$(".series", $(this).parent()),
$(".model", $(this).parent())
]);
});
});
it("should be chainable as jQuery plugin", function() {
var select = $("#mark").chained("#foo").addClass("bar");
expect(select.hasClass("bar")).toBe(true);
});
it("should make initial update", function() {
expect($("#mark > option").length).toBe(3);
expect($("#series > option").length).toBe(1);
expect($("#series")).toBeDisabled();
expect($("#model > option").length).toBe(1);
expect($("#model")).toBeDisabled();
});
it("should update series when mark changes", function() {
$("#mark").val("audi").trigger("change");
expect($("#mark > option").length).toBe(3);
expect($("#series > option").length).toBe(12);
expect($("#model > option").length).toBe(3);
$("#mark").val("bmw").trigger("change");
expect($("#mark > option").length).toBe(3);
expect($("#series > option").length).toBe(6);
expect($("#model > option").length).toBe(1);
});
it("should update model when series changes", function() {
$("#mark").val("bmw").trigger("change");
$("#series").val("series-3").trigger("change");
expect($("#mark > option").length).toBe(3);
expect($("#series > option").length).toBe(6);
expect($("#model > option").length).toBe(5);
});
it("should reset series and model when mark changes", function() {
$("#mark").val("audi").trigger("change");
$("#series").val("a6").trigger("change");
$("#mark").val("bmw").trigger("change");
expect($("#mark > option").length).toBe(3);
expect($("#series > option").length).toBe(6);
expect($("#model > option").length).toBe(1);
});
it("should disable input if only default value exists", function() {
$("#mark").val("audi").trigger("change");
$("#series").val("a6").trigger("change");
$("#mark").val("bmw").trigger("change");
expect($("#model > option:first").val()).toBe("");
expect($("#model").val()).toBe("");
expect($("#model")).toBeDisabled();
});
it("should be chained to two parents", function() {
$("#mark").val("bmw").trigger("change");
$("#series").val("series-3").trigger("change");
$("#model").val("coupe").trigger("change");
expect($("#engine > option").length).toBe(3);
expect($("#engine > option:last").val()).toBe("30-petrol");
$("#model").val("sedan").trigger("change");
expect($("#engine > option").length).toBe(4);
expect($("#engine > option:last").val()).toBe("30-diesel");
$("#series").val("series-6").trigger("change");
$("#model").val("coupe").trigger("change");
expect($("#engine > option").length).toBe(2);
});
it("should honour selected attribute in html", function() {
$("#mark").val("audi").trigger("change");
expect($("#series > option:selected").val()).toBe("s6");
});
});
});