Skip to content

Files

Latest commit

 

History

History

gallery-indicator

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 

README.md

Gallery Indicator

npm (scoped)

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

Prop Type Description Default
length number The total number of dots to render
activeIndex number The index of the active dot
darkMode boolean Determines if the component will render in dark mode false

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();
Util Description Returns
getIndicatorlength() Returns the number of indicators/dots number
getActiveIndex() Returns the active indicator index number