From de1cdc2e3c72117e5c6d50cc6eb765904f81e15a Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Mon, 2 Jan 2023 15:14:20 +0400
Subject: [PATCH] Update Css TS

---
 src/css_composer/index.ts          | 13 ++++----
 test/specs/dom_components/index.ts | 53 ++++++++++++++++++++++++++----
 2 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/css_composer/index.ts b/src/css_composer/index.ts
index 32f706f76..1411b3a3e 100644
--- a/src/css_composer/index.ts
+++ b/src/css_composer/index.ts
@@ -307,13 +307,12 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     const selector = sm.get(node.selectors);
     const { state, selectorsAdd } = node;
     const { atRuleType, atRuleParams } = opts;
-    return (
-      selector &&
-      this.get(selector, state, atRuleParams, {
-        selectorsAdd,
-        atRuleType,
-      })
-    );
+    return selector
+      ? this.get(selector, state, atRuleParams, {
+          selectorsAdd,
+          atRuleType,
+        })
+      : undefined;
   }
 
   /**
diff --git a/test/specs/dom_components/index.ts b/test/specs/dom_components/index.ts
index 89f57b4e0..235c43e9f 100644
--- a/test/specs/dom_components/index.ts
+++ b/test/specs/dom_components/index.ts
@@ -1,7 +1,7 @@
 import DomComponents from '../../../src/dom_components';
 import Components from '../../../src/dom_components/model/Components';
 import EditorModel from '../../../src/editor/model/Editor';
-import Editor from '../../../src/editor/model/Editor';
+import Editor from '../../../src/editor';
 import utils from './../../test_utils.js';
 
 describe('DOM Components', () => {
@@ -46,16 +46,16 @@ describe('DOM Components', () => {
     };
 
     beforeEach(() => {
-      em = new Editor({
+      const editor = new Editor({
         avoidInlineStyle: true,
       });
+      em = editor.getModel();
       em.loadOnStart();
       config = {
         em,
         storeWrapper: 1,
       };
-      obj = em.get('DomComponents');
-      // obj = new DomComponents(em).init(config);
+      obj = em.Components;
     });
 
     afterEach(() => {
@@ -274,9 +274,50 @@ describe('DOM Components', () => {
       });
     });
 
-    describe('Custom components with styles', () => {
+    describe.only('Custom components with styles', () => {
+      const cmpId = 'cmp-with-style';
+
       beforeEach(() => {
-        em.Components;
+        obj.addType(cmpId, {
+          model: {
+            defaults: {
+              attributes: { class: cmpId },
+              styles: `
+                .${cmpId} {
+                  color: red;
+                }
+              `,
+            },
+          },
+        });
+      });
+
+      test('Custom style properly added', () => {
+        const cmp = obj.addComponent({ type: cmpId });
+        expect(cmp.is(cmpId)).toBe(true);
+        const rule = em.Css.getRule(`.${cmpId}`);
+        expect(rule?.getStyle()).toEqual({ color: 'red' });
+      });
+
+      test('Clean custom style when the related component is removed', () => {
+        const cmp = obj.addComponent({ type: cmpId });
+        expect(obj.getComponents().length).toBe(1);
+        expect(em.Css.getAll().length).toBe(1);
+        cmp.remove();
+        expect(obj.getComponents().length).toBe(0);
+        expect(em.Css.getAll().length).toBe(0);
+      });
+
+      test('Custom style is not updated if already exists', () => {
+        obj.addComponent({ type: cmpId });
+        const rule = em.Css.getRule(`.${cmpId}`)!;
+        const newStyle = { color: 'blue', 'font-size': '20px' };
+        rule.addStyle(newStyle);
+        expect(rule.getStyle()).toEqual(newStyle);
+        obj.addComponent({ type: cmpId });
+        expect(obj.getComponents().length).toBe(2);
+        expect(em.Css.getAll().length).toBe(1);
+        expect(rule.getStyle()).toEqual(newStyle);
       });
     });
   });