aboutsummaryrefslogtreecommitdiffstats
path: root/test/bem/_next-twin-element.scss
diff options
context:
space:
mode:
Diffstat (limited to 'test/bem/_next-twin-element.scss')
-rw-r--r--test/bem/_next-twin-element.scss156
1 files changed, 156 insertions, 0 deletions
diff --git a/test/bem/_next-twin-element.scss b/test/bem/_next-twin-element.scss
new file mode 100644
index 0000000..85fe473
--- /dev/null
+++ b/test/bem/_next-twin-element.scss
@@ -0,0 +1,156 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
2
3@use 'true' as *;
4@use '../../src/bem';
5
6//
7// Included test cases:
8// - /// 1 /// - single element
9// - /// 2 /// - single element, manual selector in-between
10// - /// 3 /// - single element, modifier in-between
11// - /// 4 /// - multiple elements
12// - /// 5 /// - multiple elements, manual selector in-between
13// - /// 6 /// - multiple elements, modifier in-between
14//
15
16@include it('next-twin-element') {
17 @include assert('single element') { /// 1 ///
18 @include output {
19 @include bem.block('something') {
20 @include bem.elem('child') {
21 @include bem.next-twin-element {
22 font-size: 2em;
23 }
24 }
25 }
26 }
27
28 @include expect {
29 .something__child + .something__child {
30 font-size: 2em;
31 }
32 }
33 }
34
35 @include assert('single element, manual selector in-between') { /// 2 ///
36 @include output(false) {
37 @include bem.block('something') {
38 @include bem.elem('child') {
39 &:hover {
40 @include bem.next-twin-element {
41 font-size: 2em;
42 }
43 }
44
45 .test & {
46 @include bem.next-twin-element {
47 font-size: 2em;
48 }
49 }
50 }
51 }
52 }
53
54 @include expect(false) {
55 .something__child:hover + .something__child {
56 font-size: 2em;
57 }
58
59 .test .something__child + .something__child {
60 font-size: 2em;
61 }
62 }
63 }
64
65 @include assert('single element, modifier in-between') { /// 3 ///
66 @include output {
67 @include bem.block('something') {
68 @include bem.elem('child') {
69 @include bem.modifier('mod') {
70 @include bem.next-twin-element {
71 font-size: 2.5em;
72 }
73 }
74 }
75 }
76 }
77
78 @include expect {
79 .something__child--mod + .something__child {
80 font-size: 2.5em;
81 }
82 }
83 }
84
85 @include assert('multiple elements') { /// 4 ///
86 @include output {
87 @include bem.block('something') {
88 @include bem.elem('child1', 'child2') {
89 @include bem.next-twin-element {
90 font-size: 2em;
91 }
92 }
93 }
94 }
95
96 @include expect {
97 .something__child1 + .something__child1,
98 .something__child2 + .something__child2 {
99 font-size: 2em;
100 }
101 }
102 }
103
104 @include assert('multiple elements, manual selector in-between') { /// 5 ///
105 @include output(false) {
106 @include bem.block('something') {
107 @include bem.elem('child1', 'child2') {
108 &:hover {
109 @include bem.next-twin-element {
110 font-size: 2em;
111 }
112 }
113
114 .test & {
115 @include bem.next-twin-element {
116 font-size: 2em;
117 }
118 }
119 }
120 }
121 }
122
123 @include expect(false) {
124 .something__child1:hover + .something__child1,
125 .something__child2:hover + .something__child2 {
126 font-size: 2em;
127 }
128
129 .test .something__child1 + .something__child1,
130 .test .something__child2 + .something__child2 {
131 font-size: 2em;
132 }
133 }
134 }
135
136 @include assert('multiple elements, modifier in-between') { /// 6 ///
137 @include output {
138 @include bem.block('something') {
139 @include bem.elem('child1', 'child2') {
140 @include bem.modifier('mod') {
141 @include bem.next-twin-element {
142 font-size: 2.5em;
143 }
144 }
145 }
146 }
147 }
148
149 @include expect {
150 .something__child1--mod + .something__child1,
151 .something__child2--mod + .something__child2 {
152 font-size: 2.5em;
153 }
154 }
155 }
156}