119 lines
3.2 KiB
JavaScript
119 lines
3.2 KiB
JavaScript
const Backbone = require('backbone');
|
|
require('dashboard/components/form-components');
|
|
|
|
describe('dashboard/components/form-components/multi-checkbox', function () {
|
|
let component;
|
|
|
|
const createViewFn = function (options) {
|
|
const componentOptions = Object.assign({},
|
|
{
|
|
key: 'multicheckbox',
|
|
schema: {
|
|
editorAttrs: { disabled: false },
|
|
inputs: [
|
|
{ name: 'maps', label: 'maps' },
|
|
{ name: 'sql' }
|
|
]
|
|
},
|
|
model: new Backbone.Model({
|
|
multicheckbox: {
|
|
maps: true,
|
|
sql: false
|
|
}
|
|
})
|
|
},
|
|
options
|
|
);
|
|
|
|
const component = new Backbone.Form.editors.MultiCheckbox(componentOptions);
|
|
|
|
return component;
|
|
};
|
|
|
|
beforeEach(function () {
|
|
component = createViewFn();
|
|
});
|
|
|
|
it('should render checkboxes properly', function () {
|
|
expect(component.$('input').length).toBe(2);
|
|
|
|
// Maps Checkbox
|
|
const mapsCheckboxContainer = component.$('.FormAccount-rowData div:first-child');
|
|
const mapsCheckbox = mapsCheckboxContainer.find('input');
|
|
|
|
expect(mapsCheckbox.length).toBe(1);
|
|
expect(mapsCheckbox.attr('name')).toBe('maps');
|
|
expect(mapsCheckbox.is(':checked')).toBe(true);
|
|
expect(mapsCheckbox.attr('disabled')).toBeFalsy();
|
|
|
|
const mapsLabel = mapsCheckboxContainer.find('label');
|
|
expect(mapsLabel.text()).toBe('maps');
|
|
|
|
// SQL Checkbox
|
|
const sqlCheckboxContainer = component.$('.FormAccount-rowData div:last-child');
|
|
const sqlCheckbox = sqlCheckboxContainer.find('input');
|
|
|
|
expect(sqlCheckbox.length).toBe(1);
|
|
expect(sqlCheckbox.attr('name')).toBe('sql');
|
|
expect(sqlCheckbox.is(':checked')).toBe(false);
|
|
expect(sqlCheckbox.attr('disabled')).toBeFalsy();
|
|
|
|
const sqlLabel = sqlCheckboxContainer.find('label');
|
|
expect(sqlLabel.text()).toBe('sql');
|
|
});
|
|
|
|
it('should render disabled checkboxes', function () {
|
|
const component = createViewFn({
|
|
schema: {
|
|
editorAttrs: { disabled: true },
|
|
inputs: [
|
|
{ name: 'maps', label: 'maps' },
|
|
{ name: 'sql' }
|
|
]
|
|
}
|
|
});
|
|
|
|
expect(component.$('input').length).toBe(2);
|
|
expect(component.$('input').first().attr('disabled')).toBe('disabled');
|
|
});
|
|
|
|
describe('._validate', function () {
|
|
it('should validate that any checkbox is checked', function () {
|
|
expect(component.validate()).toBeNull();
|
|
|
|
component.value.maps = false;
|
|
expect(component.validate()).toEqual({
|
|
type: 'required',
|
|
message: 'Required'
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('._onCheckboxClick', function () {
|
|
it('should check checkbox when clicking', function () {
|
|
spyOn(component, 'trigger');
|
|
|
|
component._onCheckboxClick({
|
|
target: {
|
|
name: 'sql',
|
|
checked: true
|
|
}
|
|
});
|
|
|
|
expect(component.getValue()).toEqual({
|
|
maps: true, sql: true
|
|
});
|
|
expect(component.trigger).toHaveBeenCalledWith('change', component);
|
|
});
|
|
});
|
|
|
|
describe('._hasValue', function () {
|
|
it('should return true if any checkbox is checked', function () {
|
|
expect(component._hasValue()).toBe(true);
|
|
|
|
component.value.maps = false;
|
|
expect(component._hasValue()).toBe(false);
|
|
});
|
|
});
|
|
});
|