Test: extract tests into root && cover all features

.github/labeler.yml

@@ -27,3 +27,6 @@
 
 'CI':
   - '.github/**/*'
+
+'Tests':
+  - 'tests/*'

.github/workflows/pr-build-report.yml

@@ -16,8 +16,6 @@ concurrency:
 
 jobs:
   report:
-    # Fork PRs cannot update comments with the default token; skip to avoid a failing step.
-    if: github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -41,7 +39,9 @@ jobs:
           RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
         run: node scripts/pr-build-report.mjs
 
+      # Fork PRs: GITHUB_TOKEN cannot write PR comments on the base repo; skip only this step.
       - name: Upsert PR comment
+        if: github.event.pull_request.head.repo.full_name == github.repository
         uses: actions/github-script@v7
         with:
           script: |

.gitignore

@@ -16,6 +16,7 @@ npm-debug.log
 yarn-debug.log
 yarn-error.log
 lib/
+coverage/
 build-report.md
 
 # Yarn

package.json

@@ -80,11 +80,23 @@
     "registry": "https://registry.npmjs.org/"
   },
   "jest": {
-    "preset": "ts-jest",
+    "preset": "ts-jest/presets/default-esm",
     "testEnvironment": "node",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/lib/"
-    ]
+    "testMatch": ["<rootDir>/tests/**/*.test.ts"],
+    "extensionsToTreatAsEsm": [".ts"],
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.js$": "$1"
+    },
+    "transform": {
+      "^.+\\.ts$": [
+        "ts-jest",
+        {
+          "useESM": true,
+          "tsconfig": "tsconfig.json"
+        }
+      ]
+    },
+    "modulePathIgnorePatterns": ["<rootDir>/lib/"]
   },
   "commitlint": {
     "extends": [

tests/border-effects.test.ts

@@ -0,0 +1,132 @@
+import { bdr, fx, shadow } from '../src/index';
+import colorList from '../src/constants/colorList';
+
+describe('bdr', () => {
+  const border = bdr as Record<string, unknown>;
+
+  it('color_(hex) sets borderColor', () => {
+    expect((border.color_ as (c: string) => unknown)('#ff00aa')).toEqual({
+      borderColor: '#ff00aa',
+    });
+  });
+
+  it('w_(n) sets borderWidth', () => {
+    expect((border.w_ as (n: number | string) => unknown)(3)).toEqual({
+      borderWidth: 3,
+    });
+  });
+
+  it('rounded_(n) sets borderRadius', () => {
+    expect((border.rounded_ as (n: number | string) => unknown)(10)).toEqual({
+      borderRadius: 10,
+    });
+  });
+
+  it('rounded_md preset', () => {
+    expect(border.rounded_md).toEqual({ borderRadius: 6 });
+  });
+
+  it('palette color_red_500 matches colorList', () => {
+    expect(border.color_red_500).toEqual({
+      borderColor: colorList.red_500,
+    });
+  });
+
+  it('t_w_(n) sets borderTopWidth', () => {
+    expect((border.t_w_ as (n: number | string) => unknown)(4)).toEqual({
+      borderTopWidth: 4,
+    });
+  });
+});
+
+describe('fx', () => {
+  const effects = fx as Record<string, unknown>;
+
+  it('bg_color_(hex) sets backgroundColor', () => {
+    expect((effects.bg_color_ as (c: string) => unknown)('#112233')).toEqual({
+      backgroundColor: '#112233',
+    });
+  });
+
+  it('palette bg_color_red_500', () => {
+    expect(effects.bg_color_red_500).toEqual({
+      backgroundColor: colorList.red_500,
+    });
+  });
+
+  it('opacity_(valid) sets opacity', () => {
+    expect((effects.opacity_ as (n: number | string) => unknown)(0.5)).toEqual({
+      opacity: 0.5,
+    });
+  });
+
+  it('opacity_(out of range) throws', () => {
+    const opacity = effects.opacity_ as (n: number | string) => unknown;
+    expect(() => opacity(-0.1)).toThrow(/between 0\.0 and 1\.0/);
+    expect(() => opacity(1.1)).toThrow(/between 0\.0 and 1\.0/);
+  });
+
+  it('opacity_5 preset maps to 0.5', () => {
+    expect(effects.opacity_5).toEqual({ opacity: 0.5 });
+  });
+
+  it('elevation_3 preset', () => {
+    expect(effects.elevation_3).toEqual({ elevation: 3 });
+  });
+
+  it('elevation_(n) dynamic', () => {
+    expect((effects.elevation_ as (n: number | string) => unknown)(5)).toEqual({
+      elevation: 5,
+    });
+  });
+
+  it('elevation_(out of range) throws', () => {
+    const elevation = effects.elevation_ as (n: number | string) => unknown;
+    expect(() => elevation(0)).toThrow(/between 1 and 10/);
+    expect(() => elevation(11)).toThrow(/between 1 and 10/);
+  });
+});
+
+describe('shadow', () => {
+  const shadowMap = shadow as Record<string, unknown>;
+
+  it('color_(hex) sets shadowColor', () => {
+    expect((shadowMap.color_ as (c: string) => unknown)('#abcdef')).toEqual({
+      shadowColor: '#abcdef',
+    });
+  });
+
+  it('offset_(w,h) sets shadowOffset', () => {
+    expect((shadowMap.offset_ as (w: number | string, h: number | string) => unknown)(3, 7)).toEqual({
+      shadowOffset: { width: 3, height: 7 },
+    });
+  });
+
+  it('opacity_(n) dynamic sets shadowOpacity', () => {
+    expect((shadowMap.opacity_ as (n: number | string) => unknown)(0.25)).toEqual({
+      shadowOpacity: 0.25,
+    });
+  });
+
+  it('rounded_(n) sets shadowRadius', () => {
+    expect((shadowMap.rounded_ as (n: number | string) => unknown)(9)).toEqual({
+      shadowRadius: 9,
+    });
+  });
+
+  it('rounded_md preset', () => {
+    expect(shadowMap.rounded_md).toEqual({ shadowRadius: 3 });
+  });
+
+  it('palette color_red_500', () => {
+    expect(shadowMap.color_red_500).toEqual({
+      shadowColor: colorList.red_500,
+    });
+  });
+
+  it('offset_2 preset', () => {
+    expect(shadowMap.offset_2).toEqual({
+      shadowOffset: { width: 2, height: 2 },
+    });
+  });
+});

tests/flexbox.test.ts

@@ -0,0 +1,87 @@
+import { flex, align, justify, place } from '../src/index';
+import { spacingScale } from '../src/constants/spacingScale';
+
+describe('flex', () => {
+  const flexMap = flex as Record<string, unknown>;
+
+  it('f_3 preset sets flex grow integer', () => {
+    expect(flexMap.f_3).toEqual({ flex: 3 });
+  });
+
+  it('f_(n) dynamic sets flex', () => {
+    expect((flexMap.f_ as (n: number | string) => unknown)(7)).toEqual({ flex: 7 });
+  });
+
+  it('gap_4 uses spacing scale for gap', () => {
+    expect(flexMap.gap_4).toEqual({
+      gap: spacingScale['4'],
+    });
+  });
+
+  it('gap_(n) dynamic sets gap', () => {
+    expect((flexMap.gap_ as (n: number | string) => unknown)(12)).toEqual({ gap: 12 });
+  });
+
+  it('gap_x_ sets rowGap from scale', () => {
+    expect(flexMap.gap_x_2).toEqual({
+      rowGap: spacingScale['2'],
+    });
+  });
+
+  it('gap_y_ sets columnGap from scale', () => {
+    expect(flexMap.gap_y_2).toEqual({
+      columnGap: spacingScale['2'],
+    });
+  });
+
+  it('basis_4 uses spacing scale for flexBasis', () => {
+    expect(flexMap.basis_4).toEqual({
+      flexBasis: spacingScale['4'],
+    });
+  });
+
+  it('basis_auto preset', () => {
+    expect(flexMap.basis_auto).toEqual({ flexBasis: 'auto' });
+  });
+
+  it("basis_('auto') returns string auto", () => {
+    expect((flexMap.basis_ as (v: string | number) => unknown)('auto')).toEqual({
+      flexBasis: 'auto',
+    });
+  });
+
+  it('basis_(n) coerces to number', () => {
+    expect((flexMap.basis_ as (v: string | number) => unknown)(33)).toEqual({
+      flexBasis: 33,
+    });
+  });
+});
+
+describe('align', () => {
+  it('items_* maps alignItems', () => {
+    expect(align.items_center).toEqual({ alignItems: 'center' });
+  });
+
+  it('content_* maps alignContent', () => {
+    expect(align.content_between).toEqual({ alignContent: 'space-between' });
+  });
+
+  it('self_* maps alignSelf', () => {
+    expect(align.self_stretch).toEqual({ alignSelf: 'stretch' });
+  });
+});
+
+describe('justify', () => {
+  it('maps justifyContent', () => {
+    expect(justify.evenly).toEqual({ justifyContent: 'space-evenly' });
+  });
+});
+
+describe('place', () => {
+  it('compound items_center aligns and justifies center', () => {
+    expect(place.items_center).toEqual({
+      alignItems: 'center',
+      justifyContent: 'center',
+    });
+  });
+});

tests/layout.test.ts

@@ -0,0 +1,92 @@
+import { aspect, object_fit, display, direction, pos, z, overflow } from '../src/index';
+import { spacingScale } from '../src/constants/spacingScale';
+
+describe('aspect', () => {
+  const custom = aspect.custom_ as (key: string | number) => { aspectRatio: number | string };
+
+  it('preset square uses numeric ratio 1', () => {
+    expect(aspect.square).toEqual({ aspectRatio: 1 });
+  });
+
+  it('preset video uses 16/9', () => {
+    expect(aspect.video).toEqual({ aspectRatio: 16 / 9 });
+  });
+
+  it('custom_ resolves fractional string', () => {
+    expect(custom('4/3')).toEqual({ aspectRatio: 4 / 3 });
+  });
+
+  it('custom_(number) passes ratio through', () => {
+    expect(custom(3)).toEqual({ aspectRatio: 3 });
+  });
+
+  it('custom_(numeric string) coerces to number', () => {
+    expect(custom('5')).toEqual({ aspectRatio: 5 });
+  });
+});
+
+describe('object_fit', () => {
+  it('cover uses resizeMode', () => {
+    expect(object_fit.cover).toEqual({ resizeMode: 'cover' });
+  });
+
+  it('fill uses objectFit', () => {
+    expect(object_fit.fill).toEqual({ objectFit: 'fill' });
+  });
+
+  it('scale_down uses objectFit', () => {
+    expect(object_fit.scale_down).toEqual({ objectFit: 'scale_down' });
+  });
+});
+
+describe('display', () => {
+  it('flex sets display flex', () => {
+    expect(display.flex).toEqual({ display: 'flex' });
+  });
+});
+
+describe('direction', () => {
+  it('ltr sets direction', () => {
+    expect(direction.ltr).toEqual({ direction: 'ltr' });
+  });
+});
+
+describe('overflow', () => {
+  it('hidden sets overflow hidden', () => {
+    expect(overflow.hidden).toEqual({ overflow: 'hidden' });
+  });
+});
+
+describe('pos', () => {
+  it('absolute preset sets position', () => {
+    expect(pos.absolute).toEqual({ position: 'absolute' });
+  });
+
+  it('t_4 uses spacing scale for top', () => {
+    expect((pos as Record<string, { top?: number }>).t_4).toEqual({
+      top: spacingScale['4'],
+    });
+  });
+
+  it('t_(value) function form uses numeric top', () => {
+    expect(pos.t_(20)).toEqual({ top: 20 });
+  });
+});
+
+describe('z', () => {
+  it('index_10 preset', () => {
+    expect(z.index_10).toEqual({ zIndex: 10 });
+  });
+
+  it('index_auto preset', () => {
+    expect(z.index_auto).toEqual({ zIndex: 'auto' });
+  });
+
+  it('index_(number)', () => {
+    expect(z.index_(10)).toEqual({ zIndex: 10 });
+  });
+
+  it("index_('auto')", () => {
+    expect(z.index_('auto')).toEqual({ zIndex: 'auto' });
+  });
+});