refactor: reorder icon properties and improve test cases for better clarity and functionality

Author: ismail9k

src/components/Icon/Icon.css

@@ -3,7 +3,7 @@
 }
 
 .carousel__icon {
-  width: var(--vc-icn-width);
-  height: var(--vc-icn-width);
   fill: currentColor;
+  height: var(--vc-icn-width);
+  width: var(--vc-icn-width);
 }

src/components/Icon/Icon.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { expect, it, describe, afterEach, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import { Icon } from './Icon'
 import { IconName, IconProps } from './Icon.types'
@@ -11,13 +11,6 @@ describe('Icon.ts', () => {
     consoleMock.mockReset()
   })
 
-  it('It should error if no iconName', () => {
-    const wrapper = mount(Icon, { props: {} as IconProps })
-    expect(wrapper.html()).toBe('')
-    expect(consoleMock).toHaveBeenCalledOnce()
-    expect(consoleMock.mock.calls[0][0]).toBe('[Vue warn]: Missing required prop: "name"')
-  })
-
   it('It should error if iconName is invalid', () => {
     const wrapper = mount(Icon, { props: { name: 'foo' as IconProps['name'] } })
     expect(wrapper.html()).toBe('')
@@ -27,14 +20,23 @@ describe('Icon.ts', () => {
     )
   })
 
+  it('It should error if no iconName', () => {
+    const wrapper = mount(Icon, { props: {} as IconProps })
+    expect(wrapper.html()).toBe('')
+    expect(consoleMock).toHaveBeenCalledOnce()
+    expect(consoleMock.mock.calls[0][0]).toBe('[Vue warn]: Missing required prop: "name"')
+  })
+
   it('It should render standalone', async () => {
-    await Promise.all(Object.values(IconName).map(async (name) => {
-      const wrapper = mount(Icon, { props: { name: name } })
-      expect(consoleMock).not.toHaveBeenCalled()
-      expect(wrapper.html()).toMatchSnapshot()
+    await Promise.all(
+      Object.values(IconName).map(async (name) => {
+        const wrapper = mount(Icon, { props: { name: name } })
+        expect(consoleMock).not.toHaveBeenCalled()
+        expect(wrapper.html()).toMatchSnapshot()
 
-      await wrapper.setProps({ title: 'Test title' })
-      expect(wrapper.find('svg title').text()).toBe('Test title')
-    }))
+        await wrapper.setProps({ title: 'Test title' })
+        expect(wrapper.find('svg title').text()).toBe('Test title')
+      })
+    )
   })
 })

src/components/Icon/Icon.ts

@@ -4,22 +4,22 @@ import { DEFAULT_CONFIG, injectCarousel } from '@/shared'
 
 import { IconName, IconNameValue, IconProps } from './Icon.types'
 
-function isIconName(candidate: string): candidate is IconName {
-  return candidate in IconName
-}
-
 const iconI18n = <Name extends IconNameValue>(name: Name) =>
   `icon${name.charAt(0).toUpperCase() + name.slice(1)}` as `icon${Capitalize<Name>}`
 
-const validateIconName = (value: IconNameValue) => {
-  return value && isIconName(value)
-}
-
 export const icons = {
-  arrowUp: 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z',
   arrowDown: 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z',
-  arrowRight: 'M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z',
   arrowLeft: 'M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z',
+  arrowRight: 'M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z',
+  arrowUp: 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z',
+}
+
+function isIconName(candidate: string): candidate is IconName {
+  return candidate in IconName
+}
+
+const validateIconName = (value: IconNameValue) => {
+  return value && isIconName(value)
 }
 
 export const Icon = defineComponent<IconProps>({
@@ -45,8 +45,7 @@ export const Icon = defineComponent<IconProps>({
       const path = icons[iconName]
       const pathEl = h('path', { d: path })
 
-      const iconTitle: string =
-        carousel?.config.i18n[iconI18n(iconName)] || props.title!
+      const iconTitle: string = carousel?.config.i18n[iconI18n(iconName)] || props.title!
 
       const titleEl = h('title', iconTitle)
 

src/components/Icon/Icon.types.ts

@@ -1,13 +1,13 @@
 export enum IconName {
-  arrowUp = 'arrowUp',
   arrowDown = 'arrowDown',
-  arrowRight = 'arrowRight',
   arrowLeft = 'arrowLeft',
+  arrowRight = 'arrowRight',
+  arrowUp = 'arrowUp',
 }
 
 export type IconNameValue = `${IconName}`
 
-export interface IconProps {
-  title?: string
+export type IconProps = {
   name: IconNameValue
+  title?: string
 }

src/components/Icon/__snapshots__/Icon.spec.ts.snap

@@ -1,16 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Icon.ts > It should render standalone 1`] = `
-"<svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing upwards">
-  <title>Arrow pointing upwards</title>
-  <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path>
+"<svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing downwards">
+  <title>Arrow pointing downwards</title>
+  <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
 </svg>"
 `;
 
 exports[`Icon.ts > It should render standalone 2`] = `
-"<svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing downwards">
-  <title>Arrow pointing downwards</title>
-  <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
+"<svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the left">
+  <title>Arrow pointing to the left</title>
+  <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path>
 </svg>"
 `;
 
@@ -22,8 +22,8 @@ exports[`Icon.ts > It should render standalone 3`] = `
 `;
 
 exports[`Icon.ts > It should render standalone 4`] = `
-"<svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the left">
-  <title>Arrow pointing to the left</title>
-  <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path>
+"<svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing upwards">
+  <title>Arrow pointing upwards</title>
+  <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path>
 </svg>"
 `;