Add load data test

test/specs/grapesjs/headless.js

@@ -11,8 +11,19 @@ describe('GrapesJS Headless', () => {
   });
 
   describe('Headless operations', () => {
+    const cmpObj = {
+      attributes: { class: 'cls', test: 'value' },
+      components: { type: 'textnode', content: 'Test' }
+    };
+    const cmpStr = '<div class="cls" test="value">Test</div>';
+    const styleObj = {
+      selectors: [{ name: 'cls' }],
+      style: { color: 'red' }
+    };
+    const styleStr = '.cls{color:red;}';
+
     beforeEach(() => {
-      editor = grapesjs.init({ headless: true });
+      editor = grapesjs.init({ headless: true, protectedCss: '' });
     });
 
     afterEach(() => {
@@ -20,30 +31,32 @@ describe('GrapesJS Headless', () => {
     });
 
     test('Add components', () => {
-      const res = editor.addComponents({
+      const res = editor.addComponents(cmpObj);
-        attributes: { class: 'cls', test: 'value' },
-        components: { type: 'textnode', content: 'Test' }
-      });
       expect(res.length).toBe(1);
       const comp = res[0];
-      const resultHTML = '<div class="cls" test="value">Test</div>';
+      expect(comp.toHTML()).toBe(cmpStr);
-      expect(comp.toHTML()).toBe(resultHTML);
       expect(editor.Selectors.getAll().length).toBe(1); // 1 selector is created
       expect(editor.Css.getAll().length).toBe(0); // No CSS
-      expect(editor.getHtml()).toBe(resultHTML);
+      expect(editor.getHtml()).toBe(cmpStr);
-      expect(editor.getCss()).toBe(editor.getConfig().protectedCss); // same as default
+      expect(editor.getCss()).toBe(''); // same as default
     });
 
     test('Add styles', () => {
-      const res = editor.addStyle({
+      const res = editor.addStyle(styleObj);
-        selectors: [{ name: 'gjs-row' }],
-        style: { color: 'red' }
-      });
       expect(res.length).toBe(1);
       const rule = res[0];
-      const result = '.gjs-row{color:red;}';
+      expect(rule.toCSS()).toBe(styleStr);
-      expect(rule.toCSS()).toBe(result);
       expect(editor.Selectors.getAll().length).toBe(1); // 1 selector is created
     });
+
+    test('Load data', () => {
+      editor.loadData({
+        components: [cmpObj],
+        styles: [styleObj]
+      });
+      expect(editor.Selectors.getAll().length).toBe(1);
+      expect(editor.getHtml()).toBe(cmpStr);
+      expect(editor.getCss()).toBe(styleStr);
+    });
   });
 });