Fix all broken tests

[Kornil]

Fixes #23

PR Checklist

• My branch is up-to-date with the Upstream master branch.
• The unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Short description of what this resolves:

• In the first commit of this PR, I updated the failing snapshots on the assumption that code changes are correct (since they were already on master) and the snapshots not updated.
• The second commit fixes the 4 broken tests in stories/Tooltip/Tooltip.stories.js. Reactstrap UncontrolledTooltip tries to queries the body, since we don't have one being in a test environment, I simulated having it with the correct ids.
  This fixes the test while not changing the stories. Storybook still behaves as it should, using the rendered elements to display tooltips.
  see Tooltip cannot find ID of a React element rendered next to it reactstrap/reactstrap#773 (comment) for the issue.
• The third commit is just snapshots being updated
• The fourth commit same fix for stories/Avatar/AvatarLinkWithTooltip.js
• The fifth commit same fix but for stories/Templates/servizi/Servizi.js

Open to feedback.

• Nel primo commit ho aggiornato gli snapshot assumendo che il codice è corretto (dato che è in master) mentre gli snapshot no.
• Il secondo commit fixa 4 test in stories/Tooltip/Tooltip.stories.js. Reactstrap UncontrolledTooltip cerca gli id su body e non trovandoli manda in errore prima di poter vedere gli elementi corretti. Come fix ho simulato gli id su div invisibili su document, questo fixa i test senza cambiare niente su storybook. Tutti i tooltip continuano a funzionare sugli elementi specificati inizialmente.
  Tooltip cannot find ID of a React element rendered next to it reactstrap/reactstrap#773 (comment) per il problema.
• Il terzo commit semplice update di snapshot
• Il quarto stesso fix su stories/Avatar/AvatarLinkWithTooltip.js
• Il quinto stesso fix ma su stories/Templates/servizi/Servizi.js

Fatemi sapere.

[dej611]

Thanks @Kornil for the submission! 🎉

I will have a look at it and comment here in case of any change request!

[Kornil]

Thank you for the feedback @dej611, and sorry for the late reply, I'm having a busy week.
While I agree with your comments, there is an issue between testing reactstrap elements and storyshots not using the dom as storybook does.

I might be able to use this to make it look a bit better but it will look very similar.

Let me know your opinion.

[dej611]

I see.
Then either using the alternative approach, or leave some comments on those lines to explain the issue and point to the issue at storybook. Better with a TODO thing to refactor later.

[Kornil]

I could not find a way to use createNodeMock to fix these tests so I opted for a clear TODO comment explaining the issue and the nature of the fix.

To reduce codebase pollution, I moved all the fixes to the respective .stories files. This way the components themselves stay clean and do not interact with the application in unexpected ways. It restores the purity the components had before so we can deploy safely.

@dej611 let me know what you think. While exploring I found a few more issues to address around testing but I will open new PRs so this one stays scoped to only fix the broken tests.

[dej611]

I checked out your last commits, while they are much better in a code prospective, they pose an issue with the Storybook tool.

For instance, take this Storybook component:

const AvatarLinkWithTooltipFix = () => {
  // TODO find a better way to handle this
  // Storyshot does not use the dom so can't render refs
  // to fix the problem we append the elements manually
  // this fixes tests without touching the rendered components
  // nor storybook
  // https://github.com/storybookjs/storybook/issues/886
  // https://github.com/infinitered/addon-storyshots#using-createnodemock-to-mock-refs
  ids.map((id, i) => {
    const div = document.createElement('div')
    div.setAttribute('id', id)
    document.body.appendChild(div)
  })

  return <AvatarLinkWithTooltip />
}

While this looks much better as the original source code is untouched, in the Storybook info panel this is the actual source code that will be shown :(

May I propose to rollback the last 3 commits and add the comments on the stories themselves? I know its a step back from before but at least we can give users some directions about the specific context and to ignore those lines for their development.

[Kornil]

Thank you for the feedback, I reverted the last 3 commits and added the comments where I placed the fix originally.

[dej611]

Good job @Kornil 👍