Rename end-to-end -> disappearance

Author: afontcu

tests/__tests__/components/EndToEnd.vue renamed to tests/__tests__/components/Disappearance.vue

@@ -1,10 +1,8 @@
 <template>
-  <div>
-    <div v-if="loading">Loading...</div>
-    <div v-else data-testid="message">
-      Loaded this message: {{ data.returnedMessage }}
-    </div>
-  </div>
+  <p v-if="loading">Loading...</p>
+  <p v-else data-testid="message">
+    Loaded this message: {{ data.returnedMessage }}
+  </p>
 </template>
 
 <script>
@@ -13,6 +11,7 @@ const fetchAMessage = () =>
     // we are using random timeout here to fireEvent a real-time example
     // of an async operation calling a callback at a non-deterministic time
     const randomTimeout = Math.floor(Math.random() * 100)
+
     setTimeout(() => {
       resolve({ returnedMessage: 'Hello World' })
     }, randomTimeout)

tests/__tests__/disappearance.js

@@ -0,0 +1,28 @@
+import { render, waitForElementToBeRemoved } from '@testing-library/vue'
+import Disappearance from './components/Disappearance'
+import 'jest-dom/extend-expect'
+
+test('it waits for the data to be loaded', async () => {
+  const { getByText, queryByText, queryByTestId } = render(Disappearance)
+
+  // Assert initial state
+  getByText('Loading...')
+  expect(queryByText(/Loaded this message/)).not.toBeInTheDocument()
+
+  // Line reads as follows "Wait until element with test 'Loading...' is gone."
+  await waitForElementToBeRemoved(() => queryByText('Loading...'))
+  // It is equivalent to:
+  //
+  // await wait(() => {
+  //   expect(queryByText('Loading...')).not.toBeInTheDocument()
+  // })
+  //
+  // `wait()` waits until the callback function passes or times out.
+
+  // After 'Loading...' element is gone, we can assert that fetched data is
+  // rendered.
+  expect(queryByTestId('message')).toHaveTextContent(/Hello World/)
+
+  // Read more about async utilities:
+  // https://testing-library.com/docs/dom-testing-library/api-async
+})