tabler/core/scss/tests/_caret.test.scss

// Output tests for the caret mixins in scss/mixins/bootstrap/_caret.scss.
// The `caret-{down,up,end,start}` helpers draw a triangle out of borders; the
// main `caret()` builds a pseudo-element and branches on `$direction` for the
// rotation and (for `start`) the ::before/::after structure.

@use '../mixins/bootstrap/caret' as *;

@include describe('caret-* border helpers') {
  @include it('caret-down points the border triangle downward') {
    @include assert() {
      @include output() {
        .t {
          @include caret-down(0.3em);
        }
      }
      @include expect() {
        .t {
          border-top: 0.3em solid;
          border-inline-end: 0.3em solid transparent;
          border-bottom: 0;
          border-inline-start: 0.3em solid transparent;
        }
      }
    }
  }

  @include it('caret-up points the border triangle upward') {
    @include assert() {
      @include output() {
        .t {
          @include caret-up(0.3em);
        }
      }
      @include expect() {
        .t {
          border-top: 0;
          border-inline-end: 0.3em solid transparent;
          border-bottom: 0.3em solid;
          border-inline-start: 0.3em solid transparent;
        }
      }
    }
  }

  @include it('caret-start omits the left border') {
    @include assert() {
      @include output() {
        .t {
          @include caret-start(0.3em);
        }
      }
      @include expect() {
        .t {
          border-top: 0.3em solid transparent;
          border-inline-end: 0.3em solid;
          border-bottom: 0.3em solid transparent;
          border-inline-start: 0;
        }
      }
    }
  }
}

@include describe('caret mixin') {
  @include it('renders an ::after caret rotated for the down direction') {
    @include assert() {
      @include output() {
        .t {
          @include caret(down);
        }
      }
      @include expect() {
        .t:after {
          content: '';
          display: inline-block;
          vertical-align: 0.306em;
          width: 0.36em;
          height: 0.36em;
          border-bottom: 1px var(--border-style);
          border-inline-start: 1px var(--border-style);
          margin-inline-end: 0.1em;
          margin-inline-start: 0.306em;
          transform: rotate(-45deg);
        }
      }
    }
  }

  @include it('uses ::before and clears ::after for the start direction') {
    @include assert() {
      @include output() {
        .t {
          @include caret(start);
        }
      }
      @include expect() {
        .t:before {
          content: '';
          display: inline-block;
          vertical-align: 0.306em;
          width: 0.36em;
          height: 0.36em;
          border-bottom: 1px var(--border-style);
          border-inline-start: 1px var(--border-style);
          margin-inline-end: 0.1em;
          margin-inline-end: 0.306em;
          transform: rotate(45deg);
        }
        .t::after {
          content: none;
        }
      }
    }
  }
}