path: root/alphabetlearning/static/scss/tests/mixins/_utilities.test.scss

$prefix: bs-;
$enable-important-utilities: false;

// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
@import "../../mixins/utilities";

@mixin test-generate-utility($params...) {
  @include assert() {
    @include output() {
      @include generate-utility($params...);
    }

    @include expect() {
      @content;
    }
  }
}

@include describe(generate-utility) {
  @include it("generates a utility class for each value") {
    @include test-generate-utility(
      (
        property: "padding",
        values: (small: .5rem, large: 2rem)
      )
    ) {
      .padding-small {
        padding: .5rem;
      }

      .padding-large {
        padding: 2rem;
      }
    }
  }

  @include describe("global $enable-important-utilities: true") {
    @include it("sets !important") {
      $enable-important-utilities: true !global;

      @include test-generate-utility(
        (
          property: "padding",
          values: (small: .5rem, large: 2rem)
        )
      ) {
        .padding-small {
          padding: .5rem !important;
        }

        .padding-large {
          padding: 2rem !important;
        }
      }

      $enable-important-utilities: false !global;
    }
  }

  @include describe("$utility") {
    @include describe("values") {
      @include it("supports null keys") {
        @include test-generate-utility(
          (
            property: "padding",
            values: (null: 1rem, small: .5rem, large: 2rem)
          ),
        ) {
          .padding {
            padding: 1rem;
          }

          .padding-small {
            padding: .5rem;
          }

          .padding-large {
            padding: 2rem;
          }
        }
      }

      @include it("ignores null values") {
        @include test-generate-utility(
          (
            property: "padding",
            values: (small: null, large: 2rem)
          )
        ) {
          .padding-large {
            padding: 2rem;
          }
        }
      }

      @include it("supports lists") {
        @include test-generate-utility(
          (
            property: "padding",
            values: 1rem 2rem
          )
        ) {
          .padding-1rem {
            padding: 1rem;
          }

          .padding-2rem {
            padding: 2rem;
          }
        }
      }

      @include it("supports single values") {
        @include test-generate-utility(
          (
            property: padding,
            values: 1rem
          )
        ) {
          .padding-1rem {
            padding: 1rem;
          }
        }
      }
    }

    @include describe("class & property") {
      @include it("adds each property to the declaration") {
        @include test-generate-utility(
          (
            class: padding-x,
            property: padding-inline-start padding-inline-end,
            values: 1rem
          )
        ) {
          .padding-x-1rem {
            padding-inline-start: 1rem;
            padding-inline-end: 1rem;
          }
        }
      }

      @include it("uses the first property as class name") {
        @include test-generate-utility(
          (
            property: padding-inline-start padding-inline-end,
            values: 1rem
          )
        ) {
          .padding-inline-start-1rem {
            padding-inline-start: 1rem;
            padding-inline-end: 1rem;
          }
        }
      }

      @include it("supports a null class to create classes straight from the values") {
        @include test-generate-utility(
          (
            property: visibility,
            class: null,
            values: (
              visible: visible,
              invisible: hidden,
            )
          )
        ) {
          .visible {
            visibility: visible;
          }

          .invisible {
            visibility: hidden;
          }
        }
      }
    }

    @include describe("state") {
      @include it("Generates selectors for each states") {
        @include test-generate-utility(
          (
            property: padding,
            values: 1rem,
            state: hover focus,
          )
        ) {
          .padding-1rem {
            padding: 1rem;
          }

          .padding-1rem-hover:hover {
            padding: 1rem;
          }

          .padding-1rem-focus:focus {
            padding: 1rem;
          }
        }
      }
    }

    @include describe("css-var"){
      @include it("sets a CSS variable instead of the property") {
        @include test-generate-utility(
          (
            property: padding,
            css-variable-name: padding,
            css-var: true,
            values: 1rem 2rem
          )
        ) {
          .padding-1rem {
            --bs-padding: 1rem;
          }

          .padding-2rem {
            --bs-padding: 2rem;
          }
        }
      }

      @include it("defaults to class") {
        @include test-generate-utility(
          (
            property: padding,
            class: padding,
            css-var: true,
            values: 1rem 2rem
          )
        ) {
          .padding-1rem {
            --bs-padding: 1rem;
          }

          .padding-2rem {
            --bs-padding: 2rem;
          }
        }
      }
    }

    @include describe("local-vars") {
      @include it("generates the listed variables") {
        @include test-generate-utility(
          (
            property: color,
            class: desaturated-color,
            local-vars: (
              color-opacity: 1,
              color-saturation: .25
            ),
            values: (
              blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
            )
          )
        ) {
          .desaturated-color-blue {
            --bs-color-opacity: 1;
            // Sass compilation will put a leading zero so we want to keep that one
            // stylelint-disable-next-line @stylistic/number-leading-zero
            --bs-color-saturation: 0.25;
            color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
          }
        }
      }
    }

    @include describe("css-var & state") {
      @include it("Generates a rule with for each state with a CSS variable") {
        @include test-generate-utility(
          (
            property: padding,
            css-var: true,
            css-variable-name: padding,
            values: 1rem,
            state: hover focus,
          )
        ) {
          .padding-1rem {
            --bs-padding: 1rem;
          }

          .padding-1rem-hover:hover {
            --bs-padding: 1rem;
          }

          .padding-1rem-focus:focus {
            --bs-padding: 1rem;
          }
        }
      }
    }

    @include describe("rtl") {
      @include it("sets up RTLCSS for removal when false") {
        @include test-generate-utility(
          (
            property: padding,
            values: 1rem,
            rtl: false
          )
        ) {
          /* rtl:begin:remove */

          .padding-1rem {
            padding: 1rem;
          }

          /* rtl:end:remove */

        }
      }
    }

    @include describe("rfs") {
      @include it("sets the fluid value when not inside media query") {
        @include test-generate-utility(
          (
            property: padding,
            values: 1rem,
            rfs: true
          )
        ) {
          .padding-1rem {
            padding: rfs-fluid-value(1rem);
          }
        }
      }

      @include it("sets the value when inside the media query") {
        @include test-generate-utility(
          (
            property: padding,
            values: 1rem,
            rfs: true
          ),
          $is-rfs-media-query: true
        ) {
          .padding-1rem {
            padding: rfs-value(1rem);
          }
        }
      }
    }
  }

  @include describe("$infix") {
    @include it("inserts the given infix") {
      @include test-generate-utility(
        (
          property: "padding",
          values: (null: 1rem, small: .5rem, large: 2rem)
        ),
        $infix: -sm
      ) {
        .padding-sm {
          padding: 1rem;
        }

        .padding-sm-small {
          padding: .5rem;
        }

        .padding-sm-large {
          padding: 2rem;
        }
      }
    }

    @include it("strips leading - if class is null") {
      @include test-generate-utility(
        (
          property: visibility,
          class: null,
          values: (
            visible: visible,
            invisible: hidden,
          )
        ),
        -sm
      ) {
        .sm-visible {
          visibility: visible;
        }

        .sm-invisible {
          visibility: hidden;
        }
      }
    }
  }
}