Investigate possible flaky webapp tests

[harshilsharma63]

Summary:
Two webapp tests seem to be flaky-

1) Create and delete board / card
       Can create a table view:
     AssertionError: Timed out retrying after 4000ms: Expected to find element: `.ViewHeader .Editable[title='Table view']`, but never found it.
      at Context.eval (http://localhost:8088/__cypress/tests?p=cypress/integration/createBoard.js:163:59)

  2) Create and delete board / card
       Can rename the table view:
     AssertionError: Timed out retrying after 4000ms: Expected to find element: `.ViewHeader .Editable[title='Table view']`, but never found it.
      at Context.eval (http://localhost:8088/__cypress/tests?p=cypress/integration/createBoard.js:170:8)

More details of the failed CI run can be found here -https://github.com/mattermost/focalboard/runs/2952731939?check_suite_focus=true#step:12:139

We need to verify the behaviour and fix the tests.

[jespino]

@harshilsharma63 is this still relevant¿?

[jespino]

@harshilsharma63 I guess we can close this, right?

[Pinjasaur]

I've noticed flaky tests too where re-running the Cypress test suite will fix it. Most recent time I've noticed this: https://github.com/mattermost/focalboard/runs/6557638969?check_suite_focus=true#step:14:1838

[kamre]

Hi @Pinjasaur, such errors in Cypress test can happen when the element in the DOM was found by Cypress but immediately remounted by React for some reason (change of the key for the sequence for example).

Here is my investigation of the previous flaky behaviour:

I see that the test sometimes fails in CI but I can't reproduce the failure locally even after executing it more than 20 times via the command line npx cypress run --spec "cypress/integration/cardURLProperty.ts"

My guess is that the following happens:

• click to empty input and enter URL
• pressing enter to finish editing and posting request to server
• rerendering of URLProperty component with link and edit/copy buttons (without waiting any updates from the server)
• Cypress finds Edit button
• update from the server via websocket event
• some big subtree of components is rerendering
• for some reason URLProperty is unmounted and mounted again during this process
• Cypress tries to perform click() on the button that was found before and fails because it is no longer attached to DOM

The main question for me is why the component is unmounted after receiving updates from the server.