tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Up tests

pull/5196/head
Artur Arseniev 3 years ago
parent
cf0198348c
commit
f94b06e24e
1 changed files with 113 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 224
      test/specs/css_composer/index.ts

224
test/specs/css_composer/index.ts
View File

@ -193,117 +193,6 @@ describe('Css Composer', () => {
expect(rule.selectorsToString()).toEqual(`.${name}:${state}`);
});
test('Create a simple class-based rule with setRule', () => {
const selector = '.test';
const result = obj.setRule(selector, { color: 'red' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:red;');
});
test('Avoid creating multiple rules with the same selector', () => {
const selector = '.test';
obj.setRule(selector, { color: 'red' });
obj.setRule(selector, { color: 'blue' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:blue;');
});
test('Create a class-based rule with setRule', () => {
const selector = '.test.test2';
const result = obj.setRule(selector, { color: 'red' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:red;');
});
test('Create a class-based rule with a state, by using setRule', () => {
const selector = '.test.test2:hover';
const result = obj.setRule(selector, { color: 'red' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:red;');
});
test('Create a rule with class-based and mixed selectors', () => {
const selector = '.test.test2:hover, #test .selector';
obj.setRule(selector, { color: 'red' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:red;');
});
test('Create a rule with only mixed selectors', () => {
const selector = '#test1 .class1, .class2 > #id2';
obj.setRule(selector, { color: 'red' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.getSelectors().length).toEqual(0);
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:red;');
});
test('Create a rule with atRule', () => {
const toTest = [
{
selector: '.class1:hover',
style: { color: 'blue' },
opts: {
atRuleType: 'media',
atRuleParams: 'screen and (min-width: 480px)',
},
},
{
selector: '.class1:hover',
style: { color: 'red' },
opts: {
atRuleType: 'media',
atRuleParams: 'screen and (min-width: 480px)',
},
},
];
toTest.forEach(test => {
const { selector, style, opts } = test;
const result = obj.setRule(selector, style, opts);
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector, opts)!;
expect(rule.getAtRule()).toEqual(`@${opts.atRuleType} ${opts.atRuleParams}`);
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.getStyle()).toEqual(style);
});
});
test('Create different rules by using setRule', () => {
const toTest = [
{ selector: '.class1:hover', style: { color: '#111' } },
{ selector: '.class1.class2', style: { color: '#222' } },
{ selector: '.class1, .class2 .class3', style: { color: 'red' } },
{ selector: '.class1, .class2 .class4', style: { color: 'green' } },
{ selector: '.class4, .class1 .class2', style: { color: 'blue' } },
{
selector: '.class4, .class1 .class2',
style: { color: 'blue' },
opt: { atRuleType: 'media', atRuleParams: '(min-width: 480px)' },
},
];
toTest.forEach(test => {
const { selector, style, opt } = test;
obj.setRule(selector, style, opt);
const rule = obj.getRule(selector, opt)!;
const atRule = `${opt?.atRuleType || ''} ${opt?.atRuleParams || ''}`.trim();
expect(rule.getAtRule()).toEqual(atRule ? `@${atRule}` : '');
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.getStyle()).toEqual(style);
});
expect(obj.getAll().length).toEqual(toTest.length);
});
test('Get the right rule, containg similar selector names', () => {
const all = obj.getAll();
const name = 'rule-test';
@ -324,6 +213,119 @@ describe('Css Composer', () => {
expect(obj.get(ruleId.getSelectors())).toBe(ruleId);
});
describe('setRule/getRule', () => {
test('Create a simple class-based rule', () => {
const selector = '.test';
const result = obj.setRule(selector, { color: 'red' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:red;');
});
test('Avoid creating multiple rules with the same selector', () => {
const selector = '.test';
obj.setRule(selector, { color: 'red' });
obj.setRule(selector, { color: 'blue' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:blue;');
});
test('Create a class-based rule', () => {
const selector = '.test.test2';
const result = obj.setRule(selector, { color: 'red' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:red;');
});
test('Create a class-based rule with a state', () => {
const selector = '.test.test2:hover';
const result = obj.setRule(selector, { color: 'red' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:red;');
});
test('Create a rule with class-based and mixed selectors', () => {
const selector = '.test.test2:hover, #test .selector';
obj.setRule(selector, { color: 'red' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:red;');
});
test('Create a rule with only mixed selectors', () => {
const selector = '#test1 .class1, .class2 > #id2';
obj.setRule(selector, { color: 'red' });
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector)!;
expect(rule.getSelectors().length).toEqual(0);
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.styleToString()).toEqual('color:red;');
});
test('Create a rule with atRule', () => {
const toTest = [
{
selector: '.class1:hover',
style: { color: 'blue' },
opts: {
atRuleType: 'media',
atRuleParams: 'screen and (min-width: 480px)',
},
},
{
selector: '.class1:hover',
style: { color: 'red' },
opts: {
atRuleType: 'media',
atRuleParams: 'screen and (min-width: 480px)',
},
},
];
toTest.forEach(test => {
const { selector, style, opts } = test;
obj.setRule(selector, style, opts);
expect(obj.getAll().length).toEqual(1);
const rule = obj.getRule(selector, opts)!;
expect(rule.getAtRule()).toEqual(`@${opts.atRuleType} ${opts.atRuleParams}`);
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.getStyle()).toEqual(style);
});
});
test('Create different rules', () => {
const toTest = [
{ selector: '.class1:hover', style: { color: '#111' } },
{ selector: '.class1.class2', style: { color: '#222' } },
{ selector: '.class1, .class2 .class3', style: { color: 'red' } },
{ selector: '.class1, .class2 .class4', style: { color: 'green' } },
{ selector: '.class4, .class1 .class2', style: { color: 'blue' } },
{
selector: '.class4, .class1 .class2',
style: { color: 'blue' },
opt: { atRuleType: 'media', atRuleParams: '(min-width: 480px)' },
},
];
toTest.forEach(test => {
const { selector, style, opt } = test;
obj.setRule(selector, style, opt);
const rule = obj.getRule(selector, opt)!;
const atRule = `${opt?.atRuleType || ''} ${opt?.atRuleParams || ''}`.trim();
expect(rule.getAtRule()).toEqual(atRule ? `@${atRule}` : '');
expect(rule.selectorsToString()).toEqual(selector);
expect(rule.getStyle()).toEqual(style);
});
expect(obj.getAll().length).toEqual(toTest.length);
});
});
describe('getRules', () => {
test('Get rule by class selectors', () => {
obj.addCollection(`

Write Preview
Loading…
Cancel
Save