docs: update README

README.md

@@ -12,28 +12,42 @@ We've gone to great lengths to adhere to the **Vue3** community styleguides & be
 
 For more information on how to this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo.
 
-# Getting started
-
-```shell script
-yarn install
-yarn dev
-yarn build
-```
-
 # What works?
 
 - [x] [Vite](https://github.com/vitejs/vite)
 - [x] [Composition API](https://composition-api.vuejs.org/)
+- [x] [Suspense](https://v3.vuejs.org/guide/component-dynamic-async.html#using-with-suspense) (Experimental)
 - [x] [TypeScript](https://www.typescriptlang.org/)
 - [x] [ESLint](https://eslint.vuejs.org/)
 - [x] [Vue router](https://next.router.vuejs.org/)
 - [x] [Harlem](https://github.com/andrewcourtice/harlem) ([await Vuex v5](https://github.com/mutoe/vue3-realworld-example-app/issues/15))
-- [x] Unit test ([Vue Test Utils](https://github.com/vuejs/vue-test-utils-next))
-- [ ] Unit test ([Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro)) (Temporarily unavailable)
+- [x] Unit test ([Vue Test Utils](https://github.com/vuejs/vue-test-utils-next)) (master branch)
+- [x] Unit test ([Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro)) (in [testing-library branch](https://github.com/mutoe/vue3-realworld-example-app/tree/testing-library))
 - [x] E2E test ([Cypress](https://docs.cypress.io))
 - [x] [SFC Script Setup](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md) (Experimental)
 - [x] Vetur Tools: [VTI](https://github.com/mutoe/vue3-realworld-example-app/pull/28) and [optionally IDE hints](https://github.com/mutoe/vue3-realworld-example-app/commit/8367f89a99c467d181d9c7f4144deb05cec55210#commitcomment-43957089)
 
+> \* "Experimental" means this feature may be changed.
+
+# Getting started
+
+```shell script
+yarn install
+
+# Development
+yarn dev
+
+# Build dist
+yarn build
+
+# Run unit tests
+yarn test:unit
+
+# Run E2E tests
+yarn cypress open # with GUI
+yarn test:e2e # headless
+```
+
 # Contributors
 
 <a href="https://github.com/mutoe/vue3-realworld-example-app/graphs/contributors">

package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@babel/core": "^7.13.1",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/vue": "^6.3.4",
+    "@testing-library/vue": "^6.4.0",
     "@types/dompurify": "^2.2.1",
     "@types/jest": "^26.0.20",
     "@types/marked": "^1.2.2",

src/components/AppFooter.spec.ts

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/vue'
+import AppFooter from './AppFooter.vue'
+
+describe('# AppFooter', () => {
+  it('should render correctly', () => {
+    const { container } = render(AppFooter)
+
+    expect(container).toBeInTheDocument()
+  })
+})

src/components/AppLink.spec.ts

@@ -0,0 +1,27 @@
+import AppLink from './AppLink.vue'
+import { fireEvent, render, waitFor } from '@testing-library/vue'
+import { routerForTests } from '../utils/test/mock-router'
+
+describe('# AppLink', function () {
+  beforeEach(async () => {
+    await routerForTests.push({ name: 'home' })
+  })
+
+  it('should redirect to another page when click the link', async function () {
+    // given
+    const { container, getByRole } = render(AppLink, {
+      global: { plugins: [routerForTests] },
+      props: { name: 'foo' },
+      slots: { default: 'Go to Foo' },
+    })
+
+    expect(container).toHaveTextContent('Go to Foo')
+
+    // when
+    const linkElement = getByRole('link', { name: 'foo' })
+    await fireEvent.click(linkElement)
+
+    // then
+    await waitFor(() => expect(linkElement).toHaveClass('router-link-active'))
+  })
+})

src/components/AppLink.vue

@@ -1,5 +1,9 @@
 <template>
-  <router-link :to="props" v-bind="attrs">
+  <router-link
+    :aria-label="props.name"
+    :to="props"
+    v-bind="attrs"
+  >
     <slot />
   </router-link>
 </template>
@@ -8,6 +12,7 @@
 import type { AppRouteNames } from '../router'
 import type { RouteParams } from 'vue-router'
 
+import { RouterLink } from 'vue-router'
 import { defineProps, useContext } from 'vue'
 
 const props = defineProps<{

src/utils/test/mock-router.ts

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+export const routerForTests = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: { template: 'Home page' },
+    },
+    {
+      path: '/foo',
+      name: 'foo',
+      component: { template: 'Foo page' },
+    },
+  ],
+})

yarn.lock

@@ -653,7 +653,7 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/vue@^6.3.4":
+"@testing-library/vue@^6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@testing-library/vue/-/vue-6.4.0.tgz#eef5a5326db92ac50702e4910eb7de1490dc7d96"
   integrity sha512-DHnSMhiUBzHq4QXh9ZdB8ounBtKKAspyUksgQVvg72Tx4jp3iYqmoCXbKn5H5NaL8hd+aj9eVykKUwiE4XSA8A==