test('should render invalid state', () => {
const snapshot = felaSnapshot(
<FormFieldError field={{ invalid: true }} validations={{}} />
);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render with status', () => {
const snapshot = felaSnapshot(
<CardSection status="error">CardSection</CardSection>
);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render with a label', () => {
const snapshot = felaSnapshot(
<ModalClose label="label" onClick={() => {}} />
);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render active', () => {
const snapshot = felaSnapshot(
<Context active="tab">
<TabsPanel id="tab">TabsPanel</TabsPanel>
</Context>
);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render invalid state with validation errors', () => {
const snapshot = felaSnapshot(
<FormFieldError
field={{ invalid: true }}
validations={{ required: 'This is required' }}
/>
);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render pagination', () => {
const snapshot = felaSnapshot(
<PaginationBuilder
onPageChange={() => {}}
totalCount={100}
page={1}
perPage={20}
/>
);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render', () => {
const snapshot = felaSnapshot(
<RadioGroup
value="option1"
onChange={() => {}}
options={[
{ label: 'Option 1', name: 'group-option-1', value: 'option1' },
{ label: 'Option 2', name: 'group-option-2', value: 'option2' }
]}
/>
);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('createComponentStyles creates a component', () => {
const Foo = ({ styles }) => (
<div className={styles.class1}><i className={styles.class2} /></div>
);
const FelaComponent = createComponentStyles(
{
class1: () => ({
padding: '5px'
}),
class2: () => ({
margin: '2px'
})
},
Foo
);
const snapshot = felaSnapshot(<FelaComponent />);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render pagination with an infoFormatter', () => {
let called = false;
const snapshot = felaSnapshot(
<PaginationBuilder
onPageChange={() => {}}
totalCount={100}
page={2}
perPage={20}
infoFormatter={(start, end, totalItems) => {
expect(start).toBe(21);
expect(end).toBe(40);
expect(totalItems).toBe(100);
called = true;
}}
/>
);
expect(called).toBeTruthy();
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render all props as styles', () => {
const snapshot = felaSnapshot(
<Box
borderWidth={1}
borderStyle="solid"
borderColor="black"
margin="1rem"
padding="1rem"
display="inline-block"
position="relative"
top={1}
bottom={1}
minWidth={100}
width={100}
minHeight={100}
height={100}
>
Box
</Box>
);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render', () => {
const snapshot = felaSnapshot(<CardContent>CardContent</CardContent>);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render', () => {
const snapshot = felaSnapshot(<FormFooter>FormFooter</FormFooter>);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('createComponent creates empty component', () => {
const FelaComponent = createComponent(() => {});
const snapshot = felaSnapshot(<FelaComponent />);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});
test('should render', () => {
const snapshot = felaSnapshot(<Code>Hello</Code>);
expect(snapshot.component).toMatchSnapshot();
expect(snapshot.styles).toMatchSnapshot();
});