Internal Refactor & Add Tests

.changeset/curly-peas-decide.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Remove `ToggleInput` & fix bugs

.github/workflows/ci.yml

@@ -1,14 +1,17 @@
 name: CI
 
 on:
+  push:
+    branches:
+      - main
   pull_request:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
   cancel-in-progress: true
 
 jobs:
-  check:
+  Check:
     name: Run svelte-check
     runs-on: ubuntu-latest
     steps:
@@ -43,7 +46,7 @@ jobs:
       - name: Run svelte-check
         run: pnpm check
 
-  lint:
+  Lint:
     runs-on: ubuntu-latest
     name: Lint
     steps:
@@ -80,3 +83,13 @@ jobs:
         run: pnpm install
 
       - run: pnpm lint
+
+  Tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.6.3
+          run_install: true
+      - run: pnpm run test

content/components/slider.md

@@ -3,6 +3,17 @@ title: Slider
 description: Enable users to select a value within a specific range with sliding handles.
 ---
 
+<script>
+	import { APISection, ComponentPreview, SliderDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="slider-demo" comp="Slider">
+
+<SliderDemo slot="preview" />
+
+</ComponentPreview>
+
 ## Structure
 
 ```svelte

other/setupTest.ts

@@ -0,0 +1,89 @@
+// setupTest.ts
+/* eslint-disable @typescript-eslint/no-empty-function */
+import matchers from "@testing-library/jest-dom/matchers";
+import { expect, vi } from "vitest";
+import type { Navigation, Page } from "@sveltejs/kit";
+import { readable } from "svelte/store";
+import * as environment from "$app/environment";
+import * as navigation from "$app/navigation";
+import * as stores from "$app/stores";
+import { toHaveNoViolations } from "jest-axe";
+import { configure } from "@testing-library/dom";
+
+// Add custom jest matchers
+expect.extend(matchers);
+
+expect.extend(toHaveNoViolations as never);
+
+configure({
+	asyncUtilTimeout: 1500
+});
+
+// Mock SvelteKit runtime module $app/environment
+vi.mock("$app/environment", (): typeof environment => ({
+	browser: false,
+	dev: true,
+	building: false,
+	version: "any"
+}));
+
+// Mock SvelteKit runtime module $app/navigation
+vi.mock("$app/navigation", (): typeof navigation => ({
+	afterNavigate: () => {},
+	beforeNavigate: () => {},
+	disableScrollHandling: () => {},
+	goto: () => Promise.resolve(),
+	invalidate: () => Promise.resolve(),
+	invalidateAll: () => Promise.resolve(),
+	preloadData: () => Promise.resolve(),
+	preloadCode: () => Promise.resolve(),
+	onNavigate: () => {}
+}));
+
+// Mock SvelteKit runtime module $app/stores
+vi.mock("$app/stores", (): typeof stores => {
+	const getStores: typeof stores.getStores = () => {
+		const navigating = readable<Navigation | null>(null);
+		const page = readable<Page>({
+			url: new URL("http://localhost"),
+			params: {},
+			route: {
+				id: null
+			},
+			status: 200,
+			error: null,
+			data: {},
+			form: undefined
+		});
+		const updated = { subscribe: readable(false).subscribe, check: async () => false };
+
+		return { navigating, page, updated };
+	};
+
+	const page: typeof stores.page = {
+		subscribe(fn) {
+			return getStores().page.subscribe(fn);
+		}
+	};
+	const navigating: typeof stores.navigating = {
+		subscribe(fn) {
+			return getStores().navigating.subscribe(fn);
+		}
+	};
+	const updated: typeof stores.updated = {
+		subscribe(fn) {
+			return getStores().updated.subscribe(fn);
+		},
+		check: async () => false
+	};
+
+	return {
+		getStores,
+		navigating,
+		page,
+		updated
+	};
+});
+
+global.ResizeObserver = require("resize-observer-polyfill");
+Element.prototype.scrollIntoView = () => {};

package.json

@@ -2,6 +2,7 @@
 	"name": "bits-ui",
 	"version": "0.8.4",
 	"license": "MIT",
+	"repository": "github:huntabyte/bits-ui",
 	"scripts": {
 		"dev": "concurrently \"pnpm:dev:content\" \"pnpm:dev:svelte\"",
 		"dev:content": "contentlayer dev",
@@ -12,13 +13,11 @@
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "pnpm run package",
-		"test": "pnpm run test:integration && pnpm run test:unit",
 		"check": "pnpm build:content && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest",
+		"test": "vitest",
 		"release": "changeset publish",
 		"changeset": "changeset"
 	},
@@ -44,6 +43,12 @@
 		"@sveltejs/package": "^2.2.2",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
 		"@tailwindcss/typography": "^0.5.10",
+		"@testing-library/dom": "^9.3.1",
+		"@testing-library/jest-dom": "^5.17.0",
+		"@testing-library/svelte": "^4.0.3",
+		"@testing-library/user-event": "^14.4.3",
+		"@types/jest-axe": "^3.5.5",
+		"@types/testing-library__jest-dom": "^5.14.9",
 		"@typescript-eslint/eslint-plugin": "^6.8.0",
 		"@typescript-eslint/parser": "^6.8.0",
 		"autoprefixer": "^10.4.16",
@@ -55,6 +60,8 @@
 		"eslint-plugin-svelte": "^2.34.0",
 		"esm-env": "^1.0.0",
 		"hast-util-to-html": "^9.0.0",
+		"jest-axe": "^8.0.0",
+		"jsdom": "^22.1.0",
 		"lucide-svelte": "^0.268.0",
 		"phosphor-svelte": "^1.3.0",
 		"postcss": "^8.4.31",
@@ -65,28 +72,27 @@
 		"radix-icons-svelte": "^1.2.1",
 		"rehype-pretty-code": "^0.10.0",
 		"remark-gfm": "^4.0.0",
+		"resize-observer-polyfill": "^1.5.1",
 		"shiki": "^0.14.5",
-		"shikiji": "^0.6.10",
 		"svelte": "^4.2.2",
 		"svelte-check": "^3.5.2",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"svelte-wrap-balancer": "^0.0.4",
 		"tailwind-merge": "^1.14.0",
 		"tailwind-variants": "^0.1.14",
 		"tailwindcss": "^3.3.3",
-		"tailwindcss-animate": "^1.0.7",
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
 		"unist-builder": "^4.0.0",
 		"unist-util-visit": "^5.0.0",
 		"vite": "^4.5.0",
-		"vitest": "^0.34.6"
+		"vitest": "0.33.0"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.57.1",
+		"@melt-ui/svelte": "0.57.2",
 		"nanoid": "^5.0.2"
 	},
 	"peerDependencies": {