Skip to content

Commit a93c383

Browse files
committed
add integration tests
1 parent ce5fc4c commit a93c383

File tree

6 files changed

+3580
-29
lines changed

6 files changed

+3580
-29
lines changed

.travis.yml

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
language: node_js
2+
node_js:
3+
- "lts/*"

README.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# postcss-combine-media-query
22

3+
[![Build Status](https://travis-ci.com/SassNinja/postcss-combine-media-query.svg?branch=master)](https://travis-ci.com/SassNinja/postcss-combine-media-query)
4+
35
If you are used to write the media queries of your components within those components (what you should do instead of maintaining a large global media query file) you might end up with CSS that contains the same media query rule multiple times.
46

57
```css

package.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
"author": "Kai Falkowski",
66
"license": "MIT",
77
"main": "index.js",
8-
"scripts": {},
8+
"scripts": {
9+
"test": "jest"
10+
},
911
"keywords": [
1012
"postcss",
1113
"plugin",
@@ -16,10 +18,12 @@
1618
"combine",
1719
"optimization"
1820
],
19-
"peerDependencies": {
21+
"dependencies": {
2022
"postcss": "^7.0.21"
2123
},
22-
"devDependencies": {},
24+
"devDependencies": {
25+
"jest": "^24.9.0"
26+
},
2327
"repository": {
2428
"type": "git",
2529
"url": "https://github.com/SassNinja/postcss-combine-media-query.git"

test/default.data.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
module.exports = `
3+
.foo {
4+
color: red;
5+
}
6+
@media (min-width: 1024px) {
7+
.foo {
8+
color: green;
9+
}
10+
}
11+
@media (min-width: 1200px) {
12+
.foo {
13+
color: blue;
14+
}
15+
}
16+
.bar {
17+
font-size: 1rem;
18+
@supports (display: grid) {
19+
display: block;
20+
}
21+
}
22+
@media (min-width: 1024px) {
23+
.bar {
24+
font-size: 2rem;
25+
@supports (display: grid) {
26+
display: grid;
27+
}
28+
}
29+
}
30+
@media screen and (min-width: 1024px) {
31+
.bar {
32+
content: 'similar but different query'
33+
}
34+
}
35+
`;

test/default.test.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
const postcss = require('postcss');
3+
const plugin = require('../index');
4+
const data = require('./default.data');
5+
6+
let root;
7+
8+
beforeAll(() => {
9+
root = postcss([plugin()]).process(data).root;
10+
});
11+
12+
test('should combine equal media rules', () => {
13+
let count = 0;
14+
15+
root.walkAtRules('media', rule => {
16+
count++;
17+
});
18+
expect(count).toBe(3);
19+
});
20+
21+
test('should move all media rules to the end', () => {
22+
let endsWithMedia = true;
23+
let hasMedia = false;
24+
25+
root.nodes.forEach(node => {
26+
if (node.name === 'media') {
27+
hasMedia = true;
28+
}
29+
if (hasMedia && node.name !== 'media') {
30+
endsWithMedia = false;
31+
}
32+
expect(endsWithMedia).toBe(true);
33+
});
34+
});

0 commit comments

Comments
 (0)