@leafygreen-ui/gallery-indicator v2.0.0

Gallery Indicator

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/gallery-indicator

NPM

npm install @leafygreen-ui/gallery-indicator

Example

import { GalleryIndicator } from `@leafygreen-ui/gallery-indicator`;

<GalleryIndicator
  length={4}
  activeIndex={0}
  darkMode
/>

Properties

Test Harnesses

getTestUtils()

getTestUtils() is a util that allows consumers to reliably interact with LG GalleryIndicator in a product test suite. If the GalleryIndicator component cannot be found, an error will be thrown.

Usage

import { getTestUtils } from '@leafygreen-ui/gallery-indicator';

const utils = getTestUtils(lgId?: string); // lgId refers to the custom `data-lgid` attribute passed to `GalleryIndicator`. It defaults to 'lg-gallery_indicator' if left empty.

Single GalleryIndicator component

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { GalleryIndicator, getTestUtils } from '@leafygreen-ui/gallery-indicator';

...

test('Gallery Indicator', () => {
  render(
    <GalleryIndicator
      length={4}
      activeIndex={0}
      darkMode
    />
  );

  const { getIndicatorlength, getActiveIndex } = getTestUtils();

  expect(getIndicatorlength()).toBe(4);
  expect(getActiveIndex()).toBe(0);
});

Multiple GalleryIndicator components

When testing multiple GalleryIndicator components, it is recommended to add the custom data-lgid attribute to each GalleryIndicator.

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { GalleryIndicator, getTestUtils } from '@leafygreen-ui/gallery-indicator';

...

test('GalleryIndicator', () => {
  render(
    <>
      <GalleryIndicator
        length={4}
        activeIndex={0}
        darkMode
        data-lgid="gallery-indicator-abc"
      />
      <GalleryIndicator
        length={5}
        activeIndex={1}
        darkMode
        data-lgid="gallery-indicator-xyz"
      />
    </>
  );

  const testUtils1 = getTestUtils('gallery-indicator-abc');
  const testUtils2 = getTestUtils('gallery-indicator-xy');

  // First GalleryIndicator
  expect(testUtils1.getIndicatorlength()).toBe(4);
  expect(testUtils1.getActiveIndex()).toBe(1);

  // Second GalleryIndicator
  expect(testUtils2.getIndicatorlength()).toBe(5);
  expect(testUtils2.getActiveIndex()).toBe(0);
});

Test Utils

const { getIndicatorlength, getActiveIndex } = getTestUtils();