Skip to content

Commit

Permalink
test: aspectRatio 테스트 코드 수정 (#598)
Browse files Browse the repository at this point in the history
* fix: type error

* fix: aspectRatio 테스트 코드 수정
  • Loading branch information
ssi02014 authored Nov 20, 2024
1 parent f7d9f93 commit 1714dba
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 42 deletions.
47 changes: 6 additions & 41 deletions packages/react/src/components/AspectRatio/AspectRatio.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,16 @@ import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { AspectRatio } from '.';

describe('AspectRatio component', () => {
it('기본적으로 div 태그를 부모 요소로 두고 자식 요소를 렌더링하며, div 태그에 aspect-ratio 설정이 적용되어야 합니다.', () => {
describe('AspectRatio', () => {
it('자식 요소에 aspect-ratio 설정이 적용되어야 합니다.', () => {
render(
<AspectRatio ratio={16 / 9} role="wrapper">
<p>Content</p>
<AspectRatio ratio={16 / 9}>
<p role="paragraph">Content</p>
</AspectRatio>
);

const wrapper = screen.getByRole('wrapper');
const paragraph = screen.getByRole('paragraph');

expect(wrapper).toHaveStyle(
'padding-top: calc(100% * (1 / 1.7777777777777777))'
);
expect(wrapper.tagName).toBe('DIV');
});

it('asChild 속성이 true라면 aspect-ratio 설정이 자식 요소에 적용됩니다.', () => {
const { container } = render(
<AspectRatio ratio={16 / 9} asChild>
<section role="wrapper">Content</section>
</AspectRatio>
);

const divWrapper = container.querySelector('div');

expect(divWrapper).not.toBeInTheDocument();

const wrapper = screen.getByRole('wrapper');

expect(wrapper).toHaveStyle(
'padding-top: calc(100% * (1 / 1.7777777777777777))'
);
expect(wrapper.tagName).toBe('SECTION');
});

it('하나 이상의 하위 요소가 있을 때 오류를 발생시켜야 합니다.', () => {
const renderComponent = () => {
render(
<AspectRatio ratio={4 / 3}>
<div>Child 1</div>
<div>Child 2</div>
</AspectRatio>
);
};

expect(renderComponent).toThrow();
expect(paragraph).toHaveStyle('aspect-ratio: 1.7777777777777777');
});
});
2 changes: 1 addition & 1 deletion packages/react/src/components/AspectRatio/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import classNames from 'classnames';
import styles from './AspectRatio.module.css';
import { Slot } from '../Slot';
import { CSSProperties, Children, PropsWithChildren, useMemo } from 'react';
import { CSSProperties, Children, useMemo } from 'react';

interface AspectRatioProps {
children: JSX.Element;
Expand Down

0 comments on commit 1714dba

Please sign in to comment.