From 245e9941c005a71e34934c598dc5f77303a8e3b6 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 22 Mar 2024 15:56:57 +0100
Subject: [PATCH] test(Input): add sizes

---
 test/components/Input.spec.ts                 |  7 +-
 .../__snapshots__/Input.spec.ts.snap          | 77 +++++++++++++++++++
 2 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/test/components/Input.spec.ts b/test/components/Input.spec.ts
index 4317e2c9..8a96d746 100644
--- a/test/components/Input.spec.ts
+++ b/test/components/Input.spec.ts
@@ -18,7 +18,12 @@ describe('Input', () => {
     ['with trailing and icon', { props: { trailing: true, icon: 'i-heroicons-magnifying-glass' } }],
     ['with trailingIcon', { props: { trailingIcon: 'i-heroicons-magnifying-glass' } }],
     ['with trailing slot', { slots: { leading: () => 'trailing slot' } }],
-    ['with size', { props: { size: 'xs' as const } }],
+    ['with size 2xs', { props: { size: '2xs' as const } }],
+    ['with size xs', { props: { size: 'xs' as const } }],
+    ['with size sm', { props: { size: 'sm' as const } }],
+    ['with size md', { props: { size: 'md' as const } }],
+    ['with size lg', { props: { size: 'lg' as const } }],
+    ['with size xl', { props: { size: 'xl' as const } }],
     ['with color', { props: { color: 'red' as const } }],
     ['with variant', { props: { variant: 'outline' as const } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: InputProps, slots?: any }) => {
diff --git a/test/components/__snapshots__/Input.spec.ts.snap b/test/components/__snapshots__/Input.spec.ts.snap
index 2e910264..0f073014 100644
--- a/test/components/__snapshots__/Input.spec.ts.snap
+++ b/test/components/__snapshots__/Input.spec.ts.snap
@@ -72,6 +72,13 @@ exports[`Input > renders with required correctly 1`] = `
 </div>"
 `;
 
+exports[`Input > renders with size 2xs correctly 1`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-xs gap-x-1 px-2 py-1 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Input > renders with size correctly 1`] = `
 "<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
   <!--v-if-->
@@ -79,6 +86,76 @@ exports[`Input > renders with size correctly 1`] = `
 </div>"
 `;
 
+exports[`Input > renders with size correctly 2`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Input > renders with size correctly 3`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Input > renders with size correctly 4`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-3 py-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Input > renders with size correctly 5`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-2.5 px-3.5 py-2.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Input > renders with size correctly 6`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-base gap-x-2.5 px-3.5 py-2.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Input > renders with size lg correctly 1`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-2.5 px-3.5 py-2.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Input > renders with size md correctly 1`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-3 py-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Input > renders with size sm correctly 1`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Input > renders with size xl correctly 1`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-base gap-x-2.5 px-3.5 py-2.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Input > renders with size xs correctly 1`] = `
+"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Input > renders with trailing and icon correctly 1`] = `
 "<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 pe-9">
   <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center px-2.5"><svg data-v-afd689a2="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 text-gray-400 dark:text-gray-500 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607"></path></svg></span>