Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add @import tests for max-line-length rule #2221

Merged
merged 5 commits into from
Jan 28, 2017
Merged

Add @import tests for max-line-length rule #2221

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
480c3fc
Add `@import` tests for `max-line-length` rule
ntwb Dec 30, 2016
926e35e
Update `max-line-length` to exclude `@import` statements URI length
ntwb Dec 30, 2016
fdbd4fa
Update system test `005` snapshot
ntwb Dec 30, 2016
eed5b50
Merge branch 'master' into issue-2219
ntwb Jan 24, 2017
0467c96
Add tests using both single and double quotes
ntwb Jan 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 36 additions & 4 deletions lib/rules/max-line-length/__tests__/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ testRule(rule, {
code: "a { margin: 0 2px; }\r\n",
}, {
code: "a { margin: 0 2px; }\r\na { margin: 4px 0; }\n",
}, {
code: "@import url(\"somethingsomethingsomethingsomething.css\") print;",
}, {
code: "@import 'somethingsomethingsomethingsomething.css';",
} ],

reject: [ {
Expand Down Expand Up @@ -71,23 +75,51 @@ testRule(rule, {
message: messages.expected(20),
line: 1,
column: 21,
}, {
code: "@import url(\"somethingsomethingsomethingsomething.css\") projection, tv;",
message: messages.expected(20),
line: 1,
column: 29,
}, {
code: "@import 'somethingsomethingsomethingsomething.css' projection, tv;",
message: messages.expected(20),
line: 1,
column: 24,
} ],
})

testRule(rule, {
ruleName,
config: [30],

accept: [{
accept: [ {
code: "a { color: 0;\n top: 0; left: 0; right: 0; \n bottom: 0; }",
}],
}, {
code: "@import url(\"somethingsomethingsomethingsomething.css\") print;",
}, {
code: "@import url(\"somethingsomethingsomethingsomething.css\") projection, tv;",
}, {
code: "@import url(\"chrome:\/\/somethingsomethingsomethingsomething\/\");",
}, {
code: "@import \"somethingsomethingsomethingsomething.css\" screen, projection;",
} ],

reject: [{
reject: [ {
code: "a { color: 0;\n top: 0; left: 0; right: 0; background: pink; \n bottom: 0; }",
message: messages.expected(30),
line: 2,
column: 47,
}],
}, {
code: "@import url(\"somethingsomethingsomethingsomething.css\") projection, screen;",
message: messages.expected(30),
line: 1,
column: 33,
}, {
code: "@import \"somethingsomethingsomethingsomething.css\" screen, projection, tv;",
message: messages.expected(30),
line: 1,
column: 32,
} ],
})

testRule(rule, {
Expand Down
6 changes: 5 additions & 1 deletion lib/rules/max-line-length/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,11 @@ const rule = function (maxLength, options) {

// Collapse all urls into something nice and short,
// so they do not throw the game
const rootString = root.toString().replace(/url\(.*\)/ig, "url()")
const rootString = root.toString()
// Replace `url(something)` with `url()`
.replace(/url\(.*\)/ig, "url()")
// Replace `@import "something"` with `@import ""`
.replace(/\@import\s+['"].*['"]/ig, "@import ")
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, I do not think this regexp is exact enough. for example, @import 'svg-something<id="horse">'; will become @important ">';, right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @davidtheclark, I think what I have is OK (for my sanity I use http://regexr.com/ to test/explain regexes). There is probably room for improvement as I'm not the greatest regex architect.

Using \@import\s+['"].*['"] and replacing with @import

With this string: @import 'svg-something<id="horse">';

Results in @import ; (There is a single space between the t and ;)

I've added a test to accept that the length of this @import 'svg-something<id=\"horse\">' projection; string is 20 characters or under, stripping 'svg-something<id=\"horse\">' leaves @import projection; which is exactly 20 characters in length.

I've also added a failing test using @import 'svg-something<id=\"horse\">' screens, tv; which once stripping 'svg-something<id=\"horse\">' leaves @import screens, tv; which is 21 characters in length.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ooooo, I think my misunderstanding was in forgetting that the * is non-greedy by default, so the last ['"] will match the last possible quotation mark instead of first one it finds. You're right: carry on!


const ignoreNonComments = optionsMatches(options, "ignore", "non-comments")
const ignoreComments = optionsMatches(options, "ignore", "comments")
Expand Down
74 changes: 37 additions & 37 deletions system-tests/005/__snapshots__/005.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11765,169 +11765,169 @@ Array [
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 5,
"line": 146,
"column": 25,
"line": 145,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something seems wrong with this system test. Am I right that these line numbers do not correspond with lines in 005/stylesheet.css that make sense? Let's sort this out before accepting changes to it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trying to wrap my head around this and it's not going so well 😏

Currently in master before changes by this PR we have:

https://github.com/stylelint/stylelint/blob/master/system-tests/005/stylesheet.css#L146

b a {} <- 6 characters in length

https://github.com/stylelint/stylelint/blob/master/system-tests/005/__snapshots__/005.test.js.snap#L11767-L11773

      Object {
        "column": 5,
        "line": 146,
        "rule": "max-line-length",
        "severity": "error",
        "text": "Expected line length to be no more than 20 characters (max-line-length)",
      },

Once applying the changes in this PR the above warning for line 146 is no longer reported in the test snapshot but a new one is, line 149 with .bar, is now reported in the test snapshot whereas it wasn't previously.

It appears that there are numerous cases of the above, the only sane piece of data I've been able to extract thus far is that both before and after this PR there are a total of 84 max-line-length warnings, when i manually remove all lines from the stylesheet.css file less than 20 characters in length I indeed have 84 lines greater than 20 characters which correlates.

Line numbers, are at best a crap shoot 🎲

If anyone else in @stylelint/core can make any sense of this it'd be appreciated 😄

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's something going on here, but I'm not sure what. If I can reproduce a smaller test case I'll post it up.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One possability is that Jest is serializing the snapshot.css file:
https://facebook.github.io/jest/docs/configuration.html#snapshotserializers-array-string

Unconfirmed at this stage though, need to read more docs and or code to confirm.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is the problem: #2286

Copy link
Member Author

@ntwb ntwb Jan 24, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@m-allanson I actually didn't even get to the stage of checking if the column number was correct, I've only really tested line numbers, and it's been clear that the line numbers referenced are not 20 characters in length (based on this PRs settings)

Edit: I've just read the Extra example in the #2286 issue in that multiple errors can be reported for a single line rather, let's get that fixed and test the results 👍

p.s. Great sleuthing @m-allanson 🔍

Copy link
Member

@m-allanson m-allanson Jan 24, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ntwb Yeah it's a funny one - the incorrect column numbers can compound and spill over into incorrect line numbers too. I added an extra example to the bottom of the issue to demonstrate.

"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 3,
"line": 150,
"column": 2,
"line": 149,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 10,
"column": 3,
"line": 152,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 35,
"column": 28,
"line": 153,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 16,
"column": 9,
"line": 156,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 10,
"column": 3,
"line": 160,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 6,
"line": 162,
"column": 3,
"line": 161,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 19,
"column": 12,
"line": 173,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 3,
"line": 175,
"column": 15,
"line": 174,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 10,
"column": 3,
"line": 177,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 5,
"line": 179,
"column": 7,
"line": 178,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 5,
"line": 183,
"column": 7,
"line": 182,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 6,
"line": 195,
"column": 3,
"line": 194,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 10,
"column": 3,
"line": 202,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 9,
"column": 2,
"line": 207,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 8,
"column": 1,
"line": 211,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 1,
"line": 220,
"column": 21,
"line": 218,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 2,
"line": 224,
"column": 15,
"line": 223,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 23,
"column": 16,
"line": 225,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 7,
"line": 232,
"column": 4,
"line": 231,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 14,
"column": 7,
"line": 235,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 2,
"line": 238,
"column": 14,
"line": 237,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 6,
"line": 241,
"column": 1,
"line": 240,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
},
Object {
"column": 1,
"line": 244,
"column": 22,
"line": 243,
"rule": "max-line-length",
"severity": "error",
"text": "Expected line length to be no more than 20 characters (max-line-length)",
Expand Down