Skip to content

Commit

Permalink
Fix tooltip tests
Browse files Browse the repository at this point in the history
- reactstrap UncontrolledTooltip searches the document object for ids at first render, by adding invisible divs with the required ids th tests will pass and on render the tooltips will be correctly applied to the tests' correct buttons reactstrap/reactstrap#773 (comment)
- Update snaps
  • Loading branch information
Kornil committed Jan 21, 2020
1 parent 8851688 commit c22721b
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 63 deletions.
108 changes: 108 additions & 0 deletions src/__snapshots__/StoryshotsImages.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -26160,6 +26160,114 @@ exports[`Image Storyshots Componenti/Tab Tab a bottoni 1`] = `
</div>
`;

exports[`Image Storyshots Componenti/Tooltip Esempi interattivi 1`] = `
<div
style={
Object {
"boxSizing": "border-box",
"margin": "0",
"padding": "48px 32px",
"position": "relative",
"textAlign": "initial",
}
}
>
<div
style={
Object {
"position": "relative",
"zIndex": 0,
}
}
>
<div
style={
Object {
"padding": 200,
}
}
/>
</div>
<button
className="info__show-button"
onClick={[Function]}
style={
Object {
"background": "#027ac5",
"border": "none",
"borderRadius": "0 0 0 5px",
"color": "#fff",
"cursor": "pointer",
"display": "block",
"fontFamily": "sans-serif",
"fontSize": "12px",
"padding": "5px 15px",
"position": "fixed",
"right": 0,
"top": 0,
}
}
type="button"
>
Show Info
</button>
</div>
`;

exports[`Image Storyshots Componenti/Tooltip Posizioni 1`] = `
<div
style={
Object {
"boxSizing": "border-box",
"margin": "0",
"padding": "48px 32px",
"position": "relative",
"textAlign": "initial",
}
}
>
<div
style={
Object {
"position": "relative",
"zIndex": 0,
}
}
>
<div
style={
Object {
"padding": 100,
}
}
/>
</div>
<button
className="info__show-button"
onClick={[Function]}
style={
Object {
"background": "#027ac5",
"border": "none",
"borderRadius": "0 0 0 5px",
"color": "#fff",
"cursor": "pointer",
"display": "block",
"fontFamily": "sans-serif",
"fontSize": "12px",
"padding": "5px 15px",
"position": "fixed",
"right": 0,
"top": 0,
}
}
type="button"
>
Show Info
</button>
</div>
`;

exports[`Image Storyshots Introduzione/Introduzione Benvenuto 1`] = `
<div
style={
Expand Down
20 changes: 17 additions & 3 deletions stories/Tooltip/Tooltip.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ import EsempiInterattivi from './docs/EsempiInterattivi.md'
const EsempiComponent = () => {
const ids = ['Example1', 'Example2', 'Example3']

ids.map((id, i) => {
const div = document.createElement('div')
div.setAttribute('id', id)
document.body.appendChild(div)
})

return (
<div className="bd-example tooltip-demo">
<p className="muted">
Expand Down Expand Up @@ -68,6 +74,12 @@ const EsempiComponent = () => {
const PosizioniComponent = () => {
const ids = ['example1', 'example2', 'example3', 'example4', 'example5']

ids.map((id, i) => {
const div = document.createElement('div')
div.setAttribute('id', id)
document.body.appendChild(div)
})

return (
<div style={{ padding: 100 }}>
<Button id={ids[0]} className="m-3">
Expand Down Expand Up @@ -107,7 +119,9 @@ const PosizioniComponent = () => {

const EsempiInterattiviComponent = () => {
const id = 'example'
const target = () => document.getElementById(id)
const div = document.createElement('div')
div.setAttribute('id', id)
document.body.appendChild(div)

const placements = ['top', 'bottom', 'left', 'right']
const placement = select('Posizione', placements, placements[0])
Expand All @@ -119,7 +133,7 @@ const EsempiInterattiviComponent = () => {
Tooltip
</Button>

<UncontrolledTooltip placement={placement} target={target}>
<UncontrolledTooltip placement={placement} target={id}>
{body}
</UncontrolledTooltip>
</div>
Expand All @@ -128,6 +142,7 @@ const EsempiInterattiviComponent = () => {

storiesOf('Componenti/Tooltip', module)
.addDecorator(withA11y)
.addDecorator(withKnobs)
.add(
'Esempi',
withInfo({
Expand All @@ -140,7 +155,6 @@ storiesOf('Componenti/Tooltip', module)
text: Posizioni
})(PosizioniComponent)
)
.addDecorator(withKnobs)
.add(
'Esempi interattivi',
withInfo({
Expand Down
129 changes: 69 additions & 60 deletions stories/Tooltip/__snapshots__/Tooltip.stories.storyshot
Original file line number Diff line number Diff line change
@@ -1,100 +1,109 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots Componenti/Tooltip Esempi 1`] = `
exports[`Storyshots Componenti/Tooltip Esempi interattivi 1`] = `
<div
style={
Object {
"padding": "10px",
"boxSizing": "border-box",
"margin": "0",
"padding": "48px 32px",
"position": "relative",
"textAlign": "initial",
}
}
>
<div
style={
Object {
"backgroundColor": "#ffffff",
"border": "1px dashed #e5e5e5",
"boxSizing": "border-box",
"margin": "16px 0 16px 0",
"padding": "50px 35px",
"position": "relative",
"textAlign": "initial",
"transition": "background-color 0.2s",
"zIndex": 0,
}
}
/>
<div
className="markdown-body"
dangerouslySetInnerHTML={
Object {
"__html": "Esempi.md",
>
<div
style={
Object {
"padding": 200,
}
}
}
/>
</div>
`;

exports[`Storyshots Componenti/Tooltip Esempi interattivi 1`] = `
<div
style={
Object {
"padding": "10px",
}
}
>
<div
/>
</div>
<button
className="info__show-button"
onClick={[Function]}
style={
Object {
"backgroundColor": "#ffffff",
"border": "1px dashed #e5e5e5",
"boxSizing": "border-box",
"margin": "16px 0 16px 0",
"padding": "50px 35px",
"position": "relative",
"textAlign": "initial",
"transition": "background-color 0.2s",
"background": "#027ac5",
"border": "none",
"borderRadius": "0 0 0 5px",
"color": "#fff",
"cursor": "pointer",
"display": "block",
"fontFamily": "sans-serif",
"fontSize": "12px",
"padding": "5px 15px",
"position": "fixed",
"right": 0,
"top": 0,
}
}
/>
<div
className="markdown-body"
dangerouslySetInnerHTML={
Object {
"__html": "EsempiInterattivi.md",
}
}
/>
type="button"
>
Show Info
</button>
</div>
`;

exports[`Storyshots Componenti/Tooltip Posizioni 1`] = `
<div
style={
Object {
"padding": "10px",
"boxSizing": "border-box",
"margin": "0",
"padding": "48px 32px",
"position": "relative",
"textAlign": "initial",
}
}
>
<div
style={
Object {
"backgroundColor": "#ffffff",
"border": "1px dashed #e5e5e5",
"boxSizing": "border-box",
"margin": "16px 0 16px 0",
"padding": "50px 35px",
"position": "relative",
"textAlign": "initial",
"transition": "background-color 0.2s",
"zIndex": 0,
}
}
/>
<div
className="markdown-body"
dangerouslySetInnerHTML={
>
<div
style={
Object {
"padding": 100,
}
}
/>
</div>
<button
className="info__show-button"
onClick={[Function]}
style={
Object {
"__html": "Posizioni.md",
"background": "#027ac5",
"border": "none",
"borderRadius": "0 0 0 5px",
"color": "#fff",
"cursor": "pointer",
"display": "block",
"fontFamily": "sans-serif",
"fontSize": "12px",
"padding": "5px 15px",
"position": "fixed",
"right": 0,
"top": 0,
}
}
/>
type="button"
>
Show Info
</button>
</div>
`;

0 comments on commit c22721b

Please sign in to comment.