summaryrefslogtreecommitdiffstats
path: root/src/components/molecules/images/responsive-image.test.tsx
blob: 5452d28717937c786f15ee21bbc79bd867939f03 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { render, screen } from '@test-utils';
import ResponsiveImage from './responsive-image';

describe('ResponsiveImage', () => {
  it('renders a responsive image', () => {
    render(
      <ResponsiveImage
        src="http://placeimg.com/640/480"
        alt="An alternative text"
        width={640}
        height={480}
      />
    );
    expect(
      screen.getByRole('img', { name: 'An alternative text' })
    ).toBeInTheDocument();
  });
});
pan> %reset-list; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); max-width: 100%; margin: var(--spacing-sm) 0; @for $i from 0 to 6 { &--#{$i}-columns { @include mix.media("screen") { @include mix.dimensions("xs") { grid-template-columns: repeat(2, minmax(0, 1fr)); } @include mix.dimensions("sm") { grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); } } } } } .item { > figure { margin: 0; } }