test: test PersonChip displays image or placeholder
This commit is contained in:
@ -1,6 +1,6 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import personPlaceholder from './placeholder.png';
|
import PersonPlaceholder from './person-placeholder.png';
|
||||||
|
|
||||||
type OwnProps = {
|
type OwnProps = {
|
||||||
name: string;
|
name: string;
|
||||||
@ -29,12 +29,11 @@ const StyledContainer = styled.span`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
function PersonChip({ name, picture }: OwnProps) {
|
function PersonChip({ name, picture }: OwnProps) {
|
||||||
console.log(picture ? picture.toString() : personPlaceholder);
|
|
||||||
return (
|
return (
|
||||||
<StyledContainer data-testid="person-chip">
|
<StyledContainer data-testid="person-chip">
|
||||||
<img
|
<img
|
||||||
data-testid="person-chip-image"
|
data-testid="person-chip-image"
|
||||||
src={picture ? picture.toString() : personPlaceholder.toString()}
|
src={picture ? picture.toString() : PersonPlaceholder.toString()}
|
||||||
alt="person-picture"
|
alt="person-picture"
|
||||||
/>
|
/>
|
||||||
{name}
|
{name}
|
||||||
|
|||||||
24
front/src/components/chips/__stories__/PersonChip.tsx
Normal file
24
front/src/components/chips/__stories__/PersonChip.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { ThemeProvider } from '@emotion/react';
|
||||||
|
import { lightTheme } from '../../../layout/styles/themes';
|
||||||
|
import PersonChip from '../PersonChip';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'PersonChip',
|
||||||
|
component: PersonChip,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const RegularPersonChip = () => {
|
||||||
|
return (
|
||||||
|
<ThemeProvider theme={lightTheme}>
|
||||||
|
<PersonChip name="selected-company-1" />
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const RegularPersonChipWithImage = () => {
|
||||||
|
return (
|
||||||
|
<ThemeProvider theme={lightTheme}>
|
||||||
|
<PersonChip name="selected-company-1" picture="coucou.fr" />
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
22
front/src/components/chips/__tests__/PersonChip.test.tsx
Normal file
22
front/src/components/chips/__tests__/PersonChip.test.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { render } from '@testing-library/react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
RegularPersonChip,
|
||||||
|
RegularPersonChipWithImage,
|
||||||
|
} from '../__stories__/PersonChip';
|
||||||
|
|
||||||
|
it('Checks the PersonChip renders', () => {
|
||||||
|
const { getByText, getByTestId } = render(<RegularPersonChip />);
|
||||||
|
|
||||||
|
expect(getByText('selected-company-1')).toBeDefined();
|
||||||
|
expect(getByTestId('person-chip-image')).toHaveAttribute(
|
||||||
|
'src',
|
||||||
|
'person-placeholder.png',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Checks the PersonChip img renders', () => {
|
||||||
|
const { getByTestId } = render(<RegularPersonChipWithImage />);
|
||||||
|
|
||||||
|
expect(getByTestId('person-chip-image')).toHaveAttribute('src', 'coucou.fr');
|
||||||
|
});
|
||||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Reference in New Issue
Block a user