From 76482ec8d796b9951b514864c7f6473a77afbc82 Mon Sep 17 00:00:00 2001
From: Priscila <priscilawebdev@gmail.com>
Date: Wed, 31 Oct 2018 05:54:26 +0100
Subject: [PATCH] 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   | 18 ++++++++++++++++++
 src/webui/components/PackageDetail/index.js    |  4 ++--
 src/webui/components/Readme/index.js           | 14 ++++++--------
 src/webui/components/Readme/readme.scss        |  6 ------
 src/webui/components/Readme/types.js           |  8 ++++++++
 test/e2e/e2e.spec.js                           |  1 -
 .../__snapshots__/readme.spec.js.snap          |  2 ++
 test/unit/webui/components/readme.spec.js      | 15 +++++----------
 8 files changed, 41 insertions(+), 27 deletions(-)
 create mode 100644 flow-typed/npm/github-markdown-css_vx.x.x.js
 delete mode 100644 src/webui/components/Readme/readme.scss
 create mode 100644 src/webui/components/Readme/types.js

diff --git a/flow-typed/npm/github-markdown-css_vx.x.x.js b/flow-typed/npm/github-markdown-css_vx.x.x.js
new file mode 100644
index 000000000..7de321934
--- /dev/null
+++ b/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;
+}
diff --git a/src/webui/components/PackageDetail/index.js b/src/webui/components/PackageDetail/index.js
index 4458dc011..b371df008 100644
--- a/src/webui/components/PackageDetail/index.js
+++ b/src/webui/components/PackageDetail/index.js
@@ -6,8 +6,8 @@ import Readme from '../Readme';
 
 import classes from './packageDetail.scss';
 
-const displayState = (readMe) => {
-  return !isNil(readMe) ? <Readme readMe={readMe} /> : '';
+const displayState = (description) => {
+  return !isNil(description) ? <Readme description={description} /> : '';
 };
 
 const PackageDetail = ({packageName, readMe}) => {
diff --git a/src/webui/components/Readme/index.js b/src/webui/components/Readme/index.js
index d9e68c920..5365fe6e8 100644
--- a/src/webui/components/Readme/index.js
+++ b/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) => {
-  return <div className="markdown-body" dangerouslySetInnerHTML={{__html: props.readMe}}/>;
-};
+import { IProps } from './types';
 
-Readme.propTypes = {
-  readMe: PropTypes.string.isRequired
-};
+const Readme = ({ description }: IProps) => <div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />;
 
 export default Readme;
diff --git a/src/webui/components/Readme/readme.scss b/src/webui/components/Readme/readme.scss
deleted file mode 100644
index 9c6b1d541..000000000
--- a/src/webui/components/Readme/readme.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../styles/mixins';
-
-.searchBox {
-  @include searchBox;
-}
-
diff --git a/src/webui/components/Readme/types.js b/src/webui/components/Readme/types.js
new file mode 100644
index 000000000..fb275f044
--- /dev/null
+++ b/src/webui/components/Readme/types.js
@@ -0,0 +1,8 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {
+  description: string;
+}
diff --git a/test/e2e/e2e.spec.js b/test/e2e/e2e.spec.js
index 43d1d482c..201f364d4 100644
--- a/test/e2e/e2e.spec.js
+++ b/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');
   });
 
diff --git a/test/unit/webui/components/__snapshots__/readme.spec.js.snap b/test/unit/webui/components/__snapshots__/readme.spec.js.snap
index 5ad638277..81d7529d1 100644
--- a/test/unit/webui/components/__snapshots__/readme.spec.js.snap
+++ b/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>"`;
diff --git a/test/unit/webui/components/readme.spec.js b/test/unit/webui/components/readme.spec.js
index c5f7de576..68e85c725 100644
--- a/test/unit/webui/components/readme.spec.js
+++ b/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', () => {
-    shallow(<Readme />);
-    expect(console.error).toBeCalled();
+  it('should load the component in default state', () => {
+    const wrapper = mount(<Readme description='test' />);
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it('should dangerously set html', () => {
-    const props = {
-      readMe: '<h1>This is a test string</h1>'
-    };
-    const wrapper = shallow(<Readme {...props} />);
+    const wrapper = shallow(<Readme description='<h1>This is a test string</h1>' />);
     expect(wrapper.html()).toEqual(
       '<div class="markdown-body"><h1>This is a test string</h1></div>'
     );