bootstrap/scss/tests/utilities/_api.test.scss

@use "../../functions";
@use "../../variables";
@use "../../maps";
@use "../../mixins";

$utilities: ();

@include describe("utilities/api") {
  @include it("generates utilities for each breakpoints") {
    $utilities: (
      margin: (
        property: margin,
        important: true,
        values: auto
      ),
      padding: (
        property: padding,
        responsive: true,
        important: true,
        values: 1rem
      ),
      font-size: (
        property: font-size,
        values: (large: 1.25rem),
        important: true,
        print: true
      )
    ) !global;

    $grid-breakpoints: (
      xs: 0,
      sm: 333px,
      md: 666px
    ) !global;

    @include assert() {
      @include output() {
        @use "../../utilities/api";
      }

      @include expect() {
        // margin is not set to responsive
        .margin-auto {
          margin: auto !important;
        }

        // padding is, though
        .padding-1rem {
          padding: 1rem !important;
        }

        .font-size-large {
          font-size: 1.25rem !important;
        }

        @media (width >= 333px) {
          .padding-sm-1rem {
            padding: 1rem !important;
          }
        }

        @media (width >= 666px) {
          .padding-md-1rem {
            padding: 1rem !important;
          }
        }

        @media print {
          .font-size-print-large {
            font-size: 1.25rem !important;
          }
        }
      }

    }
  }

  @include it("generates utilities without !important when important: false or not set") {
    $utilities: (
      opacity: (
        property: opacity,
        values: (
          0: 0,
          50: .5,
          100: 1
        )
      ),
      text-align: (
        property: text-align,
        important: false,
        values: (
          start: left,
          center: center
        )
      )
    ) !global;

    @include assert() {
      @include output() {
        @import "../../utilities/api";
      }

      @include expect() {
        .opacity-0 {
          opacity: 0;
        }

        .opacity-50 {
          opacity: .5;
        }

        .opacity-100 {
          opacity: 1;
        }

        .text-align-start {
          text-align: left;
        }

        .text-align-center {
          text-align: center;
        }
      }
    }
  }
}