56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
/**
|
|
* @jest-environment jsdom
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import '@testing-library/jest-dom/extend-expect';
|
|
import Avatar, { avatarFailback } from '../../src/components/Avatar';
|
|
|
|
describe('Avatar', () => {
|
|
it('shoule render without error', async () => {
|
|
render(<Avatar src="./1.jpg" />);
|
|
const $img = await screen.findByRole('img');
|
|
expect($img).toBeInTheDocument();
|
|
});
|
|
|
|
it('should call props handler function when fire event', async () => {
|
|
const handleClick = jest.fn();
|
|
const handleMouseEnter = jest.fn();
|
|
const handleMouseLeave = jest.fn();
|
|
render(
|
|
<Avatar
|
|
src="./1.jpg"
|
|
onClick={handleClick}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
/>,
|
|
);
|
|
const $img = await screen.findByRole('img');
|
|
fireEvent.click($img);
|
|
expect(handleClick).toBeCalled();
|
|
fireEvent.mouseEnter($img);
|
|
expect(handleMouseEnter).toBeCalled();
|
|
fireEvent.mouseLeave($img);
|
|
expect(handleMouseLeave).toBeCalled();
|
|
});
|
|
|
|
it('shoule use failback avatar when fetch error', async () => {
|
|
const src = 'origin.jpg';
|
|
render(<Avatar src={src} />);
|
|
const $img = (await screen.findByRole('img')) as HTMLImageElement;
|
|
expect($img.src).toEqual(expect.stringContaining(src));
|
|
fireEvent.error($img);
|
|
expect($img.src).toEqual(expect.stringContaining(avatarFailback));
|
|
fireEvent.error($img);
|
|
fireEvent.error($img);
|
|
});
|
|
|
|
it('shoule not add CDN query params', async () => {
|
|
const src = 'data:base64/png;xxx';
|
|
render(<Avatar src={src} />);
|
|
const $img = (await screen.findByRole('img')) as HTMLImageElement;
|
|
expect($img.src).not.toEqual(expect.stringContaining('x-oss-process='));
|
|
});
|
|
});
|