refactir unit tests

nextcloud · Mar 28, 2022 · 1e92d60 · 1e92d60
1 parent d28d866
commit 1e92d60
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 61 deletions.
diff --git a/src/views/ProjectsTab.vue b/src/views/ProjectsTab.vue
@@ -35,12 +35,12 @@
 				class="linked-workpackages">
 				<WorkPackage :workpackage="workpackage" />
 				<Actions class="linked-workpackages--menu" menu-align="right">
-					<ActionButton icon="icon-openproject">
-						{{ t('integration_openproject', 'Open in OpenProject') }}
+					<ActionButton class="linked-workpackages--menu--openWorkPackage" icon="icon-openproject">
+						{{ openLink }}
 					</ActionButton>
 					<ActionSeparator />
-					<ActionButton icon="icon-delete">
-						{{ t('integration_openproject', 'Delete link') }}
+					<ActionButton class="linked-workpackages--menu--deleteWorkPackage" icon="icon-delete">
+						{{ deleteLink }}
 					</ActionButton>
 				</Actions>
 			</div>
@@ -59,6 +59,7 @@ import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
 import axios from '@nextcloud/axios'
+import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import SearchInput from '../components/tab/SearchInput'
 import { loadState } from '@nextcloud/initial-state'
@@ -85,6 +86,12 @@ export default {
 		isLoading() {
 			return this.state === 'loading'
 		},
+		deleteLink() {
+			return t('integration_openproject', 'Delete Link')
+		},
+		openLink() {
+			return t('integration_openproject', 'Open in OpenProject')
+		},
 	},
 	methods: {
 		/**

diff --git a/tests/jest/views/ProjectsTab.spec.js b/tests/jest/views/ProjectsTab.spec.js
@@ -17,6 +17,10 @@ describe('ProjectsTab.vue Test', () => {
 	const existingRelationSelector = '.existing-relations'
 	const searchInputStubSelector = 'searchinput-stub'
 	const toggleMenuSelector = '.linked-workpackages--menu'
+	const toggleMenuOpenSelector = '.action-item--open'
+	const menuPopOverSelector = '.popover__wrapper'
+	const openWorkpackageSelector = '.linked-workpackages--menu--openWorkPackage'
+	const deleteWorkpackageSelector = '.linked-workpackages--menu--deleteWorkPackage'
 
 	beforeEach(() => {
 		// eslint-disable-next-line no-import-assign
@@ -284,20 +288,28 @@ describe('ProjectsTab.vue Test', () => {
 	})
 
 	describe('action menu', () => {
-		it('should display the action menu in linked work packages', async () => {
-			wrapper = mountWrapper()
+		it.only('should display the action menu in linked work packages', async () => {
+			wrapper = mountWrapper(false)
 			await wrapper.setData({
 				workpackages: workPackagesSearchResponse,
 			})
-			const toggleMenu = wrapper.find(toggleMenuSelector)
-			await toggleMenu.trigger('click')
-			expect(toggleMenu.exists()).toBeTruthy()
-			expect(toggleMenu).toMatchSnapshot()
+			await localVue.nextTick()
+			let toggleMenu = wrapper.find(toggleMenuSelector)
+			await toggleMenu.find('button').trigger('click')
+			const toggleMenuOpen = wrapper.find(toggleMenuOpenSelector)
+			expect(toggleMenuOpen.exists()).toBeTruthy()
+			const menuOpen = wrapper.find(menuPopOverSelector)
+			expect(menuOpen.exists()).toBeTruthy()
+			expect(wrapper.find(openWorkpackageSelector).text()).toBe('Open in OpenProject')
+			expect(wrapper.find(deleteWorkpackageSelector).text()).toBe('Delete Link')
+			toggleMenu = await wrapper.find(toggleMenuSelector)
+			await toggleMenu.find('button').trigger('click')
+			expect(wrapper.find(menuPopOverSelector).isVisible()).toBeFalsy()
 		})
 	})
 })
 
-function mountWrapper() {
+function mountWrapper(stub = true) {
 	return mount(ProjectsTab, {
 		localVue,
 		mocks: {
@@ -309,9 +321,7 @@ function mountWrapper() {
 		stubs: {
 			SearchInput: true,
 			Avatar: true,
-			Actions: true,
-			ActionButton: true,
-			ActionSeparator: true,
+			Actions: stub,
 		},
 		data: () => ({
 			error: '',

diff --git a/tests/jest/views/__snapshots__/ProjectsTab.spec.js.snap b/tests/jest/views/__snapshots__/ProjectsTab.spec.js.snap
@@ -1,17 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ProjectsTab.vue Test action menu should display the action menu in linked work packages 1`] = `
-<actions-stub defaulticon="" arialabel="Actions" placement="bottom" boundarieselement="[object HTMLBodyElement]" container="body" menu-align="right" class="linked-workpackages--menu">
-  <actionbutton-stub icon="icon-openproject" title="" arialabel="">
-    integration_openproject
-  </actionbutton-stub>
-  <actionseparator-stub></actionseparator-stub>
-  <actionbutton-stub icon="icon-delete" title="" arialabel="">
-    integration_openproject
-  </actionbutton-stub>
-</actions-stub>
-`;
-
 exports[`ProjectsTab.vue Test fetchWorkpackages shows the linked workpackages 1`] = `
 <div class="" id="openproject-linked-workpackages">
   <div class="existing-relations">
@@ -48,13 +36,13 @@ exports[`ProjectsTab.vue Test fetchWorkpackages shows the linked workpackages 1`
       </div>
     </div>
     <actions-stub defaulticon="" arialabel="Actions" placement="bottom" boundarieselement="[object HTMLBodyElement]" container="body" menu-align="right" class="linked-workpackages--menu">
-      <actionbutton-stub icon="icon-openproject" title="" arialabel="">
-        integration_openproject
-      </actionbutton-stub>
-      <actionseparator-stub></actionseparator-stub>
-      <actionbutton-stub icon="icon-delete" title="" arialabel="">
-        integration_openproject
-      </actionbutton-stub>
+      <li data-v-71ea20d2="" class="action linked-workpackages--menu--openWorkPackage"><button data-v-71ea20d2="" aria-label="" type="button" class="action-button focusable"><span data-v-71ea20d2="" class="action-button__icon icon-openproject"></span> <span data-v-71ea20d2="" class="action-button__text">Open in OpenProject</span>
+          <!---->
+        </button></li>
+      <li data-v-5339ba06="" class="action action-separator action--disabled"></li>
+      <li data-v-71ea20d2="" class="action linked-workpackages--menu--deleteWorkPackage"><button data-v-71ea20d2="" aria-label="" type="button" class="action-button focusable"><span data-v-71ea20d2="" class="action-button__icon icon-delete"></span> <span data-v-71ea20d2="" class="action-button__text">Delete Link</span>
+          <!---->
+        </button></li>
     </actions-stub>
   </div>
   <div class="linked-workpackages">
@@ -88,13 +76,13 @@ exports[`ProjectsTab.vue Test fetchWorkpackages shows the linked workpackages 1`
       </div>
     </div>
     <actions-stub defaulticon="" arialabel="Actions" placement="bottom" boundarieselement="[object HTMLBodyElement]" container="body" menu-align="right" class="linked-workpackages--menu">
-      <actionbutton-stub icon="icon-openproject" title="" arialabel="">
-        integration_openproject
-      </actionbutton-stub>
-      <actionseparator-stub></actionseparator-stub>
-      <actionbutton-stub icon="icon-delete" title="" arialabel="">
-        integration_openproject
-      </actionbutton-stub>
+      <li data-v-71ea20d2="" class="action linked-workpackages--menu--openWorkPackage"><button data-v-71ea20d2="" aria-label="" type="button" class="action-button focusable"><span data-v-71ea20d2="" class="action-button__icon icon-openproject"></span> <span data-v-71ea20d2="" class="action-button__text">Open in OpenProject</span>
+          <!---->
+        </button></li>
+      <li data-v-5339ba06="" class="action action-separator action--disabled"></li>
+      <li data-v-71ea20d2="" class="action linked-workpackages--menu--deleteWorkPackage"><button data-v-71ea20d2="" aria-label="" type="button" class="action-button focusable"><span data-v-71ea20d2="" class="action-button__icon icon-delete"></span> <span data-v-71ea20d2="" class="action-button__text">Delete Link</span>
+          <!---->
+        </button></li>
     </actions-stub>
   </div>
 </div>
@@ -136,13 +124,13 @@ exports[`ProjectsTab.vue Test fetchWorkpackages shows the linked workpackages 2`
       </div>
     </div>
     <actions-stub defaulticon="" arialabel="Actions" placement="bottom" boundarieselement="[object HTMLBodyElement]" container="body" menu-align="right" class="linked-workpackages--menu">
-      <actionbutton-stub icon="icon-openproject" title="" arialabel="">
-        integration_openproject
-      </actionbutton-stub>
-      <actionseparator-stub></actionseparator-stub>
-      <actionbutton-stub icon="icon-delete" title="" arialabel="">
-        integration_openproject
-      </actionbutton-stub>
+      <li data-v-71ea20d2="" class="action linked-workpackages--menu--openWorkPackage"><button data-v-71ea20d2="" aria-label="" type="button" class="action-button focusable"><span data-v-71ea20d2="" class="action-button__icon icon-openproject"></span> <span data-v-71ea20d2="" class="action-button__text">Open in OpenProject</span>
+          <!---->
+        </button></li>
+      <li data-v-5339ba06="" class="action action-separator action--disabled"></li>
+      <li data-v-71ea20d2="" class="action linked-workpackages--menu--deleteWorkPackage"><button data-v-71ea20d2="" aria-label="" type="button" class="action-button focusable"><span data-v-71ea20d2="" class="action-button__icon icon-delete"></span> <span data-v-71ea20d2="" class="action-button__text">Delete Link</span>
+          <!---->
+        </button></li>
     </actions-stub>
   </div>
   <div class="linked-workpackages">
@@ -176,13 +164,13 @@ exports[`ProjectsTab.vue Test fetchWorkpackages shows the linked workpackages 2`
       </div>
     </div>
     <actions-stub defaulticon="" arialabel="Actions" placement="bottom" boundarieselement="[object HTMLBodyElement]" container="body" menu-align="right" class="linked-workpackages--menu">
-      <actionbutton-stub icon="icon-openproject" title="" arialabel="">
-        integration_openproject
-      </actionbutton-stub>
-      <actionseparator-stub></actionseparator-stub>
-      <actionbutton-stub icon="icon-delete" title="" arialabel="">
-        integration_openproject
-      </actionbutton-stub>
+      <li data-v-71ea20d2="" class="action linked-workpackages--menu--openWorkPackage"><button data-v-71ea20d2="" aria-label="" type="button" class="action-button focusable"><span data-v-71ea20d2="" class="action-button__icon icon-openproject"></span> <span data-v-71ea20d2="" class="action-button__text">Open in OpenProject</span>
+          <!---->
+        </button></li>
+      <li data-v-5339ba06="" class="action action-separator action--disabled"></li>
+      <li data-v-71ea20d2="" class="action linked-workpackages--menu--deleteWorkPackage"><button data-v-71ea20d2="" aria-label="" type="button" class="action-button focusable"><span data-v-71ea20d2="" class="action-button__icon icon-delete"></span> <span data-v-71ea20d2="" class="action-button__text">Delete Link</span>
+          <!---->
+        </button></li>
     </actions-stub>
   </div>
 </div>
@@ -224,13 +212,13 @@ exports[`ProjectsTab.vue Test onSave shows the just linked workpackage 1`] = `
       </div>
     </div>
     <actions-stub defaulticon="" arialabel="Actions" placement="bottom" boundarieselement="[object HTMLBodyElement]" container="body" menu-align="right" class="linked-workpackages--menu">
-      <actionbutton-stub icon="icon-openproject" title="" arialabel="">
-        integration_openproject
-      </actionbutton-stub>
-      <actionseparator-stub></actionseparator-stub>
-      <actionbutton-stub icon="icon-delete" title="" arialabel="">
-        integration_openproject
-      </actionbutton-stub>
+      <li data-v-71ea20d2="" class="action linked-workpackages--menu--openWorkPackage"><button data-v-71ea20d2="" aria-label="" type="button" class="action-button focusable"><span data-v-71ea20d2="" class="action-button__icon icon-openproject"></span> <span data-v-71ea20d2="" class="action-button__text">Open in OpenProject</span>
+          <!---->
+        </button></li>
+      <li data-v-5339ba06="" class="action action-separator action--disabled"></li>
+      <li data-v-71ea20d2="" class="action linked-workpackages--menu--deleteWorkPackage"><button data-v-71ea20d2="" aria-label="" type="button" class="action-button focusable"><span data-v-71ea20d2="" class="action-button__icon icon-delete"></span> <span data-v-71ea20d2="" class="action-button__text">Delete Link</span>
+          <!---->
+        </button></li>
     </actions-stub>
   </div>
 </div>