aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/images/gallery.test.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/images/gallery.test.tsx')
-rw-r--r--src/components/organisms/images/gallery.test.tsx30
1 files changed, 17 insertions, 13 deletions
diff --git a/src/components/organisms/images/gallery.test.tsx b/src/components/organisms/images/gallery.test.tsx
index ea39348..bffc3b2 100644
--- a/src/components/organisms/images/gallery.test.tsx
+++ b/src/components/organisms/images/gallery.test.tsx
@@ -1,6 +1,6 @@
import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { ResponsiveImage } from '../../molecules';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import NextImage from 'next/image';
import { Gallery } from './gallery';
const columns = 3;
@@ -8,7 +8,7 @@ const columns = 3;
const image = {
alt: 'Modi provident omnis',
height: 480,
- src: 'http://placeimg.com/640/480/fashion',
+ src: 'http://picsum.photos/640/480',
width: 640,
};
@@ -16,24 +16,28 @@ describe('Gallery', () => {
it('renders the correct number of items', () => {
render(
<Gallery columns={columns}>
- <ResponsiveImage {...image} />
- <ResponsiveImage {...image} />
- <ResponsiveImage {...image} />
- <ResponsiveImage {...image} />
+ <NextImage {...image} />
+ <NextImage {...image} />
+ <NextImage {...image} />
+ <NextImage {...image} />
</Gallery>
);
- expect(screen.getAllByRole('listitem')).toHaveLength(4);
+
+ // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+ expect(rtlScreen.getAllByRole('listitem')).toHaveLength(4);
});
it('renders the right number of columns', () => {
render(
<Gallery columns={columns}>
- <ResponsiveImage {...image} />
- <ResponsiveImage {...image} />
- <ResponsiveImage {...image} />
- <ResponsiveImage {...image} />
+ <NextImage {...image} />
+ <NextImage {...image} />
+ <NextImage {...image} />
+ <NextImage {...image} />
</Gallery>
);
- expect(screen.getByRole('list')).toHaveClass(`wrapper--${columns}-columns`);
+ expect(rtlScreen.getByRole('list')).toHaveClass(
+ `wrapper--${columns}-columns`
+ );
});
});