From b91c9aced3fefcb7ee86e0cc94aabcfe8ebc93e3 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 2 Sep 2023 13:19:33 +0400 Subject: [PATCH] Up CssComposer test --- .../e2e/{CssComposer.js => CssComposer.ts} | 98 +++++++++---------- 1 file changed, 46 insertions(+), 52 deletions(-) rename test/specs/css_composer/e2e/{CssComposer.js => CssComposer.ts} (64%) diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.ts similarity index 64% rename from test/specs/css_composer/e2e/CssComposer.js rename to test/specs/css_composer/e2e/CssComposer.ts index 9360ddf6c..199c7b3d7 100644 --- a/test/specs/css_composer/e2e/CssComposer.js +++ b/test/specs/css_composer/e2e/CssComposer.ts @@ -1,32 +1,32 @@ -import Backbone from 'backbone'; -const $ = Backbone.$; +import grapesjs, { Editor } from '../../../../src'; +import { CssRuleJSON } from '../../../../src/css_composer/model/CssRule'; +import { createEl } from '../../../../src/utils/dom'; describe('E2E tests', () => { - var fixtures; - var fixture; - var gjs; - var cssc; - var clsm; - var domc; - var rulesSet; - var rulesSet2; + let fixtures: Element; + let fixture: Element; + let cssc: Editor['Css']; + let clsm: Editor['Selectors']; + let domc: Editor['Components']; + let rulesSet: CssRuleJSON[]; + let rulesSet2: CssRuleJSON[]; beforeAll(() => { - fixtures = $('#fixtures'); - fixture = $('
'); + document.body.innerHTML = '
'; + fixtures = document.body.firstElementChild!; }); beforeEach(done => { - gjs = grapesjs.init({ + const gjs = grapesjs.init({ stylePrefix: '', - storageManager: { autoload: 0, type: 'none' }, - assetManager: { storageType: 'none' }, + storageManager: { autoload: false, type: 'none' }, container: 'csscomposer-fixture', }); cssc = gjs.CssComposer; clsm = gjs.SelectorManager; domc = gjs.DomComponents; - fixture.empty().appendTo(fixtures); + fixture = createEl('div', { class: 'csscomposer-fixture' }); + fixtures.appendChild(fixture); rulesSet = [ { selectors: [{ name: 'test1' }, { name: 'test2' }] }, { selectors: [{ name: 'test2' }, { name: 'test3' }] }, @@ -43,43 +43,37 @@ describe('E2E tests', () => { done(); }); - afterEach(() => { - gjs = null; - cssc = null; - clsm = null; - }); - afterAll(() => { fixture.remove(); }); test('Rules are correctly imported from default property', () => { - var gj = grapesjs.init({ + const gj = grapesjs.init({ stylePrefix: '', - storageManager: { autoload: 0, type: 'none' }, - cssComposer: { rules: rulesSet }, + storageManager: { autoload: false, type: 'none' }, + cssComposer: { rules: rulesSet as any }, container: 'csscomposer-fixture', }); - var cssc = gj.editor.get('CssComposer'); + const cssc = gj.editor.get('CssComposer'); expect(cssc.getAll().length).toEqual(rulesSet.length); - var cls = gj.editor.get('SelectorManager').getAll(); + const cls = gj.editor.get('SelectorManager').getAll(); expect(cls.length).toEqual(3); }); test('New rule adds correctly the class inside selector manager', () => { - var rules = cssc.getAll(); + const rules = cssc.getAll(); rules.add({ selectors: [{ name: 'test1', private: true }] }); - var rule = clsm.getAll().at(0); + const rule = clsm.getAll().at(0); expect(rule.get('name')).toEqual('test1'); expect(rule.get('private')).toEqual(true); }); test('New rules are correctly imported inside selector manager', () => { - var rules = cssc.getAll(); + const rules = cssc.getAll(); rulesSet.forEach(item => { rules.add(item); }); - var cls = clsm.getAll(); + const cls = clsm.getAll(); expect(cls.length).toEqual(3); expect(cls.at(0).get('name')).toEqual('test1'); expect(cls.at(1).get('name')).toEqual('test2'); @@ -87,8 +81,8 @@ describe('E2E tests', () => { }); test('Add rules from the new component added as a string with style tag', () => { - var comps = domc.getComponents(); - var rules = cssc.getAll(); + const comps = domc.getComponents(); + const rules = cssc.getAll(); comps.add('
Test
'); expect(comps.length).toEqual(1); expect(rules.length).toEqual(2); @@ -101,29 +95,29 @@ describe('E2E tests', () => { }); test('Add raw rule objects twice with addCollection do not duplucate rules', () => { - var rulesSet2Copy = JSON.parse(JSON.stringify(rulesSet2)); - var coll1 = cssc.addCollection(rulesSet2); - var coll2 = cssc.addCollection(rulesSet2Copy); + const rulesSet2Copy = JSON.parse(JSON.stringify(rulesSet2)); + const coll1 = cssc.addCollection(rulesSet2); + const coll2 = cssc.addCollection(rulesSet2Copy); expect(cssc.getAll().length).toEqual(3); expect(clsm.getAll().length).toEqual(3); expect(coll1).toEqual(coll2); }); test('Extend css rule style, if requested', () => { - var style1 = { color: 'red', width: '10px' }; - var style2 = { height: '20px', width: '20px' }; - var rule1 = { + const style1 = { color: 'red', width: '10px' }; + const style2 = { height: '20px', width: '20px' }; + const rule1 = { selectors: ['test1'], style: style1, }; - var rule2 = { + const rule2 = { selectors: ['test1'], style: style2, }; - var ruleOut = cssc.addCollection(rule1)[0]; + let ruleOut = cssc.addCollection([rule1])[0]; // ruleOut is a Model ruleOut = JSON.parse(JSON.stringify(ruleOut)); - var ruleResult = { + const ruleResult: CssRuleJSON = { selectors: ['test1'], style: { color: 'red', @@ -131,7 +125,7 @@ describe('E2E tests', () => { }, }; expect(ruleOut).toEqual(ruleResult); - var ruleOut = cssc.addCollection(rule2, { extend: 1 })[0]; + ruleOut = cssc.addCollection([rule2], { extend: 1 })[0]; ruleOut = JSON.parse(JSON.stringify(ruleOut)); ruleResult.style = { color: 'red', @@ -142,23 +136,23 @@ describe('E2E tests', () => { }); test('Do not extend with different selectorsAdd', () => { - var style1 = { color: 'red', width: '10px' }; - var style2 = { height: '20px', width: '20px' }; - var rule1 = { + const style1 = { color: 'red', width: '10px' }; + const style2 = { height: '20px', width: '20px' }; + const rule1 = { selectors: [], selectorsAdd: '*', style: style1, }; - var rule2 = { + const rule2 = { selectors: [], selectorsAdd: 'p', style: style2, }; - var rule1Out = cssc.addCollection(rule1, { extend: 1 })[0]; - var rule2Out = cssc.addCollection(rule2, { extend: 1 })[0]; + let rule1Out = cssc.addCollection([rule1], { extend: 1 })[0]; + let rule2Out = cssc.addCollection([rule2], { extend: 1 })[0]; rule1Out = JSON.parse(JSON.stringify(rule1Out)); rule2Out = JSON.parse(JSON.stringify(rule2Out)); - var rule1Result = { + const rule1Result = { selectors: [], selectorsAdd: '*', style: { @@ -166,7 +160,7 @@ describe('E2E tests', () => { width: '10px', }, }; - var rule2Result = { + const rule2Result = { selectors: [], selectorsAdd: 'p', style: { @@ -179,7 +173,7 @@ describe('E2E tests', () => { }); test('Add raw rule objects with width via addCollection', () => { - var coll1 = cssc.addCollection(rulesSet2); + const coll1 = cssc.addCollection(rulesSet2); expect(coll1[2].get('mediaText')).toEqual(rulesSet2[2].mediaText); }); });