tests(front): test highlighted job field

Also update div ids in exiting test to match new anchors names.

frontend/tests/views/JobView.spec.ts

@@ -1,11 +1,13 @@
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
 import type { Ref } from 'vue'
 import { describe, test, expect, beforeEach, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { useRuntimeStore } from '@/stores/runtime'
 import JobView from '@/views/JobView.vue'
 import { init_plugins } from './common'
 import type { ClusterIndividualJob } from '@/composables/GatewayAPI'
 import jobRunning from '../assets/job-running.json'
+import type { RouterMock } from 'vue-router-mock'
 
 const mockClusterDataPoller = {
   data: ref(undefined),
@@ -17,9 +19,14 @@ vi.mock('@/composables/DataPoller', () => ({
   useClusterDataPoller: () => mockClusterDataPoller
 }))
 
+let router: RouterMock
+
 describe('JobView.vue', () => {
   beforeEach(() => {
-    init_plugins()
+    router = init_plugins()
+    useRuntimeStore().availableClusters = [
+      { name: 'foo', permissions: { roles: [], actions: [] }, infrastructure: 'foo' }
+    ]
   })
   test('display job details', () => {
     mockClusterDataPoller.data.value = jobRunning
@@ -30,13 +37,30 @@ describe('JobView.vue', () => {
       }
     })
     // Check some jobs fields
-    expect(wrapper.get('dl div#job-user dd').text()).toBe(jobRunning.user)
-    expect(wrapper.get('dl div#job-group dd').text()).toBe(jobRunning.group)
-    expect(wrapper.get('dl div#job-account dd').text()).toBe(jobRunning.association.account)
-    expect(wrapper.get('dl div#job-priority dd').text()).toBe(jobRunning.priority.number.toString())
-    expect(wrapper.get('dl div#job-workdir dd').text()).toBe(jobRunning.working_directory)
-    expect(wrapper.get('dl div#job-nodes dd').text()).toBe(jobRunning.nodes)
-    expect(wrapper.get('dl div#job-partition dd').text()).toBe(jobRunning.partition)
-    expect(wrapper.get('dl div#job-qos dd').text()).toBe(jobRunning.qos)
+    expect(wrapper.get('dl div#user dd').text()).toBe(jobRunning.user)
+    expect(wrapper.get('dl div#group dd').text()).toBe(jobRunning.group)
+    expect(wrapper.get('dl div#account dd').text()).toBe(jobRunning.association.account)
+    expect(wrapper.get('dl div#priority dd').text()).toBe(jobRunning.priority.number.toString())
+    expect(wrapper.get('dl div#workdir dd').text()).toBe(jobRunning.working_directory)
+    expect(wrapper.get('dl div#nodes dd').text()).toBe(jobRunning.nodes)
+    expect(wrapper.get('dl div#partition dd').text()).toBe(jobRunning.partition)
+    expect(wrapper.get('dl div#qos dd').text()).toBe(jobRunning.qos)
+  })
+  test('highlight job field in route hash', async () => {
+    await router.setHash('#user')
+    mockClusterDataPoller.data.value = jobRunning
+    const wrapper = mount(JobView, {
+      props: {
+        cluster: 'foo',
+        id: 1234
+      }
+    })
+    await nextTick()
+    // Check user field is highlighted with specific background color due to
+    // #user hash in route while group field is not highlighted.
+    expect(wrapper.get('dl div#user').classes('bg-slurmweb-light')).toBe(true)
+    expect(wrapper.get('dl div#group').classes('bg-slurmweb-light')).toBe(false)
   })
+
+  // test highlight
 })

frontend/tests/views/common.ts

@@ -4,8 +4,9 @@ import { httpPlugin } from '@/plugins/http'
 import { createTestingPinia } from '@pinia/testing'
 import { config, RouterLinkStub } from '@vue/test-utils'
 import { createRouterMock, injectRouterMock } from 'vue-router-mock'
+import type { RouterMock } from 'vue-router-mock'
 
-export function init_plugins() {
+export function init_plugins(): RouterMock {
   config.global.plugins = [
     [
       runtimeConfiguration,