Add integration test cases showing and dismissing of toasts

[SDaniV]

Description

Add integration test cases showing and dismissing of toasts

Closes #110

What change does this PR introduce?

Please select the relevant option(s).

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update (changes to docs/code comments)

What is the proposed approach?

First commit introduces changes that cover toast message in the integrated tests.
Second commit updates formatting in App.tsx file.

Note: if the formatting is unwanted or not well-structured, I can revert that commit.

Checklist:

• The commit message follows our adopted guidelines
• Testing has been done for the change(s) added (for bug fixes/features)
• Relevant comments/docs have been added/updated (for bug fixes/features)

[tjtanjin]

Hey @SDaniV! The integration test cases are failing, are you still working on this issue?

[SDaniV]

Hey @tjtanjin! Unfortunately, I didn't manage to understand the reason for the failure the day when I raised the PR. I will try to get it working today and let you know about the result.

[tjtanjin]

Hey @tjtanjin! Unfortunately, I didn't manage to understand the reason for the failure the day when I raised the PR. I will try to get it working today and let you know about the result.

Hey again! You can actually run the test locally with npm run int:test as well instead of relying on the GitHub pipeline to run. It'll hopefully ease your debugging process.

Hint: params.showToast is async.

[SDaniV]

Thanks for the hint @tjtanjin! I couldn't reproduce it locally at the beginning because I was running the tests with the UI turned on. Once I switched to running in headless mode, I got the same errors as on the CI. The problem was related to the formatting changes I made.
Now Integration Test Run passed but Compatibility Test failed 🤔
Regarding your hint, does it mean I need to change the way of how I test the toast?

[tjtanjin]

Thanks for the hint @tjtanjin! I couldn't reproduce it locally at the beginning because I was running the tests with the UI turned on. Once I switched to running in headless mode, I got the same errors as on the CI. The problem was related to the formatting changes I made. Now Integration Test Run passed but Compatibility Test failed 🤔 Regarding your hint, does it mean I need to change the way of how I test the toast?

Since params.showToast is async, the best practice is to await it. Otherwise the toast may not be present when the integration test case tries to look for it. You may find the documentation here helpful: https://react-chatbotify.com/docs/api/params#showtoast

[SDaniV]

@tjtanjin Thank you for sharing the details 🙇
I spent some time reading a bit more about how Cypress works. Looks like its commands (cy.get or cy.contains) have built-in functionality that waits and retries for 4 seconds (default timeout) if an element is not found. I think it should be enough in our case.
Also, I found the reason why the RC build failed in the previous run. After I updated cypress/fixtures/templates/ChatBotApp.tsx, the checks have passed.
Please, review the changes now 🙏

[tjtanjin]

LGTM, thank you for taking the time!