diff --git a/packages/app/src/debug/DebugFailedTest.cy.tsx b/packages/app/src/debug/DebugFailedTest.cy.tsx index 693c2f4020db..d7330a143dee 100644 --- a/packages/app/src/debug/DebugFailedTest.cy.tsx +++ b/packages/app/src/debug/DebugFailedTest.cy.tsx @@ -165,7 +165,7 @@ describe('', () => { cy.percySnapshot() }) - it('tests responsvie UI', { viewportWidth: 700 }, () => { + it('tests responsive UI', { viewportWidth: 700 }, () => { const testResult: TestResults = { id: '676df87874', titleParts: ['Test content', 'Test content 2', 'Test content 3', 'Test content 4', 'onMount() should be called once', 'hook() should be called twice and then'], @@ -180,6 +180,9 @@ describe('', () => { assertRowContents(testResult) + cy.contains('...').realHover() + cy.contains('[data-cy=tooltip-content]', 'Test content 2 > Test content 3 > Test content 4').should('be.visible') + cy.percySnapshot() }) diff --git a/packages/app/src/debug/DebugFailedTest.vue b/packages/app/src/debug/DebugFailedTest.vue index 333504b1fa76..9f5750f07c38 100644 --- a/packages/app/src/debug/DebugFailedTest.vue +++ b/packages/app/src/debug/DebugFailedTest.vue @@ -10,27 +10,39 @@ class="isolate" />
() +type ItemType = 'SHOW_FULL' | 'MIDDLE' | 'ELLIPSIS' | 'LAST-PART-START' | 'LAST-PART-END' + type MappedTitlePart = { + text: string + type: ItemType + } + const failedTestData = computed(() => { const runInstance = props.failedTestsResult[0].instance const titleParts = props.failedTestsResult[0].titleParts - type Parts = 'FIRST' | 'MIDDLE' | 'PENULTIMATE' | 'ELLIPSIS' | 'LAST-0' | 'LAST-1' - type MappedTitlePart = { - title: string - type: Parts - } let isFirstMiddleAdded: boolean = false - const mappedTitleParts: MappedTitlePart[] = titleParts.map((ele, index, parts) => { + + const mappedTitleParts: MappedTitlePart[] = titleParts.map((titlePart, index, parts) => { if (index === 0) { + // always use the whole first part of the title return { - title: ele, - type: 'FIRST', + text: titlePart, + type: 'SHOW_FULL', } } if (index === parts.length - 1) { + // split the last part into 2 pieces, so that we can truncate the first half if needed, + // and still show the end of the text. return [ { - title: ele.slice(0, ele.length - 15), - type: 'LAST-0', + text: titlePart.slice(0, titlePart.length - 15), + type: 'LAST-PART-START', }, { - title: ele.slice(ele.length - 15), - type: 'LAST-1', + text: titlePart.slice(titlePart.length - 15), + type: 'LAST-PART-END', }, ] } if (index === parts.length - 2 && parts.length >= 3) { + // this is the second-last part of the title, + // and will be the *third-to-last* item in the array. + + // We only label this SHOW_FULL if there are enough + // actual parts in the title that it is required to separate this + // from "middle" items that may be hidden in smaller screens + return { - title: ele, - type: 'PENULTIMATE', + text: titlePart, + type: 'SHOW_FULL', } } if (!isFirstMiddleAdded && parts.length > 3) { isFirstMiddleAdded = true + // a fake part with type ELLIPSIS is shown conditionally + // at smaller screen sizes + + // we insert it here and will flatten the result later + // to undo the nesting this creates return [ { - title: '...', + text: '...', type: 'ELLIPSIS', }, { - title: ele, + text: titlePart, type: 'MIDDLE', }, ] } - return { title: ele, type: 'MIDDLE' } - }).flat() + return { text: titlePart, type: 'MIDDLE' } + }) + .flat() // flatten the array since one of the internal items may itself be an array. const debugArtifacts = getDebugArtifacts(runInstance, t) @@ -144,6 +175,13 @@ const failedTestData = computed(() => { } }) +const middlePartText = computed(() => { + return failedTestData.value.mappedTitleParts + .filter((item) => item.type === 'MIDDLE') + .map((item) => item.text) + .join(' > ') +}) +