docs: Add example for external UI library

Author: afontcu

package.json

@@ -62,6 +62,7 @@
     "apollo-client": "^2.6.10",
     "axios": "^0.20.0",
     "dtslint": "^4.0.6",
+    "element-plus": "^1.0.1-beta.7",
     "eslint-plugin-vue": "^7.1.0",
     "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",

src/__tests__/element-plus.js

@@ -0,0 +1,37 @@
+import ElementPlus from 'element-plus'
+import {defineComponent} from 'vue'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import {render, screen, waitFor} from '..'
+
+const Component = defineComponent({
+  template: `
+    <el-popover trigger="hover" content="this is content">
+      <template #reference>
+        <el-button>Hover to activate</el-button>
+      </template>
+    </el-popover>
+  `,
+})
+
+test('Stubs out a component', async () => {
+  render(Component, {
+    global: {
+      plugins: [ElementPlus],
+    },
+  })
+
+  const button = screen.getByText('Hover to activate')
+  const getContent = () => screen.getByText('this is content')
+
+  expect(getContent()).toBeInTheDocument()
+  expect(getContent()).not.toBeVisible()
+
+  userEvent.hover(button)
+
+  await waitFor(() => expect(getContent()).toBeVisible())
+
+  userEvent.unhover(button)
+
+  await waitFor(() => expect(getContent()).not.toBeVisible())
+})