Up style tests

src/style_manager/index.js

@@ -107,15 +107,17 @@ export default () => {
       this.model.listenTo(
         em,
         ev,
-        debounce(() => {
-          this.select(em.getSelectedAll());
-          this.__trgCustom();
-        })
+        debounce(() => this.__upSel())
       );
 
       return this;
     },
 
+    __upSel() {
+      this.select(this.em.getSelectedAll());
+      this.__trgCustom();
+    },
+
     __trgCustom() {
       this.em.trigger(this.events.custom);
     },
@@ -380,8 +382,8 @@ export default () => {
           );
         }
 
-        const all = otherRules
-          .concat(cmpRules)
+        const all = cmpRules
+          .concat(otherRules)
           .filter(rule =>
             !isUndefined(state) ? rule.get('state') === state : 1
           )
@@ -390,6 +392,11 @@ export default () => {
 
         // Slice removes rules not related to the current device
         result = all.slice(all.indexOf(target) + 1);
+        console.log({
+          target: target.toCSS(),
+          all: all.map(r => r.toCSS()),
+          result: result.map(r => r.toCSS())
+        });
       }
 
       return result;

test/specs/style_manager/index.js

@@ -149,7 +149,7 @@ describe('StyleManager', () => {
         });
       });
 
-      test('With ID, multiple devices', done => {
+      test('With ID, multiple devices', () => {
         sm.setComponentFirst(true);
         const cmp = domc.addComponent(`<div class="cls" id="id-test"></div>`);
         const [rule1, rule2] = cssc.addRules(`
@@ -160,14 +160,24 @@ describe('StyleManager', () => {
         `);
         dv.select('tablet');
         em.setSelected(cmp);
-        setTimeout(() => {
-          expect(obj.getLastSelected()).toBe(rule2);
-          expect(obj.getSelectedParents()).toEqual([rule1]);
-          done();
-        });
+        obj.__upSel();
+        expect(obj.getLastSelected()).toBe(rule2);
+        expect(obj.getSelectedParents()).toEqual([rule1]);
+      });
+
+      test('With ID + class, class first', () => {
+        const cmp = domc.addComponent(`<div class="cls" id="id-test"></div>`);
+        const [rule1, rule2] = cssc.addRules(`
+          .cls { color: red; }
+          #id-test { color: blue; }
+        `);
+        em.setSelected(cmp);
+        obj.__upSel();
+        expect(obj.getLastSelected()).toBe(rule1);
+        expect(obj.getSelectedParents()).toEqual([rule2]);
       });
 
-      test('With ID + class, multiple devices', done => {
+      test('With ID + class, multiple devices', () => {
         sm.setComponentFirst(true);
         const cmp = domc.addComponent(`<div class="cls" id="id-test"></div>`);
         const [rule1, rule2] = cssc.addRules(`
@@ -178,14 +188,12 @@ describe('StyleManager', () => {
         `);
         dv.select('tablet');
         em.setSelected(cmp);
-        setTimeout(() => {
-          expect(obj.getLastSelected()).toBe(rule2);
-          expect(obj.getSelectedParents()).toEqual([rule1]);
-          done();
-        });
+        obj.__upSel();
+        expect(obj.getLastSelected()).toBe(rule2);
+        expect(obj.getSelectedParents()).toEqual([rule1]);
       });
 
-      test('Mixed classes', done => {
+      test('Mixed classes', () => {
         const cmp = domc.addComponent(`<div class="cls1 cls2"></div>`);
         const [rule1, rule2] = cssc.addRules(`
           .cls1 { color: red; }
@@ -194,12 +202,10 @@ describe('StyleManager', () => {
           .cls1.cls3 { color: green; }
         `);
         em.setSelected(cmp);
-        setTimeout(() => {
-          expect(obj.getSelectedParents().length).toBe(1);
-          expect(obj.getLastSelected()).toBe(rule2);
-          expect(obj.getSelectedParents()).toEqual([rule1]);
-          done();
-        });
+        obj.__upSel();
+        expect(obj.getSelectedParents().length).toBe(1);
+        expect(obj.getLastSelected()).toBe(rule2);
+        expect(obj.getSelectedParents()).toEqual([rule1]);
       });
     });