Skip to content

Commit

Permalink
fixup! test(Image): test for Image added
Browse files Browse the repository at this point in the history
  • Loading branch information
@niktverd
niktverd committed Sep 16, 2023
1 parent ece8b8f commit a2656f5
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 50 deletions.
9 changes: 7 additions & 2 deletions src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@ import {render, screen} from '@testing-library/react';
import {testCustomClassName, testCustomStyle} from '../../../../test-utils/shared/common';
import {testSourceProps} from '../../../../test-utils/shared/image';
import {BackgroundImageProps} from '../../../models';
import {getQaAttrubutes} from '../../../utils';
import BackgroundImage from '../BackgroundImage';

const qa = 'background-image-component';

const imageSrc =
'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png';

const qaAttributes = getQaAttrubutes(qa, 'image-display-source');

describe('BackgroundImage', () => {
test('Render BackgroundImage by default', async () => {
render(<BackgroundImage qa={qa} />);
Expand All @@ -24,14 +27,16 @@ describe('BackgroundImage', () => {
test('add image as src prop', () => {
testSourceProps<BackgroundImageProps>({
component: BackgroundImage,
props: {src: imageSrc, qa: qaId},
props: {src: imageSrc, qa},
options: {qaId: qaAttributes.imageDisplaySource},
});
});

test('add image as desktop prop', () => {
testSourceProps<BackgroundImageProps>({
component: BackgroundImage,
props: {desktop: imageSrc, qa: qaId},
props: {desktop: imageSrc, qa},
options: {qaId: qaAttributes.imageDisplaySource},
});
});

Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/__tests__/Button.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe('Button', () => {
test('call onClick', async () => {
testOnClick<ButtonProps>({
component: Button,
props: {text: buttonProps.text, qa: qaId},
props: {text: buttonProps.text, qa},
});
});

Expand Down
22 changes: 14 additions & 8 deletions src/components/Image/Image.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,10 @@ const DeviceSpecificFragment = ({
srcSet={checkWebP(src)}
type="image/webp"
media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`}
data-qa={`${qa}-${breakpoint}`}
data-qa={`${qa}-compressed`}
/>
)}
<source
srcSet={src}
media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`}
data-qa={`${qa}-${breakpoint}`}
/>
<source srcSet={src} media={`(max-width: ${BREAKPOINTS[breakpoint]}px)`} data-qa={qa} />
</Fragment>
);

Expand Down Expand Up @@ -90,10 +86,20 @@ const Image = (props: ImageProps) => {
return (
<picture className={containerClassName} data-qa={qa}>
{mobile && (
<DeviceSpecificFragment src={mobile} disableWebp={disableWebp} breakpoint="sm" />
<DeviceSpecificFragment
src={mobile}
disableWebp={disableWebp}
breakpoint="sm"
qa={qaAttributes.mobileSource}
/>
)}
{tablet && (
<DeviceSpecificFragment src={tablet} disableWebp={disableWebp} breakpoint="md" />
<DeviceSpecificFragment
src={tablet}
disableWebp={disableWebp}
breakpoint="md"
qa={qaAttributes.tabletSource}
/>
)}
{src && !disableWebp && (
<source
Expand Down
58 changes: 34 additions & 24 deletions test-utils/shared/common.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,49 @@ import {ERROR_INPUT_DATA_MESSAGE} from '../constants';
type CommonTestArgs<T> = {
component: ElementType;
props: T & QAProps;
options?: {qaId?: string; customClassNameProp?: string};
options?: {qaId?: string; customClassNameProp?: string; role?: string};
};

const validateInputProps = <T,>(props: CommonTestArgs<T>['props']) => {
if (!props.qa) {
throw new Error(ERROR_INPUT_DATA_MESSAGE);
}
};

const getComponent = <T,>({props, options}: Omit<CommonTestArgs<T>, 'component'>) => {
if (!props.qa) {
throw new Error(ERROR_INPUT_DATA_MESSAGE);
}

return options?.role
? screen.getByRole(options.role)
: screen.getByTestId(options?.qaId || props.qa);
};
import {QA} from './types';

export const testCustomClassName = <T,>({
component: Component,
props,
options,
}: CommonTestArgs<T>) => {
if (!props.qa) {
throw new Error(ERROR_INPUT_DATA_MESSAGE);
}
validateInputProps(props);

const className = 'custom-class-name';
render(<Component {...props} className={className} />);
const anchor = screen.getByTestId(options?.qaId || props.qa);
expect(anchor).toHaveClass(className);
const classNameProps = {
[options?.customClassNameProp || 'className']: className,
};
render(<Component {...props} {...classNameProps} />);
const component = getComponent({props, options});

expect(component).toHaveClass(className);
};

export const testCustomStyle = <T,>({component: Component, props, options}: CommonTestArgs<T>) => {
if (!props.qa) {
throw new Error(ERROR_INPUT_DATA_MESSAGE);
}
validateInputProps(props);

const style = {color: 'red'};

render(<Component {...props} style={style} />);
const component = screen.getByTestId(options?.qaId || props.qa);
const component = getComponent({props, options});

expect(component).toHaveStyle(style);
};
Expand All @@ -45,13 +60,12 @@ export const testAnimated = async <T,>({
props,
options,
}: CommonTestArgs<T>) => {
if (!options?.qaId) {
throw new Error(ERROR_INPUT_DATA_MESSAGE);
}
validateInputProps(props);

const user = userEvent.setup();
render(<Component animated {...props} />);
const component = screen.getByTestId(options?.qaId);
const component = getComponent({props, options});

await user.hover(component);

expect(component).toHaveClass('animate');
Expand All @@ -61,18 +75,14 @@ export const testOnClick = async <T,>({
component: Component,
props,
options,
}: {
component: ElementType;
props: T & QAProps;
options?: {
role?: string;
};
}) => {
}: CommonTestArgs<T>) => {
validateInputProps(props);

const user = userEvent.setup();
const handleOnClick = jest.fn();
render(<Component {...props} onClick={handleOnClick} />);

const component = options?.role ? screen.getByRole('button') : screen.getByTestId(props.qa);
const component = getComponent({props, options});

await user.click(component);
expect(handleOnClick).toHaveBeenCalledTimes(1);
Expand Down
54 changes: 39 additions & 15 deletions test-utils/shared/image.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,43 @@
import {render, screen} from '@testing-library/react';
import React, {ElementType} from 'react';

import {getQaAttrubutes} from '../../src';
import {QAProps} from '../../src/models';
import {isCompressible} from '../../src/utils/imageCompress';

import {QA} from './types';
import {ERROR_INPUT_DATA_MESSAGE} from '../constants';

export const testSourceProps = <T,>({
component: Component,
props,
options,
}: {
component: ElementType;
props: T &
QA & {
QAProps & {
src?: string;
tablet?: string;
desktop?: string;
mobile?: string;
disableCompress?: boolean;
};
options?: {
qaId?: string;
};
}) => {
const src = props.src || props.desktop;
if (!src) {
throw new Error(ERROR_INPUT_DATA_MESSAGE);
}
const qaId = options?.qaId;

const qaAttributes = getQaAttrubutes(
props.qa,
'mobile-source-compressed',
'mobile-source',
'tablet-source-compressed',
'tablet-source',
'display-source',
);

const disableWebp = src && (props.disableCompress || !isCompressible(src));

Expand All @@ -29,35 +47,41 @@ export const testSourceProps = <T,>({
expect(component).toHaveAttribute('src', src);

if (disableWebp) {
const sourceWebP = screen.queryByRole('image-webp-default');
const sourceWebP = screen.queryByTestId(qaId || qaAttributes.displaySource);
expect(sourceWebP).not.toBeInTheDocument();
} else {
const sourceWebP = screen.getByRole('image-webp-default');
const sourceWebP = screen.getByTestId(qaId || qaAttributes.displaySource);
expect(sourceWebP).toHaveAttribute('srcset', src + '.webp');
}

if (props.tablet) {
const source = screen.getByRole('image-source-md');
expect(source).toHaveAttribute('srcset', props.tablet);

if (disableWebp) {
const sourceWebP = screen.queryByRole('image-webp-source-md');
const source = screen.getAllByTestId(qaId || qaAttributes.tabletSource);
const sourceWebP = screen.queryByTestId(qaId || qaAttributes.tabletSourceCompressed);

expect(source[0]).toHaveAttribute('srcset', props.tablet);
expect(sourceWebP).not.toBeInTheDocument();
} else {
const sourceWebP = screen.getByRole('image-webp-source-md');
const source = screen.getAllByTestId(qaId || qaAttributes.tabletSource);
const sourceWebP = screen.getByTestId(qaId || qaAttributes.tabletSourceCompressed);

expect(source[0]).toHaveAttribute('srcset', props.tablet);
expect(sourceWebP).toHaveAttribute('srcset', props.tablet + '.webp');
}
}

if (props.mobile) {
const source = screen.getByRole('image-source-sm');
expect(source).toHaveAttribute('srcset', props.mobile);

if (disableWebp) {
const sourceWebP = screen.queryByRole('image-webp-source-sm');
const source = screen.getAllByTestId(qaId || qaAttributes.mobileSource);
const sourceWebP = screen.queryByTestId(qaId || qaAttributes.mobileSourceCompressed);

expect(source[0]).toHaveAttribute('srcset', props.mobile);
expect(sourceWebP).not.toBeInTheDocument();
} else {
const sourceWebP = screen.getByRole('image-webp-source-sm');
const source = screen.getAllByTestId(qaId || qaAttributes.mobileSource);
const sourceWebP = screen.getByTestId(qaId || qaAttributes.mobileSourceCompressed);

expect(source[0]).toHaveAttribute('srcset', props.mobile);
expect(sourceWebP).toHaveAttribute('srcset', props.mobile + '.webp');
}
}
Expand Down

0 comments on commit a2656f5

Please sign in to comment.