Skip to content

Commit

Permalink
chore(accordion): add tests (#2995)
Browse files Browse the repository at this point in the history
  • Loading branch information
@engai @brandonferrua
engai authored and brandonferrua committed Jan 9, 2018
1 parent f2e953d commit 507a510
Show file tree
Hide file tree
Showing 9 changed files with 577 additions and 2 deletions.
47 changes: 47 additions & 0 deletions ui/components/accordion/__tests__/__snapshots__/renders_a_base_accordion.json
View file

Large diffs are not rendered by default.

74 changes: 74 additions & 0 deletions ui/components/accordion/__tests__/__snapshots__/renders_a_nested_accordion.json
View file

Large diffs are not rendered by default.

48 changes: 48 additions & 0 deletions ui/components/accordion/__tests__/__snapshots__/renders_a_styled_accordion.json
View file

Large diffs are not rendered by default.

47 changes: 47 additions & 0 deletions ...s/accordion/__tests__/__snapshots__/renders_an_accordion_with_multiple_sections_open.json
View file

Large diffs are not rendered by default.

47 changes: 47 additions & 0 deletions ...ponents/accordion/__tests__/__snapshots__/renders_an_accordion_with_section_one_open.json
View file

Large diffs are not rendered by default.

47 changes: 47 additions & 0 deletions ...nents/accordion/__tests__/__snapshots__/renders_an_accordion_with_section_three_open.json
View file

Large diffs are not rendered by default.

47 changes: 47 additions & 0 deletions ...ponents/accordion/__tests__/__snapshots__/renders_an_accordion_with_section_two_open.json
View file

Large diffs are not rendered by default.

218 changes: 218 additions & 0 deletions ui/components/accordion/__tests__/index.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
/* eslint-env jest */
import React from 'react';
import { Accordion, AccordionSection } from '../base/example';
import createHelpers from '../../../../jest.setup';

const referenceId01 = 'accordion-details-01';
const referenceId02 = 'accordion-details-02';
const referenceId03 = 'accordion-details-03';
const referenceId04 = 'accordion-details-04';
const referenceId05 = 'accordion-details-05';

const { matchesMarkupAndStyle } = createHelpers(__dirname);

it('renders a base accordion', () =>
matchesMarkupAndStyle(
<Accordion>
<AccordionSection
summary="Accordion summary"
isOpen
referenceId={referenceId01}
>
Accordion details - A
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId02}
>
Accordion details - B
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId03}
>
Accordion details - C
</AccordionSection>
</Accordion>
));

it('renders an accordion with section one open', () =>
matchesMarkupAndStyle(
<Accordion>
<AccordionSection
summary="Accordion summary"
isOpen
referenceId={referenceId01}
>
Accordion details - A
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId02}
>
Accordion details - B
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId03}
>
Accordion details - C
</AccordionSection>
</Accordion>
));

it('renders an accordion with section two open', () =>
matchesMarkupAndStyle(
<Accordion>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId01}
>
Accordion details - A
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen
referenceId={referenceId02}
>
Accordion details - B
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId03}
>
Accordion details - C
</AccordionSection>
</Accordion>
));

it('renders an accordion with section three open', () =>
matchesMarkupAndStyle(
<Accordion>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId01}
>
Accordion details - A
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId02}
>
Accordion details - B
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen
referenceId={referenceId03}
>
Accordion details - C
</AccordionSection>
</Accordion>
));

it('renders an accordion with multiple sections open', () =>
matchesMarkupAndStyle(
<Accordion>
<AccordionSection
summary="Accordion summary"
isOpen
referenceId={referenceId01}
>
Accordion details - A
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId02}
>
Accordion details - B
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen
referenceId={referenceId03}
>
Accordion details - C
</AccordionSection>
</Accordion>
));

it('renders a styled accordion', () =>
matchesMarkupAndStyle(
<div className="slds-card">
<Accordion>
<AccordionSection
summary="Accordion summary"
isOpen
referenceId={referenceId01}
>
Accordion details - A
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId02}
>
Accordion details - B
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId03}
>
Accordion details - C
</AccordionSection>
</Accordion>
</div>
));

it('renders a nested accordion', () =>
matchesMarkupAndStyle(
<Accordion>
<AccordionSection
summary="Accordion summary"
isOpen
referenceId={referenceId01}
>
<Accordion>
<AccordionSection
summary="Nested accordion summary"
isOpen
referenceId={referenceId04}
>
Accordion details - A
</AccordionSection>
<AccordionSection
summary="Nested accordion summary"
isOpen={false}
referenceId={referenceId05}
>
Accordion details - B
</AccordionSection>
</Accordion>
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId02}
>
Accordion details - B
</AccordionSection>
<AccordionSection
summary="Accordion summary"
isOpen={false}
referenceId={referenceId03}
>
Accordion details - C
</AccordionSection>
</Accordion>
));
4 changes: 2 additions & 2 deletions ui/components/accordion/base/example.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ const referenceId03 = 'accordion-details-03';
const referenceId04 = 'accordion-details-04';
const referenceId05 = 'accordion-details-05';

let Accordion = props => (
export let Accordion = props => (
<ul className={classNames('slds-accordion', props.className)}>
{props.children}
</ul>
);

let AccordionSection = props => (
export let AccordionSection = props => (
<li className="slds-accordion__list-item">
<section
className={classNames(
Expand Down

0 comments on commit 507a510

Please sign in to comment.