[Canvas] Adds functional test for Canvas custom elements

[poffdeluxe]

Summary

New functional test walks through the custom element life cycle:

1. A custom element is created from the markdown element on the test workpad
2. The custom element is added to (and removed from) the workpad
3. The custom element is edited
4. The custom element is finally deleted

[elasticmachine]

Pinging @elastic/kibana-canvas (Team:Canvas)

[dmlemeshko]

Thank you for adding more tests!
I added some comments about the test design and find/testSubjects usage.

[dmlemeshko]

It is not critical, but nice to wrap element search and interactions into "user-readable" functions. In this case, test scenario is easy to understand and support in the future.

it('deletes custom element when prompted', async () => {
  await PageObjects.canvas.openCustomElementsTab();
  await PageObjects.canvas.checkCustomElementsCount(1);
  await PageObjects.canvas.deleteElementByIndex(0);
  await PageObjects.canvas.checkCustomElementsCount(0);
}

[dmlemeshko]

Hey @poffdeluxe
Your changes look good, I ran tests locally on both Chrome and Firefox.
Add actually KIbana crashes on FF:

test logged error:

       │ debg browser[info] "INFO: 2019-12-16T12:31:45Z\n  Adding connection to http://localhost:5620/elasticsearch\n\n"
       │ERROR browser[error] "Possibly unhandled rejection: {\"data\":null,\"status\":-1,\"config\":{\"method\":\"GET\",\"transformRequest\":[null],\"transformResponse\":[null],\"jsonpCallbackParam\":\"callback\",\"url\":\"/internal/security/me\",\"params\":{},\"headers\":{\"Accept\":\"application/json, text/plain, */*\",\"kbn-version\":\"8.0.0\"}},\"statusText\":\"\",\"xhrStatus\":\"abort\",\"resource\":{}}"
       │ debg Finished login process currentUrl = http://localhost:5620/app/canvas#/workpad/workpad-1705f884-6224-47de-ba49-ca224fe6ec31/page/1
       │ debg ... sleep(501) start
       │ERROR browser[error] (new TypeError("label is undefined", "http://localhost:5620/bundles/commons.bundle.js", 13630))
       │ debg browser[warn] "*** Uncaught error swallowed in dev mode ***\n\n  Check and fix the above error. This will blow up Kibana when run in production mode!"
       │ERROR browser[error] "The above error occurred in the <HeaderUI> component:\n    in HeaderUI (created by InjectIntl(HeaderUI))\n    in InjectIntl(HeaderUI) (created by HeaderWrapper)\n    in div (created by HeaderWrapper)\n    in HeaderWrapper\n    in div\n    in PseudoLocaleWrapper (created by I18nProvider)\n    in IntlProvider (created by I18nProvider)\n    in I18nProvider\n\nConsider adding an error boundary to your tree to customize error handling behavior.\nVisit https://fb.me/react-error-boundaries to learn more about error boundaries."

You can reproduce it by running:

1. node scripts/functional_test_server --config test/functional/config.js
2. node scripts/functional_test_runner --config test/functional/config.firefox.js (in other terminal window)

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: a30e28d

History

• 💚 Build #16277 succeeded d4f5e15
• 💚 Build #15884 succeeded 113b00e
• 💚 Build #15468 succeeded 65f615a
• 💚 Build #15255 succeeded b9a4243
• 💔 Build #15217 failed a8a87fa

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 3cda4a9

History

• 💚 Build #16567 succeeded a30e28d
• 💚 Build #16277 succeeded d4f5e15
• 💚 Build #15884 succeeded 113b00e
• 💚 Build #15468 succeeded 65f615a
• 💚 Build #15255 succeeded b9a4243

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[poffdeluxe]

Spoke with @dmlemeshko briefly over slack but I think for now we're gonna skip the tests on firefox if they're interactive. Something is going on with the firefox functional tests and clicking on the elements in the workpad.