From 6f7cb99f17a462bb79b56f6595168a0a8d815585 Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Fri, 18 Nov 2022 16:30:45 +0100 Subject: [PATCH 1/3] Add unit tests for the text editor --- packages/web-app-text-editor/package.json | 3 +- .../tests/unit/app.spec.ts | 60 +++++++++++++++++++ .../web-client/src/webdav/getFileContents.ts | 2 +- .../src/mocks/defaultStubs.ts | 4 +- .../src/mocks/useAppDefaultsMock.ts | 29 +++++++++ pnpm-lock.yaml | 2 + 6 files changed, 97 insertions(+), 3 deletions(-) create mode 100644 packages/web-app-text-editor/tests/unit/app.spec.ts create mode 100644 packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts diff --git a/packages/web-app-text-editor/package.json b/packages/web-app-text-editor/package.json index 5b5d493119c..e931a7e3676 100644 --- a/packages/web-app-text-editor/package.json +++ b/packages/web-app-text-editor/package.json @@ -12,6 +12,7 @@ "vue-gettext": "^2.1.5", "vuex": "^3.6.2", "web-client": "npm:@ownclouders/web-client", - "web-pkg": "npm:@ownclouders/web-pkg" + "web-pkg": "npm:@ownclouders/web-pkg", + "vuex-extensions": "^1.1.5" } } diff --git a/packages/web-app-text-editor/tests/unit/app.spec.ts b/packages/web-app-text-editor/tests/unit/app.spec.ts new file mode 100644 index 00000000000..e71fa984e87 --- /dev/null +++ b/packages/web-app-text-editor/tests/unit/app.spec.ts @@ -0,0 +1,60 @@ +import App from '../../src/App.vue' +import { mount } from '@vue/test-utils' +import Vuex from 'vuex' +import { defaultComponentMocks } from 'web-test-helpers/src/mocks/defaultComponentMocks' +import { defaultLocalVue } from 'web-test-helpers/src/localVue/defaultLocalVue' +import { defaultStoreMockOptions } from 'web-test-helpers/src/mocks/store/defaultStoreMockOptions' +import { createStore } from 'vuex-extensions' +import { defaultStubs } from 'web-test-helpers/src/mocks/defaultStubs' +import { useAppDefaultsMock } from 'web-test-helpers/src/mocks/useAppDefaultsMock' +import { FileContext, useAppDefaults } from 'web-pkg/src/composables/appDefaults' +import { mockDeep } from 'jest-mock-extended' +import { ref } from 'vue' + +jest.mock('web-pkg/src/composables/appDefaults') + +describe('Text editor app', () => { + it('appTopBar always present', () => { + const { wrapper } = getWrapper() + expect(wrapper.find('app-top-bar-stub').exists()).toBeTruthy() + }) + describe('different view states', () => { + it('shows the loading spinner during loading', () => { + const { wrapper } = getWrapper() + expect(wrapper.find('oc-spinner-stub').exists()).toBeTruthy() + }) + it('shows the editor after loading', async () => { + const { wrapper } = getWrapper() + await wrapper.vm.loadFileTask.last + expect(wrapper.find('oc-spinner-stub').exists()).toBeFalsy() + expect(wrapper.find('oc-textarea-stub').exists()).toBeTruthy() + }) + }) + it('shows the preview', async () => { + const { wrapper } = getWrapper({ fileName: 'markdown.md' }) + await wrapper.vm.loadFileTask.last + expect(wrapper.find('#text-editor-preview').exists()).toBeTruthy() + }) +}) + +function getWrapper({ fileName = 'someFile.txt' }: { fileName?: string } = {}) { + jest.mocked(useAppDefaults).mockImplementation(() => + useAppDefaultsMock({ + currentFileContext: ref(mockDeep({ path: fileName })) + }) + ) + const defaultMocks = { ...defaultComponentMocks() } + const storeOptions = { ...defaultStoreMockOptions } + const localVue = defaultLocalVue() + const store = createStore(Vuex.Store, storeOptions) + return { + mocks: defaultMocks, + storeOptions, + wrapper: mount(App, { + localVue, + mocks: defaultMocks, + store, + stubs: defaultStubs + }) + } +} diff --git a/packages/web-client/src/webdav/getFileContents.ts b/packages/web-client/src/webdav/getFileContents.ts index 78f5c66243e..1192c94d370 100644 --- a/packages/web-client/src/webdav/getFileContents.ts +++ b/packages/web-client/src/webdav/getFileContents.ts @@ -2,7 +2,7 @@ import { urlJoin } from '../utils' import { isPublicSpaceResource, SpaceResource } from '../helpers' import { WebDavOptions } from './types' -type GetFileContentsResponse = { +export type GetFileContentsResponse = { body: any [key: string]: any } diff --git a/packages/web-test-helpers/src/mocks/defaultStubs.ts b/packages/web-test-helpers/src/mocks/defaultStubs.ts index b4d87576d7b..1a312aef6f0 100644 --- a/packages/web-test-helpers/src/mocks/defaultStubs.ts +++ b/packages/web-test-helpers/src/mocks/defaultStubs.ts @@ -12,5 +12,7 @@ export const defaultStubs = { 'generic-trash': true, 'generic-space': true, 'space-header': true, - 'shared-with-me-section': true + 'shared-with-me-section': true, + 'app-top-bar': true, + 'oc-textarea': true } diff --git a/packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts b/packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts new file mode 100644 index 00000000000..2c23751b675 --- /dev/null +++ b/packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts @@ -0,0 +1,29 @@ +import { mockDeep } from 'jest-mock-extended' +import { ref } from 'vue' +import { Resource } from 'web-client/src' +import { FileResource } from 'web-client/src/helpers' +import { GetFileContentsResponse } from 'web-client/src/webdav/getFileContents' +import { AppConfigObject, FileContext, useAppDefaults } from 'web-pkg/src' + +export const useAppDefaultsMock = ( + options: Partial> = {} +): ReturnType => { + return { + isPublicLinkContext: ref(false), + currentFileContext: ref(mockDeep()), + applicationConfig: ref(mockDeep()), + closeApp: jest.fn(), + replaceInvalidFileRoute: jest.fn(), + getUrlForResource: jest.fn(), + revokeUrl: jest.fn(), + getFileInfo: jest.fn().mockImplementation(() => mockDeep()), + getFileContents: jest + .fn() + .mockImplementation(() => mockDeep({ body: '' })), + putFileContents: jest.fn().mockImplementation(() => mockDeep()), + isFolderLoading: ref(false), + activeFiles: ref([]), + loadFolderForFileContext: jest.fn(), + ...options + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 03ac3485132..1ee223b07a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -387,6 +387,7 @@ importers: vue-concurrency: ^3.0.0-7 vue-gettext: ^2.1.5 vuex: ^3.6.2 + vuex-extensions: ^1.1.5 web-client: npm:@ownclouders/web-client web-pkg: npm:@ownclouders/web-pkg dependencies: @@ -396,6 +397,7 @@ importers: vue-concurrency: 3.0.0-7 vue-gettext: 2.1.12 vuex: 3.6.2_vue@2.6.14 + vuex-extensions: 1.1.5 web-client: link:../web-client web-pkg: link:../web-pkg From 2eca7a7288d11e58a6782bf8cba446ec831a9672 Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Mon, 21 Nov 2022 09:20:00 +0100 Subject: [PATCH 2/3] Fix composition api imports --- packages/web-app-text-editor/tests/unit/app.spec.ts | 2 +- packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web-app-text-editor/tests/unit/app.spec.ts b/packages/web-app-text-editor/tests/unit/app.spec.ts index e71fa984e87..645b5f7bcc4 100644 --- a/packages/web-app-text-editor/tests/unit/app.spec.ts +++ b/packages/web-app-text-editor/tests/unit/app.spec.ts @@ -9,7 +9,7 @@ import { defaultStubs } from 'web-test-helpers/src/mocks/defaultStubs' import { useAppDefaultsMock } from 'web-test-helpers/src/mocks/useAppDefaultsMock' import { FileContext, useAppDefaults } from 'web-pkg/src/composables/appDefaults' import { mockDeep } from 'jest-mock-extended' -import { ref } from 'vue' +import { ref } from '@vue/composition-api' jest.mock('web-pkg/src/composables/appDefaults') diff --git a/packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts b/packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts index 2c23751b675..b13cea56101 100644 --- a/packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts +++ b/packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts @@ -1,5 +1,5 @@ import { mockDeep } from 'jest-mock-extended' -import { ref } from 'vue' +import { ref } from '@vue/composition-api' import { Resource } from 'web-client/src' import { FileResource } from 'web-client/src/helpers' import { GetFileContentsResponse } from 'web-client/src/webdav/getFileContents' From 5c52f8d0d4478b2b70b338ad24f2db85df193484 Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Thu, 24 Nov 2022 10:20:21 +0100 Subject: [PATCH 3/3] Improve preview tests --- .../web-app-text-editor/tests/unit/app.spec.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/web-app-text-editor/tests/unit/app.spec.ts b/packages/web-app-text-editor/tests/unit/app.spec.ts index 645b5f7bcc4..3c2306e47b6 100644 --- a/packages/web-app-text-editor/tests/unit/app.spec.ts +++ b/packages/web-app-text-editor/tests/unit/app.spec.ts @@ -30,10 +30,19 @@ describe('Text editor app', () => { expect(wrapper.find('oc-textarea-stub').exists()).toBeTruthy() }) }) - it('shows the preview', async () => { - const { wrapper } = getWrapper({ fileName: 'markdown.md' }) - await wrapper.vm.loadFileTask.last - expect(wrapper.find('#text-editor-preview').exists()).toBeTruthy() + describe('preview', () => { + it.each([ + { fileExtension: 'txt', showPreview: false }, + { fileExtension: 'js', showPreview: false }, + { fileExtension: 'php', showPreview: false }, + { fileExtension: 'json', showPreview: false }, + { fileExtension: 'xml', showPreview: false }, + { fileExtension: 'md', showPreview: true } + ])('shows only for supported file types', async (data) => { + const { wrapper } = getWrapper({ fileName: `file.${data.fileExtension}` }) + await wrapper.vm.loadFileTask.last + expect(wrapper.find('#text-editor-preview').exists()).toBe(data.showPreview) + }) }) })