chore: add vitest/globals types, remove redundant vitest imports, fix pre-existing lint issues
This commit is contained in:
@@ -20,6 +20,8 @@
|
||||
# production
|
||||
/build
|
||||
|
||||
/docs
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
||||
import { SectionAccordion } from './SectionAccordion'
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
|
||||
import { SectionAccordion } from './SectionAccordion';
|
||||
|
||||
const meta: Meta<typeof SectionAccordion> = {
|
||||
title: 'Shared/SectionAccordion',
|
||||
@@ -11,11 +11,11 @@ const meta: Meta<typeof SectionAccordion> = {
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
};
|
||||
|
||||
export default meta
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof SectionAccordion>
|
||||
type Story = StoryObj<typeof SectionAccordion>;
|
||||
|
||||
export const Active: Story = {
|
||||
args: {
|
||||
@@ -24,11 +24,9 @@ export const Active: Story = {
|
||||
id: 'bio',
|
||||
isActive: true,
|
||||
onClick: () => {},
|
||||
children: (
|
||||
<p>This is the expanded section content. It is visible because isActive is true.</p>
|
||||
),
|
||||
children: <p>This is the expanded section content. It is visible because isActive is true.</p>,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export const Collapsed: Story = {
|
||||
args: {
|
||||
@@ -37,8 +35,6 @@ export const Collapsed: Story = {
|
||||
id: 'work',
|
||||
isActive: false,
|
||||
onClick: () => console.log('section clicked'),
|
||||
children: (
|
||||
<p>This content is hidden in collapsed state.</p>
|
||||
),
|
||||
children: <p>This content is hidden in collapsed state.</p>,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { SectionAccordion } from './SectionAccordion'
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { SectionAccordion } from './SectionAccordion';
|
||||
|
||||
const defaultProps = {
|
||||
number: '01',
|
||||
@@ -10,48 +9,48 @@ const defaultProps = {
|
||||
isActive: false,
|
||||
onClick: vi.fn(),
|
||||
children: <p>Content here</p>,
|
||||
}
|
||||
};
|
||||
|
||||
describe('SectionAccordion', () => {
|
||||
describe('collapsed state (isActive=false)', () => {
|
||||
it('renders a section element with the given id', () => {
|
||||
const { container } = render(<SectionAccordion {...defaultProps} />)
|
||||
expect(container.querySelector('section#about')).toBeInTheDocument()
|
||||
})
|
||||
const { container } = render(<SectionAccordion {...defaultProps} />);
|
||||
expect(container.querySelector('section#about')).toBeInTheDocument();
|
||||
});
|
||||
it('renders a button with number and title', () => {
|
||||
render(<SectionAccordion {...defaultProps} />)
|
||||
expect(screen.getByRole('button', { name: /01.*About/i })).toBeInTheDocument()
|
||||
})
|
||||
render(<SectionAccordion {...defaultProps} />);
|
||||
expect(screen.getByRole('button', { name: /01.*About/i })).toBeInTheDocument();
|
||||
});
|
||||
it('does not render children', () => {
|
||||
render(<SectionAccordion {...defaultProps} />)
|
||||
expect(screen.queryByText('Content here')).not.toBeInTheDocument()
|
||||
})
|
||||
render(<SectionAccordion {...defaultProps} />);
|
||||
expect(screen.queryByText('Content here')).not.toBeInTheDocument();
|
||||
});
|
||||
it('calls onClick when button is clicked', async () => {
|
||||
const onClick = vi.fn()
|
||||
render(<SectionAccordion {...defaultProps} onClick={onClick} />)
|
||||
await userEvent.click(screen.getByRole('button'))
|
||||
expect(onClick).toHaveBeenCalledOnce()
|
||||
})
|
||||
})
|
||||
const onClick = vi.fn();
|
||||
render(<SectionAccordion {...defaultProps} onClick={onClick} />);
|
||||
await userEvent.click(screen.getByRole('button'));
|
||||
expect(onClick).toHaveBeenCalledOnce();
|
||||
});
|
||||
});
|
||||
|
||||
describe('active state (isActive=true)', () => {
|
||||
const activeProps = { ...defaultProps, isActive: true }
|
||||
const activeProps = { ...defaultProps, isActive: true };
|
||||
|
||||
it('renders an h1 with number and title', () => {
|
||||
render(<SectionAccordion {...activeProps} />)
|
||||
expect(screen.getByRole('heading', { level: 1, name: /01.*About/i })).toBeInTheDocument()
|
||||
})
|
||||
render(<SectionAccordion {...activeProps} />);
|
||||
expect(screen.getByRole('heading', { level: 1, name: /01.*About/i })).toBeInTheDocument();
|
||||
});
|
||||
it('renders children', () => {
|
||||
render(<SectionAccordion {...activeProps} />)
|
||||
expect(screen.getByText('Content here')).toBeInTheDocument()
|
||||
})
|
||||
render(<SectionAccordion {...activeProps} />);
|
||||
expect(screen.getByText('Content here')).toBeInTheDocument();
|
||||
});
|
||||
it('does not render a button', () => {
|
||||
render(<SectionAccordion {...activeProps} />)
|
||||
expect(screen.queryByRole('button')).not.toBeInTheDocument()
|
||||
})
|
||||
render(<SectionAccordion {...activeProps} />);
|
||||
expect(screen.queryByRole('button')).not.toBeInTheDocument();
|
||||
});
|
||||
it('content wrapper has animate-fadeIn class', () => {
|
||||
const { container } = render(<SectionAccordion {...activeProps} />)
|
||||
expect(container.querySelector('.animate-fadeIn')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
const { container } = render(<SectionAccordion {...activeProps} />);
|
||||
expect(container.querySelector('.animate-fadeIn')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
interface SectionAccordionProps {
|
||||
/**
|
||||
* Display number prefix (e.g. "01")
|
||||
*/
|
||||
number: string
|
||||
number: string;
|
||||
/**
|
||||
* Section title
|
||||
*/
|
||||
title: string
|
||||
title: string;
|
||||
/**
|
||||
* HTML id for anchor navigation
|
||||
*/
|
||||
id: string
|
||||
id: string;
|
||||
/**
|
||||
* Whether this section is expanded
|
||||
*/
|
||||
isActive: boolean
|
||||
isActive: boolean;
|
||||
/**
|
||||
* Called when the collapsed header is clicked
|
||||
*/
|
||||
onClick: () => void
|
||||
onClick: () => void;
|
||||
/**
|
||||
* Section content, shown when active
|
||||
*/
|
||||
children: ReactNode
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -43,12 +43,11 @@ export function SectionAccordion({ number, title, id, isActive, onClick, childre
|
||||
{number}. {title}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="animate-fadeIn">
|
||||
{children}
|
||||
</div>
|
||||
<div className="animate-fadeIn">{children}</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="w-full text-left mb-3 py-3 transition-all duration-200 hover:opacity-60 group"
|
||||
>
|
||||
@@ -61,5 +60,5 @@ export function SectionAccordion({ number, title, id, isActive, onClick, childre
|
||||
</button>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
export * from './SectionAccordion'
|
||||
export * from './SectionAccordion';
|
||||
|
||||
@@ -1 +1 @@
|
||||
export * from './SectionAccordion'
|
||||
export * from './SectionAccordion';
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ExperienceCard } from './ExperienceCard';
|
||||
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export * from './project';
|
||||
export * from './experience';
|
||||
export * from './project';
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export { ProjectMetadata } from './ui/ProjectMetadata';
|
||||
export { ProjectCard } from './ui/ProjectCard';
|
||||
export { DetailedProjectCard } from './ui/DetailedProjectCard';
|
||||
export { ProjectCard } from './ui/ProjectCard';
|
||||
export { ProjectMetadata } from './ui/ProjectMetadata';
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { DetailedProjectCard } from './DetailedProjectCard';
|
||||
|
||||
@@ -78,13 +77,12 @@ describe('DetailedProjectCard', () => {
|
||||
|
||||
it('renders image when imageUrl is provided', () => {
|
||||
render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />);
|
||||
const img = screen.getByRole('img');
|
||||
expect(img).toHaveAttribute('src', '/detail.jpg');
|
||||
expect(screen.getByRole('img')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('image wrapper has aspect-video and brutal-border when imageUrl is provided', () => {
|
||||
const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />);
|
||||
const imgWrapper = container.querySelector('img')!.parentElement;
|
||||
const imgWrapper = container.querySelector('img')?.parentElement;
|
||||
expect(imgWrapper).toHaveClass('aspect-video', 'brutal-border');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import Image from 'next/image';
|
||||
import { Card } from '$shared/ui';
|
||||
import { ProjectMetadata } from './ProjectMetadata';
|
||||
|
||||
@@ -53,14 +54,14 @@ export function DetailedProjectCard({ title, year, role, stack, description, det
|
||||
<p className="text-lg mb-6">{description}</p>
|
||||
|
||||
{imageUrl && (
|
||||
<div className="brutal-border aspect-video bg-slate-indigo overflow-hidden">
|
||||
<img src={imageUrl} alt={title} className="w-full h-full object-cover" />
|
||||
<div className="brutal-border aspect-video bg-slate-indigo overflow-hidden relative">
|
||||
<Image src={imageUrl} alt={title} fill className="object-cover" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-w-[700px] space-y-4 brutal-border-top pt-6">
|
||||
{details.map((detail, index) => (
|
||||
<p key={index} className="text-base">
|
||||
{details.map((detail) => (
|
||||
<p key={detail} className="text-base">
|
||||
{detail}
|
||||
</p>
|
||||
))}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ProjectCard } from './ProjectCard';
|
||||
|
||||
@@ -73,13 +72,12 @@ describe('ProjectCard', () => {
|
||||
|
||||
it('renders image when imageUrl is provided', () => {
|
||||
render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
|
||||
const img = screen.getByRole('img');
|
||||
expect(img).toHaveAttribute('src', '/project.jpg');
|
||||
expect(screen.getByRole('img')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('image wrapper has aspect-video and overflow-hidden when imageUrl is provided', () => {
|
||||
const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
|
||||
const imgWrapper = container.querySelector('img')!.parentElement;
|
||||
const imgWrapper = container.querySelector('img')?.parentElement;
|
||||
expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '$shared/ui';
|
||||
import Image from 'next/image';
|
||||
import { cn } from '$shared/lib';
|
||||
import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$shared/ui';
|
||||
|
||||
type Props = {
|
||||
/**
|
||||
@@ -44,8 +45,8 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
|
||||
</CardHeader>
|
||||
|
||||
{imageUrl && (
|
||||
<div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden">
|
||||
<img src={imageUrl} alt={title} className="w-full h-full object-cover" />
|
||||
<div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden relative">
|
||||
<Image src={imageUrl} alt={title} fill className="object-cover" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ProjectMetadata } from './ProjectMetadata';
|
||||
|
||||
@@ -51,19 +50,19 @@ describe('ProjectMetadata', () => {
|
||||
|
||||
it('year section has no brutal-border-top (first section)', () => {
|
||||
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
|
||||
const sections = container.firstChild!.childNodes;
|
||||
const sections = container.firstChild?.childNodes;
|
||||
expect(sections[0]).not.toHaveClass('brutal-border-top');
|
||||
});
|
||||
|
||||
it('role section has brutal-border-top and pt-6', () => {
|
||||
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
|
||||
const sections = container.firstChild!.childNodes;
|
||||
const sections = container.firstChild?.childNodes;
|
||||
expect(sections[1]).toHaveClass('brutal-border-top', 'pt-6');
|
||||
});
|
||||
|
||||
it('stack section has brutal-border-top and pt-6', () => {
|
||||
const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
|
||||
const sections = container.firstChild!.childNodes;
|
||||
const sections = container.firstChild?.childNodes;
|
||||
expect(sections[2]).toHaveClass('brutal-border-top', 'pt-6');
|
||||
});
|
||||
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export * from './types';
|
||||
export * from './client';
|
||||
export * from './types';
|
||||
|
||||
@@ -21,14 +21,13 @@ export type BaseRecord = {
|
||||
/**
|
||||
* Record last update timestamp (ISO 8601)
|
||||
*/
|
||||
updated: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* PocketBase collection for simple text blocks (Intro, Bio).
|
||||
*/
|
||||
export type PageContentRecord = BaseRecord & {
|
||||
updated: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* PocketBase collection for simple text blocks (Intro, Bio).
|
||||
*/
|
||||
export type PageContentRecord = BaseRecord & {
|
||||
/**
|
||||
* Slug corresponding to the parent section
|
||||
*/
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
export * from './ui';
|
||||
export * from './lib';
|
||||
export * from './api';
|
||||
export * from './lib';
|
||||
export * from './ui';
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { cn } from './cn';
|
||||
|
||||
describe('cn', () => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { formatYearRange } from './formatDate';
|
||||
|
||||
describe('formatYearRange', () => {
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export { Badge } from './ui/Badge';
|
||||
export type { BadgeVariant } from './ui/Badge';
|
||||
export { Badge } from './ui/Badge';
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { Badge } from './Badge';
|
||||
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export type { ButtonSize, ButtonVariant } from './ui/Button';
|
||||
export { Button } from './ui/Button';
|
||||
export type { ButtonVariant, ButtonSize } from './ui/Button';
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Button } from './Button';
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './ui/Card';
|
||||
export type { CardBackground } from './ui/Card';
|
||||
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/Card';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './Card';
|
||||
|
||||
const meta: Meta<typeof Card> = {
|
||||
title: 'Shared/Card',
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './Card';
|
||||
|
||||
describe('Card', () => {
|
||||
describe('rendering', () => {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { Input, Textarea } from './Input';
|
||||
|
||||
@@ -35,7 +34,7 @@ describe('Input', () => {
|
||||
const input = screen.getByRole('textbox');
|
||||
const errorId = input.getAttribute('aria-describedby');
|
||||
expect(errorId).toBeTruthy();
|
||||
expect(document.getElementById(errorId!)).toHaveTextContent('Required');
|
||||
expect(document.getElementById(errorId as string)).toHaveTextContent('Required');
|
||||
});
|
||||
it('no aria-describedby when no error', () => {
|
||||
render(<Input />);
|
||||
@@ -100,7 +99,7 @@ describe('Textarea', () => {
|
||||
const textarea = screen.getByRole('textbox');
|
||||
const errorId = textarea.getAttribute('aria-describedby');
|
||||
expect(errorId).toBeTruthy();
|
||||
expect(document.getElementById(errorId!)).toHaveTextContent('Too short');
|
||||
expect(document.getElementById(errorId as string)).toHaveTextContent('Too short');
|
||||
});
|
||||
it('no aria-describedby when no error', () => {
|
||||
render(<Textarea />);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useId, type InputHTMLAttributes, type TextareaHTMLAttributes } from 'react';
|
||||
import { type InputHTMLAttributes, type TextareaHTMLAttributes, useId } from 'react';
|
||||
import { cn } from '$shared/lib';
|
||||
|
||||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export { Section, Container } from './ui/Section';
|
||||
export type { SectionBackground, ContainerSize } from './ui/Section';
|
||||
export type { ContainerSize, SectionBackground } from './ui/Section';
|
||||
export { Container, Section } from './ui/Section';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
|
||||
import { Section, Container } from './Section';
|
||||
import { Container, Section } from './Section';
|
||||
|
||||
const meta: Meta<typeof Section> = {
|
||||
title: 'Shared/Section',
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { Section, Container } from './Section';
|
||||
import { Container, Section } from './Section';
|
||||
|
||||
describe('Section', () => {
|
||||
describe('rendering', () => {
|
||||
@@ -36,13 +35,13 @@ describe('Section', () => {
|
||||
describe('bordered', () => {
|
||||
it('no border classes by default', () => {
|
||||
const { container } = render(<Section>x</Section>);
|
||||
const el = container.querySelector('section')!;
|
||||
const el = container.querySelector('section') as HTMLElement;
|
||||
expect(el).not.toHaveClass('brutal-border-top');
|
||||
expect(el).not.toHaveClass('brutal-border-bottom');
|
||||
});
|
||||
it('adds top and bottom borders when bordered=true', () => {
|
||||
const { container } = render(<Section bordered>x</Section>);
|
||||
const el = container.querySelector('section')!;
|
||||
const el = container.querySelector('section') as HTMLElement;
|
||||
expect(el).toHaveClass('brutal-border-top');
|
||||
expect(el).toHaveClass('brutal-border-bottom');
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
|
||||
import { TechStackGrid, TechStackBrick } from './TechStack';
|
||||
import { TechStackBrick, TechStackGrid } from './TechStack';
|
||||
|
||||
const meta: Meta<typeof TechStackGrid> = {
|
||||
title: 'Shared/TechStack',
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { TechStackBrick, TechStackGrid } from './TechStack';
|
||||
|
||||
@@ -41,11 +40,11 @@ describe('TechStackGrid', () => {
|
||||
});
|
||||
it('renders correct number of bricks', () => {
|
||||
const { container } = render(<TechStackGrid skills={['A', 'B', 'C']} />);
|
||||
expect(container.firstChild!.childNodes).toHaveLength(3);
|
||||
expect(container.firstChild?.childNodes).toHaveLength(3);
|
||||
});
|
||||
it('renders empty grid with no skills', () => {
|
||||
const { container } = render(<TechStackGrid skills={[]} />);
|
||||
expect(container.firstChild!.childNodes).toHaveLength(0);
|
||||
expect(container.firstChild?.childNodes).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -47,8 +47,8 @@ export function TechStackGrid({ skills, className }: TechStackGridProps) {
|
||||
<div
|
||||
className={cn('grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4', className)}
|
||||
>
|
||||
{skills.map((skill, index) => (
|
||||
<TechStackBrick key={index} name={skill} />
|
||||
{skills.map((skill) => (
|
||||
<TechStackBrick key={skill} name={skill} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export type { NavItem } from './model/types';
|
||||
export { MobileNav } from './ui/MobileNav';
|
||||
export { SidebarNav } from './ui/SidebarNav';
|
||||
export { UtilityBar } from './ui/UtilityBar';
|
||||
export type { NavItem } from './model/types';
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { MobileNav } from './MobileNav';
|
||||
import type { NavItem } from '../model/types';
|
||||
import { MobileNav } from './MobileNav';
|
||||
|
||||
const ITEMS: NavItem[] = [{ id: 'about', label: 'About', number: '01' }];
|
||||
|
||||
@@ -38,7 +37,7 @@ describe('MobileNav', () => {
|
||||
// item button label contains number + label text; find by accessible name fragment
|
||||
const itemBtn = screen.getAllByRole('button').find((b) => b.textContent?.includes('About'));
|
||||
expect(itemBtn).toBeDefined();
|
||||
await userEvent.click(itemBtn!);
|
||||
await userEvent.click(itemBtn as HTMLElement);
|
||||
expect(screen.queryByText('Close')).not.toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -34,6 +34,7 @@ export function MobileNav({ items }: Props) {
|
||||
<div className="px-6 py-4 flex items-center justify-between">
|
||||
<h4>allmy.work</h4>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay"
|
||||
>
|
||||
@@ -44,6 +45,7 @@ export function MobileNav({ items }: Props) {
|
||||
<div className="px-6 py-6 brutal-border-top space-y-2 max-h-[80vh] overflow-y-auto">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
type="button"
|
||||
key={item.id}
|
||||
onClick={() => scrollToSection(item.id)}
|
||||
className="w-full text-left brutal-border bg-ochre-clay px-4 py-3"
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import type { NavItem } from '../model/types';
|
||||
import { SidebarNav } from './SidebarNav';
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { cn } from '$shared/lib';
|
||||
import type { NavItem } from '../model/types';
|
||||
|
||||
@@ -31,7 +31,9 @@ export function SidebarNav({ items }: Props) {
|
||||
|
||||
items.forEach((item) => {
|
||||
const el = document.getElementById(item.id);
|
||||
if (el) observer.observe(el);
|
||||
if (el) {
|
||||
observer.observe(el);
|
||||
}
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
@@ -62,6 +64,7 @@ export function SidebarNav({ items }: Props) {
|
||||
const isActive = activeSection === item.id;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={item.id}
|
||||
onClick={() => scrollToSection(item.id)}
|
||||
className={cn(
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { UtilityBar } from './UtilityBar';
|
||||
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"types": ["vitest/globals"],
|
||||
"paths": {
|
||||
"@/*": ["./*"],
|
||||
"$shared/*": ["./src/shared/*"],
|
||||
|
||||
Reference in New Issue
Block a user