refactor: added flow and css in js (#1100)

fix: fixed tests

src/webui/components/NoItems/index.js

@@ -1,18 +1,16 @@
+/**
+ * @prettier
+ * @flow
+ */
+
 import React from 'react';
-import PropTypes from 'prop-types';
+import { IProps } from './types';
+import { Wrapper } from './styles';
 
-import classes from './noItems.scss';
-
-const NoItems = (props) => {
-    return (
-      <div className={classes.noItems}>
-        <h2>{props.text}</h2>
-      </div>
-    );
-};
-
-NoItems.propTypes = {
-  text: PropTypes.string.isRequired
-};
+const NoItems = ({ text }: IProps) => (
+  <Wrapper>
+    <h2>{text}</h2>
+  </Wrapper>
+);
 
 export default NoItems;

src/webui/components/NoItems/noItems.scss

@@ -1,3 +0,0 @@
-.noItems {
-  margin: 5em 0;
-}

src/webui/components/NoItems/styles.js

@@ -0,0 +1,12 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+
+export const Wrapper = styled.div`
+  && {
+    margin: 5em 0;
+  }
+`;

src/webui/components/NoItems/types.js

@@ -0,0 +1,8 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {
+  text: string;
+}

test/unit/webui/components/__snapshots__/noitems.spec.js.snap

@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<NoItem /> component should set html from props 1`] = `"<div class=\\"noItems\\"><h2>This is a test string</h2></div>"`;
+exports[`<NoItem /> component should load the component in default state 1`] = `"<div class=\\"css-6ghnff e1ggl3im0\\"><h2></h2></div>"`;
+
+exports[`<NoItem /> component should set html from props 1`] = `"<div class=\\"css-6ghnff e1ggl3im0\\"><h2>This is a test string</h2></div>"`;

test/unit/webui/components/noitems.spec.js

@@ -3,15 +3,15 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import NoItems from '../../../../src/webui/components/NoItems/index';
 
 console.error = jest.fn();
 
 describe('<NoItem /> component', () => {
-  it('should give error for the required fields', () => {
-    shallow(<NoItems />);
-    expect(console.error).toBeCalled();
+  it('should load the component in default state', () => {
+    const wrapper = mount(<NoItems />);
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it('should set html from props', () => {