-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
172 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { render, screen } from '@testing-library/react' | ||
| import { describe, expect, it } from 'vitest' | ||
|
|
||
| import { Avatar } from './avatar' | ||
|
|
||
| describe('Avatar', () => { | ||
| it('renders with image source and fallback', () => { | ||
| render(<Avatar src="/images/test-avatar.jpg" fallBack="JD" />) | ||
| const image = screen.getByRole('img') | ||
| const fallback = screen.queryByText('JD') | ||
|
|
||
| expect(image).toHaveAttribute( | ||
| 'src', | ||
| '/images/test-avatar.jpg', | ||
| ) | ||
| expect(fallback).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('renders fallback content when image source is not provided', () => { | ||
| render(<Avatar fallBack="NA" />) | ||
| const fallback = screen.getByText('NA') | ||
|
|
||
| expect(fallback).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('renders a badge with the correct content', () => { | ||
| render(<Avatar src="/images/test-avatar.jpg" badge="!" />) | ||
| const badge = screen.getByText('!') | ||
|
|
||
| expect(badge).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('positions the badge correctly based on badgePosition prop', () => { | ||
| render( | ||
| <Avatar | ||
| src="/images/test-avatar.jpg" | ||
| badge="NEW" | ||
| badgePosition="bottom-left" | ||
| />, | ||
| ) | ||
| const badge = screen.getByText('NEW') | ||
|
|
||
| expect(badge).toHaveClass('absolute bottom-[3px] left-[1px]') | ||
| }) | ||
|
|
||
| it('does not render a badge when the badge prop is not provided', () => { | ||
| render(<Avatar src="/images/test-avatar.jpg" />) | ||
| const badge = screen.queryByText('NEW') | ||
|
|
||
| expect(badge).not.toBeInTheDocument() | ||
| }) | ||
| }) |
121 changes: 61 additions & 60 deletions
121
apps/nt-headless-ui/components/ui/avatar/avatar.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,86 @@ | ||
| import { Meta, StoryObj } from '@storybook/react' | ||
| import React from 'react' | ||
|
|
||
| import { Avatar, AvatarFallback, AvatarImage } from './avatar' | ||
| import { Avatar, AvatarProps } from './avatar' | ||
|
|
||
| const URL_IMAGE = | ||
| 'https://gratisography.com/wp-content/uploads/2024/11/gratisography-augmented-reality-800x525.jpg' | ||
| const URL_IMAGE = './image.png' | ||
|
|
||
| const meta: Meta = { | ||
| const meta: Meta<AvatarProps> = { | ||
| title: 'Components/Avatar', | ||
| component: Avatar, | ||
| subcomponents: { AvatarImage, AvatarFallback }, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: | ||
| 'A flexible Avatar component using Radix UI.', | ||
| }, | ||
| args: { | ||
| src: URL_IMAGE, | ||
| fallBack: 'JD', | ||
| }, | ||
| argTypes: { | ||
| src: { | ||
| control: 'text', | ||
| description: 'Source URL for the avatar image.', | ||
| }, | ||
| fallBack: { | ||
| control: 'text', | ||
| description: | ||
| 'Fallback content displayed when the image is unavailable.', | ||
| }, | ||
| className: { | ||
| control: 'text', | ||
| description: 'Custom CSS classes for the avatar root.', | ||
| }, | ||
| badge: { | ||
| control: 'text', | ||
| description: 'Badge content displayed on the avatar.', | ||
| }, | ||
| badgePosition: { | ||
| control: 'select', | ||
| options: [ | ||
| 'top-left', | ||
| 'top-right', | ||
| 'bottom-left', | ||
| 'bottom-right', | ||
| ], | ||
| description: 'Position of the badge on the avatar.', | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj<typeof Avatar> | ||
|
|
||
| export const Default: Story = { | ||
| render: (args) => ( | ||
| <Avatar {...args}> | ||
| <AvatarImage src={URL_IMAGE} alt="User Avatar" /> | ||
| <AvatarFallback> | ||
| <div className="bg-slate-500" /> | ||
| </AvatarFallback> | ||
| </Avatar> | ||
| ), | ||
| export const Default: StoryObj<AvatarProps> = { | ||
| args: { | ||
| className: '', | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| story: 'Default Avatar with an image and fallback text.', | ||
| }, | ||
| }, | ||
| src: URL_IMAGE, | ||
| fallBack: 'JD', | ||
| }, | ||
| } | ||
|
|
||
| export const WithFallbackOnly: Story = { | ||
| render: (args) => ( | ||
| <Avatar {...args}> | ||
| <AvatarFallback> | ||
| <div className="bg-slate-500" /> | ||
| </AvatarFallback> | ||
| </Avatar> | ||
| ), | ||
| export const NoImage: StoryObj<AvatarProps> = { | ||
| args: { | ||
| className: '', | ||
| src: '', | ||
| fallBack: 'NA', | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| story: 'Avatar displaying only fallback text.', | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| export const CustomSize: StoryObj<AvatarProps> = { | ||
| args: { | ||
| src: URL_IMAGE, | ||
| fallBack: 'CS', | ||
| className: 'h-[100px] w-[100px]', | ||
| }, | ||
| } | ||
|
|
||
| export const CustomSize: Story = { | ||
| render: (args) => ( | ||
| <Avatar {...args}> | ||
| <AvatarImage src={URL_IMAGE} alt="User Avatar" /> | ||
| <AvatarFallback>loading..</AvatarFallback> | ||
| </Avatar> | ||
| ), | ||
| export const NoBadge: StoryObj<AvatarProps> = { | ||
| args: { | ||
| className: 'h-16 w-16', | ||
| src: URL_IMAGE, | ||
| fallBack: 'JD', | ||
| badge: undefined, | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| story: 'Avatar with a custom size.', | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| export const CustomBadge: StoryObj<AvatarProps> = { | ||
| args: { | ||
| src: URL_IMAGE, | ||
| fallBack: 'JD', | ||
| badge: ( | ||
| <span className="bg-red-500 text-white px-1 rounded" /> | ||
| ), | ||
| badgePosition: 'bottom-right', | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,6 +9,7 @@ export default defineConfig({ | |
| }, | ||
| }, | ||
| plugins: [react()], | ||
|
|
||
| test: { | ||
| globals: true, | ||
| environment: 'jsdom', | ||
|
|
||