From f8e332dfa34cea3a5f20b1bddb1d2ef40ed44ca9 Mon Sep 17 00:00:00 2001 From: mutoe Date: Sat, 27 Feb 2021 00:10:43 +0800 Subject: [PATCH] docs: update README --- README.md | 34 ++++++++++++++++++++++---------- package.json | 2 +- src/components/AppFooter.spec.ts | 10 ++++++++++ src/components/AppLink.spec.ts | 27 +++++++++++++++++++++++++ src/components/AppLink.vue | 7 ++++++- src/utils/test/mock-router.ts | 17 ++++++++++++++++ yarn.lock | 2 +- 7 files changed, 86 insertions(+), 13 deletions(-) create mode 100644 src/components/AppFooter.spec.ts create mode 100644 src/components/AppLink.spec.ts create mode 100644 src/utils/test/mock-router.ts diff --git a/README.md b/README.md index 7e16930..5961a66 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 7ac96e4..25670d9 100644 --- a/package.json +++ b/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", diff --git a/src/components/AppFooter.spec.ts b/src/components/AppFooter.spec.ts new file mode 100644 index 0000000..6b555ea --- /dev/null +++ b/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() + }) +}) diff --git a/src/components/AppLink.spec.ts b/src/components/AppLink.spec.ts new file mode 100644 index 0000000..f6e0d54 --- /dev/null +++ b/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')) + }) +}) diff --git a/src/components/AppLink.vue b/src/components/AppLink.vue index 0b758f0..1d6f2a3 100644 --- a/src/components/AppLink.vue +++ b/src/components/AppLink.vue @@ -1,5 +1,9 @@ @@ -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<{ diff --git a/src/utils/test/mock-router.ts b/src/utils/test/mock-router.ts new file mode 100644 index 0000000..403ee52 --- /dev/null +++ b/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' }, + }, + ], +}) diff --git a/yarn.lock b/yarn.lock index 05f18a0..583875b 100644 --- a/yarn.lock +++ b/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==