@ -10,8 +10,8 @@ describe('ParserCss', () => {
config = { config = {
em : { em : {
getCustomParserCss : ( ) => customParser , getCustomParserCss : ( ) => customParser ,
trigger : ( ) => { } trigger : ( ) => { } ,
} } ,
} ; } ;
obj = new ParserCss ( config ) ; obj = new ParserCss ( config ) ;
} ) ; } ) ;
@ -50,8 +50,8 @@ describe('ParserCss', () => {
selectors : [ 'test1' ] , selectors : [ 'test1' ] ,
style : { style : {
color : 'red' , color : 'red' ,
width : '50px' width : '50px' ,
} } ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -60,7 +60,7 @@ describe('ParserCss', () => {
var str = ' .test1.test2 {color:red; test: value}' ; var str = ' .test1.test2 {color:red; test: value}' ;
var result = { var result = {
selectors : [ 'test1' , 'test2' ] , selectors : [ 'test1' , 'test2' ] ,
style : { color : 'red' , test : 'value' } style : { color : 'red' , test : 'value' } ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -70,36 +70,35 @@ describe('ParserCss', () => {
var result = [ var result = [
{ {
selectors : [ 'test1' , 'test2' ] , selectors : [ 'test1' , 'test2' ] ,
style : { color : 'red' } style : { color : 'red' } ,
} , } ,
{ {
selectors : [ 'test3' ] , selectors : [ 'test3' ] ,
style : { color : 'red' } style : { color : 'red' } ,
} } ,
] ; ] ;
expect ( obj . parse ( str ) ) . toEqual ( result ) ; expect ( obj . parse ( str ) ) . toEqual ( result ) ;
} ) ; } ) ;
test ( 'Parse more rules' , ( ) => { test ( 'Parse more rules' , ( ) => {
var str = var str = ' .test1.test2, .test3{ color:red } .test4, .test5.test6{ width:10px }' ;
' .test1.test2, .test3{ color:red } .test4, .test5.test6{ width:10px }' ;
var result = [ var result = [
{ {
selectors : [ 'test1' , 'test2' ] , selectors : [ 'test1' , 'test2' ] ,
style : { color : 'red' } style : { color : 'red' } ,
} , } ,
{ {
selectors : [ 'test3' ] , selectors : [ 'test3' ] ,
style : { color : 'red' } style : { color : 'red' } ,
} , } ,
{ {
selectors : [ 'test4' ] , selectors : [ 'test4' ] ,
style : { width : '10px' } style : { width : '10px' } ,
} , } ,
{ {
selectors : [ 'test5' , 'test6' ] , selectors : [ 'test5' , 'test6' ] ,
style : { width : '10px' } style : { width : '10px' } ,
} } ,
] ; ] ;
expect ( obj . parse ( str ) ) . toEqual ( result ) ; expect ( obj . parse ( str ) ) . toEqual ( result ) ;
} ) ; } ) ;
@ -109,7 +108,7 @@ describe('ParserCss', () => {
var result = { var result = {
selectors : [ 'test1' , 'test2' ] , selectors : [ 'test1' , 'test2' ] ,
style : { color : 'red' } , style : { color : 'red' } ,
state : 'hover' state : 'hover' ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -119,7 +118,7 @@ describe('ParserCss', () => {
var result = { var result = {
selectors : [ 'test1' , 'test2' ] , selectors : [ 'test1' , 'test2' ] ,
style : { color : 'red' } , style : { color : 'red' } ,
state : ':after' state : ':after' ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -129,21 +128,20 @@ describe('ParserCss', () => {
var result = { var result = {
selectors : [ 'test1' , 'test2' ] , selectors : [ 'test1' , 'test2' ] ,
style : { color : 'red' } , style : { color : 'red' } ,
state : 'nth-of-type(2n)' state : 'nth-of-type(2n)' ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
// Phantom don't find 'node.conditionText' so will skip it
// Phantom don't find 'node.conditionText' so will skip it
test ( 'Parse rule inside media query' , ( ) => { test ( 'Parse rule inside media query' , ( ) => {
var str = var str = '@media only screen and (max-width: 992px){ .test1.test2:hover{ color:red }}' ;
'@media only screen and (max-width: 992px){ .test1.test2:hover{ color:red }}' ;
var result = { var result = {
atRuleType : 'media' , atRuleType : 'media' ,
selectors : [ 'test1' , 'test2' ] , selectors : [ 'test1' , 'test2' ] ,
style : { color : 'red' } , style : { color : 'red' } ,
state : 'hover' , state : 'hover' ,
mediaText : 'only screen and (max-width: 992px)' mediaText : 'only screen and (max-width: 992px)' ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -156,7 +154,7 @@ describe('ParserCss', () => {
selectors : [ 'test1' , 'test2' ] , selectors : [ 'test1' , 'test2' ] ,
style : { color : 'red' } , style : { color : 'red' } ,
state : 'hover' , state : 'hover' ,
mediaText : '(max-width: 992px)' mediaText : '(max-width: 992px)' ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -169,21 +167,21 @@ describe('ParserCss', () => {
{ {
selectors : [ 'test1' ] , selectors : [ 'test1' ] ,
style : { color : 'white' } , style : { color : 'white' } ,
state : 'hover' state : 'hover' ,
} , } ,
{ {
selectors : [ 'test1' , 'test2' ] , selectors : [ 'test1' , 'test2' ] ,
style : { color : 'red' } , style : { color : 'red' } ,
state : 'hover' , state : 'hover' ,
atRuleType : 'media' , atRuleType : 'media' ,
mediaText : '(max-width: 992px)' mediaText : '(max-width: 992px)' ,
} , } ,
{ {
selectors : [ 'test2' ] , selectors : [ 'test2' ] ,
style : { color : 'blue' } , style : { color : 'blue' } ,
atRuleType : 'media' , atRuleType : 'media' ,
mediaText : '(max-width: 992px)' mediaText : '(max-width: 992px)' ,
} } ,
] ; ] ;
expect ( obj . parse ( str ) ) . toEqual ( result ) ; expect ( obj . parse ( str ) ) . toEqual ( result ) ;
} ) ; } ) ;
@ -193,38 +191,36 @@ describe('ParserCss', () => {
var result = { var result = {
selectors : [ ] , selectors : [ ] ,
selectorsAdd : '.class1 .class2, div > .class3' , selectorsAdd : '.class1 .class2, div > .class3' ,
style : { color : 'red' } style : { color : 'red' } ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
test ( 'Parse rule with mixed selectors' , ( ) => { test ( 'Parse rule with mixed selectors' , ( ) => {
var str = var str = ' .class1 .class2, .class3, div > .class4, .class5.class6 { color:red }' ;
' .class1 .class2, .class3, div > .class4, .class5.class6 { color:red }' ;
var result = [ var result = [
{ {
selectors : [ 'class3' ] , selectors : [ 'class3' ] ,
style : { color : 'red' } style : { color : 'red' } ,
} , } ,
{ {
selectors : [ 'class5' , 'class6' ] , selectors : [ 'class5' , 'class6' ] ,
selectorsAdd : '.class1 .class2, div > .class4' , selectorsAdd : '.class1 .class2, div > .class4' ,
style : { color : 'red' } style : { color : 'red' } ,
} } ,
] ; ] ;
expect ( obj . parse ( str ) ) . toEqual ( result ) ; expect ( obj . parse ( str ) ) . toEqual ( result ) ;
} ) ; } ) ;
test ( 'Parse rule with important styles' , ( ) => { test ( 'Parse rule with important styles' , ( ) => {
var str = var str = ' .test1 {color:red !important; width: 100px; height: 10px !important}' ;
' .test1 {color:red !important; width: 100px; height: 10px !important}' ;
var result = { var result = {
selectors : [ 'test1' ] , selectors : [ 'test1' ] ,
style : { style : {
color : 'red !important' , color : 'red !important' ,
height : '10px !important' , height : '10px !important' ,
width : '100px' width : '100px' ,
} } ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -239,8 +235,8 @@ describe('ParserCss', () => {
selectorsAdd : ':root' , selectorsAdd : ':root' ,
style : { style : {
'--some-color' : 'red' , '--some-color' : 'red' ,
'--some-width' : '55px' '--some-width' : '55px' ,
} } ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -256,14 +252,14 @@ describe('ParserCss', () => {
selectors : [ ] , selectors : [ ] ,
atRuleType : 'keyframes' , atRuleType : 'keyframes' ,
selectorsAdd : 'from' , selectorsAdd : 'from' ,
style : { opacity : '0' } style : { opacity : '0' } ,
} , } ,
{ {
selectors : [ ] , selectors : [ ] ,
atRuleType : 'keyframes' , atRuleType : 'keyframes' ,
selectorsAdd : 'to' , selectorsAdd : 'to' ,
style : { opacity : '1' } style : { opacity : '1' } ,
} } ,
] ; ] ;
expect ( obj . parse ( str ) ) . toEqual ( result ) ; expect ( obj . parse ( str ) ) . toEqual ( result ) ;
} ) ; } ) ;
@ -277,7 +273,7 @@ describe('ParserCss', () => {
selectorsAdd : '' , selectorsAdd : '' ,
atRuleType : 'font-face' , atRuleType : 'font-face' ,
singleAtRule : 1 , singleAtRule : 1 ,
style : { 'font-family' : '"Open Sans"' } style : { 'font-family' : '"Open Sans"' } ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -297,49 +293,48 @@ describe('ParserCss', () => {
selectorsAdd : '' , selectorsAdd : '' ,
style : { 'font-family' : '"Open Sans"' } , style : { 'font-family' : '"Open Sans"' } ,
singleAtRule : 1 , singleAtRule : 1 ,
atRuleType : 'font-face' atRuleType : 'font-face' ,
} , } ,
{ {
selectors : [ ] , selectors : [ ] ,
selectorsAdd : '' , selectorsAdd : '' ,
style : { style : {
'font-family' : "'Glyphicons Halflings'" , 'font-family' : "'Glyphicons Halflings'" ,
src : src : 'url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)' ,
'url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)'
} , } ,
singleAtRule : 1 , singleAtRule : 1 ,
atRuleType : 'font-face' atRuleType : 'font-face' ,
} } ,
] ; ] ;
const parsed = obj . parse ( str ) ; const parsed = obj . parse ( str ) ;
expect ( parsed ) . toEqual ( result ) ; expect ( parsed ) . toEqual ( result ) ;
} ) ; } ) ;
test ( 'Parse ID rule' , ( ) => { test ( 'Parse ID rule' , ( ) => {
var str = ` #test { color: red } ` ; var str = '#test { color: red }' ;
var result = { var result = {
selectors : [ '#test' ] , selectors : [ '#test' ] ,
style : { color : 'red' } style : { color : 'red' } ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
test ( 'Parse ID rule with state' , ( ) => { test ( 'Parse ID rule with state' , ( ) => {
var str = ` #test:hover { color: red } ` ; var str = '#test:hover { color: red }' ;
var result = { var result = {
selectors : [ '#test' ] , selectors : [ '#test' ] ,
state : 'hover' , state : 'hover' ,
style : { color : 'red' } style : { color : 'red' } ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
test ( 'Avoid composed selectors with ID' , ( ) => { test ( 'Avoid composed selectors with ID' , ( ) => {
var str = ` #test.class, #test.class:hover, .class { color: red } ` ; var str = '#test.class, #test.class:hover, .class { color: red }' ;
var result = { var result = {
selectors : [ 'class' ] , selectors : [ 'class' ] ,
selectorsAdd : '#test.class, #test.class:hover' , selectorsAdd : '#test.class, #test.class:hover' ,
style : { color : 'red' } style : { color : 'red' } ,
} ; } ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -348,10 +343,10 @@ describe('ParserCss', () => {
var str = '.test1 { color:red }' ; var str = '.test1 { color:red }' ;
var result = { var result = {
selectors : [ 'test1' ] , selectors : [ 'test1' ] ,
style : { color : 'blue' } style : { color : 'blue' } ,
} ; } ;
obj = new ParserCss ( { obj = new ParserCss ( {
parserCss : ( ) => [ result ] parserCss : ( ) => [ result ] ,
} ) ; } ) ;
expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ; expect ( obj . parse ( str ) ) . toEqual ( [ result ] ) ;
} ) ; } ) ;
@ -372,22 +367,21 @@ describe('ParserCss', () => {
test ( 'Check node with font-face rule' , ( ) => { test ( 'Check node with font-face rule' , ( ) => {
const style = { const style = {
'font-family' : '"Glyphicons Halflings"' , 'font-family' : '"Glyphicons Halflings"' ,
src : src : 'url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot")' ,
'url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot")'
} ; } ;
expect ( expect (
obj . checkNode ( { obj . checkNode ( {
atRule : 'font-face' , atRule : 'font-face' ,
selectors : '' , selectors : '' ,
style : style style : style ,
} ) } )
) . toEqual ( [ ) . toEqual ( [
{ {
style : style , style : style ,
atRuleType : 'font-face' , atRuleType : 'font-face' ,
singleAtRule : 1 , singleAtRule : 1 ,
selectors : [ ] selectors : [ ] ,
} } ,
] ) ; ] ) ;
} ) ; } ) ;
@ -398,7 +392,7 @@ describe('ParserCss', () => {
atRule : 'keyframes' , atRule : 'keyframes' ,
params : 'name' , params : 'name' ,
selectors : 'from' , selectors : 'from' ,
style : style style : style ,
} ) } )
) . toEqual ( [ ) . toEqual ( [
{ {
@ -406,8 +400,8 @@ describe('ParserCss', () => {
atRuleType : 'keyframes' , atRuleType : 'keyframes' ,
selectorsAdd : 'from' , selectorsAdd : 'from' ,
style : style , style : style ,
mediaText : 'name' mediaText : 'name' ,
} } ,
] ) ; ] ) ;
} ) ; } ) ;
@ -418,7 +412,7 @@ describe('ParserCss', () => {
atRule : 'media' , atRule : 'media' ,
params : 'screen and (min-width: 480px)' , params : 'screen and (min-width: 480px)' ,
selectors : '.class-test.class2:hover, div > span ' , selectors : '.class-test.class2:hover, div > span ' ,
style style ,
} ) } )
) . toEqual ( [ ) . toEqual ( [
{ {
@ -427,8 +421,8 @@ describe('ParserCss', () => {
selectorsAdd : 'div > span' , selectorsAdd : 'div > span' ,
style : style , style : style ,
state : 'hover' , state : 'hover' ,
mediaText : 'screen and (min-width: 480px)' mediaText : 'screen and (min-width: 480px)' ,
} } ,
] ) ; ] ) ;
} ) ; } ) ;
@ -437,58 +431,57 @@ describe('ParserCss', () => {
expect ( expect (
obj . checkNode ( { obj . checkNode ( {
selectors : '#main:hover' , selectors : '#main:hover' ,
style style ,
} ) } )
) . toEqual ( [ ) . toEqual ( [
{ {
selectors : [ '#main' ] , selectors : [ '#main' ] ,
state : 'hover' , state : 'hover' ,
style : style style : style ,
} } ,
] ) ; ] ) ;
} ) ; } ) ;
test ( 'Check node with multiple class selectors' , ( ) => { test ( 'Check node with multiple class selectors' , ( ) => {
const style = { const style = {
border : '1px solid black !important' , border : '1px solid black !important' ,
'background-repeat' : 'repeat-y, no-repeat' 'background-repeat' : 'repeat-y, no-repeat' ,
} ; } ;
expect ( expect (
obj . checkNode ( { obj . checkNode ( {
selectors : selectors : '.class1, .class1.class2:hover, div > .test:hover, span.test2' ,
'.class1, .class1.class2:hover, div > .test:hover, span.test2' , style ,
style
} ) } )
) . toEqual ( [ ) . toEqual ( [
{ {
selectors : [ 'class1' ] , selectors : [ 'class1' ] ,
style : style style : style ,
} , } ,
{ {
selectors : [ 'class1' , 'class2' ] , selectors : [ 'class1' , 'class2' ] ,
state : 'hover' , state : 'hover' ,
selectorsAdd : 'div > .test:hover, span.test2' , selectorsAdd : 'div > .test:hover, span.test2' ,
style : style style : style ,
} } ,
] ) ; ] ) ;
} ) ; } ) ;
test ( 'Check node with a rule containing CSS variables' , ( ) => { test ( 'Check node with a rule containing CSS variables' , ( ) => {
const style = { const style = {
'--some-color' : 'red' , '--some-color' : 'red' ,
'--some-width' : '55px' '--some-width' : '55px' ,
} ; } ;
expect ( expect (
obj . checkNode ( { obj . checkNode ( {
selectors : ':root' , selectors : ':root' ,
style style ,
} ) } )
) . toEqual ( [ ) . toEqual ( [
{ {
selectors : [ ] , selectors : [ ] ,
selectorsAdd : ':root' , selectorsAdd : ':root' ,
style : style style : style ,
} } ,
] ) ; ] ) ;
} ) ; } ) ;
} ) ; } ) ;
Artur Arseniev
4 years ago