From fa401ece570be10c3025c44750c5eaa8cee9e495 Mon Sep 17 00:00:00 2001 From: Syneva Runyan Date: Sun, 19 Nov 2017 17:25:13 -0500 Subject: [PATCH 1/4] fixed unit test warnings --- addons/info/src/components/Story.js | 2 ++ addons/info/src/components/markdown/text.js | 7 ++++++- addons/info/src/index.js | 1 + addons/info/src/index.test.js | 15 ++++++++------- app/react/src/server/babel_config.test.js | 1 + lib/ui/src/modules/ui/components/layout/index.js | 2 +- 6 files changed, 19 insertions(+), 9 deletions(-) diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index bda0263d4bd5..72e525f1dbed 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -108,6 +108,7 @@ export default class Story extends React.Component { open: false, stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))), }; + this.marksy = marksy(this.props.marksyConf); } @@ -231,6 +232,7 @@ export default class Story extends React.Component { padding = matches[0].length; } const source = lines.map(s => s.slice(padding)).join('\n'); + return
{this.marksy(source).tree}
; } diff --git a/addons/info/src/components/markdown/text.js b/addons/info/src/components/markdown/text.js index 221f760b382b..ff409aedb3c5 100644 --- a/addons/info/src/components/markdown/text.js +++ b/addons/info/src/components/markdown/text.js @@ -10,7 +10,12 @@ export function P(props) { ...baseFonts, fontSize: '15px', }; - return

{props.children}

; + + // P is oftentimes used as a parent element of + // and 
 elements, which is why 

+  // is used as the outputted element when parsing
+  // marksy content rather than 
.
+  return 
{props.children}
;
 }
 
 P.defaultProps = defaultProps;
diff --git a/addons/info/src/index.js b/addons/info/src/index.js
index f4a645bf8ec8..7beada54b3e4 100644
--- a/addons/info/src/index.js
+++ b/addons/info/src/index.js
@@ -60,6 +60,7 @@ function addInfo(storyFn, context, infoOptions) {
     maxPropsIntoLine: options.maxPropsIntoLine,
     maxPropStringLength: options.maxPropStringLength,
   };
+
   return {storyFn(context)};
 }
 
diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js
index b1e237cf4f6f..ab737b0714b2 100644
--- a/addons/info/src/index.test.js
+++ b/addons/info/src/index.test.js
@@ -4,10 +4,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import AddonInfo, { withInfo, setDefaults } from './';
 
-/* eslint-disable */
-const TestComponent = ({ func, obj, array, number, string, bool, empty }) =>
+const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
   

-    
{func}

+    
{func.toString()}

     
{obj.toString()}

     
{array}

     
{number}

@@ -20,8 +19,8 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) =>
       
  • 1
    • 
       
  • 2
    • 
     
-  
    ;
-/* eslint-enable */
+  
    
+);
 
 const testContext = { kind: 'addon_info', story: 'jest_test' };
 const testOptions = { propTables: false };
@@ -43,11 +42,13 @@ describe('addon Info', () => {
   const api = {
     add: (name, fn) => fn(testContext),
   };
+
   it('should render  and markdown', () => {
     const Info = withInfo(
-      '# Test story \n## with markdown info \ncontaing **bold**, *cursive* text and `code`'
+      '# Test story \n## with markdown info \ncontaing **bold**, *cursive* text, `code` and [a link](https://github.com)'
     )(story);
-    ReactDOM.render(, document.createElement('div'));
+
+    const ex = ReactDOM.render(, document.createElement('div'));
   });
   it('should render with text options', () => {
     const Info = withInfo({ text: 'some text here' })(story);
diff --git a/app/react/src/server/babel_config.test.js b/app/react/src/server/babel_config.test.js
index ba991adcd4e7..d0985fa17f21 100644
--- a/app/react/src/server/babel_config.test.js
+++ b/app/react/src/server/babel_config.test.js
@@ -15,6 +15,7 @@ describe('babel_config', () => {
   // As the 'fs' is going to be mocked, let's call require.resolve
   // so the require.cache has the correct route to the file.
   // In fact let's use it in the tests :)
+
   const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
 
   it('should return the config with the extra plugins when `plugins` is an array.', () => {
diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js
index 6746dd6ee375..632618d0e1cd 100755
--- a/lib/ui/src/modules/ui/components/layout/index.js
+++ b/lib/ui/src/modules/ui/components/layout/index.js
@@ -76,7 +76,7 @@ const fullScreenPreviewStyle = {
   margin: 0,
   padding: 0,
   overflow: 'auto',
-  webkitOverflowScrolling: 'touch',
+  WebkitOverflowScrolling: 'touch',
 };
 
 const defaultSizes = {

From 688b57d1805e37319858a9e4fd67f959e8b06436 Mon Sep 17 00:00:00 2001
From: Syneva Runyan 
Date: Sun, 19 Nov 2017 18:22:46 -0500
Subject: [PATCH 2/4] mocked console.info for unit test execution

---
 scripts/jest.init.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/scripts/jest.init.js b/scripts/jest.init.js
index e9f263b0e132..8dd65b72a54d 100644
--- a/scripts/jest.init.js
+++ b/scripts/jest.init.js
@@ -4,4 +4,7 @@ import 'jest-enzyme/lib/index';
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
+// mock console.info calls for cleaner test execution
+global.console.info = jest.fn().mockImplementation(() => {})
+
 configure({ adapter: new Adapter() });

From 48fe2475d4f2e41c8da4c0651409eb267d896b21 Mon Sep 17 00:00:00 2001
From: Syneva Runyan 
Date: Sun, 19 Nov 2017 18:28:22 -0500
Subject: [PATCH 3/4] self code review

---
 addons/info/src/components/Story.js         | 2 --
 addons/info/src/components/markdown/text.js | 2 +-
 addons/info/src/index.js                    | 1 -
 addons/info/src/index.test.js               | 7 ++++---
 app/react/src/server/babel_config.test.js   | 1 -
 5 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index 72e525f1dbed..bda0263d4bd5 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -108,7 +108,6 @@ export default class Story extends React.Component {
       open: false,
       stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))),
     };
-
     this.marksy = marksy(this.props.marksyConf);
   }
 
@@ -232,7 +231,6 @@ export default class Story extends React.Component {
       padding = matches[0].length;
     }
     const source = lines.map(s => s.slice(padding)).join('\n');
-
     return 
    {this.marksy(source).tree}
    ;
   }
 
diff --git a/addons/info/src/components/markdown/text.js b/addons/info/src/components/markdown/text.js
index ff409aedb3c5..864984717694 100644
--- a/addons/info/src/components/markdown/text.js
+++ b/addons/info/src/components/markdown/text.js
@@ -11,7 +11,7 @@ export function P(props) {
     fontSize: '15px',
   };
 
-  // P is oftentimes used as a parent element of
+  // 
     is oftentimes used as a parent element of
   //  and 
     elements, which is why 
    
   // is used as the outputted element when parsing
   // marksy content rather than 
    .
diff --git a/addons/info/src/index.js b/addons/info/src/index.js
index 7beada54b3e4..f4a645bf8ec8 100644
--- a/addons/info/src/index.js
+++ b/addons/info/src/index.js
@@ -60,7 +60,6 @@ function addInfo(storyFn, context, infoOptions) {
     maxPropsIntoLine: options.maxPropsIntoLine,
     maxPropStringLength: options.maxPropStringLength,
   };
-
   return {storyFn(context)};
 }
 
diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js
index ab737b0714b2..9b91027d5398 100644
--- a/addons/info/src/index.test.js
+++ b/addons/info/src/index.test.js
@@ -4,6 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import AddonInfo, { withInfo, setDefaults } from './';
 
+/* eslint-disable */
 const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
   
    
     
    {func.toString()}
    
@@ -19,8 +20,8 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
       
  • 1
    • 
       
  • 2
    • 
     
-  
    
-);
+  
    );
+/* eslint-enable */
 
 const testContext = { kind: 'addon_info', story: 'jest_test' };
 const testOptions = { propTables: false };
@@ -48,7 +49,7 @@ describe('addon Info', () => {
       '# Test story \n## with markdown info \ncontaing **bold**, *cursive* text, `code` and [a link](https://github.com)'
     )(story);
 
-    const ex = ReactDOM.render(, document.createElement('div'));
+    ReactDOM.render(, document.createElement('div'));
   });
   it('should render with text options', () => {
     const Info = withInfo({ text: 'some text here' })(story);
diff --git a/app/react/src/server/babel_config.test.js b/app/react/src/server/babel_config.test.js
index d0985fa17f21..ba991adcd4e7 100644
--- a/app/react/src/server/babel_config.test.js
+++ b/app/react/src/server/babel_config.test.js
@@ -15,7 +15,6 @@ describe('babel_config', () => {
   // As the 'fs' is going to be mocked, let's call require.resolve
   // so the require.cache has the correct route to the file.
   // In fact let's use it in the tests :)
-
   const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
 
   it('should return the config with the extra plugins when `plugins` is an array.', () => {

From f7a5106288a1652c53db7ff150c56e26d4655c95 Mon Sep 17 00:00:00 2001
From: Syneva Runyan 
Date: Sun, 19 Nov 2017 21:29:58 -0500
Subject: [PATCH 4/4] updated storyshots snapshot

---
 .../src/__snapshots__/storyshots.test.js.snap | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
index 4b9d5dd48368..950ae0406fcb 100644
--- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
+++ b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
@@ -193,7 +193,7 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
             }
           }
         >
-          
    
             Info could be used as a global or local decorator as well.
-          
    
+          
         
         
    
           
    
-          
    
             Allow Duplicate DisplayNames for HOC #1814
-          
    
+          
    
         
         
    
           
    
             You can use markdown in your withInfo() description.
           
    
-          
    
             Sometimes you might want to manually include some code examples:
-          
    
+          
    
           
                 
           
    
-          
    
              to your project as well.
-          
    
+          
         
         
    
           
    
-          
    
             The Info Addon header should be hidden
-          
    
+          
    
         
         
    
           
    
-        
    
           Component should be inlined between description and PropType table
-        
    
+        
    
       
       
    
         
    
-          
    
             There should be a prop table added for a component not included in the story
-          
    
+          
    
         
         
    
           
    
-          
    
             This can exclude extraneous components from being displayed in prop tables.
-          
    
+          
    
         
         
    
           
    
-          
    
             The Info Addon source section should be hidden
-          
    
+          
    
         
         
    
           
    
-          
    
             Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
-          
    
+          
    
         
         
    
           
    
-          
    
             Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
-          
    
+          
    
         
         
    
           
    
-          
    
             Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading
-          
    
+          
    
         
         
    
           
    
-          
    
             see Notes panel for composition info
-          
    
+          
    
         
         
    
           
    
-          
    
              with its new painless API.
-          
    
+          
    
         
         
    
           
    
-          
    
              with its painful API.
-          
    
+