@tabler/core 1.5.1 → 1.6.0

package/js/tests/unit/util/template-factory.spec.ts

@@ -1,233 +0,0 @@
-import { describe, it, expect, beforeAll, afterEach } from 'vitest'
-import TemplateFactory from '../../../src/bootstrap/util/template-factory'
-import { clearFixture, getFixture } from '../../helpers/fixture'
-
-describe('TemplateFactory', () => {
-  let fixtureEl: HTMLElement
-
-  beforeAll(() => {
-    fixtureEl = getFixture()
-  })
-
-  afterEach(() => {
-    clearFixture()
-  })
-
-  describe('NAME', () => {
-    it('should return plugin NAME', () => {
-      expect(TemplateFactory.NAME).toBe('TemplateFactory')
-    })
-  })
-
-  describe('Default', () => {
-    it('should return plugin default config', () => {
-      expect(typeof TemplateFactory.Default).toBe('object')
-    })
-  })
-
-  describe('toHtml', () => {
-    describe('Sanitization', () => {
-      it('should sanitize template by default', () => {
-        const factory = new TemplateFactory({
-          sanitize: true,
-          template: '<div><a href="javascript:alert(7)">Click me</a></div>',
-        })
-        expect(factory.toHtml().innerHTML).not.toContain('href="javascript:alert(7)')
-      })
-
-      it('should not sanitize template if disabled', () => {
-        const factory = new TemplateFactory({
-          sanitize: false,
-          template: '<div><a href="javascript:alert(7)">Click me</a></div>',
-        })
-        expect(factory.toHtml().innerHTML).toContain('href="javascript:alert(7)')
-      })
-
-      it('should sanitize html content', () => {
-        const factory = new TemplateFactory({
-          sanitize: true,
-          html: true,
-          template: '<div id="foo"></div>',
-          content: { '#foo': '<a href="javascript:alert(7)">Click me</a>' },
-        })
-        expect(factory.toHtml().innerHTML).not.toContain('href="javascript:alert(7)')
-      })
-
-      it('should not sanitize content when disabled', () => {
-        const factory = new TemplateFactory({
-          sanitize: false,
-          html: true,
-          template: '<div id="foo"></div>',
-          content: { '#foo': '<a href="javascript:alert(7)">Click me</a>' },
-        })
-        expect(factory.toHtml().innerHTML).toContain('href="javascript:alert(7)')
-      })
-    })
-
-    describe('Extra Class', () => {
-      it('should add extra class', () => {
-        const factory = new TemplateFactory({ extraClass: 'testClass' })
-        expect(factory.toHtml().classList.contains('testClass')).toBe(true)
-      })
-
-      it('should add multiple extra classes', () => {
-        const factory = new TemplateFactory({ extraClass: 'testClass testClass2' })
-        const el = factory.toHtml()
-        expect(el.classList.contains('testClass')).toBe(true)
-        expect(el.classList.contains('testClass2')).toBe(true)
-      })
-
-      it('should resolve class from function', () => {
-        const factory = new TemplateFactory({
-          extraClass() {
-            return 'testClass'
-          },
-        })
-        expect(factory.toHtml().classList.contains('testClass')).toBe(true)
-      })
-    })
-  })
-
-  describe('Content', () => {
-    it('should add simple text content', () => {
-      const template = '<div><div class="foo"></div><div class="foo2"></div></div>'
-      const factory = new TemplateFactory({
-        template,
-        content: { '.foo': 'bar', '.foo2': 'bar2' },
-      })
-
-      const html = factory.toHtml()
-      expect(html.querySelector('.foo')!.textContent).toBe('bar')
-      expect(html.querySelector('.foo2')!.textContent).toBe('bar2')
-    })
-
-    it('should not fill template if selector does not exist', () => {
-      const factory = new TemplateFactory({
-        sanitize: true,
-        html: true,
-        template: '<div id="foo"></div>',
-        content: { '#bar': 'test' },
-      })
-      expect(factory.toHtml().outerHTML).toBe('<div id="foo"></div>')
-    })
-
-    it('should remove template selector if content is null', () => {
-      const factory = new TemplateFactory({
-        sanitize: true,
-        html: true,
-        template: '<div><div id="foo"></div></div>',
-        content: { '#foo': null },
-      })
-      expect(factory.toHtml().outerHTML).toBe('<div></div>')
-    })
-
-    it('should resolve content from function', () => {
-      const factory = new TemplateFactory({
-        sanitize: true,
-        html: true,
-        template: '<div><div id="foo"></div></div>',
-        content: { '#foo': () => null },
-      })
-      expect(factory.toHtml().outerHTML).toBe('<div></div>')
-    })
-
-    it('should use textContent when html is false and content is element', () => {
-      fixtureEl.innerHTML = '<div>foo<span>bar</span></div>'
-      const contentElement = fixtureEl.querySelector('div')!
-
-      const factory = new TemplateFactory({
-        html: false,
-        template: '<div><div id="foo"></div></div>',
-        content: { '#foo': contentElement },
-      })
-
-      const fooEl = factory.toHtml().querySelector('#foo')!
-      expect(fooEl.innerHTML).not.toBe(contentElement.innerHTML)
-      expect(fooEl.textContent).toBe(contentElement.textContent)
-      expect(fooEl.textContent).toBe('foobar')
-    })
-
-    it('should use outerHTML when html is true and content is element', () => {
-      fixtureEl.innerHTML = '<div>foo<span>bar</span></div>'
-      const contentElement = fixtureEl.querySelector('div')!
-
-      const factory = new TemplateFactory({
-        html: true,
-        template: '<div><div id="foo"></div></div>',
-        content: { '#foo': contentElement },
-      })
-
-      const fooEl = factory.toHtml().querySelector('#foo')!
-      expect(fooEl.innerHTML).toBe(contentElement.outerHTML)
-    })
-  })
-
-  describe('getContent', () => {
-    it('should get content as array', () => {
-      const factory = new TemplateFactory({
-        content: { '.foo': 'bar', '.foo2': 'bar2' },
-      })
-      expect(factory.getContent()).toEqual(['bar', 'bar2'])
-    })
-
-    it('should filter empties', () => {
-      const factory = new TemplateFactory({
-        content: {
-          '.foo': 'bar',
-          '.foo2': '',
-          '.foo3': null,
-          '.foo4': () => 2,
-          '.foo5': () => null,
-        },
-      })
-      expect(factory.getContent()).toEqual(['bar', 2])
-    })
-  })
-
-  describe('hasContent', () => {
-    it('should return true if it has content', () => {
-      const factory = new TemplateFactory({
-        content: { '.foo': 'bar', '.foo2': 'bar2', '.foo3': '' },
-      })
-      expect(factory.hasContent()).toBe(true)
-    })
-
-    it('should return false if all content is empty', () => {
-      const factory = new TemplateFactory({
-        content: { '.foo2': '', '.foo3': null, '.foo4': () => null },
-      })
-      expect(factory.hasContent()).toBe(false)
-    })
-  })
-
-  describe('changeContent', () => {
-    it('should change content', () => {
-      const template = '<div><div class="foo"></div><div class="foo2"></div></div>'
-      const factory = new TemplateFactory({
-        template,
-        content: { '.foo': 'bar', '.foo2': 'bar2' },
-      })
-
-      const text = (sel: string) => factory.toHtml().querySelector(sel)!.textContent
-      expect(text('.foo')).toBe('bar')
-      expect(text('.foo2')).toBe('bar2')
-
-      factory.changeContent({ '.foo': 'test', '.foo2': 'test2' })
-      expect(text('.foo')).toBe('test')
-      expect(text('.foo2')).toBe('test2')
-    })
-
-    it('should change only specified content', () => {
-      const template = '<div><div class="foo"></div><div class="foo2"></div></div>'
-      const factory = new TemplateFactory({
-        template,
-        content: { '.foo': 'bar', '.foo2': 'bar2' },
-      })
-
-      const text = (sel: string) => factory.toHtml().querySelector(sel)!.textContent
-      factory.changeContent({ '.foo': 'test' })
-      expect(text('.foo')).toBe('test')
-      expect(text('.foo2')).toBe('bar2')
-    })
-  })
-})

package/scss/tests/_add-subtract.test.scss

@@ -1,48 +0,0 @@
-// Priority 1 — unit tests for `add()` and `subtract()` from
-// scss/mixins/_functions.scss. Both guard against `null` operands and fall back
-// to a `calc()` expression when the operands are unit-incompatible, so the
-// branches around null-handling and the numeric-vs-calc path are what matter.
-
-@use 'sass:meta';
-@use 'sass:string';
-@use '../mixins/functions' as *;
-
-@include describe('add') {
-  @include it('treats a null operand as the identity') {
-    @include assert-equal(add(null, 5px), 5px);
-    @include assert-equal(add(5px, null), 5px);
-  }
-
-  @include it('adds two compatible numbers directly') {
-    @include assert-equal(add(2px, 3px), 5px);
-  }
-
-  // add() returns a real `calculation` here; two structurally-identical
-  // calculations aren't `==` in Sass, so compare the rendered output instead.
-  @include it('falls back to calc() for incompatible units') {
-    @include assert-equal(meta.inspect(add(2px, 3%)), 'calc(2px + 3%)');
-  }
-
-  @include it('builds a plain expression when calc is disabled') {
-    @include assert-equal(add(2px, 3%, false), string.unquote('2px + 3%'));
-  }
-}
-
-@include describe('subtract') {
-  @include it('returns null when both operands are null') {
-    @include assert-equal(subtract(null, null), null);
-  }
-
-  @include it('handles a single null operand') {
-    @include assert-equal(subtract(5px, null), 5px);
-    @include assert-equal(subtract(null, 5px), -5px);
-  }
-
-  @include it('subtracts two compatible numbers directly') {
-    @include assert-equal(subtract(5px, 2px), 3px);
-  }
-
-  @include it('falls back to calc() for incompatible units') {
-    @include assert-equal(meta.inspect(subtract(5px, 2%)), 'calc(5px - 2%)');
-  }
-}

package/scss/tests/_border-radius.test.scss

@@ -1,23 +0,0 @@
-// Next batch — the radius helper functions from
-// scss/mixins/bootstrap/_border-radius.scss. Both are self-contained (only
-// sass:list / sass:math / sass:meta) and operate on single values or lists.
-//
-// They return Sass lists, so the results are compared through `meta.inspect(...)`
-// (a single-item list is not `==` to the bare number it contains).
-
-@use 'sass:meta';
-@use '../mixins/bootstrap/border-radius' as *;
-
-@include describe('valid-radius') {
-  @include it('clamps a negative value to 0') {
-    @include assert-equal(meta.inspect(valid-radius(-5px)), '0');
-  }
-
-  @include it('leaves a non-negative value untouched') {
-    @include assert-equal(meta.inspect(valid-radius(8px)), '8px');
-  }
-
-  @include it('clamps only the negative members of a list') {
-    @include assert-equal(meta.inspect(valid-radius(4px -2px 6px)), '4px 0 6px');
-  }
-}

package/scss/tests/_box-shadow.test.scss

@@ -1,71 +0,0 @@
-// Output tests for the `box-shadow` mixin in scss/mixins/bootstrap/_box-shadow.scss.
-// With `$enable-shadows: true` (the default) it filters out null values, keeps a
-// single keyword (none/inherit/...) as-is, and otherwise joins the shadows into a
-// comma list. The `$enable-shadows: false` gate depends on overriding that global
-// and is not covered here.
-
-@use '../mixins/bootstrap/box-shadow' as *;
-
-@include describe('box-shadow') {
-  @include it('emits a single shadow value') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include box-shadow(0 1px 2px #000);
-        }
-      }
-      @include expect() {
-        .t {
-          box-shadow: 0 1px 2px #000;
-        }
-      }
-    }
-  }
-
-  @include it('passes a keyword through untouched') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include box-shadow(none);
-        }
-      }
-      @include expect() {
-        .t {
-          box-shadow: none;
-        }
-      }
-    }
-  }
-
-  @include it('joins multiple shadows into a comma list') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include box-shadow(0 1px 2px #000, 0 2px 4px #111);
-        }
-      }
-      @include expect() {
-        .t {
-          box-shadow:
-            0 1px 2px #000,
-            0 2px 4px #111;
-        }
-      }
-    }
-  }
-
-  @include it('filters out null values') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include box-shadow(null, 0 1px 2px #000);
-        }
-      }
-      @include expect() {
-        .t {
-          box-shadow: 0 1px 2px #000;
-        }
-      }
-    }
-  }
-}

package/scss/tests/_breakpoints.test.scss

@@ -1,50 +0,0 @@
-// Priority 4 — unit tests for the responsive breakpoint helpers. These are the
-// "needs config" tier: they default to the global `$grid-breakpoints`, but every
-// function also accepts an explicit `$breakpoints` map, so the tests pass a
-// local fixture map and stay independent of the project variables.
-//
-// `breakpoint-prev` lives in mixins/_functions.scss; the rest live in
-// mixins/bootstrap/_breakpoints.scss.
-
-@use '../mixins/functions' as fn;
-@use '../mixins/bootstrap/breakpoints' as *;
-
-$grid: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-);
-
-@include describe('breakpoint-next / breakpoint-prev') {
-  @include it('returns the neighbouring breakpoint name') {
-    @include assert-equal(breakpoint-next(md, $grid), lg);
-    @include assert-equal(fn.breakpoint-prev(md, $grid), sm);
-  }
-
-  @include it('returns null past the last / before the first breakpoint') {
-    @include assert-equal(breakpoint-next(xl, $grid), null);
-    @include assert-equal(fn.breakpoint-prev(xs, $grid), null);
-  }
-}
-
-@include describe('breakpoint-min') {
-  @include it('returns the min width, or null for the zero breakpoint') {
-    @include assert-equal(breakpoint-min(md, $grid), 768px);
-    @include assert-equal(breakpoint-min(xs, $grid), null);
-  }
-}
-
-@include describe('breakpoint-max') {
-  @include it('subtracts 0.02px to avoid min/max overlap') {
-    @include assert-equal(breakpoint-max(md, $grid), 767.98px);
-  }
-}
-
-@include describe('breakpoint-infix') {
-  @include it('is blank for the smallest breakpoint and dash-prefixed otherwise') {
-    @include assert-equal(breakpoint-infix(xs, $grid), '');
-    @include assert-equal(breakpoint-infix(md, $grid), '-md');
-  }
-}

package/scss/tests/_cards.test.scss

@@ -1,31 +0,0 @@
-// Regression coverage for the multi-layer .card-gradient background: every
-// zero-value gradient stop must keep its `%` unit. Unlike <length>,
-// <percentage> has no unitless-zero exception, so `color-mix(in sRGB, x 0,
-// y)` (missing the %) is invalid CSS and the whole color-mix() — and the
-// gradient layer using it — silently drops in the browser.
-//
-// This only guards the SCSS source; the actual incident was a CSS minifier
-// (clean-css) stripping a valid `0%` down to `0` post-compile, which is
-// outside what Sass-level tests can see — see .build/build-css.ts's minify().
-@use '../ui/cards' as cards;
-
-@include describe('card-gradient-background') {
-  @include it('keeps the % unit on every zero-value gradient stop') {
-    @include assert() {
-      @include output() {
-        .t {
-          @include cards.card-gradient-background;
-        }
-      }
-
-      @include expect() {
-        .t {
-          background:
-            radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box,
-            linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box,
-            linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box;
-        }
-      }
-    }
-  }
-}

package/scss/tests/_caret.test.scss

@@ -1,115 +0,0 @@
-// 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;
-        }
-      }
-    }
-  }
-}

package/scss/tests/_color-contrast.test.scss

@@ -1,24 +0,0 @@
-// Tests for `color-contrast()` from scss/mixins/_functions.scss.
-//
-// The globals it reads ($white, $black, $color-contrast-*, $min-contrast-ratio)
-// live in scss/_settings.scss, which functions.scss already `@use`s, so no
-// fixtures are needed — a plain `@use` of the functions module is enough.
-
-@use '../mixins/functions' as *;
-
-@include describe('color-contrast') {
-  @include it('picks black text on a light background') {
-    @include assert-equal(color-contrast(#ffffff), #000000);
-  }
-
-  @include it('picks white text on a dark background') {
-    @include assert-equal(color-contrast(#000000), #ffffff);
-  }
-
-  // When no candidate reaches the required ratio the function falls back to the
-  // highest-contrast option (and emits a @warn, which sass-true ignores). An
-  // impossible ratio of 21 against mid-grey forces that branch; black wins.
-  @include it('falls back to the highest-contrast colour when none qualifies') {
-    @include assert-equal(color-contrast(#808080, #000, #fff, 21), #000);
-  }
-}

package/scss/tests/_color-mode.test.scss

@@ -1,28 +0,0 @@
-// Output test for the `color-mode` mixin in scss/mixins/bootstrap/_color-mode.scss.
-//
-// With the default `$color-mode-type: data`, the mixin scopes its content under
-// the `[data-bs-theme]` / `[data-theme]` attribute selectors (the mechanism
-// Tabler uses for dark mode). The `media-query` branch depends on overriding
-// that global through the variables module, so it is not covered here.
-
-@use '../mixins/bootstrap/color-mode' as *;
-
-@include describe('color-mode') {
-  @include it('scopes content under the theme attribute selectors') {
-    @include assert() {
-      @include output() {
-        @include color-mode(dark) {
-          .x {
-            color: red;
-          }
-        }
-      }
-      @include expect() {
-        [data-bs-theme='dark'] .x,
-        [data-theme='dark'] .x {
-          color: red;
-        }
-      }
-    }
-  }
-}

package/scss/tests/_color.test.scss

@@ -1,44 +0,0 @@
-// Priority 2 — unit tests for the colour/contrast helpers in
-// scss/mixins/_functions.scss. These are deterministic and, unlike
-// `color-contrast`, do not read any global config, so they can be exercised in
-// isolation. A regression here silently degrades accessibility, which is why
-// they rank high.
-
-@use '../mixins/functions' as *;
-
-@include describe('luminance') {
-  @include it('is 0 for black and 1 for white') {
-    @include assert-equal(luminance(#000), 0);
-    @include assert-equal(luminance(#fff), 1);
-  }
-}
-
-@include describe('contrast-ratio') {
-  @include it('is 21 for the black/white extreme') {
-    @include assert-equal(contrast-ratio(#000, #fff), 21);
-  }
-
-  @include it('is 1 for a colour against itself') {
-    @include assert-equal(contrast-ratio(#fff, #fff), 1);
-  }
-}
-
-@include describe('shade-color / tint-color') {
-  @include it('shade mixes the colour toward black') {
-    @include assert-equal(shade-color(#ffffff, 10%), rgb(229.5, 229.5, 229.5));
-  }
-
-  @include it('tint mixes the colour toward white') {
-    @include assert-equal(tint-color(#000000, 10%), rgb(25.5, 25.5, 25.5));
-  }
-}
-
-@include describe('shift-color') {
-  @include it('shades when the weight is positive') {
-    @include assert-equal(shift-color(#808080, 20%), shade-color(#808080, 20%));
-  }
-
-  @include it('tints when the weight is negative') {
-    @include assert-equal(shift-color(#808080, -20%), tint-color(#808080, 20%));
-  }
-}