refactor: added flow type checking (#1099)

fix: added import 'github-markdown-css' stub type

fix: fixed tests

flow-typed/npm/github-markdown-css_vx.x.x.js

@@ -0,0 +1,18 @@
+// flow-typed signature: cda964a8fd1ee8efbd11f88eb4c5c4df
+// flow-typed version: <<STUB>>/github-markdown-css_v2.10.0/flow_v0.81.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'github-markdown-css'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'github-markdown-css' {
+  declare module.exports: any;
+}

src/webui/components/PackageDetail/index.js

@@ -6,8 +6,8 @@ import Readme from '../Readme';
 
 import classes from './packageDetail.scss';
 
-const displayState = (readMe) => {
+const displayState = (description) => {
-  return !isNil(readMe) ? <Readme readMe={readMe} /> : '';
+  return !isNil(description) ? <Readme description={description} /> : '';
 };
 
 const PackageDetail = ({packageName, readMe}) => {

src/webui/components/Readme/index.js

@@ -1,15 +1,13 @@
+/**
+ * @prettier
+ * @flow
+ */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import 'github-markdown-css';
 
-const Readme = (props) => {
+import { IProps } from './types';
-  return <div className="markdown-body" dangerouslySetInnerHTML={{__html: props.readMe}}/>;
-};
 
-Readme.propTypes = {
+const Readme = ({ description }: IProps) => <div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />;
-  readMe: PropTypes.string.isRequired
-};
 
 export default Readme;

src/webui/components/Readme/readme.scss

@@ -1,6 +0,0 @@
-@import '../../styles/mixins';
-
-.searchBox {
-  @include searchBox;
-}
-

src/webui/components/Readme/types.js

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

test/e2e/e2e.spec.js

@@ -136,7 +136,6 @@ describe('/ (Verdaccio Page)', () => {
     await packageItem.click({ clickCount: 1, delay: 200 });
     await page.waitFor(1000);
     const readmeText = await page.evaluate(() => document.querySelector('.markdown-body').textContent);
-
     expect(readmeText).toMatch('test');
   });
 

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

@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Readme /> component should dangerously set html 1`] = `"<div class=\\"markdown-body\\"><h1>This is a test string</h1></div>"`;
+
+exports[`<Readme /> component should load the component in default state 1`] = `"<div class=\\"markdown-body\\">test</div>"`;

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

@@ -3,22 +3,17 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import Readme from '../../../../src/webui/components/Readme/index';
 
-console.error = jest.fn();
-
 describe('<Readme /> component', () => {
-  it('should give error for the required fields', () => {
+  it('should load the component in default state', () => {
-    shallow(<Readme />);
+    const wrapper = mount(<Readme description='test' />);
-    expect(console.error).toBeCalled();
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it('should dangerously set html', () => {
-    const props = {
+    const wrapper = shallow(<Readme description='<h1>This is a test string</h1>' />);
-      readMe: '<h1>This is a test string</h1>'
-    };
-    const wrapper = shallow(<Readme {...props} />);
     expect(wrapper.html()).toEqual(
       '<div class="markdown-body"><h1>This is a test string</h1></div>'
     );