[tests-only] Add unit tests for the text editor

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"
   }
 }

packages/web-app-text-editor/tests/unit/app.spec.ts

@@ -0,0 +1,69 @@
+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/composition-api'
+
+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()
+    })
+  })
+  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)
+    })
+  })
+})
+
+function getWrapper({ fileName = 'someFile.txt' }: { fileName?: string } = {}) {
+  jest.mocked(useAppDefaults).mockImplementation(() =>
+    useAppDefaultsMock({
+      currentFileContext: ref(mockDeep<FileContext>({ 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
+    })
+  }
+}

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
 }

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
 }

packages/web-test-helpers/src/mocks/useAppDefaultsMock.ts

@@ -0,0 +1,29 @@
+import { mockDeep } from 'jest-mock-extended'
+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'
+import { AppConfigObject, FileContext, useAppDefaults } from 'web-pkg/src'
+
+export const useAppDefaultsMock = (
+  options: Partial<ReturnType<typeof useAppDefaults>> = {}
+): ReturnType<typeof useAppDefaults> => {
+  return {
+    isPublicLinkContext: ref(false),
+    currentFileContext: ref(mockDeep<FileContext>()),
+    applicationConfig: ref(mockDeep<AppConfigObject>()),
+    closeApp: jest.fn(),
+    replaceInvalidFileRoute: jest.fn(),
+    getUrlForResource: jest.fn(),
+    revokeUrl: jest.fn(),
+    getFileInfo: jest.fn().mockImplementation(() => mockDeep<Resource>()),
+    getFileContents: jest
+      .fn()
+      .mockImplementation(() => mockDeep<GetFileContentsResponse>({ body: '' })),
+    putFileContents: jest.fn().mockImplementation(() => mockDeep<FileResource>()),
+    isFolderLoading: ref(false),
+    activeFiles: ref([]),
+    loadFolderForFileContext: jest.fn(),
+    ...options
+  }
+}