diff --git a/src/selector_manager/view/ClassTagsView.js b/src/selector_manager/view/ClassTagsView.js index db211b305..c7cbe86df 100644 --- a/src/selector_manager/view/ClassTagsView.js +++ b/src/selector_manager/view/ClassTagsView.js @@ -206,17 +206,24 @@ export default Backbone.View.extend({ * @private */ componentChanged: debounce(function({ targets } = {}) { - const trgs = targets || this.getTargets(); - let validSelectors = []; + this.updateSelection(targets); + }), + + updateSelection(targets) { + let trgs = targets || this.getTargets(); + trgs = isArray(trgs) ? trgs : [trgs]; + let selectors = []; if (trgs && trgs.length) { - validSelectors = this.getCommonSelectors({ targets: trgs }); - this.checkSync({ validSelectors }); + selectors = this.getCommonSelectors({ targets: trgs }); + this.checkSync({ validSelectors: selectors }); } - this.collection.reset(validSelectors); + this.collection.reset(selectors); this.updateStateVis(trgs); - }), + + return selectors; + }, getCommonSelectors({ targets, opts = {} } = {}) { const trgs = targets || this.getTargets(); diff --git a/test/specs/selector_manager/view/ClassTagsView.js b/test/specs/selector_manager/view/ClassTagsView.js index 99508bd81..cc6b8a335 100644 --- a/test/specs/selector_manager/view/ClassTagsView.js +++ b/test/specs/selector_manager/view/ClassTagsView.js @@ -1,6 +1,7 @@ import ClassTagsView from 'selector_manager/view/ClassTagsView'; import Selectors from 'selector_manager/model/Selectors'; import Component from 'dom_components/model/Component'; +import Rule from 'css_composer/model/CssRule'; import Editor from 'editor/model/Editor'; describe('ClassTagsView', () => { @@ -19,6 +20,7 @@ describe('ClassTagsView', () => { let compTest; const getSelectorNames = arr => arr.map(item => item.getFullName()); const newComponent = obj => new Component(obj, { em }); + const newRule = obj => new Rule(obj, { em }); beforeAll(() => { document.body.innerHTML = '
'; @@ -212,7 +214,7 @@ describe('ClassTagsView', () => { }); }); - describe.only('getCommonSelectors', () => { + describe('getCommonSelectors', () => { test('Returns empty array with no targets', () => { expect(view.getCommonSelectors({ targets: [] })).toEqual([]); }); @@ -248,6 +250,40 @@ describe('ClassTagsView', () => { }); }); + describe.only('updateSelection', () => { + test('Returns empty array without targets', () => { + expect(view.updateSelection([])).toEqual([]); + }); + + test('Returns empty array with invalid selectors', () => { + expect(view.updateSelection('body .test')).toEqual([]); + }); + + test('Returns array with common selectors from Components', () => { + const cmp1 = newComponent({ classes: 'test1 test2 test3' }); + const cmp2 = newComponent({ classes: 'test1 test2' }); + const cmp3 = newComponent({ classes: 'test2 test3' }); + const result = view.updateSelection([cmp1, cmp2, cmp3]); + expect(getSelectorNames(result)).toEqual(['.test2']); + }); + + test('Returns array with common selectors from CssRule', () => { + const rule1 = newRule({ selectors: 'test1 test2 test3'.split(' ') }); + const rule2 = newRule({ selectors: 'test1 test2'.split(' ') }); + const rule3 = newRule({ selectors: 'test2 test3'.split(' ') }); + const result = view.updateSelection([rule1, rule2, rule3]); + expect(getSelectorNames(result)).toEqual(['.test2']); + }); + + test('Returns array with common selectors from CssRule and Components', () => { + const rule1 = newRule({ selectors: 'test1 test2 test3'.split(' ') }); + const rule2 = newRule({ selectors: 'test1 test2'.split(' ') }); + const cmp1 = newComponent({ classes: 'test2 test3' }); + const result = view.updateSelection([rule1, rule2, cmp1]); + expect(getSelectorNames(result)).toEqual(['.test2']); + }); + }); + describe('Should be rendered correctly', () => { test('Has label', () => { expect(view.$el.find('#label')[0]).toBeTruthy();