Fix `addStyle(string, string)`. Closes #5105

src/domain_abstract/model/StyleableModel.ts

@@ -85,7 +85,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
   addStyle(prop: string | ObjectAny, value = '', opts = {}) {
     if (typeof prop == 'string') {
       prop = {
-        prop: value,
+        [prop]: value,
       };
     } else {
       opts = value || {};

test/specs/dom_components/index.ts

@@ -71,7 +71,7 @@ describe('DOM Components', () => {
       setEm();
       // @ts-ignore
       const comps = new Components({}, {});
-      obj.getWrapper().set('components', comps);
+      obj.getWrapper()?.set('components', comps);
       obj.store();
       expect(obj.load({})).toEqual([{ test: 1 }]);
     });
@@ -112,12 +112,12 @@ describe('DOM Components', () => {
     });
 
     test('Add new component', () => {
-      var comp = obj.addComponent({});
+      obj.addComponent({});
       expect(obj.getComponents().length).toEqual(1);
     });
 
     test('Add more components at once', () => {
-      var comp = obj.addComponent([{}, {}]);
+      obj.addComponent([{}, {}]);
       expect(obj.getComponents().length).toEqual(2);
     });
 
@@ -132,14 +132,16 @@ describe('DOM Components', () => {
       </style>`);
       expect(em.getHtml({ component })).toEqual(`<div id="${id}">Text</div>`);
       expect(obj.getComponents().length).toEqual(1);
-      // @ts-ignore
+      const firstComp = obj.getComponents().first();
-      obj.getComponents().first().addStyle({ margin: '10px' });
+      firstComp.addStyle({ margin: '10px' });
+      firstComp.addStyle('width', '100px');
       expect(cc.getAll().length).toEqual(1);
       expect(cc.getIdRule(id).getStyle()).toEqual({
         color: 'red',
         'background-color': 'red',
         padding: '50px 100px',
         margin: '10px',
+        width: '100px',
       });
     });
 
@@ -175,7 +177,6 @@ describe('DOM Components', () => {
       obj.addComponent(`<div test-prop="${testProp}"></div>`);
       const comp = obj.getComponents().at(0);
       expect(comp.get('type')).toEqual(id);
-      // @ts-ignore
       expect(comp.getAttributes()['test-prop']).toEqual(testProp);
     });
 
@@ -249,7 +250,6 @@ describe('DOM Components', () => {
       <style>
         #${id} { background-color: red }
       </style>`);
-      // @ts-ignore
       obj.getComponents().first().addStyle({ margin: '10px' });
       const rule = cc.getAll().at(0);
       const css = `#${id}{background-color:red;margin:10px;color:red;padding:50px 100px;}`;