test.scss

@use './node_modules/sass-true' as *;
@use './index.scss' as tj;

@function pos-shorthand($args...) {
    @return tj.pos-shorthand($args);
}

@include describe('fn') {
    @include it('strip-unit') {
        @include assert {
            @include output {
                a: tj.strip-unit(7px);
                b: tj.strip-unit(12em);
                c: tj.strip-unit(31pt);
            }
            @include expect {
                a: 7;
                b: 12;
                c: 31;
            }
        }
    }

    @include it('pos-shorthand') {
        @include assert-equal(
            pos-shorthand(1px),
            (
                top: 1px,
                right: 1px,
                bottom: 1px,
                left: 1px,
            )
        );
        @include assert-equal(
            pos-shorthand(1px, 2px),
            (
                top: 1px,
                right: 2px,
                bottom: 1px,
                left: 2px,
            )
        );
        @include assert-equal(
            pos-shorthand(1px, 2px, 3px),
            (
                top: 1px,
                right: 2px,
                bottom: 3px,
                left: 2px,
            )
        );
        @include assert-equal(
            pos-shorthand(1px, 2px, 3px, 4px),
            (
                top: 1px,
                right: 2px,
                bottom: 3px,
                left: 4px,
            )
        );
        @include assert-equal(
            pos-shorthand($top: 1px),
            (
                top: 1px,
            )
        );
        @include assert-equal(
            pos-shorthand($top: 1px, $left: 2px),
            (
                top: 1px,
                left: 2px,
            )
        );
    }

    @include it('em') {
        @include assert('px') {
            @include output {
                a: tj.em(12px);
                b: tj.em(10px, 12px);
            }
            @include expect {
                a: 0.75em;
                b: 0.8333333333em;
            }
        }
        @include assert('pt') {
            @include output {
                a: tj.em(12pt); //12pt == 16px
            }
            @include expect {
                a: 1em;
            }
        }
        @include assert('unitless') {
            @include output {
                a: tj.em(12);
                b: tj.em(10px, 12);
            }
            @include expect {
                a: 0.75em;
                b: 0.8333333333em;
            }
        }
    }

    @include it('rem') {
        @include assert('px') {
            @include output {
                a: tj.rem(12px);
                b: tj.rem(10px, 12px);
            }
            @include expect {
                a: 0.75rem;
                b: 0.8333333333rem;
            }
        }
        @include assert('pt') {
            @include output {
                a: tj.rem(12pt); //12pt == 16px
            }
            @include expect {
                a: 1rem;
            }
        }
        @include assert('unitless') {
            @include output {
                a: tj.rem(12);
                b: tj.rem(10px, 12);
            }
            @include expect {
                a: 0.75rem;
                b: 0.8333333333rem;
            }
        }
    }

    @include it('between') {
        @include assert {
            @include output {
                a: tj.between(10px, 100px, 400px, 1000px);
            }
            @include expect {
                a: calc(15vw - 50px);
            }
        }
    }
}

@include describe('mixin') {
    @include it('size') {
        @include assert {
            @include output {
                @include tj.size(50px);
            }
            @include expect {
                width: 50px;
                height: 50px;
            }
        }
        @include assert {
            @include output {
                @include tj.size(50px, 100px);
            }
            @include expect {
                width: 50px;
                height: 100px;
            }
        }
    }

    @include it('text-hide') {
        @include assert {
            @include output {
                @include tj.text-hide();
            }
            @include expect {
                overflow: hidden;
                text-indent: -9999px;
            }
        }
    }

    @include it('ellipsis') {
        @include assert {
            @include output {
                @include tj.ellipsis(100px);
            }
            @include expect {
                display: inline-block;
                max-width: 100px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    @include it('clearfix') {
        @include assert {
            @include output {
                .a {
                    @include tj.clearfix;
                }
            }
            @include expect {
                .a::after {
                    content: '';
                    display: block;
                    clear: both;
                }
            }
        }
    }

    @include it('stretch') {
        @include assert {
            @include output {
                @include tj.stretch;
            }
            @include expect {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }
        @include assert {
            @include output {
                @include tj.stretch(10px);
            }
            @include expect {
                position: absolute;
                top: 10px;
                right: 10px;
                bottom: 10px;
                left: 10px;
            }
        }
        @include assert {
            @include output {
                @include tj.stretch(10px, 50px);
            }
            @include expect {
                position: absolute;
                top: 10px;
                right: 50px;
                bottom: 10px;
                left: 50px;
            }
        }
        @include assert {
            @include output {
                @include tj.stretch(10px, 50px, 100px);
            }
            @include expect {
                position: absolute;
                top: 10px;
                right: 50px;
                bottom: 100px;
                left: 50px;
            }
        }
        @include assert {
            @include output {
                @include tj.stretch(10px, 50px, 100px, 200px);
            }
            @include expect {
                position: absolute;
                top: 10px;
                right: 50px;
                bottom: 100px;
                left: 200px;
            }
        }
    }

    @include it('triangle') {
        @include assert {
            @include output {
                @include tj.triangle(top, #000, 30px);
            }
            @include expect {
                border-style: solid;
                height: 0;
                width: 0;
                border-color: transparent transparent #000 transparent;
                border-width: 0 15px 15px 15px;
            }
        }
    }

    @include it('column') {
        @include assert {
            @include output {
                .a {
                    @include tj.column(4, 10px);
                }
            }
            @include expect {
                .a {
                    width: calc(25% - 7.5px);
                }
                .a:not(:nth-child(4n)) {
                    margin-right: 10px;
                }
            }
        }
        @include assert {
            @include output {
                .a {
                    @include tj.column(4, 10px, -0.001px);
                }
            }
            @include expect {
                .a {
                    width: calc(25% - 7.5px);
                }
                .a:not(:nth-child(4n)) {
                    margin-right: 9.999px;
                }
            }
        }
    }

    @include it('animate') {
        @include assert {
            @include output {
                .a {
                    @include tj.animate(1s infinite, hash) {
                        from {
                            width: 0;
                        }
                        to {
                            width: 100%;
                        }
                    }
                }
            }
            @include expect {
                .a {
                    animation: THE_JUNGLE__ANIMATE__hash 1s infinite;
                }
                @keyframes THE_JUNGLE__ANIMATE__hash {
                    from {
                        width: 0;
                    }
                    to {
                        width: 100%;
                    }
                }
            }
        }
    }

    @include it('scoped-default') {
        @include assert {
            @include output {
                a: tj.em(16px);
                @include tj.scoped-default($base-size: 32px) {
                    b: tj.em(16px);
                    @include tj.scoped-default($base-size: 8px) {
                        c: tj.em(16px);
                    }
                    d: tj.em(16px);
                }
            }
            @include expect {
                a: 1em;
                b: 0.5em;
                c: 2em;
                d: 0.5em;
            }
        }
    }
}