From 4242851f9c4faa1ac8da4158594c774171c4794b Mon Sep 17 00:00:00 2001 From: qpismont Date: Fri, 8 Aug 2025 21:21:42 +0000 Subject: [PATCH] Remove obsolete tests and add new login page layout - Deleted test files for NavLink, Navbar, NavbarBrand, Progress, Row, SearchBar, Select, Spinner, Textarea, and a basic test for Button. - Introduced a new EmptyLayout component for consistent layout structure. - Added a new login page with a layout that includes a login form and an ASCII art header. - Updated CSS variables for improved styling consistency across components. - Removed Vitest configuration file as it is no longer needed. --- .claude/settings.local.json | 6 - .devcontainer/Dockerfile | 2 +- .devcontainer/devcontainer.json | 33 +- .oxlintrc.json | 14 + .prettierrc | 3 + .vscode/settings.json | 16 +- README.md | 27 +- TESTING.md | 188 - astro.config.mjs | 6 +- biome.json | 28 - bun.lock | 891 --- package-lock.json | 5714 +++++++++++++++++ package.json | 44 +- public/favicon.svg | 14 + public/logo.svg | 13 + src/actions/index.ts | 21 + src/assets/astro.svg | 1 - src/assets/background.svg | 1 - src/assets/logo.svg | 14 + src/components/Ascii.astro | 36 + src/components/forms/LoginForm.astro | 43 + src/components/ui/Container.astro | 10 +- src/components/ui/__tests__/Alert.test.ts | 59 - src/components/ui/__tests__/Badge.test.ts | 65 - src/components/ui/__tests__/Button.test.ts | 102 - src/components/ui/__tests__/Card.test.ts | 45 - src/components/ui/__tests__/Col.test.ts | 106 - src/components/ui/__tests__/Container.test.ts | 56 - src/components/ui/__tests__/FormGroup.test.ts | 44 - src/components/ui/__tests__/Input.test.ts | 103 - src/components/ui/__tests__/Modal.test.ts | 66 - src/components/ui/__tests__/ModalBody.test.ts | 44 - .../ui/__tests__/ModalFooter.test.ts | 44 - .../ui/__tests__/ModalHeader.test.ts | 54 - src/components/ui/__tests__/MovieCard.test.ts | 113 - src/components/ui/__tests__/NavLink.test.ts | 85 - src/components/ui/__tests__/Navbar.test.ts | 81 - .../ui/__tests__/NavbarBrand.test.ts | 60 - src/components/ui/__tests__/Progress.test.ts | 91 - src/components/ui/__tests__/Row.test.ts | 54 - src/components/ui/__tests__/SearchBar.test.ts | 94 - src/components/ui/__tests__/Select.test.ts | 71 - src/components/ui/__tests__/Spinner.test.ts | 71 - src/components/ui/__tests__/Textarea.test.ts | 78 - src/components/ui/__tests__/basic.test.ts | 15 - src/layouts/EmptyLayout.astro | 7 + src/pages/login.astro | 39 + src/styles/variables.css | 242 +- tsconfig.json | 6 +- vitest.config.ts | 7 - 50 files changed, 6115 insertions(+), 2912 deletions(-) delete mode 100644 .claude/settings.local.json create mode 100644 .oxlintrc.json create mode 100644 .prettierrc delete mode 100644 TESTING.md delete mode 100644 biome.json delete mode 100644 bun.lock create mode 100644 package-lock.json create mode 100644 public/favicon.svg create mode 100644 public/logo.svg create mode 100644 src/actions/index.ts delete mode 100644 src/assets/astro.svg delete mode 100644 src/assets/background.svg create mode 100644 src/assets/logo.svg create mode 100644 src/components/Ascii.astro create mode 100644 src/components/forms/LoginForm.astro delete mode 100644 src/components/ui/__tests__/Alert.test.ts delete mode 100644 src/components/ui/__tests__/Badge.test.ts delete mode 100644 src/components/ui/__tests__/Button.test.ts delete mode 100644 src/components/ui/__tests__/Card.test.ts delete mode 100644 src/components/ui/__tests__/Col.test.ts delete mode 100644 src/components/ui/__tests__/Container.test.ts delete mode 100644 src/components/ui/__tests__/FormGroup.test.ts delete mode 100644 src/components/ui/__tests__/Input.test.ts delete mode 100644 src/components/ui/__tests__/Modal.test.ts delete mode 100644 src/components/ui/__tests__/ModalBody.test.ts delete mode 100644 src/components/ui/__tests__/ModalFooter.test.ts delete mode 100644 src/components/ui/__tests__/ModalHeader.test.ts delete mode 100644 src/components/ui/__tests__/MovieCard.test.ts delete mode 100644 src/components/ui/__tests__/NavLink.test.ts delete mode 100644 src/components/ui/__tests__/Navbar.test.ts delete mode 100644 src/components/ui/__tests__/NavbarBrand.test.ts delete mode 100644 src/components/ui/__tests__/Progress.test.ts delete mode 100644 src/components/ui/__tests__/Row.test.ts delete mode 100644 src/components/ui/__tests__/SearchBar.test.ts delete mode 100644 src/components/ui/__tests__/Select.test.ts delete mode 100644 src/components/ui/__tests__/Spinner.test.ts delete mode 100644 src/components/ui/__tests__/Textarea.test.ts delete mode 100644 src/components/ui/__tests__/basic.test.ts create mode 100644 src/layouts/EmptyLayout.astro create mode 100644 src/pages/login.astro delete mode 100644 vitest.config.ts diff --git a/.claude/settings.local.json b/.claude/settings.local.json deleted file mode 100644 index 783d087..0000000 --- a/.claude/settings.local.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "permissions": { - "allow": [], - "deny": [] - } -} \ No newline at end of file diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index d8809bb..42c3e62 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -1,4 +1,4 @@ -FROM node:lts +FROM node:24 WORKDIR /app diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 2cd2fe5..839dfac 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,22 +1,13 @@ { - "workspaceFolder": "/workspace", - "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,Z", - "runArgs": [ - "--network=dev-network" - ], - "build": { - "dockerfile": "Dockerfile" - }, - "customizations": { - "vscode": { - "extensions": [ - "oven.bun-vscode", - "biomejs.biome", - "astro-build.astro-vscode" - ] - } - }, - "forwardPorts": [ - 8080 - ] -} \ No newline at end of file + "workspaceFolder": "/workspace", + "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,Z", + "runArgs": ["--network=dev-network"], + "build": { + "dockerfile": "Dockerfile" + }, + "customizations": { + "vscode": { + "extensions": ["astro-build.astro-vscode", "oxc.oxc-vscode", "esbenp.prettier-vscode"] + } + } +} diff --git a/.oxlintrc.json b/.oxlintrc.json new file mode 100644 index 0000000..3c367a6 --- /dev/null +++ b/.oxlintrc.json @@ -0,0 +1,14 @@ +{ + "$schema": "./node_modules/oxlint/configuration_schema.json", + "plugins": ["unicorn", "typescript", "oxc"], + "categories": { + "correctness": "error", + "perf": "error", + "suspicious": "off", + "style": "off", + "nursery": "off", + "pedantic": "off", + "restriction": "off" + }, + "ignorePatterns": ["node_modules/", ".astro/", "dist/"] +} diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..30a4169 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "plugins": ["@prettier/plugin-oxc"] +} diff --git a/.vscode/settings.json b/.vscode/settings.json index 3c25522..08833f3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,11 +1,9 @@ { - "editor.tabSize": 2, - "editor.formatOnSave": true, - "editor.defaultFormatter": "biomejs.biome", - "[astro]": { - "editor.defaultFormatter": "astro-build.astro-vscode" - }, - "[css]": { - "editor.defaultFormatter": "biomejs.biome" - } + "editor.tabSize": 2, + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "[astro]": { + "editor.defaultFormatter": "astro-build.astro-vscode" + }, + "typescript.tsdk": "node_modules/typescript/lib" } diff --git a/README.md b/README.md index bfd37d2..1150fdc 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Une plateforme de streaming moderne pour films et séries, construite avec **Ast ## ✨ Fonctionnalités - 🎨 **Design System complet** avec thème sombre et couleurs violet pastel -- 📱 **Responsive** avec système de grille flexbox (Bootstrap-like) +- 📱 **Responsive** avec système de grille flexbox (Bootstrap-like) - 🧩 **Composants UI auto-contenus** avec styles scoped - ⚡ **Performance optimisée** avec styles scoped par composant - 🎭 **Composants spécialisés** pour le streaming (MovieCard, SearchBar) @@ -43,6 +43,7 @@ Une plateforme de streaming moderne pour films et séries, construite avec **Ast ## 🎨 Design System ### Couleurs + - **Couleur principale** : Violet pastel (`--primary-*`) - **Thème sombre** avec nuances de gris - **Couleurs sémantiques** : success, warning, error, info @@ -50,6 +51,7 @@ Une plateforme de streaming moderne pour films et séries, construite avec **Ast ### Composants disponibles #### Composants de base + - **Button** - Boutons avec variantes (primary, secondary, outline, ghost) - **Badge** - Badges colorés - **Alert** - Alertes contextuelles @@ -57,36 +59,44 @@ Une plateforme de streaming moderne pour films et séries, construite avec **Ast - **Progress** - Barres de progression #### Composants de formulaire + - **Input** - Champs de saisie - **Textarea** - Zones de texte - **Select** - Listes déroulantes - **FormGroup/FormLabel/FormError** - Éléments de formulaire #### Composants de mise en page + - **Container** - Conteneur responsive - **Row/Col** - Système de grille avec breakpoints (xs, sm, md, lg, xl, xxl) - **Card** - Cartes avec header/body/footer #### Composants de navigation + - **Navbar** - Barre de navigation - **Modal** - Modales avec backdrop - **Dropdown** - Menus déroulants #### Composants spécialisés streaming + - **MovieCard** - Cartes pour films/séries avec poster, titre, rating - **SearchBar** - Barre de recherche avec icône ## 🏗️ Architecture des Composants ### Composition et réutilisation + Les composants sont conçus pour être composés ensemble : + - **SearchBar** utilise le composant **Input** avec des styles personnalisés - **MovieCard** compose avec le composant **Card** de base - **ModalHeader** utilise le composant **Button** pour la fermeture - Classes `.form-control-base` partagées entre Input, Select et Textarea ### Styles scoped + Chaque composant contient ses propres styles avec ` diff --git a/src/components/forms/LoginForm.astro b/src/components/forms/LoginForm.astro new file mode 100644 index 0000000..8c56f65 --- /dev/null +++ b/src/components/forms/LoginForm.astro @@ -0,0 +1,43 @@ +--- +export interface Props { + action: string | null | undefined; + error: ActionInputError<{ username: string; password: string }> | null; +} + +import type { ActionInputError } from "astro:actions"; +import Button from "../ui/Button.astro"; +import FormGroup from "../ui/FormGroup.astro"; +import FormLabel from "../ui/FormLabel.astro"; +import Input from "../ui/Input.astro"; +import FormError from "../ui/FormError.astro"; + +const { action, error } = Astro.props; +--- + +
+ + Nom d'utilisateur + + {error?.fields.username && {error.fields.username}} + + + + Mot de passe + + {error?.fields.password && {error.fields.password}} + + + + + +
diff --git a/src/components/ui/Container.astro b/src/components/ui/Container.astro index 5d0d85b..a0ee457 100644 --- a/src/components/ui/Container.astro +++ b/src/components/ui/Container.astro @@ -2,14 +2,20 @@ export interface Props { fluid?: boolean; class?: string; + style?: string; } -const { fluid = false, class: className = "", ...rest } = Astro.props; +const { + fluid = false, + class: className = "", + style = "", + ...rest +} = Astro.props; const baseClasses = fluid ? "container-fluid" : "container"; const classes = [baseClasses, className].filter(Boolean).join(" "); --- -
+
diff --git a/src/components/ui/__tests__/Alert.test.ts b/src/components/ui/__tests__/Alert.test.ts deleted file mode 100644 index f4a1c78..0000000 --- a/src/components/ui/__tests__/Alert.test.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Alert from "../Alert.astro"; - -describe("Alert", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Alert, { - slots: { default: "Alert message" }, - }); - - expect(result).toContain("Alert message"); - expect(result).toContain('class="alert alert-info"'); - expect(result).toContain(" { - const container = await AstroContainer.create(); - const variants = ["success", "warning", "error", "info"] as const; - - for (const variant of variants) { - const result = await container.renderToString(Alert, { - props: { variant }, - slots: { default: "Test message" }, - }); - - expect(result).toContain(`alert-${variant}`); - } - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Alert, { - props: { class: "custom-alert" }, - slots: { default: "Message" }, - }); - - expect(result).toContain("alert alert-info custom-alert"); - }); - - it("renders as div element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Alert, { - slots: { default: "Test" }, - }); - - expect(result).toContain('
{ - const container = await AstroContainer.create(); - const result = await container.renderToString(Alert, { - props: { role: "alert" }, - slots: { default: "Important message" }, - }); - - expect(result).toContain('role="alert"'); - }); -}); diff --git a/src/components/ui/__tests__/Badge.test.ts b/src/components/ui/__tests__/Badge.test.ts deleted file mode 100644 index 610bd24..0000000 --- a/src/components/ui/__tests__/Badge.test.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Badge from "../Badge.astro"; - -describe("Badge", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Badge, { - slots: { default: "New" }, - }); - - expect(result).toContain("New"); - expect(result).toContain("badge-primary"); - expect(result).toContain(" { - const container = await AstroContainer.create(); - const variants = [ - "primary", - "secondary", - "success", - "warning", - "error", - ] as const; - - for (const variant of variants) { - const result = await container.renderToString(Badge, { - props: { variant }, - slots: { default: "Badge" }, - }); - - expect(result).toContain(`badge-${variant}`); - } - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Badge, { - props: { class: "custom-badge" }, - slots: { default: "Test" }, - }); - - expect(result).toContain("badge badge-primary custom-badge"); - }); - - it("renders as span element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Badge, { - slots: { default: "Test" }, - }); - - expect(result).toContain(' { - const container = await AstroContainer.create(); - const result = await container.renderToString(Badge, { - props: { "data-count": "5" }, - slots: { default: "5" }, - }); - - expect(result).toContain('data-count="5"'); - }); -}); diff --git a/src/components/ui/__tests__/Button.test.ts b/src/components/ui/__tests__/Button.test.ts deleted file mode 100644 index ad70b4d..0000000 --- a/src/components/ui/__tests__/Button.test.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Button from "../Button.astro"; - -describe("Button", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Button, { - slots: { default: "Click me" }, - }); - - expect(result).toContain("Click me"); - expect(result).toContain('class="btn btn-primary"'); - expect(result).toContain('type="button"'); - expect(result).toContain(" { - const container = await AstroContainer.create(); - const variants = ["primary", "secondary", "outline", "ghost"] as const; - - for (const variant of variants) { - const result = await container.renderToString(Button, { - props: { variant }, - slots: { default: "Test" }, - }); - - expect(result).toContain(`btn-${variant}`); - } - }); - - it("renders different sizes", async () => { - const container = await AstroContainer.create(); - const sizes = ["sm", "lg"] as const; - - for (const size of sizes) { - const result = await container.renderToString(Button, { - props: { size }, - slots: { default: "Test" }, - }); - - expect(result).toContain(`btn-${size}`); - } - }); - - it("renders as anchor when href is provided", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Button, { - props: { href: "/test" }, - slots: { default: "Link" }, - }); - - expect(result).toContain(" { - const container = await AstroContainer.create(); - const result = await container.renderToString(Button, { - props: { disabled: true }, - slots: { default: "Disabled" }, - }); - - expect(result).toContain("disabled"); - }); - - it("applies icon styling", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Button, { - props: { icon: true }, - slots: { default: "🔍" }, - }); - - expect(result).toContain("btn-icon"); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Button, { - props: { class: "custom-class" }, - slots: { default: "Test" }, - }); - - expect(result).toContain("custom-class"); - }); - - it("handles different button types", async () => { - const container = await AstroContainer.create(); - const types = ["button", "submit", "reset"] as const; - - for (const type of types) { - const result = await container.renderToString(Button, { - props: { type }, - slots: { default: "Test" }, - }); - - expect(result).toContain(`type="${type}"`); - } - }); -}); diff --git a/src/components/ui/__tests__/Card.test.ts b/src/components/ui/__tests__/Card.test.ts deleted file mode 100644 index f664680..0000000 --- a/src/components/ui/__tests__/Card.test.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Card from "../Card.astro"; - -describe("Card", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Card, { - slots: { default: "Card content" }, - }); - - expect(result).toContain("Card content"); - expect(result).toContain('class="card"'); - expect(result).toContain(" { - const container = await AstroContainer.create(); - const result = await container.renderToString(Card, { - props: { class: "custom-card" }, - slots: { default: "Content" }, - }); - - expect(result).toContain("card custom-card"); - }); - - it("renders as div element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Card, { - slots: { default: "Test" }, - }); - - expect(result).toContain('
{ - const container = await AstroContainer.create(); - const result = await container.renderToString(Card, { - props: { "data-testid": "test-card" }, - slots: { default: "Test" }, - }); - - expect(result).toContain('data-testid="test-card"'); - }); -}); diff --git a/src/components/ui/__tests__/Col.test.ts b/src/components/ui/__tests__/Col.test.ts deleted file mode 100644 index b9bae02..0000000 --- a/src/components/ui/__tests__/Col.test.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Col from "../Col.astro"; - -describe("Col", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Col, { - slots: { default: "Column content" }, - }); - - expect(result).toContain("Column content"); - expect(result).toContain('class="col"'); - expect(result).toContain(" { - const container = await AstroContainer.create(); - const result = await container.renderToString(Col, { - props: { - xs: 12, - sm: 6, - md: 4, - lg: 3, - }, - slots: { default: "Content" }, - }); - - expect(result).toContain("col--12"); - expect(result).toContain("col-sm-6"); - expect(result).toContain("col-md-4"); - expect(result).toContain("col-lg-3"); - }); - - it("renders with auto sizing", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Col, { - props: { md: "auto" }, - slots: { default: "Content" }, - }); - - expect(result).toContain("col-md-auto"); - }); - - it("renders with offset classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Col, { - props: { - md: 6, - offset: { md: 3, lg: 2 }, - }, - slots: { default: "Content" }, - }); - - expect(result).toContain("col-md-6"); - expect(result).toContain("offset-md-3"); - expect(result).toContain("offset-lg-2"); - }); - - it("renders with xl and xxl breakpoints", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Col, { - props: { - xl: 4, - xxl: 2, - }, - slots: { default: "Content" }, - }); - - expect(result).toContain("col-xl-4"); - expect(result).toContain("col-xxl-2"); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Col, { - props: { - class: "custom-col", - md: 6, - }, - slots: { default: "Content" }, - }); - - expect(result).toContain("col-md-6"); - expect(result).toContain("custom-col"); - }); - - it("renders as div element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Col, { - slots: { default: "Test" }, - }); - - expect(result).toContain('
{ - const container = await AstroContainer.create(); - const result = await container.renderToString(Col, { - props: { "data-column": "main" }, - slots: { default: "Test" }, - }); - - expect(result).toContain('data-column="main"'); - }); -}); diff --git a/src/components/ui/__tests__/Container.test.ts b/src/components/ui/__tests__/Container.test.ts deleted file mode 100644 index 32a453c..0000000 --- a/src/components/ui/__tests__/Container.test.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Container from "../Container.astro"; - -describe("Container", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Container, { - slots: { default: "Container content" }, - }); - - expect(result).toContain("Container content"); - expect(result).toContain('class="container"'); - expect(result).toContain(" { - const container = await AstroContainer.create(); - const result = await container.renderToString(Container, { - props: { fluid: true }, - slots: { default: "Fluid content" }, - }); - - expect(result).toContain("Fluid content"); - expect(result).toContain('class="container-fluid"'); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Container, { - props: { class: "custom-container" }, - slots: { default: "Content" }, - }); - - expect(result).toContain("container custom-container"); - }); - - it("renders as div element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Container, { - slots: { default: "Test" }, - }); - - expect(result).toContain('
{ - const container = await AstroContainer.create(); - const result = await container.renderToString(Container, { - props: { "data-section": "main" }, - slots: { default: "Test" }, - }); - - expect(result).toContain('data-section="main"'); - }); -}); diff --git a/src/components/ui/__tests__/FormGroup.test.ts b/src/components/ui/__tests__/FormGroup.test.ts deleted file mode 100644 index 7d747e2..0000000 --- a/src/components/ui/__tests__/FormGroup.test.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import FormGroup from "../FormGroup.astro"; - -describe("FormGroup", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(FormGroup, { - slots: { default: "" }, - }); - - expect(result).toContain("Form content"); - expect(result).toContain('class="form-group"'); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(FormGroup, { - props: { class: "custom-form-group" }, - slots: { default: "Content" }, - }); - - expect(result).toContain("form-group custom-form-group"); - }); - - it("renders as div element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(FormGroup, { - slots: { default: "Test" }, - }); - - expect(result).toContain('
{ - const container = await AstroContainer.create(); - const result = await container.renderToString(FormGroup, { - props: { "data-testid": "form-section" }, - slots: { default: "Test" }, - }); - - expect(result).toContain('data-testid="form-section"'); - }); -}); diff --git a/src/components/ui/__tests__/Input.test.ts b/src/components/ui/__tests__/Input.test.ts deleted file mode 100644 index a4d863f..0000000 --- a/src/components/ui/__tests__/Input.test.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Input from "../Input.astro"; - -describe("Input", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Input); - - expect(result).toContain(" { - const container = await AstroContainer.create(); - const types = [ - "text", - "email", - "password", - "number", - "tel", - "url", - "search", - ] as const; - - for (const type of types) { - const result = await container.renderToString(Input, { - props: { type }, - }); - - expect(result).toContain(`type="${type}"`); - } - }); - - it("renders different sizes", async () => { - const container = await AstroContainer.create(); - const sizes = ["sm", "lg"] as const; - - for (const size of sizes) { - const result = await container.renderToString(Input, { - props: { size }, - }); - - expect(result).toContain(`input-${size}`); - } - }); - - it("applies placeholder", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Input, { - props: { placeholder: "Enter text" }, - }); - - expect(result).toContain('placeholder="Enter text"'); - }); - - it("applies value", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Input, { - props: { value: "test value" }, - }); - - expect(result).toContain('value="test value"'); - }); - - it("applies name and id attributes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Input, { - props: { name: "username", id: "user-input" }, - }); - - expect(result).toContain('name="username"'); - expect(result).toContain('id="user-input"'); - }); - - it("applies disabled state", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Input, { - props: { disabled: true }, - }); - - expect(result).toContain("disabled"); - }); - - it("applies required attribute", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Input, { - props: { required: true }, - }); - - expect(result).toContain("required"); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Input, { - props: { class: "custom-input" }, - }); - - expect(result).toContain("custom-input"); - }); -}); diff --git a/src/components/ui/__tests__/Modal.test.ts b/src/components/ui/__tests__/Modal.test.ts deleted file mode 100644 index eefd0e3..0000000 --- a/src/components/ui/__tests__/Modal.test.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Modal from "../Modal.astro"; - -describe("Modal", () => { - it("renders with required id prop", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Modal, { - props: { id: "test-modal" }, - slots: { default: "Modal content" }, - }); - - expect(result).toContain('class="modal-backdrop"'); - expect(result).toContain('class="modal"'); - expect(result).toContain('id="test-modal"'); - expect(result).toContain("Modal content"); - }); - - it("starts hidden by default", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Modal, { - props: { id: "hidden-modal" }, - slots: { default: "Content" }, - }); - - expect(result).toContain('style="display: none;"'); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Modal, { - props: { - id: "custom-modal", - class: "custom-modal-class", - }, - slots: { default: "Content" }, - }); - - expect(result).toContain("modal-backdrop custom-modal-class"); - }); - - it("renders nested modal structure", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Modal, { - props: { id: "nested-modal" }, - slots: { default: "Nested content" }, - }); - - expect(result).toContain('class="modal-backdrop"'); - expect(result).toContain('class="modal"'); - expect(result).toContain("Nested content"); - }); - - it("passes through additional props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Modal, { - props: { - id: "props-modal", - "data-testid": "modal-test", - }, - slots: { default: "Test" }, - }); - - expect(result).toContain('data-testid="modal-test"'); - }); -}); diff --git a/src/components/ui/__tests__/ModalBody.test.ts b/src/components/ui/__tests__/ModalBody.test.ts deleted file mode 100644 index 972a779..0000000 --- a/src/components/ui/__tests__/ModalBody.test.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import ModalBody from "../ModalBody.astro"; - -describe("ModalBody", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalBody, { - slots: { default: "Modal body content" }, - }); - - expect(result).toContain("Modal body content"); - expect(result).toContain('class="modal-body"'); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalBody, { - props: { class: "custom-body" }, - slots: { default: "Content" }, - }); - - expect(result).toContain("modal-body custom-body"); - }); - - it("renders as div element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalBody, { - slots: { default: "Test" }, - }); - - expect(result).toContain('
{ - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalBody, { - props: { "data-content": "main" }, - slots: { default: "Test" }, - }); - - expect(result).toContain('data-content="main"'); - }); -}); diff --git a/src/components/ui/__tests__/ModalFooter.test.ts b/src/components/ui/__tests__/ModalFooter.test.ts deleted file mode 100644 index 5ec8751..0000000 --- a/src/components/ui/__tests__/ModalFooter.test.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import ModalFooter from "../ModalFooter.astro"; - -describe("ModalFooter", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalFooter, { - slots: { default: "Footer buttons" }, - }); - - expect(result).toContain("Footer buttons"); - expect(result).toContain('class="modal-footer"'); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalFooter, { - props: { class: "custom-footer" }, - slots: { default: "Content" }, - }); - - expect(result).toContain("modal-footer custom-footer"); - }); - - it("renders as div element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalFooter, { - slots: { default: "Test" }, - }); - - expect(result).toContain('
{ - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalFooter, { - props: { "data-actions": "confirm" }, - slots: { default: "Test" }, - }); - - expect(result).toContain('data-actions="confirm"'); - }); -}); diff --git a/src/components/ui/__tests__/ModalHeader.test.ts b/src/components/ui/__tests__/ModalHeader.test.ts deleted file mode 100644 index 9b0b5b0..0000000 --- a/src/components/ui/__tests__/ModalHeader.test.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import ModalHeader from "../ModalHeader.astro"; - -describe("ModalHeader", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalHeader, { - slots: { default: "Modal Title" }, - }); - - expect(result).toContain("Modal Title"); - expect(result).toContain('class="modal-header"'); - }); - - it("includes close button", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalHeader, { - slots: { default: "Title" }, - }); - - expect(result).toContain("data-modal-close"); - expect(result).toContain("×"); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalHeader, { - props: { class: "custom-header" }, - slots: { default: "Title" }, - }); - - expect(result).toContain("modal-header custom-header"); - }); - - it("renders as div element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalHeader, { - slots: { default: "Test" }, - }); - - expect(result).toContain('
{ - const container = await AstroContainer.create(); - const result = await container.renderToString(ModalHeader, { - props: { "data-header": "modal" }, - slots: { default: "Test" }, - }); - - expect(result).toContain('data-header="modal"'); - }); -}); diff --git a/src/components/ui/__tests__/MovieCard.test.ts b/src/components/ui/__tests__/MovieCard.test.ts deleted file mode 100644 index 1954411..0000000 --- a/src/components/ui/__tests__/MovieCard.test.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import MovieCard from "../MovieCard.astro"; - -describe("MovieCard", () => { - const mockMovie = { - title: "Test Movie", - poster: "/test-poster.jpg", - }; - - it("renders with required props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(MovieCard, { - props: mockMovie, - }); - - expect(result).toContain('class="movie-card"'); - expect(result).toContain("Test Movie"); - expect(result).toContain('src="/test-poster.jpg"'); - expect(result).toContain('alt="Test Movie"'); - expect(result).toContain('class="movie-title"'); - expect(result).toContain('class="movie-poster"'); - }); - - it("renders as div by default", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(MovieCard, { - props: mockMovie, - }); - - expect(result).toContain('
{ - const container = await AstroContainer.create(); - const result = await container.renderToString(MovieCard, { - props: { ...mockMovie, href: "/movie/123" }, - }); - - expect(result).toContain(' { - const container = await AstroContainer.create(); - const result = await container.renderToString(MovieCard, { - props: { ...mockMovie, year: 2023, genre: "Action" }, - }); - - expect(result).toContain('class="movie-meta"'); - expect(result).toContain("2023"); - expect(result).toContain("Action"); - expect(result).toContain("•"); - }); - - it("displays only year when genre not provided", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(MovieCard, { - props: { ...mockMovie, year: 2023 }, - }); - - expect(result).toContain("2023"); - expect(result).not.toContain("•"); - }); - - it("displays only genre when year not provided", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(MovieCard, { - props: { ...mockMovie, genre: "Drama" }, - }); - - expect(result).toContain("Drama"); - expect(result).not.toContain("•"); - }); - - it("displays rating when provided", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(MovieCard, { - props: { ...mockMovie, rating: 8.5 }, - }); - - expect(result).toContain('class="movie-rating"'); - expect(result).toContain("⭐"); - expect(result).toContain("8.5/10"); - }); - - it("does not display rating when not provided", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(MovieCard, { - props: mockMovie, - }); - - expect(result).not.toContain('class="movie-rating"'); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(MovieCard, { - props: { ...mockMovie, class: "featured-movie" }, - }); - - expect(result).toContain("movie-card featured-movie"); - }); - - it("applies lazy loading to poster", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(MovieCard, { - props: mockMovie, - }); - - expect(result).toContain('loading="lazy"'); - }); -}); diff --git a/src/components/ui/__tests__/NavLink.test.ts b/src/components/ui/__tests__/NavLink.test.ts deleted file mode 100644 index 9e2453e..0000000 --- a/src/components/ui/__tests__/NavLink.test.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import NavLink from "../NavLink.astro"; - -describe("NavLink", () => { - it("renders with required href prop", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavLink, { - props: { href: "/home" }, - slots: { default: "Home" }, - }); - - expect(result).toContain("
  • { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavLink, { - props: { - href: "/current", - active: true, - }, - slots: { default: "Current Page" }, - }); - - expect(result).toContain("nav-link"); - expect(result).toContain("active"); - }); - - it("does not apply active class by default", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavLink, { - props: { href: "/page" }, - slots: { default: "Page" }, - }); - - expect(result).toContain("nav-link"); - expect(result).not.toContain("active"); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavLink, { - props: { - href: "/test", - class: "custom-nav-link", - }, - slots: { default: "Test" }, - }); - - expect(result).toContain("nav-link"); - expect(result).toContain("custom-nav-link"); - }); - - it("wraps link in list item", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavLink, { - props: { href: "/wrapped" }, - slots: { default: "Wrapped" }, - }); - - expect(result).toContain("
  • { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavLink, { - props: { - href: "/props-test", - target: "_blank", - rel: "noopener", - }, - slots: { default: "External" }, - }); - - expect(result).toContain('target="_blank"'); - expect(result).toContain('rel="noopener"'); - }); -}); diff --git a/src/components/ui/__tests__/Navbar.test.ts b/src/components/ui/__tests__/Navbar.test.ts deleted file mode 100644 index 45d04ab..0000000 --- a/src/components/ui/__tests__/Navbar.test.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Navbar from "../Navbar.astro"; - -describe("Navbar", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Navbar, { - slots: { - brand: "Brand", - nav: "Navigation", - actions: "Actions", - }, - }); - - expect(result).toContain('class="navbar"'); - expect(result).toContain(" { - const container = await AstroContainer.create(); - const result = await container.renderToString(Navbar, { - slots: { - brand: 'MyBrand', - }, - }); - - expect(result).toContain("MyBrand"); - }); - - it("renders navigation slot content", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Navbar, { - slots: { - nav: "
    • Home
    • About
    ", - }, - }); - - expect(result).toContain("
    • Home
    • About
    "); - }); - - it("renders actions slot content", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Navbar, { - slots: { - actions: "", - }, - }); - - expect(result).toContain(""); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Navbar, { - props: { class: "custom-navbar" }, - }); - - expect(result).toContain("navbar custom-navbar"); - }); - - it("has proper grid structure", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Navbar); - - expect(result).toContain('class="container"'); - expect(result).toContain( - 'class="row justify-content-between align-items-center"', - ); - expect(result.match(/class="col-auto"/g)?.length).toBe(3); - }); - - it("passes through additional props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Navbar, { - props: { "data-nav": "main" }, - }); - - expect(result).toContain('data-nav="main"'); - }); -}); diff --git a/src/components/ui/__tests__/NavbarBrand.test.ts b/src/components/ui/__tests__/NavbarBrand.test.ts deleted file mode 100644 index 58e8d98..0000000 --- a/src/components/ui/__tests__/NavbarBrand.test.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import NavbarBrand from "../NavbarBrand.astro"; - -describe("NavbarBrand", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavbarBrand, { - slots: { default: "Brand Name" }, - }); - - expect(result).toContain('class="navbar-brand"'); - expect(result).toContain(" { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavbarBrand, { - props: { href: "/dashboard" }, - slots: { default: "Dashboard" }, - }); - - expect(result).toContain('href="/dashboard"'); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavbarBrand, { - props: { class: "custom-brand" }, - slots: { default: "Brand" }, - }); - - expect(result).toContain("navbar-brand custom-brand"); - }); - - it("renders as anchor element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavbarBrand, { - slots: { default: "Test" }, - }); - - expect(result).toContain(' { - const container = await AstroContainer.create(); - const result = await container.renderToString(NavbarBrand, { - props: { - title: "Go to homepage", - "data-brand": "main", - }, - slots: { default: "Home" }, - }); - - expect(result).toContain('title="Go to homepage"'); - expect(result).toContain('data-brand="main"'); - }); -}); diff --git a/src/components/ui/__tests__/Progress.test.ts b/src/components/ui/__tests__/Progress.test.ts deleted file mode 100644 index 0845832..0000000 --- a/src/components/ui/__tests__/Progress.test.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Progress from "../Progress.astro"; - -describe("Progress", () => { - it("renders with required value prop", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Progress, { - props: { value: 50 }, - }); - - expect(result).toContain('class="progress"'); - expect(result).toContain('class="progress-bar"'); - }); - - it("calculates correct percentage with default max", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Progress, { - props: { value: 25 }, - }); - - expect(result).toContain("width: 25%"); - }); - - it("calculates correct percentage with custom max", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Progress, { - props: { value: 30, max: 60 }, - }); - - expect(result).toContain("width: 50%"); - }); - - it("caps percentage at 100% when value exceeds max", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Progress, { - props: { value: 150, max: 100 }, - }); - - expect(result).toContain("width: 100%"); - }); - - it("applies correct ARIA attributes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Progress, { - props: { value: 40, max: 80 }, - }); - - expect(result).toContain('role="progressbar"'); - expect(result).toContain('aria-valuenow="40"'); - expect(result).toContain('aria-valuemin="0"'); - expect(result).toContain('aria-valuemax="80"'); - }); - - it("uses default max value of 100", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Progress, { - props: { value: 75 }, - }); - - expect(result).toContain('aria-valuemax="100"'); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Progress, { - props: { value: 60, class: "custom-progress" }, - }); - - expect(result).toContain("progress custom-progress"); - }); - - it("handles zero value", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Progress, { - props: { value: 0 }, - }); - - expect(result).toContain("width: 0%"); - expect(result).toContain('aria-valuenow="0"'); - }); - - it("passes through additional props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Progress, { - props: { value: 45, "data-progress": "loading" }, - }); - - expect(result).toContain('data-progress="loading"'); - }); -}); diff --git a/src/components/ui/__tests__/Row.test.ts b/src/components/ui/__tests__/Row.test.ts deleted file mode 100644 index 0084634..0000000 --- a/src/components/ui/__tests__/Row.test.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Row from "../Row.astro"; - -describe("Row", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Row, { - slots: { default: "Row content" }, - }); - - expect(result).toContain("Row content"); - expect(result).toContain('class="row"'); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Row, { - props: { class: "custom-row" }, - slots: { default: "Content" }, - }); - - expect(result).toContain("row custom-row"); - }); - - it("applies inline styles", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Row, { - props: { style: "margin-top: 20px;" }, - slots: { default: "Content" }, - }); - - expect(result).toContain('style="margin-top: 20px;"'); - }); - - it("renders as div element", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Row, { - slots: { default: "Test" }, - }); - - expect(result).toContain('
    { - const container = await AstroContainer.create(); - const result = await container.renderToString(Row, { - props: { "data-row": "header" }, - slots: { default: "Test" }, - }); - - expect(result).toContain('data-row="header"'); - }); -}); diff --git a/src/components/ui/__tests__/SearchBar.test.ts b/src/components/ui/__tests__/SearchBar.test.ts deleted file mode 100644 index 4c66e84..0000000 --- a/src/components/ui/__tests__/SearchBar.test.ts +++ /dev/null @@ -1,94 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import SearchBar from "../SearchBar.astro"; - -describe("SearchBar", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(SearchBar); - - expect(result).toContain('class="search-bar"'); - expect(result).toContain('type="search"'); - expect(result).toContain('class="search-icon"'); - }); - - it("applies default placeholder", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(SearchBar); - - expect(result).toContain('placeholder="Rechercher..."'); - }); - - it("applies custom placeholder", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(SearchBar, { - props: { placeholder: "Search movies..." }, - }); - - expect(result).toContain('placeholder="Search movies..."'); - }); - - it("applies value prop", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(SearchBar, { - props: { value: "test query" }, - }); - - expect(result).toContain('value="test query"'); - }); - - it("applies default name and id", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(SearchBar); - - expect(result).toContain('name="search"'); - expect(result).toContain('id="search"'); - }); - - it("applies custom name and id", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(SearchBar, { - props: { - name: "movie-search", - id: "movie-search-input", - }, - }); - - expect(result).toContain('name="movie-search"'); - expect(result).toContain('id="movie-search-input"'); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(SearchBar, { - props: { class: "custom-search" }, - }); - - expect(result).toContain("search-bar custom-search"); - }); - - it("renders search icon with correct attributes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(SearchBar); - - expect(result).toContain('width="16"'); - expect(result).toContain('height="16"'); - expect(result).toContain('viewBox="0 0 24 24"'); - }); - - it("input has search type", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(SearchBar); - - expect(result).toContain('type="search"'); - }); - - it("passes through additional props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(SearchBar, { - props: { "data-testid": "search-component" }, - }); - - expect(result).toContain('data-testid="search-component"'); - }); -}); diff --git a/src/components/ui/__tests__/Select.test.ts b/src/components/ui/__tests__/Select.test.ts deleted file mode 100644 index c87eaba..0000000 --- a/src/components/ui/__tests__/Select.test.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Select from "../Select.astro"; - -describe("Select", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Select, { - slots: { - default: - '', - }, - }); - - expect(result).toContain(" { - const container = await AstroContainer.create(); - const result = await container.renderToString(Select, { - props: { name: "category", id: "category-select" }, - }); - - expect(result).toContain('name="category"'); - expect(result).toContain('id="category-select"'); - }); - - it("applies disabled state", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Select, { - props: { disabled: true }, - }); - - expect(result).toContain("disabled"); - }); - - it("applies required attribute", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Select, { - props: { required: true }, - }); - - expect(result).toContain("required"); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Select, { - props: { class: "custom-select" }, - }); - - expect(result).toContain("select custom-select"); - }); - - it("renders option content in slot", async () => { - const options = - ''; - const container = await AstroContainer.create(); - const result = await container.renderToString(Select, { - slots: { default: options }, - }); - - expect(result).toContain("Apple"); - expect(result).toContain("Banana"); - expect(result).toContain('value="apple"'); - expect(result).toContain('value="banana"'); - }); -}); diff --git a/src/components/ui/__tests__/Spinner.test.ts b/src/components/ui/__tests__/Spinner.test.ts deleted file mode 100644 index 921f54c..0000000 --- a/src/components/ui/__tests__/Spinner.test.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Spinner from "../Spinner.astro"; - -describe("Spinner", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Spinner); - - expect(result).toContain('"); - }); - - it("renders small size", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Spinner, { - props: { size: "sm" }, - }); - - expect(result).toContain("spinner spinner-sm"); - }); - - it("renders large size", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Spinner, { - props: { size: "lg" }, - }); - - expect(result).toContain("spinner spinner-lg"); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Spinner, { - props: { class: "loading-spinner" }, - }); - - expect(result).toContain("spinner loading-spinner"); - }); - - it("applies custom classes with size", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Spinner, { - props: { size: "lg", class: "custom-spinner" }, - }); - - expect(result).toContain("spinner spinner-lg custom-spinner"); - }); - - it("renders as empty div", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Spinner); - - expect(result).toContain(">
    "); - // The div should be empty (no content between opening and closing tags, except for Astro metadata) - expect(result).toMatch(/]*><\/div>/); - }); - - it("passes through additional props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Spinner, { - props: { - "data-testid": "loading-indicator", - "aria-label": "Loading content", - }, - }); - - expect(result).toContain('data-testid="loading-indicator"'); - expect(result).toContain('aria-label="Loading content"'); - }); -}); diff --git a/src/components/ui/__tests__/Textarea.test.ts b/src/components/ui/__tests__/Textarea.test.ts deleted file mode 100644 index 0786c93..0000000 --- a/src/components/ui/__tests__/Textarea.test.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import { describe, it, expect } from "vitest"; -import Textarea from "../Textarea.astro"; - -describe("Textarea", () => { - it("renders with default props", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Textarea); - - expect(result).toContain(" { - const container = await AstroContainer.create(); - const result = await container.renderToString(Textarea, { - props: { placeholder: "Enter your message" }, - }); - - expect(result).toContain('placeholder="Enter your message"'); - }); - - it("applies value", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Textarea, { - props: { value: "Initial text" }, - }); - - expect(result).toContain("Initial text"); - }); - - it("applies name and id attributes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Textarea, { - props: { name: "message", id: "message-input" }, - }); - - expect(result).toContain('name="message"'); - expect(result).toContain('id="message-input"'); - }); - - it("applies custom rows", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Textarea, { - props: { rows: 8 }, - }); - - expect(result).toContain('rows="8"'); - }); - - it("applies disabled state", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Textarea, { - props: { disabled: true }, - }); - - expect(result).toContain("disabled"); - }); - - it("applies required attribute", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Textarea, { - props: { required: true }, - }); - - expect(result).toContain("required"); - }); - - it("applies custom classes", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Textarea, { - props: { class: "custom-textarea" }, - }); - - expect(result).toContain("textarea custom-textarea"); - }); -}); diff --git a/src/components/ui/__tests__/basic.test.ts b/src/components/ui/__tests__/basic.test.ts deleted file mode 100644 index c016ebf..0000000 --- a/src/components/ui/__tests__/basic.test.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { describe, it, expect } from "vitest"; -import { experimental_AstroContainer as AstroContainer } from "astro/container"; -import Button from "../Button.astro"; - -describe("Basic Astro Component Test", () => { - it("should render a simple button", async () => { - const container = await AstroContainer.create(); - const result = await container.renderToString(Button, { - slots: { default: "Test Button" }, - }); - - expect(result).toContain("Test Button"); - expect(result).toContain("btn"); - }); -}); diff --git a/src/layouts/EmptyLayout.astro b/src/layouts/EmptyLayout.astro new file mode 100644 index 0000000..c01945a --- /dev/null +++ b/src/layouts/EmptyLayout.astro @@ -0,0 +1,7 @@ +--- +import Layout from "./Layout.astro"; +--- + + + + diff --git a/src/pages/login.astro b/src/pages/login.astro new file mode 100644 index 0000000..e5c62ea --- /dev/null +++ b/src/pages/login.astro @@ -0,0 +1,39 @@ +--- +export const prerender = false; + +import { actions } from "astro:actions"; +import Ascii from "../components/Ascii.astro"; +import LoginForm from "../components/forms/LoginForm.astro"; +import Card from "../components/ui/Card.astro"; +import CardBody from "../components/ui/CardBody.astro"; +import CardHeader from "../components/ui/CardHeader.astro"; +import Col from "../components/ui/Col.astro"; +import Container from "../components/ui/Container.astro"; +import Row from "../components/ui/Row.astro"; +import EmptyLayout from "../layouts/EmptyLayout.astro"; +import { isInputError } from "astro:actions"; + +const result = Astro.getActionResult(actions.login); +--- + + + + + + + + + + + + + + + + + diff --git a/src/styles/variables.css b/src/styles/variables.css index d142c28..96199fb 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -1,163 +1,163 @@ :root { - --primary-50: #f3f1ff; - --primary-100: #ebe5ff; - --primary-200: #d9ccff; - --primary-300: #bea6ff; - --primary-400: #9f75ff; - --primary-500: #843dff; - --primary-600: #7916ff; - --primary-700: #6b04fd; - --primary-800: #5a03d4; - --primary-900: #4b05ad; - --primary-950: #2c0274; + --primary-50: #f3f1ff; + --primary-100: #ebe5ff; + --primary-200: #d9ccff; + --primary-300: #bea6ff; + --primary-400: #9f75ff; + --primary-500: #843dff; + --primary-600: #7916ff; + --primary-700: #6b04fd; + --primary-800: #5a03d4; + --primary-900: #4b05ad; + --primary-950: #2c0274; - --gray-50: #f8fafc; - --gray-100: #f1f5f9; - --gray-200: #e2e8f0; - --gray-300: #cbd5e1; - --gray-400: #94a3b8; - --gray-500: #64748b; - --gray-600: #475569; - --gray-700: #334155; - --gray-800: #1e293b; - --gray-900: #0f172a; - --gray-950: #020617; + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + --gray-950: #020617; - --success: #10b981; - --warning: #f59e0b; - --error: #ef4444; - --info: #3b82f6; + --success: #10b981; + --warning: #f59e0b; + --error: #ef4444; + --info: #3b82f6; - --bg-primary: var(--gray-950); - --bg-secondary: var(--gray-900); - --bg-tertiary: var(--gray-800); - --bg-card: var(--gray-900); - --bg-hover: var(--gray-800); + --bg-primary: var(--gray-950); + --bg-secondary: var(--gray-900); + --bg-tertiary: var(--gray-800); + --bg-card: var(--gray-900); + --bg-hover: var(--gray-800); - --text-primary: var(--gray-50); - --text-secondary: var(--gray-300); - --text-muted: var(--gray-500); + --text-primary: var(--gray-50); + --text-secondary: var(--gray-300); + --text-muted: var(--gray-500); - --border-primary: var(--gray-700); - --border-secondary: var(--gray-800); + --border-primary: var(--gray-700); + --border-secondary: var(--gray-800); - --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --shadow-lg: - 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --shadow-xl: - 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --shadow-lg: + 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadow-xl: + 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --radius-sm: 0.125rem; - --radius: 0.25rem; - --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --radius-xl: 0.75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-full: 9999px; + --radius-sm: 0.125rem; + --radius: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-full: 9999px; - --spacing-1: 0.25rem; - --spacing-2: 0.5rem; - --spacing-3: 0.75rem; - --spacing-4: 1rem; - --spacing-5: 1.25rem; - --spacing-6: 1.5rem; - --spacing-8: 2rem; - --spacing-10: 2.5rem; - --spacing-12: 3rem; - --spacing-16: 4rem; - --spacing-20: 5rem; - --spacing-24: 6rem; - --spacing-32: 8rem; + --spacing-1: 0.25rem; + --spacing-2: 0.5rem; + --spacing-3: 0.75rem; + --spacing-4: 1rem; + --spacing-5: 1.25rem; + --spacing-6: 1.5rem; + --spacing-8: 2rem; + --spacing-10: 2.5rem; + --spacing-12: 3rem; + --spacing-16: 4rem; + --spacing-20: 5rem; + --spacing-24: 6rem; + --spacing-32: 8rem; - --font-family-sans: - ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; - --font-family-mono: - ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, - monospace; + --font-family-sans: + ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; + --font-family-mono: + ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, + monospace; - --font-size-xs: 0.75rem; - --font-size-sm: 0.875rem; - --font-size-base: 1rem; - --font-size-lg: 1.125rem; - --font-size-xl: 1.25rem; - --font-size-2xl: 1.5rem; - --font-size-3xl: 1.875rem; - --font-size-4xl: 2.25rem; - --font-size-5xl: 3rem; + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-base: 1rem; + --font-size-lg: 1.125rem; + --font-size-xl: 1.25rem; + --font-size-2xl: 1.5rem; + --font-size-3xl: 1.875rem; + --font-size-4xl: 2.25rem; + --font-size-5xl: 3rem; - --font-weight-normal: 400; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; - --line-height-tight: 1.25; - --line-height-normal: 1.5; - --line-height-relaxed: 1.625; + --line-height-tight: 1.25; + --line-height-normal: 1.5; + --line-height-relaxed: 1.625; - --transition-fast: 150ms ease; - --transition-normal: 300ms ease; - --transition-slow: 500ms ease; + --transition-fast: 150ms ease; + --transition-normal: 300ms ease; + --transition-slow: 500ms ease; - --z-dropdown: 1000; - --z-sticky: 1020; - --z-fixed: 1030; - --z-modal-backdrop: 1040; - --z-modal: 1050; - --z-popover: 1060; - --z-tooltip: 1070; + --z-dropdown: 1000; + --z-sticky: 1020; + --z-fixed: 1030; + --z-modal-backdrop: 1040; + --z-modal: 1050; + --z-popover: 1060; + --z-tooltip: 1070; } * { - box-sizing: border-box; + box-sizing: border-box; } html, body { - margin: 0; - padding: 0; - font-family: var(--font-family-sans); - font-size: var(--font-size-base); - line-height: var(--line-height-normal); - color: var(--text-primary); - background-color: var(--bg-primary); + margin: 0; + padding: 0; + font-family: var(--font-family-sans); + font-size: var(--font-size-base); + line-height: var(--line-height-normal); + color: var(--text-primary); + background-color: var(--bg-primary); } html { - height: 100%; + height: 100%; } body { - min-height: 100%; + height: 100%; } /* Form Control Base Styles */ .form-control-base { - width: 100%; - padding: var(--spacing-3) var(--spacing-4); - font-size: var(--font-size-base); - line-height: var(--line-height-normal); - color: var(--text-primary); - background-color: var(--bg-tertiary); - border: 1px solid var(--border-primary); - border-radius: var(--radius-md); - transition: all var(--transition-fast); + width: 100%; + padding: var(--spacing-3) var(--spacing-4); + font-size: var(--font-size-base); + line-height: var(--line-height-normal); + color: var(--text-primary); + background-color: var(--bg-tertiary); + border: 1px solid var(--border-primary); + border-radius: var(--radius-md); + transition: all var(--transition-fast); } .form-control-base:focus { - outline: none; - border-color: var(--primary-600); - box-shadow: 0 0 0 3px rgba(132, 61, 255, 0.1); + outline: none; + border-color: var(--primary-600); + box-shadow: 0 0 0 3px rgba(132, 61, 255, 0.1); } .form-control-base:disabled { - opacity: 0.6; - cursor: not-allowed; + opacity: 0.6; + cursor: not-allowed; } .form-control-base::placeholder { - color: var(--text-muted); + color: var(--text-muted); } diff --git a/tsconfig.json b/tsconfig.json index a9210e6..8bf91d3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/strict", - "include": [".astro/types.d.ts", "**/*"], - "exclude": ["dist"] + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] } diff --git a/vitest.config.ts b/vitest.config.ts deleted file mode 100644 index 39765ad..0000000 --- a/vitest.config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { getViteConfig } from 'astro/config'; - -export default getViteConfig({ - test: { - environment: 'node' - } -}); \ No newline at end of file