Skip to content
Permalink
Browse files

feat(list): created the list component

  • Loading branch information
SiTaggart committed Dec 14, 2019
1 parent bacac70 commit bd6db2e7de6a72fda8d42455f12623ca51440e27
@@ -0,0 +1,233 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ListItem should filter out styling props 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.875rem;
line-height: 1.5rem;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
margin-bottom: 0.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
font-weight: 400;
color: #282a2b;
}

<div
className="emotion-1"
>
<li
className="emotion-0"
fontSize="fontSize30"
fontWeight="fontWeightNormal"
>
Children
</li>
</div>
`;

exports[`ListItem should render a plain list item 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.875rem;
line-height: 1.5rem;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
margin-bottom: 0.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
font-weight: 400;
color: #282a2b;
}

<div
className="emotion-1"
>
<li
className="emotion-0"
fontSize="fontSize30"
fontWeight="fontWeightNormal"
>
Children
</li>
</div>
`;

exports[`Ordered List should filter out styling props 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.875rem;
line-height: 1.5rem;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
margin-bottom: 1.5rem;
margin-left: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
font-weight: 400;
color: #282a2b;
}

<div
className="emotion-1"
>
<ol
className="emotion-0"
fontSize="fontSize30"
fontWeight="fontWeightNormal"
>
Children
</ol>
</div>
`;

exports[`Ordered List should render a plain ordered list wrapper 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.875rem;
line-height: 1.5rem;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
margin-bottom: 1.5rem;
margin-left: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
font-weight: 400;
color: #282a2b;
}

<div
className="emotion-1"
>
<ol
className="emotion-0"
fontSize="fontSize30"
fontWeight="fontWeightNormal"
>
Children
</ol>
</div>
`;

exports[`Unordered List should filter out styling props 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.875rem;
line-height: 1.5rem;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
margin-bottom: 1.5rem;
margin-left: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
font-weight: 400;
color: #282a2b;
}

<div
className="emotion-1"
>
<ul
className="emotion-0"
fontSize="fontSize30"
fontWeight="fontWeightNormal"
>
Children
</ul>
</div>
`;

exports[`Unordered List should render a plain unordered list wrapper 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.875rem;
line-height: 1.5rem;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
margin: 0;
padding: 0;
margin-bottom: 1.5rem;
margin-left: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
font-weight: 400;
color: #282a2b;
}

<div
className="emotion-1"
>
<ul
className="emotion-0"
fontSize="fontSize30"
fontWeight="fontWeightNormal"
>
Children
</ul>
</div>
`;
@@ -0,0 +1,122 @@
import * as React from 'react';
import renderer from 'react-test-renderer';
import {Theme} from '@twilio-paste/theme';
import {ReactWrapper, mount} from 'enzyme';
import {OrderedList, UnorderedList, ListItem} from '../src';

describe('Ordered List', () => {
it('should render a plain ordered list wrapper', () => {
const tree = renderer
.create(
<Theme.Provider theme="console">
<OrderedList>Children</OrderedList>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('should filter out styling props', () => {
const tree = renderer
.create(
<Theme.Provider theme="console">
<OrderedList margin="space40">Children</OrderedList>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('should allow aria attributes', () => {
const wrapper: ReactWrapper = mount(<OrderedList aria-expanded="true">Children</OrderedList>);
expect(wrapper.exists('ol[aria-expanded="true"]')).toEqual(true);
});

it('should allow data attributes', () => {
const wrapper: ReactWrapper = mount(<OrderedList data-test="test-hook">Children</OrderedList>);
expect(wrapper.exists('ol[data-test="test-hook"]')).toEqual(true);
});

it('should allow HTML attributes', () => {
const wrapper: ReactWrapper = mount(<OrderedList title="random title">Children</OrderedList>);
expect(wrapper.exists('ol[title="random title"]')).toEqual(true);
});
});

describe('Unordered List', () => {
it('should render a plain unordered list wrapper', () => {
const tree = renderer
.create(
<Theme.Provider theme="console">
<UnorderedList>Children</UnorderedList>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('should filter out styling props', () => {
const tree = renderer
.create(
<Theme.Provider theme="console">
<UnorderedList textColor="textColorSuccess">Children</UnorderedList>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('should allow aria attributes', () => {
const wrapper: ReactWrapper = mount(<UnorderedList aria-label="label">Children</UnorderedList>);
expect(wrapper.exists('ul[aria-label="label"]')).toEqual(true);
});

it('should allow data attributes', () => {
const wrapper: ReactWrapper = mount(<UnorderedList data-rando="test-hook">Children</UnorderedList>);
expect(wrapper.exists('ul[data-rando="test-hook"]')).toEqual(true);
});

it('should allow HTML attributes', () => {
const wrapper: ReactWrapper = mount(<UnorderedList title="random title">Children</UnorderedList>);
expect(wrapper.exists('ul[title="random title"]')).toEqual(true);
});
});

describe('ListItem', () => {
it('should render a plain list item', () => {
const tree = renderer
.create(
<Theme.Provider theme="console">
<ListItem>Children</ListItem>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('should filter out styling props', () => {
const tree = renderer
.create(
<Theme.Provider theme="console">
<ListItem padding="textColorSuccess">Children</ListItem>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('should allow aria attributes', () => {
const wrapper: ReactWrapper = mount(<ListItem aria-pressed="true">Children</ListItem>);
expect(wrapper.exists('li[aria-pressed="true"]')).toEqual(true);
});

it('should allow data attributes', () => {
const wrapper: ReactWrapper = mount(<ListItem data-rando="test-hook">Children</ListItem>);
expect(wrapper.exists('li[data-rando="test-hook"]')).toEqual(true);
});

it('should allow HTML attributes', () => {
const wrapper: ReactWrapper = mount(<ListItem title="random title">Children</ListItem>);
expect(wrapper.exists('li[title="random title"]')).toEqual(true);
});
});

0 comments on commit bd6db2e

Please sign in to comment.
You can’t perform that action at this time.