From 254ddd7530977ddb330517aac09e2deb82f1b8e7 Mon Sep 17 00:00:00 2001
From: Parajuli Kiran <kiranparajuli589@gmail.com>
Date: Tue, 31 Aug 2021 16:07:24 +0545
Subject: [PATCH 1/2] Implemented unit tests for public link view

---
 .../web-app-files/src/views/PublicLink.vue    |   4 +-
 .../tests/unit/views/PublicLink.spec.js       | 185 ++++++++++++++++--
 .../__snapshots__/PublicLink.spec.js.snap     |  70 +++++++
 3 files changed, 242 insertions(+), 17 deletions(-)
 create mode 100644 packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap

diff --git a/packages/web-app-files/src/views/PublicLink.vue b/packages/web-app-files/src/views/PublicLink.vue
index 8e69bea6956..7804cd80521 100644
--- a/packages/web-app-files/src/views/PublicLink.vue
+++ b/packages/web-app-files/src/views/PublicLink.vue
@@ -15,13 +15,13 @@
           <oc-spinner :aria-hidden="true" />
         </template>
         <template v-else-if="errorMessage">
-          <h2 class="oc-login-card-title">
+          <h2 class="oc-login-card-title" data-testid="public-link-error-message">
             <translate>An error occurred while loading the public link</translate>
           </h2>
           <p class="oc-text-lead">{{ errorMessage }}</p>
         </template>
         <template v-else-if="passwordRequired">
-          <form @submit.prevent="resolvePublicLink">
+          <form data-testid="public-link-password-required" @submit.prevent="resolvePublicLink">
             <h2 class="oc-login-card-title">
               <translate>This resource is password-protected.</translate>
             </h2>
diff --git a/packages/web-app-files/tests/unit/views/PublicLink.spec.js b/packages/web-app-files/tests/unit/views/PublicLink.spec.js
index 2ca577652f0..a09ebfa9b26 100644
--- a/packages/web-app-files/tests/unit/views/PublicLink.spec.js
+++ b/packages/web-app-files/tests/unit/views/PublicLink.spec.js
@@ -1,34 +1,189 @@
+import PublicLink from '@files/src/views/PublicLink.vue'
+import { getStore, localVue } from './views.setup.js'
+import { shallowMount, mount } from '@vue/test-utils'
+
+const theme = {
+  general: { slogan: 'some-slogan' },
+  logo: 'some-logo',
+  loginPage: { backgroundImg: 'some-image' }
+}
+
+const stubs = {
+  'oc-spinner': true,
+  translate: true
+}
+
+const route = { meta: { title: 'some page title' }, params: { token: 'some-token' } }
+
+const component = { ...PublicLink, mounted: jest.fn(), created: jest.fn() }
+
+const selectors = {
+  loginLogo: '.oc-login-logo',
+  loginCardFooter: '.oc-login-card-footer',
+  loginCardBody: '.oc-login-card-body',
+  submitButton: '.oc-login-authorize-button',
+  errorMessage: '[data-testid="public-link-error-message"]',
+  publicLinkPasswordRequired: '[data-testid="public-link-password-required"]'
+}
+
+const spinnerStub = 'oc-spinner-stub'
+const textInputStub = 'oc-text-input-stub'
+
 describe('PublicLink', () => {
   describe('theming options', () => {
-    test.todo('should have the background image set')
-    test.todo('should display the page title')
-    test.todo('should display the logo image inside login card')
-    test.todo('should display the configuration theme general slogan as the login card footer')
+    const wrapper = getWrapper()
+
+    it('should have the background image and page-title set', () => {
+      expect(wrapper).toMatchSnapshot()
+    })
+    it('should display the logo image inside login card', () => {
+      const logo = wrapper.find(selectors.loginLogo)
+
+      expect(logo).toMatchSnapshot()
+    })
+    it('should display the configuration theme general slogan as the login card footer', () => {
+      const slogan = wrapper.find(selectors.loginCardFooter)
+
+      expect(slogan).toMatchSnapshot()
+    })
   })
 
   describe('when the view is still loading', () => {
-    test.todo('should display the loading text with the spinner')
-    test.todo('should not display the error message')
-    test.todo('should not display the password required form')
+    const wrapper = getWrapper({ loading: true })
+    it('should display the loading text with the spinner', () => {
+      const loading = wrapper.find(selectors.loginCardBody)
+
+      expect(wrapper.find(spinnerStub).exists()).toBeTruthy()
+      expect(loading).toMatchSnapshot()
+    })
+    it('should not display the error message', () => {
+      expect(wrapper.find(selectors.errorMessage).exists()).toBeFalsy()
+    })
+    it('should not display the password required form', () => {
+      expect(wrapper.find(selectors.publicLinkPasswordRequired).exists()).toBeFalsy()
+    })
   })
 
   describe('when the view is not loading anymore', () => {
-    test.todo('should not display the loading text and the spinner')
-    test.todo('should display the error message if "errorMessage" is not empty')
+    it('should not display the loading text and the spinner', () => {
+      const wrapper = getWrapper({ loading: false })
+      const loading = wrapper.find(selectors.loginCardBody)
+
+      expect(loading).toMatchSnapshot()
+    })
+    it('should display the error message if "errorMessage" is not empty', async () => {
+      const wrapper = getWrapper({ loading: false })
+      await wrapper.setData({ errorMessage: 'some-error-message' })
+
+      expect(wrapper.find(selectors.errorMessage).exists()).toBeTruthy()
+      expect(wrapper.find(selectors.errorMessage)).toMatchSnapshot()
+    })
 
     describe('when "passwordRequired" is set as true', () => {
-      test.todo('should display the password required form')
+      let passwordRequiredForm
+      const wrapper = getWrapper({ loading: false })
+
+      beforeEach(async () => {
+        await wrapper.setData({ passwordRequired: true })
+        passwordRequiredForm = wrapper.find('form')
+      })
+
+      it('should display the password required form', () => {
+        expect(passwordRequiredForm.exists()).toBeTruthy()
+        expect(passwordRequiredForm).toMatchSnapshot()
+      })
 
       describe('password input', () => {
-        test.todo('should have a computed label')
-        test.todo('should display the error message if "inputErrorMessage" is not empty')
-        test.todo('should not display the error message if "inputErrorMessage" is falsy')
+        it('should have a computed label', () => {
+          const passwordInput = passwordRequiredForm.find(textInputStub)
+
+          expect(passwordInput).toMatchSnapshot()
+        })
+        it('should not display the error message if "inputErrorMessage" is falsy', () => {
+          const passwordInput = passwordRequiredForm.find(textInputStub)
+
+          expect(passwordInput.attributes().errormessage).toBeUndefined()
+        })
+        it('should display the error message if "inputErrorMessage" is not empty', async () => {
+          await wrapper.setData({ inputErrorMessage: 'some input error message' })
+          const passwordInput = passwordRequiredForm.find(textInputStub)
+
+          expect(passwordInput).toMatchSnapshot()
+        })
       })
 
       describe('submit button', () => {
-        test.todo('should be set as disabled if "password" is empty')
-        test.todo('should be set as enabled if "password" is not empty')
+        it('should be set as disabled if "password" is empty', () => {
+          expect(wrapper.vm.password).toBeNull()
+
+          const submitButton = wrapper.find(selectors.submitButton)
+          expect(submitButton.exists()).toBeTruthy()
+          expect(submitButton).toMatchSnapshot()
+        })
+        it('should be set as enabled if "password" is not empty', async () => {
+          await wrapper.setData({ password: 'some-value' })
+          expect(wrapper.vm.password).toBe('some-value')
+
+          const submitButton = wrapper.find(selectors.submitButton)
+          expect(submitButton.exists()).toBeTruthy()
+          expect(submitButton.attributes().disabled).toBeUndefined()
+        })
+      })
+
+      it('should call "resolvePublicLink" method on form submit', async () => {
+        const spyResolvePublicLink = jest.spyOn(PublicLink.methods, 'resolvePublicLink')
+        const wrapper = getMountedWrapper({ loading: false })
+
+        await wrapper.setData({ passwordRequired: true, password: 'some-pass' })
+
+        const submitButton = wrapper.find(selectors.submitButton)
+
+        await submitButton.trigger('click')
+
+        expect(spyResolvePublicLink).toHaveBeenCalledTimes(1)
+        wrapper.destroy()
       })
     })
   })
 })
+
+function getMountOptions({
+  $route = route,
+  store = getStore({
+    slogan: theme.general.slogan,
+    loginLogo: theme.logo,
+    loginBackgroundImg: theme.loginPage.backgroundImg
+  }),
+  loading = false
+} = {}) {
+  return {
+    localVue,
+    store,
+    stubs,
+    mocks: {
+      $route
+    },
+    data: () => ({
+      loading: loading
+    })
+  }
+}
+
+function getWrapper({ loading, store } = {}) {
+  return shallowMount(component, getMountOptions({ store, loading }))
+}
+
+function getMountedWrapper({ loading, store } = {}) {
+  // https://stackoverflow.com/questions/53382235/trigger-form-submit-on-button-click-in-vue-unit-test
+  // Vue Test Utils does not attach DOM nodes to the document by default.
+  // This is to avoid enforcing cleanup.
+  // You can solve this by setting attachTo to an HTML element when you mount the component
+  const div = document.createElement('div')
+  div.id = 'root'
+  document.body.appendChild(div)
+  return mount(component, {
+    ...getMountOptions({ store, loading }),
+    attachTo: '#root',
+    stubs: {}
+  })
+}
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap
new file mode 100644
index 00000000000..a90b2129029
--- /dev/null
+++ b/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PublicLink theming options should display the configuration theme general slogan as the login card footer 1`] = `
+<div class="oc-login-card-footer">
+  <p>
+    some-slogan
+  </p>
+</div>
+`;
+
+exports[`PublicLink theming options should display the logo image inside login card 1`] = `<img src="some-logo" alt="" aria-hidden="true" class="oc-login-logo">`;
+
+exports[`PublicLink theming options should have the background image and page-title set 1`] = `
+<div uk-height-viewport="" class="oc-login" style="background-image: url(some-image);">
+  <h1 class="oc-invisible-sr">some page title</h1>
+  <div class="oc-login-card uk-position-center"><img src="some-logo" alt="" aria-hidden="true" class="oc-login-logo">
+    <div class="oc-login-card-body">
+      <!---->
+    </div>
+    <div class="oc-login-card-footer">
+      <p>
+        some-slogan
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PublicLink when the view is not loading anymore should display the error message if "errorMessage" is not empty 1`] = `
+<h2 data-testid="public-link-error-message" class="oc-login-card-title">
+  <translate-stub tag="span">An error occurred while loading the public link</translate-stub>
+</h2>
+`;
+
+exports[`PublicLink when the view is not loading anymore should not display the loading text and the spinner 1`] = `
+<div class="oc-login-card-body">
+  <!---->
+</div>
+`;
+
+exports[`PublicLink when the view is not loading anymore when "passwordRequired" is set as true password input should display the error message if "inputErrorMessage" is not empty 1`] = `<oc-text-input-stub id="oc-textinput-3" type="password" clearbuttonaccessiblelabel="" label="Enter password for public link" class="oc-mb-s" errormessage="some input error message"></oc-text-input-stub>`;
+
+exports[`PublicLink when the view is not loading anymore when "passwordRequired" is set as true password input should have a computed label 1`] = `<oc-text-input-stub id="oc-textinput-3" type="password" clearbuttonaccessiblelabel="" label="Enter password for public link" class="oc-mb-s"></oc-text-input-stub>`;
+
+exports[`PublicLink when the view is not loading anymore when "passwordRequired" is set as true should display the password required form 1`] = `
+<form data-testid="public-link-password-required">
+  <h2 class="oc-login-card-title">
+    <translate-stub tag="span">This resource is password-protected.</translate-stub>
+  </h2>
+  <oc-text-input-stub id="oc-textinput-3" type="password" clearbuttonaccessiblelabel="" label="Enter password for public link" class="oc-mb-s"></oc-text-input-stub>
+  <oc-button-stub type="button" disabled="true" size="medium" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-login-authorize-button">
+    <translate-stub tag="span">Continue</translate-stub>
+  </oc-button-stub>
+</form>
+`;
+
+exports[`PublicLink when the view is not loading anymore when "passwordRequired" is set as true submit button should be set as disabled if "password" is empty 1`] = `
+<oc-button-stub type="button" disabled="true" size="medium" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-login-authorize-button">
+  <translate-stub tag="span">Continue</translate-stub>
+</oc-button-stub>
+`;
+
+exports[`PublicLink when the view is still loading should display the loading text with the spinner 1`] = `
+<div class="oc-login-card-body">
+  <h2 class="oc-login-card-title">
+    <translate-stub tag="span">Loading public link…</translate-stub>
+  </h2>
+  <oc-spinner-stub arialabel="" size="medium" aria-hidden="true"></oc-spinner-stub>
+</div>
+`;

From 4f010aa1f435fcef39c7e19234ad9efa71db4bfb Mon Sep 17 00:00:00 2001
From: pwengerter <pascal@wengerter.info>
Date: Tue, 30 Nov 2021 14:56:04 +0100
Subject: [PATCH 2/2] Rebase, simplify and remove test log

---
 .../web-app-files/src/views/PublicLink.vue    |  4 +-
 .../components/FilesList/Pagination.spec.js   |  1 -
 .../tests/unit/views/PublicLink.spec.js       | 22 +++--------
 .../__snapshots__/PublicLink.spec.js.snap     | 38 +++++++++----------
 4 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/packages/web-app-files/src/views/PublicLink.vue b/packages/web-app-files/src/views/PublicLink.vue
index 7804cd80521..6f5445843df 100644
--- a/packages/web-app-files/src/views/PublicLink.vue
+++ b/packages/web-app-files/src/views/PublicLink.vue
@@ -15,13 +15,13 @@
           <oc-spinner :aria-hidden="true" />
         </template>
         <template v-else-if="errorMessage">
-          <h2 class="oc-login-card-title" data-testid="public-link-error-message">
+          <h2 class="oc-login-card-title oc-login-card-error">
             <translate>An error occurred while loading the public link</translate>
           </h2>
           <p class="oc-text-lead">{{ errorMessage }}</p>
         </template>
         <template v-else-if="passwordRequired">
-          <form data-testid="public-link-password-required" @submit.prevent="resolvePublicLink">
+          <form @submit.prevent="resolvePublicLink">
             <h2 class="oc-login-card-title">
               <translate>This resource is password-protected.</translate>
             </h2>
diff --git a/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js b/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
index 8181e033afd..35503741b6c 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
+++ b/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
@@ -71,7 +71,6 @@ describe('Pagination', () => {
 
       it('should set provided current page', () => {
         const paginationEl = wrapper.find(selectors.filesPagination)
-        console.log(wrapper.html())
         expect(paginationEl.attributes().currentpage).toBe('1')
       })
     })
diff --git a/packages/web-app-files/tests/unit/views/PublicLink.spec.js b/packages/web-app-files/tests/unit/views/PublicLink.spec.js
index a09ebfa9b26..0c192568cb9 100644
--- a/packages/web-app-files/tests/unit/views/PublicLink.spec.js
+++ b/packages/web-app-files/tests/unit/views/PublicLink.spec.js
@@ -22,8 +22,8 @@ const selectors = {
   loginCardFooter: '.oc-login-card-footer',
   loginCardBody: '.oc-login-card-body',
   submitButton: '.oc-login-authorize-button',
-  errorMessage: '[data-testid="public-link-error-message"]',
-  publicLinkPasswordRequired: '[data-testid="public-link-password-required"]'
+  errorMessage: '.oc-login-card-error',
+  publicLinkPasswordRequired: 'form > .oc-login-card-title'
 }
 
 const spinnerStub = 'oc-spinner-stub'
@@ -79,7 +79,7 @@ describe('PublicLink', () => {
       expect(wrapper.find(selectors.errorMessage)).toMatchSnapshot()
     })
 
-    describe('when "passwordRequired" is set as true', () => {
+    describe('and when "passwordRequired" is set as true', () => {
       let passwordRequiredForm
       const wrapper = getWrapper({ loading: false })
 
@@ -93,7 +93,7 @@ describe('PublicLink', () => {
         expect(passwordRequiredForm).toMatchSnapshot()
       })
 
-      describe('password input', () => {
+      describe('and the password input', () => {
         it('should have a computed label', () => {
           const passwordInput = passwordRequiredForm.find(textInputStub)
 
@@ -112,7 +112,7 @@ describe('PublicLink', () => {
         })
       })
 
-      describe('submit button', () => {
+      describe('and the submit button', () => {
         it('should be set as disabled if "password" is empty', () => {
           expect(wrapper.vm.password).toBeNull()
 
@@ -137,11 +137,9 @@ describe('PublicLink', () => {
         await wrapper.setData({ passwordRequired: true, password: 'some-pass' })
 
         const submitButton = wrapper.find(selectors.submitButton)
-
-        await submitButton.trigger('click')
+        await submitButton.trigger('submit')
 
         expect(spyResolvePublicLink).toHaveBeenCalledTimes(1)
-        wrapper.destroy()
       })
     })
   })
@@ -174,16 +172,8 @@ function getWrapper({ loading, store } = {}) {
 }
 
 function getMountedWrapper({ loading, store } = {}) {
-  // https://stackoverflow.com/questions/53382235/trigger-form-submit-on-button-click-in-vue-unit-test
-  // Vue Test Utils does not attach DOM nodes to the document by default.
-  // This is to avoid enforcing cleanup.
-  // You can solve this by setting attachTo to an HTML element when you mount the component
-  const div = document.createElement('div')
-  div.id = 'root'
-  document.body.appendChild(div)
   return mount(component, {
     ...getMountOptions({ store, loading }),
-    attachTo: '#root',
     stubs: {}
   })
 }
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap
index a90b2129029..5adadf4f0b3 100644
--- a/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap
@@ -26,24 +26,18 @@ exports[`PublicLink theming options should have the background image and page-ti
 </div>
 `;
 
-exports[`PublicLink when the view is not loading anymore should display the error message if "errorMessage" is not empty 1`] = `
-<h2 data-testid="public-link-error-message" class="oc-login-card-title">
-  <translate-stub tag="span">An error occurred while loading the public link</translate-stub>
-</h2>
-`;
+exports[`PublicLink when the view is not loading anymore and when "passwordRequired" is set as true and the password input should display the error message if "inputErrorMessage" is not empty 1`] = `<oc-text-input-stub id="oc-textinput-3" type="password" clearbuttonaccessiblelabel="" label="Enter password for public link" class="oc-mb-s" errormessage="some input error message"></oc-text-input-stub>`;
 
-exports[`PublicLink when the view is not loading anymore should not display the loading text and the spinner 1`] = `
-<div class="oc-login-card-body">
-  <!---->
-</div>
-`;
-
-exports[`PublicLink when the view is not loading anymore when "passwordRequired" is set as true password input should display the error message if "inputErrorMessage" is not empty 1`] = `<oc-text-input-stub id="oc-textinput-3" type="password" clearbuttonaccessiblelabel="" label="Enter password for public link" class="oc-mb-s" errormessage="some input error message"></oc-text-input-stub>`;
+exports[`PublicLink when the view is not loading anymore and when "passwordRequired" is set as true and the password input should have a computed label 1`] = `<oc-text-input-stub id="oc-textinput-3" type="password" clearbuttonaccessiblelabel="" label="Enter password for public link" class="oc-mb-s"></oc-text-input-stub>`;
 
-exports[`PublicLink when the view is not loading anymore when "passwordRequired" is set as true password input should have a computed label 1`] = `<oc-text-input-stub id="oc-textinput-3" type="password" clearbuttonaccessiblelabel="" label="Enter password for public link" class="oc-mb-s"></oc-text-input-stub>`;
+exports[`PublicLink when the view is not loading anymore and when "passwordRequired" is set as true and the submit button should be set as disabled if "password" is empty 1`] = `
+<oc-button-stub type="button" disabled="true" size="medium" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-login-authorize-button">
+  <translate-stub tag="span">Continue</translate-stub>
+</oc-button-stub>
+`;
 
-exports[`PublicLink when the view is not loading anymore when "passwordRequired" is set as true should display the password required form 1`] = `
-<form data-testid="public-link-password-required">
+exports[`PublicLink when the view is not loading anymore and when "passwordRequired" is set as true should display the password required form 1`] = `
+<form>
   <h2 class="oc-login-card-title">
     <translate-stub tag="span">This resource is password-protected.</translate-stub>
   </h2>
@@ -54,10 +48,16 @@ exports[`PublicLink when the view is not loading anymore when "passwordRequired"
 </form>
 `;
 
-exports[`PublicLink when the view is not loading anymore when "passwordRequired" is set as true submit button should be set as disabled if "password" is empty 1`] = `
-<oc-button-stub type="button" disabled="true" size="medium" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-login-authorize-button">
-  <translate-stub tag="span">Continue</translate-stub>
-</oc-button-stub>
+exports[`PublicLink when the view is not loading anymore should display the error message if "errorMessage" is not empty 1`] = `
+<h2 class="oc-login-card-title oc-login-card-error">
+  <translate-stub tag="span">An error occurred while loading the public link</translate-stub>
+</h2>
+`;
+
+exports[`PublicLink when the view is not loading anymore should not display the loading text and the spinner 1`] = `
+<div class="oc-login-card-body">
+  <!---->
+</div>
 `;
 
 exports[`PublicLink when the view is still loading should display the loading text with the spinner 1`] = `