-
-
Notifications
You must be signed in to change notification settings - Fork 46
/
_output.scss
168 lines (161 loc) · 5.84 KB
/
_output.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
@use 'utils';
/// # Testing CSS Output
/// @group api-assert-output
// Assert [output]
// ---------------
/// Define a CSS-output assertion.
/// Assertions are used inside the `test()` mixin
/// to define the expected results of the test.
/// - The `assert()` mixin is a wrapper,
/// and should contain one `output()` block and one `expect()` block
/// as nested contents.
/// - These three mixins together describe a single
/// `assert-equal` comparison on output CSS.
/// The compiled CSS-results of the `output()` mixin
/// will be compared against the results of the `expect()` mixin.
/// - When using Mocha/Jest integration, the output comparison is automated –
/// otherwise you will have to compare the output manually.
/// Using `git diff` is a great way to watch for changes in output.
///
/// @group api-assert-output
///
/// @param {string} $description [null] -
/// Description of the assertion being tested.
/// A `null` of `false` value generates a default description.
///
/// @content Use `output()` and `expect()` mixins
/// to define blocks for comparison
///
/// @example scss -
/// @include true.test('Sass math compiles before output') {
/// @include true.assert('You can also describe the assertion...') {
/// @include true.output {
/// width: 14em + 2;
/// }
/// @include true.expect {
/// width: 16em;
/// }
/// }
/// }
@mixin assert($description: null) {
@include utils.setup('output', $description);
@include utils.content('assert', false, $description) { @content; }
@include utils.strike('output-to-css', $output: true);
}
// Output
// ------
/// Describe the test content to be evaluated
/// against the paired `expect()` block.
/// Assertions are used inside the `test()` mixin
/// to define the expected results of the test.
/// - The `output()` mixin requires a content block,
/// and should be nested inside the `assert()` mixin
/// along with a single `expect()` block.
/// - These three mixins together describe a single
/// `assert-equal` comparison on output CSS.
/// The compiled CSS-results of the `output()` mixin
/// will be compared against the results of the `expect()` mixin.
/// - When using Mocha/Jest integration, the output comparison is automated –
/// otherwise you will have to compare the output manually.
/// Using `git diff` is a great way to watch for changes in output.
///
/// @group api-assert-output
///
/// @param {bool} $selector [true] -
/// Optionally wrap the contents in a `.test-output` selector block,
/// so you can test property-value output directly.
///
/// @content Define the test content to be checked
///
/// @example scss -
/// @include true.test('Sass math compiles before output') {
/// @include true.assert {
/// @include true.output {
/// width: 14em + 2;
/// }
/// @include true.expect {
/// width: 16em;
/// }
/// }
/// }
@mixin output($selector: true) {
@include utils.content('output', $selector) { @content; }
}
// Expect
// ------
/// Describe the expected results of the paired `output()` block.
/// The `expect()` mixin requires a content block,
/// and should be nested inside the `assert()` mixin,
/// along with a single `output()` block.
/// Assertions are used inside the `test()` mixin
/// to define the expected results of the test.
/// - These three mixins together describe a single
/// `assert-equal` comparison on output CSS.
/// The compiled CSS-results of the `output()` mixin
/// will be compared against the results of the `expect()` mixin.
/// - When using Mocha/Jest integration, the output comparison is automated –
/// otherwise you will have to compare the output manually.
/// Using `git diff` is a great way to watch for changes in output.
///
/// @group api-assert-output
///
/// @param {bool} $selector [true] -
/// Optionally wrap the contents in a `.test-output` selector block,
/// so you can test property-value output directly.
///
/// @content Define the expected results of a sibling `output()` mixin
///
/// @example scss -
/// @include true.test('Sass math compiles before output') {
/// @include true.assert {
/// @include true.output {
/// width: 14em + 2;
/// }
/// @include true.expect {
/// width: 16em;
/// }
/// }
/// }
@mixin expect($selector: true) {
@include utils.content('expect', $selector) { @content; }
}
// Contains
// ------
/// Describe the expected results of the paired `output()` block.
/// The `contains()` mixin requires a content block,
/// and should be nested inside the `assert()` mixin,
/// along with a single `output()` block.
/// Assertions are used inside the `test()` mixin
/// to define the expected results of the test.
/// - These three mixins together describe a single
/// comparison on output CSS.
/// The compiled CSS-results of the `contains()` mixin
/// will be compared against the results of the `output()` mixin
/// to see if all of the `contains` CSS is within the `output` CSS.
/// - When using Mocha/Jest integration, the output comparison is automated –
/// otherwise you will have to compare the output manually.
/// Using `git diff` is a great way to watch for changes in output.
///
/// @group api-assert-output
///
/// @param {bool} $selector [true] -
/// Optionally wrap the contents in a `.test-output` selector block,
/// so you can test property-value output directly.
///
/// @content Define the expected results of a sibling `output()` mixin
///
/// @example scss -
/// @include true.test('Sass math compiles before output') {
/// @include true.assert {
/// @include true.output {
/// height: 100%;
/// width: 14em + 2;
/// }
/// @include true.contains {
/// width: 16em;
/// }
/// }
/// }
@mixin contains($selector: true) {
@include utils.content('contains', $selector) { @content; }
}