test: ✅ add basic trsts

src/lib/components/role-details.svelte

@@ -4,7 +4,7 @@
 	export let position: string
 	export let company: string
 	export let startDate: Date
-	export let endDate: Date
+	export let endDate: string | number | Date | null
 
 	const formatDates = (
 		startDate: string | number | Date,
@@ -65,6 +65,6 @@
 <span
 	class="text-accent font-bold print:font-medium print:text-black print:text-xs"
 >
-	{formatDates(startDate, endDate)}
+	{formatDates(startDate, endDate === null ? '' : endDate)}
 </span>
 <div class="mb-8 print:mb-2" />

src/lib/components/role-details.test.ts

@@ -0,0 +1,69 @@
+import { cleanup, render } from '@testing-library/svelte'
+import { afterEach, describe, expect, it } from 'vitest'
+import RoleDetails from './role-details.svelte'
+
+describe('RoleDetails', () => {
+	const defaultProps = {
+		position: 'Software Developer',
+		company: 'Tech Corp',
+		startDate: new Date('2020-01-01'),
+		endDate: new Date('2022-12-31'),
+	}
+
+	afterEach(() => {
+		cleanup()
+	})
+
+	it('renders the position and company', () => {
+		const { getByText } = render(RoleDetails, { ...defaultProps })
+
+		expect(getByText('Software Developer')).not.toBeNull()
+		expect(getByText('Tech Corp')).not.toBeNull()
+	})
+
+	it('formats dates correctly when both start and end dates are valid', () => {
+		const { getByText } = render(RoleDetails, { ...defaultProps })
+
+		expect(
+			getByText('Jan 2020 - Dec 2022 (2yrs 11mos)')
+		).not.toBeNull()
+	})
+
+	it('shows "Present" for an invalid end date', () => {
+		const { getByText } = render(RoleDetails, {
+			...defaultProps,
+			endDate: null,
+		})
+
+		expect(getByText('Jan 2020 - Present (3yrs 7mos)')).not.toBeNull()
+	})
+
+	it('shows duration correctly for 1 year', () => {
+		const { getByText } = render(RoleDetails, {
+			...defaultProps,
+			endDate: new Date('2021-01-01'),
+		})
+
+		expect(getByText('Jan 2020 - Jan 2021 (1yr)')).not.toBeNull()
+	})
+
+	it('shows duration correctly for 1 month', () => {
+		const { getByText } = render(RoleDetails, {
+			...defaultProps,
+			startDate: new Date('2022-01-01'),
+			endDate: new Date('2022-02-01'),
+		})
+
+		expect(getByText('Jan 2022 - Feb 2022 (1mo)')).not.toBeNull()
+	})
+
+	it('shows duration correctly for a combination of years and months', () => {
+		const { getByText } = render(RoleDetails, {
+			...defaultProps,
+			startDate: new Date('2020-01-01'),
+			endDate: new Date('2021-02-01'),
+		})
+
+		expect(getByText('Jan 2020 - Feb 2021 (1yr 1mo)')).not.toBeNull()
+	})
+})