@sencha/cmd-linux-64/dist/js/node_modules/fashion/test/specs/extend.js

Productivity and performance optimization tool for building applications with Sencha Ext JS

var assert = require('assert');
var helpers = require('../helpers.js');

describe('extend', function() {
    helpers.test('should support the simple @extend case', [
        '.foo {a: b;}',
        '.bar {@extend .foo;}'
    ], [
        '.foo,',
        '.bar {',
        '    a: b;',
        '}'
    ]);

    helpers.test('should support calling an @extend before the rule you are extending is defined', [
        '.bar {@extend .foo;}',
        '.foo {a: b;}'
    ], [
        '.foo,',
        '.bar {',
        '    a: b;',
        '}'
    ]);

    helpers.test('should support calling @extend after making declarations', [
        '.foo {a: b;}',
        '.bar {c: d; @extend .foo;}'
    ], [
        '.foo,',
        '.bar {',
        '    a: b;',
        '}',
        '.bar {',
        '    c: d;',
        '}'
    ]);

    helpers.test('should support calling @extend before making declarations', [
        '.foo {a: b;}',
        '.bar {@extend .foo; c: d;}'
    ], [
        '.foo,',
        '.bar {',
        '    a: b;',
        '}',
        '.bar {',
        '    c: d;',
        '}'
    ]);

    helpers.test('should support extending a class that is part of a longer selector', [
        '.foo {a: b;}',
        '.bar {@extend .foo;}',
        '.blip .foo {c: d;}'
    ], [
        '.foo,',
        '.bar {',
        '    a: b;',
        '}',
        '.blip .foo,',
        '.blip .bar {',
        '    c: d;',
        '}'
    ]);

    helpers.test('should support extending multiple classes in the same ruleset', [
        '.foo {a: b}',
        '.bar {c: d}',
        '.baz {@extend .foo; @extend .bar}'
    ], [
        '.foo,',
        '.baz {',
        '    a: b;',
        '}',
        '.bar,',
        '.baz {',
        '    c: d;',
        '}'
    ]);
    
    helpers.test('should support extending multiple classes that are defined in the same selector', [
        '.foo .bar {a: b}',
        '.baz {@extend .foo; @extend .bar}'
    ], [
        '.foo .bar,',
        '.baz .bar,',
        '.foo .baz,',
        '.baz .baz {',
        '    a: b;',
        '}'
    ]);
    
    helpers.test('should support special type of extending in selectors', [
        '.foo.bar {a: b}',
        '.baz {@extend .foo;}'
    ], [
        '.foo.bar,',
        '.baz.bar {',
        '    a: b;',
        '}'
    ]);

    helpers.test('should not match extends on partial matches for special types', [
        '.fooasdf.bar {a: b}',
        '.baz {@extend .foo;}'
    ], [
        '.fooasdf.bar {',
        '    a: b;',
        '}'
    ]);

    helpers.test('should support multiple rulesets extending different parts of a selector', [
        '.foo .bar {a: b}',
        '.baz {@extend .foo}',
        '.bang {@extend .bar}'
    ], [
        '.foo .bar,',
        '.baz .bar,',
        '.foo .bang,',
        '.baz .bang {',
        '    a: b;',
        '}'
    ]);


    helpers.test('should consolidate multiple extends of same rule', [
        '.message {',
        '  border: 1px solid #ccc;',
        '  padding: 10px;',
        '  color: #333;',
        '}',
        '.success {',
        '  @extend .message;',
        '  border-color: green;',
        '}',
        '.error {',
        '  @extend .message;',
        '  border-color: red;',
        '}',
        '.warning {',
        '  @extend .message;',
        '  border-color: yellow;',
        '}',
        '.base .with .spaces {',
        '    @extend .warning;',
        '}',
        '.another, .yetAnother {',
        '  @extend .success;',
        '  @extend .message;',
        '  foo: bar;',
        '}'
    ], [
        '.message,',
        '.success,',
        '.error,',
        '.warning,',
        '.another,',
        '.yetAnother,',
        '.base .with .spaces {',
        '    border: 1px solid #ccc;',
        '    padding: 10px;',
        '    color: #333;',
        '}',
        '.success,',
        '.another,',
        '.yetAnother {',
        '    border-color: green;',
        '}',
        '.error {',
        '    border-color: red;',
        '}',
        '.warning,',
        '.base .with .spaces {',
        '    border-color: yellow;',
        '}',
        '.another,',
        '.yetAnother {',
        '    foo: bar;',
        '}'
    ]);

    helpers.test('should extend a pseudo selector', [
        'b:hover {',
        '    foo: bar;',
        '}',
        '',
        'd {',
        '    baz: bing;',
        '    @extend b:hover;',
        '}'
    ], [
        'b:hover,',
        'd {',
        '    foo: bar;',
        '}',
        'd {',
        '    baz: bing;',
        '}'
    ]);

    helpers.test("should handle nested extends", [
        ".x-picker {",
        ".x-button {",
        "    @extend .xt-button;",
        "    &-action {",
        "        @extend .primary;",
        "        }",
        "    }",
        "}",
        ".xtime-button, .xt-button {",
        "&.primary {",
        "        color:#fff;",
        "    }",
        "}"
    ], [
        ".xtime-button.primary,",
        ".xt-button.primary,",
        ".x-picker .x-button.primary,",
        ".xtime-button-action,",
        ".xt-button-action,",
        ".x-picker .x-button.x-picker .x-button-action {",
        "    color: #fff;",
        "}"
    ]);
    
    helpers.test("should properly extend selectors from nested rulesets", [
        '@mixin image-mixin {',
        '  .product-image {',
        '    .thumbnail {',
        '      a: 1;',
        '      &:empty {',
        '        b: 2;',
        '      }',
        '    }',
        '  }',
        '}',
        '',
        '.table {',
        '  @include image-mixin;',
        '    c: 3;',
        ' }',
        '',
        '.products {',
        '  .bundle {',
        '    @extend .table;',
        '  }',
        '}'
    ], [
        '.table,',
        '.products .bundle {',
        '    c: 3;',
        '}',
        '.table .product-image .thumbnail,',
        '.products .bundle .product-image .thumbnail {',
        '    a: 1;',
        '}',
        '.table .product-image .thumbnail:empty,',
        '.products .bundle .product-image .thumbnail:empty {',
        '    b: 2;',
        '}'
    ]);
    
    helpers.test("should properly extend nested selectors", [
        '.extendMe{',
        '    color:red;',
        '    &:before{',
        '        background-color:green;',
        '    }',
        '}',
        '.someview {',
        '	&.favorite .testing {',
        '        @extend .extendMe;',
        '        font-size: 15px;',
        '    }',
        '}'
    ], [
        '.extendMe,',
        '.someview.favorite .testing {',
        '    color: red;',
        '}',
        '.extendMe:before,',
        '.someview.favorite .testing:before {',
        '    background-color: green;',
        '}',
        '.someview.favorite .testing {',
        '    font-size: 15px;',
        '}'
    ]);
});