Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue 2196 fix unittest warnings #2343

Merged
merged 5 commits into from
Nov 21, 2017
Merged

Issue 2196 fix unittest warnings #2343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fa401ec
fixed unit test warnings
Nov 19, 2017
9d1a629
Merge branch 'master' of https://github.com/syneva-runyan/storybook i…
Nov 19, 2017
688b57d
mocked console.info for unit test execution
Nov 19, 2017
48fe247
self code review
Nov 19, 2017
f7a5106
updated storyshots snapshot
Nov 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion addons/info/src/components/markdown/text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,12 @@ export function P(props) {
...baseFonts,
fontSize: '15px',
};
return <p style={style}>{props.children}</p>;

// <P> is oftentimes used as a parent element of
// <a> and <pre> elements, which is why <div>
// is used as the outputted element when parsing
// marksy content rather than <p>.
return <div style={style}>{props.children}</div>;
}

P.defaultProps = defaultProps;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should change the component name too? Looks like it's now called P, but renders a DIV.

Thanks to the comment we do know why though 👍 .

Copy link
Contributor Author

@syneva-runyan syneva-runyan Nov 20, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it would make sense to change it, but in that case, do we go ahead and distinguish when the component is used as a wrapper and when it's just used as <p> tag? Or if not, what do we rename this to?

Expand Down
10 changes: 6 additions & 4 deletions addons/info/src/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ 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 }) => (
<div>
<h1>{func}</h1>
<h1>{func.toString()}</h1>
<h2>{obj.toString()}</h2>
<h3>{array}</h3>
<h4>{number}</h4>
Expand All @@ -20,7 +20,7 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) =>
<li>1</li>
<li>2</li>
</ui>
</div>;
</div>);
/* eslint-enable */

const testContext = { kind: 'addon_info', story: 'jest_test' };
Expand All @@ -43,10 +43,12 @@ describe('addon Info', () => {
const api = {
add: (name, fn) => fn(testContext),
};

it('should render <Info /> 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(<Info />, document.createElement('div'));
});
it('should render with text options', () => {
Expand Down
60 changes: 30 additions & 30 deletions examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -204,7 +204,7 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
}
>
Info could be used as a global or local decorator as well.
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -590,7 +590,7 @@ exports[`Storyshots Addon Info.GitHub issues #1814 1`] = `
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -601,7 +601,7 @@ exports[`Storyshots Addon Info.GitHub issues #1814 1`] = `
}
>
Allow Duplicate DisplayNames for HOC #1814
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -946,7 +946,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
>
You can use markdown in your withInfo() description.
</h4>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -957,7 +957,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
}
>
Sometimes you might want to manually include some code examples:
</p>
</div>
<pre>
<code
className="hljs js"
Expand All @@ -968,7 +968,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
}
/>
</pre>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -992,7 +992,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
link
</a>
to your project as well.
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -1374,7 +1374,7 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -1385,7 +1385,7 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
}
>
The Info Addon header should be hidden
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -1730,7 +1730,7 @@ exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`]
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -1741,7 +1741,7 @@ exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`]
}
>
Component should be inlined between description and PropType table
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -2127,7 +2127,7 @@ exports[`Storyshots Addon Info.Options.propTables Shows additional component pro
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -2138,7 +2138,7 @@ exports[`Storyshots Addon Info.Options.propTables Shows additional component pro
}
>
There should be a prop table added for a component not included in the story
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -2623,7 +2623,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -2634,7 +2634,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
}
>
This can exclude extraneous components from being displayed in prop tables.
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -3130,7 +3130,7 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -3141,7 +3141,7 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
}
>
The Info Addon source section should be hidden
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -3821,7 +3821,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -3832,7 +3832,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
}
>
Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -4195,7 +4195,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -4206,7 +4206,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
}
>
Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -4668,7 +4668,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -4679,7 +4679,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
}
>
Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -5319,7 +5319,7 @@ exports[`Storyshots Button addons composition 1`] = `
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -5330,7 +5330,7 @@ exports[`Storyshots Button addons composition 1`] = `
}
>
see Notes panel for composition info
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -5731,7 +5731,7 @@ exports[`Storyshots Button with new info 1`] = `
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -5755,7 +5755,7 @@ exports[`Storyshots Button with new info 1`] = `
info addon
</a>
with its new painless API.
</p>
</div>
</div>
<div>
<h1
Expand Down Expand Up @@ -6303,7 +6303,7 @@ exports[`Storyshots Button with some info 1`] = `
}
}
>
<p
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
Expand All @@ -6327,7 +6327,7 @@ exports[`Storyshots Button with some info 1`] = `
info addon
</a>
with its painful API.
</p>
</div>
</div>
<div>
<h1
Expand Down
2 changes: 1 addition & 1 deletion lib/ui/src/modules/ui/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const fullScreenPreviewStyle = {
margin: 0,
padding: 0,
overflow: 'auto',
webkitOverflowScrolling: 'touch',
WebkitOverflowScrolling: 'touch',
};

const defaultSizes = {
Expand Down
3 changes: 3 additions & 0 deletions scripts/jest.init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() });