fela-enzyme

NPM package shipping utilities for working with Fela in the context of enzyme.

Check out the Fela repository for further information. Â

felaShallow

For testing This is the interface to use if you want to use enzyme's shallow function with Fela components. It takes in the same parameters as enzyme's shallow: node and options. It returns an object with keys: wrapper and snapshot. In addition you can pass an optional theme to it, if not specified, it uses the default frontend theme. You can also pass your own createRenderer function to it, otherwise it uses Fela's out of the box createRenderer by default.

It returns:

• wrapper: The root enzyme wrapper returned from enzyme's shallow function.

• snapshot: A function which takes as a parameter an enzyme ShallowWrapper, either the root, returned from the initial call to felaShallow, or from targeting descendants of the root wrapper. If the enzyme wrapper is around a single node, returns an object with keys: component, style. otherwise returns an array where each element in the array is an object with keys: component, style where the snapshot for that element is stored.

  The snapshot function takes an additional parameter includeStyles prop which is by default true, if false then styles are omitted from the captured snapshot. This will make it act like a normal enzyme shallow snapshot capture (i.e. we will not dive into fela components and render them).

• felaDive: A function which takes as a parameter an enzyme ShallowWrapper, either the root, returned from the initial call to felaShallow, or from targeting descendants of the root wrapper. It is meant to be used with an enzymeWrapper which has a single child. If the child is a Fela component or Fela theme provider, then the render tree is diveed until we get to the underlying component and it is returned. If neither of these conditions are met, then the original passed in component is returned.

usage

1import React from 'react';
2import PropTypes from 'prop-types';
3import { felaShallow}  from 'fela-enzyme';
4import { createComponent } from 'react-fela';
5
6const theme = {
7  fontSizes: [10, 12, 14, 16, 20, 24, 32, 48, 64, 80],
8  color: {
9    grass: '#9BCA3E',
10    black: '#000'
11  },
12  fontSize: '15px'
13};
14
15describe('felaShallow', () => {
16  describe('component created with createComponent', () => {
17    it('should return a formatted snapshot object with DOM and styles', () => {
18      const Div = createComponent(() => ({ color: 'black' }));
19      const { wrapper, snapshot } = felaShallow(<Div />, {}, theme);
20      expect(snapshot(wrapper)).toMatchSnapshot();
21      // Object {
22      //   "component": <div
23      //     className="a"
24      //   />,
25      //   "styles": "
26      // .a {
27      //   color: black
28      // }
29      // ",
30      // }
31    });
32
33    it('should return a shallow snapshot without styles(essentially same as enzyme shallow and enzyme-to-json) ', () => {
34      const Div = createComponent(() => ({ color: 'black' }));
35      const { wrapper, snapshot } = felaShallow(<Div />, {}, theme);
36      expect(snapshot(wrapper, false)).toMatchSnapshot();
37      // Object {
38      //   "component": <FelaComponent
39      //     _felaTheme={
40      //       Object {
41      //         "color": Object {
42      //           "black": "#000",
43      //           "grass": "#9BCA3E",
44      //         },
45      //         "fontSize": "15px",
46      //         "fontSizes": Array [
47      //           10,
48      //           12,
49      //           14,
50      //           16,
51      //           20,
52      //           24,
53      //           32,
54      //           48,
55      //           64,
56      //           80,
57      //         ],
58      //       }
59      //     }
60      //   />,
61      // }
62    });
63  });
64
65  describe('nested fela components', () => {
66    const boxRules = ({ size = 10, theme }) => {
67      return {
68        width: size + 'px',
69        height: size + 'px',
70        color: theme.color.grass
71      };
72    };
73    const Box = createComponent(boxRules);
74    const InnerBox = createComponent(boxRules);
75
76    let component;
77    beforeEach(() => {
78      component = (
79        <Box>
80          <InnerBox size={'15'}>text</InnerBox>
81          <InnerBox>text</InnerBox>
82        </Box>
83      );
84    });
85
86    it('should snapshot root level box', () => {
87      const { wrapper, snapshot } = felaShallow(component, {}, theme);
88      expect(snapshot(wrapper)).toMatchSnapshot();
89      // Object {
90      //   "component": <div
91      //     className="a b c"
92      //   >
93      //     <FelaComponent(div)
94      //       size="15"
95      //     >
96      //       text
97      //     </FelaComponent(div)>
98      //     <FelaComponent(div)>
99      //       text
100      //     </FelaComponent(div)>
101      //   </div>,
102      //   "styles": "
103      // .a {
104      //   width: 10px
105      // }
106      //
107      // .b {
108      //   height: 10px
109      // }
110      //
111      // .c {
112      //   color: #9BCA3E
113      // }
114      // ",
115      // }
116    });
117
118    it('should snapshot children boxes', () => {
119      const { wrapper, snapshot } = felaShallow(component, {}, theme);
120      const children = wrapper.find(InnerBox);
121      expect(snapshot(children)).toMatchSnapshot();
122      // Array [
123      //   Object {
124      //     "component": <div
125      //       className="a b c"
126      //     >
127      //       text
128      //     </div>,
129      //     "styles": "
130      // .a {
131      //   width: 15px
132      // }
133      //
134      // .b {
135      //   height: 15px
136      // }
137      //
138      // .c {
139      //   color: #9BCA3E
140      // }
141      // ",
142      //   },
143      //   Object {
144      //     "component": <div
145      //       className="a b c"
146      //     >
147      //       text
148      //     </div>,
149      //     "styles": "
150      // .a {
151      //   width: 10px
152      // }
153      //
154      // .b {
155      //   height: 10px
156      // }
157      //
158      // .c {
159      //   color: #9BCA3E
160      // }
161      // ",
162      //   },
163      // ]
164    });
165
166    it('should snapshot not found objects', () => {
167      const { wrapper, snapshot } = felaShallow(component, {}, theme);
168      const noChild = wrapper.find('foo');
169      expect(snapshot(noChild)).toMatchSnapshot('no child');
170      //Array []
171    });
172  });
173});

felaMount

For testing This is the interface to use if you want to use enzyme's mount function with Fela components. It takes in the same parameters as enzyme's mount: node and options. It returns an object with keys: wrapper and snapshot. In addition you can pass an optional theme to it, if not specified, it uses the default frontend theme. You can also pass your own createRenderer function to it, otherwise it uses Fela's out of the box createRenderer by default.

• wrapper: The root enzyme wrapper returned from enzyme's mount function.
• snapshot: A function which takes as a parameter an enzyme ReactWrapper, the root, returned from the initial call to felaMount. It returns an object with keys: component, style.
• The snapshot function takes an additional parameter includeStyles prop which is by default true, if false then styles are omitted from the captured snapshot. This will make it act like a normal enzyme mount snapshot capture.

usage

1import React from 'react';
2import { felaMount } from 'fela-enzyme';
3import { createComponent } from 'react-fela';
4
5export const boxRules = ({ size = 10, theme }) => {
6  return {
7    width: size + 'px',
8    height: size + 'px',
9    color: theme.color.grass,
10    fontSize: theme.fontSize
11  };
12};
13
14const Box = createComponent(boxRules);
15
16test('should render box', () => {
17  const { wrapper, snapshot } = felaMount(<Box>hello</Box>);
18  //will output to the snapshot file the fully rendered component tree, alongside all styles
19  expect(snapshot(wrapper)).toMatchSnapshot();
20
21  //take a snapshot without styles
22  //will result in an enzyme snapshot without any fela rules being captured in snapshot
23  expect(snapshot(wrapper, false)).toMatchSnapshot('no styles captured');
24});