fix(ui): display correct line and column for web UI (#1972)

Co-authored-by: golebiowskib <bartosz.golebiowski@@ttpsc.pl>

packages/ui/client/components/views/ViewReport.cy.tsx

@@ -7,9 +7,12 @@ const viewReportSelector = '[data-testid=view-report]'
 const stackRowSelector = '[data-testid=stack]'
 
 const makeTextStack = () => ({
-  line: faker.datatype.number(120),
-  column: faker.datatype.number(5000),
-
+  line: faker.datatype.number({ min: 0, max: 120 }),
+  column: faker.datatype.number({ min: 0, max: 5000 }),
+  sourcePos: {
+    line: faker.datatype.number({ min: 121, max: 240 }),
+    column: faker.datatype.number({ min: 5001, max: 10000 }),
+  },
   // Absolute file paths
   file: faker.system.filePath(),
   method: faker.hacker.verb(),
@@ -46,8 +49,9 @@ describe('ViewReport', () => {
       cy.get(stackRowSelector).should('have.length', stacks.length)
         .get(stackRowSelector)
         .each(($stack, idx) => {
-          const { column, line, file: fileName } = stacks[idx]
-          expect($stack).to.contain.text(`${line}:${column}`)
+          const { column, line, file: fileName, sourcePos } = stacks[idx]
+          expect($stack).not.to.contain.text(`${line}:${column}`)
+          expect($stack).to.contain.text(`${sourcePos.line}:${sourcePos.column}`)
           expect($stack).to.contain.text(`- ${fileName}`)
         })
     })

packages/ui/client/components/views/ViewReport.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { openInEditor, shouldOpenInEditor } from '../../composables/error'
-import type { File, Suite, Task } from '#types'
+import type { File, ParsedStack, Suite, Task } from '#types'
 import { config } from '~/composables/client'
 import { isDark } from '~/composables/dark'
 import { createAnsiToHtmlFilter } from '~/composables/error'
@@ -86,6 +86,14 @@ function relative(p: string) {
     return p.slice(config.value.root.length)
   return p
 }
+
+function line(stack: ParsedStack) {
+  return stack.sourcePos?.line ?? stack.line
+}
+
+function column(stack: ParsedStack) {
+  return stack.sourcePos?.column ?? stack.column
+}
 </script>
 
 <template>
@@ -107,14 +115,14 @@ function relative(p: string) {
           <div v-else-if="task.result?.error" class="scrolls scrolls-rounded task-error">
             <pre><b>{{ task.result.error.name || task.result.error.nameStr }}</b>: {{ task.result.error.message }}</pre>
             <div v-for="(stack, i) of task.result.error.stacks" :key="i" class="op80 flex gap-x-2 items-center" data-testid="stack">
-              <pre> - {{ relative(stack.file) }}:{{ stack.line }}:{{ stack.column }}</pre>
+              <pre> - {{ relative(stack.file) }}:{{ line(stack) }}:{{ column(stack) }}</pre>
               <div
                 v-if="shouldOpenInEditor(stack.file, props.file?.name)"
                 v-tooltip.bottom="'Open in Editor'"
                 class="i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer min-w-1em min-h-1em"
                 tabindex="0"
                 aria-label="Open in Editor"
-                @click.passive="openInEditor(stack.file, stack.line, stack.column)"
+                @click.passive="openInEditor(stack.file, line(stack), column(stack))"
               />
             </div>
           </div>