From d07f664450ddaaebb44127a4bd057763d13d3f82 Mon Sep 17 00:00:00 2001 From: Feuerfuchs Date: Sun, 1 Nov 2020 20:55:14 +0100 Subject: Init --- test/bem/_iro-bem-element.scss | 491 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 491 insertions(+) create mode 100644 test/bem/_iro-bem-element.scss (limited to 'test/bem/_iro-bem-element.scss') diff --git a/test/bem/_iro-bem-element.scss b/test/bem/_iro-bem-element.scss new file mode 100644 index 0000000..f69f133 --- /dev/null +++ b/test/bem/_iro-bem-element.scss @@ -0,0 +1,491 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +// +// Included test cases: +// - /// 1 /// - single element +// - /// 2 /// - single element, manual selector in-between +// - /// 3 /// - single element, modifier in-between +// - /// 4 /// - single element, nested +// - /// 5 /// - single element, nested, manual selector in-between +// - /// 6 /// - single element, nested, modifier in-between +// - /// 7 /// - single element, in at-theme +// - /// 8 /// - multiple elements +// - /// 9 /// - multiple elements, manual selector in-between +// - /// 10 /// - multiple elements, modifier in-between +// - /// 11 /// - multiple elements, nested +// - /// 12 /// - multiple elements, nested, manual selector in-between +// - /// 13 /// - multiple elements, nested, modifier in-between +// - /// 14 /// - single element, in at-theme +// + +@include it('iro-bem-element') { + @include assert('single element') { /// 1 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child') { + font-size: 2em; + } + } + } + + @include expect { + .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, manual selector in-between') { /// 2 /// + @include output(false) { + @include iro-bem-block('something') { + &:hover { + @include iro-bem-element('child1') { + font-size: 2em; + } + } + + .test & { + @include iro-bem-element('child2') { + font-size: 2em; + } + } + } + } + + @include expect(false) { + .something:hover .something__child1 { + font-size: 2em; + } + + .test .something__child2 { + font-size: 2em; + } + } + } + + @include assert('single element, modifier in-between') { /// 3 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-modifier('mod') { + @include iro-bem-element('child') { + font-size: 2em; + } + } + } + } + + @include expect { + .something--mod .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, nested') { /// 4 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child') { + font-size: 2em; + + @include iro-bem-element('subchild') { + font-size: 3em; + } + } + } + } + + @include expect { + .something__child { + font-size: 2em; + } + + .something__child .something__subchild { + font-size: 3em; + } + } + } + + @include assert('single element, nested, manual selector in-between') { /// 5 /// + @include output(false) { + @include iro-bem-block('something') { + &:hover { + @include iro-bem-element('child1') { + font-size: 2em; + + @include iro-bem-element('subchild1') { + font-size: 3em; + } + } + } + + .test & { + @include iro-bem-element('child2') { + font-size: 2em; + + @include iro-bem-element('subchild2') { + font-size: 3em; + } + } + } + + @include iro-bem-element('child3') { + font-size: 2em; + + &:hover { + @include iro-bem-element('subchild3') { + font-size: 3em; + } + } + + .test & { + @include iro-bem-element('subchild4') { + font-size: 3em; + } + } + } + } + } + + @include expect(false) { + .something:hover .something__child1 { + font-size: 2em; + } + + .something:hover .something__child1 .something__subchild1 { + font-size: 3em; + } + + .test .something__child2 { + font-size: 2em; + } + + .test .something__child2 .something__subchild2 { + font-size: 3em; + } + + .something__child3 { + font-size: 2em; + } + + .something__child3:hover .something__subchild3 { + font-size: 3em; + } + + .test .something__child3 .something__subchild4 { + font-size: 3em; + } + } + } + + @include assert('single element, nested, modifier in-between') { /// 6 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-modifier('mod') { + @include iro-bem-element('child') { + font-size: 2em; + + @include iro-bem-element('subchild') { + font-size: 3em; + } + } + } + + @include iro-bem-element('child') { + font-size: 2em; + + @include iro-bem-modifier('mod') { + @include iro-bem-element('subchild') { + font-size: 3em; + } + } + } + } + } + + @include expect { + .something--mod .something__child { + font-size: 2em; + } + + .something--mod .something__child .something__subchild { + font-size: 3em; + } + + .something__child { + font-size: 2em; + } + + .something__child--mod .something__subchild { + font-size: 3em; + } + } + } + + @include assert('single element, in at-theme') { /// 7 /// + @include output(false) { + @include iro-bem-block('something') { + @include iro-bem-at-theme('dark') { + @include iro-bem-element('child') { + font-size: 2em; + } + } + } + } + + @include expect(false) { + .t-dark .something__child, + [class*=' t-'] .t-dark .something__child, + [class^='t-'] .t-dark .something__child { + font-size: 2em; + } + } + } + + @include assert('multiple elements') { /// 8 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + } + } + } + + @include expect { + .something__child1, + .something__child2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, manual selector in-between') { /// 9 /// + @include output(false) { + @include iro-bem-block('something') { + &:hover { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + } + } + + .test & { + @include iro-bem-element('child3', 'child4') { + font-size: 2em; + } + } + } + } + + @include expect(false) { + .something:hover .something__child1, + .something:hover .something__child2 { + font-size: 2em; + } + + .test .something__child3, + .test .something__child4 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, modifier in-between') { /// 10 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-modifier('mod') { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + } + } + } + } + + @include expect { + .something--mod .something__child1, + .something--mod .something__child2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, nested') { /// 11 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + + @include iro-bem-element('subchild1') { + font-size: 3em; + } + } + + @include iro-bem-element('child3') { + font-size: 2em; + + @include iro-bem-element('subchild2', 'subchild3') { + font-size: 3em; + } + } + } + } + + @include expect { + .something__child1, + .something__child2 { + font-size: 2em; + } + + .something__child1 .something__subchild1, + .something__child2 .something__subchild1 { + font-size: 3em; + } + + .something__child3 { + font-size: 2em; + } + + .something__child3 .something__subchild2, + .something__child3 .something__subchild3 { + font-size: 3em; + } + } + } + + @include assert('multiple elements, nested, manual selector in-between') { /// 12 /// + @include output(false) { + @include iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + + &:hover { + @include iro-bem-element('subchild1') { + font-size: 3em; + } + } + + .test & { + @include iro-bem-element('subchild2') { + font-size: 3em; + } + } + } + + @include iro-bem-element('child3') { + font-size: 2em; + + &:hover { + @include iro-bem-element('subchild3', 'subchild4') { + font-size: 3em; + } + } + + .test & { + @include iro-bem-element('subchild5', 'subchild6') { + font-size: 3em; + } + } + } + } + } + + @include expect(false) { + .something__child1, + .something__child2 { + font-size: 2em; + } + + .something__child1:hover .something__subchild1, + .something__child2:hover .something__subchild1 { + font-size: 3em; + } + + .test .something__child1 .something__subchild2, + .test .something__child2 .something__subchild2 { + font-size: 3em; + } + + .something__child3 { + font-size: 2em; + } + + .something__child3:hover .something__subchild3, + .something__child3:hover .something__subchild4 { + font-size: 3em; + } + + .test .something__child3 .something__subchild5, + .test .something__child3 .something__subchild6 { + font-size: 3em; + } + } + } + + @include assert('multiple elements, nested, modifier in-between') { /// 13 /// + @include output { + @include iro-bem-block('something') { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + + @include iro-bem-modifier('mod') { + @include iro-bem-element('subchild1') { + font-size: 3em; + } + } + } + + @include iro-bem-element('child3') { + font-size: 2em; + + @include iro-bem-modifier('mod') { + @include iro-bem-element('subchild2', 'subchild3') { + font-size: 3em; + } + } + } + } + } + + @include expect { + .something__child1, + .something__child2 { + font-size: 2em; + } + + .something__child1--mod .something__subchild1, + .something__child2--mod .something__subchild1 { + font-size: 3em; + } + + .something__child3 { + font-size: 2em; + } + + .something__child3--mod .something__subchild2, + .something__child3--mod .something__subchild3 { + font-size: 3em; + } + } + } + + @include assert('multiple elements, in at-theme') { /// 14 /// + @include output(false) { + @include iro-bem-block('something') { + @include iro-bem-at-theme('dark') { + @include iro-bem-element('child1', 'child2') { + font-size: 2em; + } + } + } + } + + @include expect(false) { + .t-dark .something__child1, + [class*=' t-'] .t-dark .something__child1, + [class^='t-'] .t-dark .something__child1, + .t-dark .something__child2, + [class*=' t-'] .t-dark .something__child2, + [class^='t-'] .t-dark .something__child2 { + font-size: 2em; + } + } + } +} -- cgit v1.3.1