|
| 1 | +/// <reference types="cypress" /> |
| 2 | + |
| 3 | +import { |
| 4 | + ensureTwoDNetworkView, |
| 5 | + openGlobalStylingTab, |
| 6 | + visitAppAndAcceptEula, |
| 7 | +} from '../../../support/journey-helpers'; |
| 8 | +import { byTestId, testIds } from '../../../support/selectors'; |
| 9 | + |
| 10 | +type WinWithCy = Window & { |
| 11 | + commonService?: any; |
| 12 | + cytoscapeInstance?: any; |
| 13 | +}; |
| 14 | + |
| 15 | +type LinkColorTableRow = { |
| 16 | + value: string; |
| 17 | + label: string; |
| 18 | + count: number; |
| 19 | + colorHex: string; |
| 20 | + colorRgb: string; |
| 21 | +}; |
| 22 | + |
| 23 | +const contactTypeField = 'Contact type'; |
| 24 | +const emptyValueKey = 'null'; |
| 25 | + |
| 26 | +const normalizeColor = (value: string): string => String(value || '').replace(/\s+/g, '').toLowerCase(); |
| 27 | + |
| 28 | +const hexToRgbString = (hex: string): string => { |
| 29 | + const normalized = String(hex || '').replace('#', ''); |
| 30 | + const expanded = normalized.length === 3 |
| 31 | + ? normalized.split('').map((char) => `${char}${char}`).join('') |
| 32 | + : normalized; |
| 33 | + |
| 34 | + const red = parseInt(expanded.slice(0, 2), 16); |
| 35 | + const green = parseInt(expanded.slice(2, 4), 16); |
| 36 | + const blue = parseInt(expanded.slice(4, 6), 16); |
| 37 | + |
| 38 | + return `rgb(${red}, ${green}, ${blue})`; |
| 39 | +}; |
| 40 | + |
| 41 | +const normalizeCssColor = (value: string): string => { |
| 42 | + const normalized = normalizeColor(value); |
| 43 | + |
| 44 | + if (/^#[0-9a-f]{6}$/.test(normalized) || /^#[0-9a-f]{3}$/.test(normalized)) { |
| 45 | + return normalizeColor(hexToRgbString(normalized)); |
| 46 | + } |
| 47 | + |
| 48 | + return normalized; |
| 49 | +}; |
| 50 | + |
| 51 | +const normalizeContactTypeValue = (value: unknown): string => { |
| 52 | + if (value === undefined || value === null) { |
| 53 | + return emptyValueKey; |
| 54 | + } |
| 55 | + |
| 56 | + if (typeof value === 'number' && Number.isNaN(value)) { |
| 57 | + return emptyValueKey; |
| 58 | + } |
| 59 | + |
| 60 | + if (typeof value === 'string') { |
| 61 | + const trimmedValue = value.trim().toLowerCase(); |
| 62 | + if (trimmedValue === '' || trimmedValue === 'nan') { |
| 63 | + return emptyValueKey; |
| 64 | + } |
| 65 | + } |
| 66 | + |
| 67 | + return String(value); |
| 68 | +}; |
| 69 | + |
| 70 | +const selectPrimeOption = (selector: string, label: string): void => { |
| 71 | + cy.get(selector).click({ force: true }); |
| 72 | + cy.contains('li[role="option"]', label, { timeout: 15000 }).click({ force: true }); |
| 73 | +}; |
| 74 | + |
| 75 | +const closeSampleDatasetOverlay = (): void => { |
| 76 | + cy.get(byTestId(testIds.appSampleDatasetButton), { timeout: 120000 }) |
| 77 | + .should('be.visible') |
| 78 | + .click({ force: true }); |
| 79 | + |
| 80 | + cy.get('#overlay', { timeout: 15000 }).should('not.be.visible'); |
| 81 | +}; |
| 82 | + |
| 83 | +const readLinkColorTableRows = ($table: JQuery<HTMLElement>): LinkColorTableRow[] => { |
| 84 | + const rows: LinkColorTableRow[] = []; |
| 85 | + |
| 86 | + $table.find('tr').each((index, row) => { |
| 87 | + if (index === 0) return; |
| 88 | + |
| 89 | + const $row = Cypress.$(row); |
| 90 | + const $valueCell = $row.find('td[data-value]').first(); |
| 91 | + const value = String($valueCell.attr('data-value') || ''); |
| 92 | + if (!value) return; |
| 93 | + |
| 94 | + const countText = String($row.find('td.tableCount').first().text() || '').trim(); |
| 95 | + const count = Number(countText.replace(/,/g, '')); |
| 96 | + const colorHex = String($row.find('input[type="color"]').first().val() || '').toLowerCase(); |
| 97 | + |
| 98 | + expect(countText, `count text for ${value}`).not.to.equal(''); |
| 99 | + expect(countText, `count text for ${value}`).not.to.equal('NaN'); |
| 100 | + expect(Number.isFinite(count), `numeric count for ${value}`).to.equal(true); |
| 101 | + expect(colorHex, `table color for ${value}`).to.match(/^#[0-9a-f]{6}$/); |
| 102 | + |
| 103 | + rows.push({ |
| 104 | + value, |
| 105 | + label: String($valueCell.text() || '').trim(), |
| 106 | + count, |
| 107 | + colorHex, |
| 108 | + colorRgb: normalizeCssColor(colorHex), |
| 109 | + }); |
| 110 | + }); |
| 111 | + |
| 112 | + return rows; |
| 113 | +}; |
| 114 | + |
| 115 | +const countVisibleLinksByContactType = (cyInstance: any): Record<string, number> => { |
| 116 | + const counts: Record<string, number> = {}; |
| 117 | + |
| 118 | + cyInstance.edges(':visible').forEach((edge: any) => { |
| 119 | + const value = normalizeContactTypeValue(edge.data(contactTypeField)); |
| 120 | + counts[value] = (counts[value] || 0) + 1; |
| 121 | + }); |
| 122 | + |
| 123 | + return counts; |
| 124 | +}; |
| 125 | + |
| 126 | +const assignedLinkColorsByContactType = (cyInstance: any): Record<string, string[]> => { |
| 127 | + const colorsByValue: Record<string, string[]> = {}; |
| 128 | + |
| 129 | + cyInstance.edges(':visible').forEach((edge: any) => { |
| 130 | + const value = normalizeContactTypeValue(edge.data(contactTypeField)); |
| 131 | + if (!colorsByValue[value]) { |
| 132 | + colorsByValue[value] = []; |
| 133 | + } |
| 134 | + |
| 135 | + colorsByValue[value].push(normalizeCssColor(String(edge.data('lineColor') || ''))); |
| 136 | + }); |
| 137 | + |
| 138 | + return colorsByValue; |
| 139 | +}; |
| 140 | + |
| 141 | +const closeGlobalSettingsIfVisible = (): void => { |
| 142 | + cy.get('body').then(($body) => { |
| 143 | + const hasVisibleGlobalSettings = |
| 144 | + $body.find('.p-dialog:visible .p-dialog-title:contains("Global Settings")').length > 0; |
| 145 | + |
| 146 | + if (hasVisibleGlobalSettings) { |
| 147 | + cy.closeGlobalSettings(); |
| 148 | + } |
| 149 | + }); |
| 150 | +}; |
| 151 | + |
| 152 | +describe('Journey Flow - Default contact-type link colors', () => { |
| 153 | + afterEach(() => { |
| 154 | + closeGlobalSettingsIfVisible(); |
| 155 | + }); |
| 156 | + |
| 157 | + it('counts and colors Contact type links, including the empty bucket', () => { |
| 158 | + visitAppAndAcceptEula({ skipDemoSession: false }); |
| 159 | + ensureTwoDNetworkView(); |
| 160 | + |
| 161 | + cy.window({ timeout: 120000 }).should((win: unknown) => { |
| 162 | + const typedWindow = win as WinWithCy; |
| 163 | + expect(typedWindow.commonService?.session?.data?.links?.length || 0, 'default links loaded') |
| 164 | + .to.be.greaterThan(0); |
| 165 | + expect(typedWindow.cytoscapeInstance?.edges?.().length || 0, '2D edges rendered') |
| 166 | + .to.be.greaterThan(0); |
| 167 | + }); |
| 168 | + |
| 169 | + closeSampleDatasetOverlay(); |
| 170 | + |
| 171 | + openGlobalStylingTab(); |
| 172 | + selectPrimeOption('#link-tooltip-variable', contactTypeField); |
| 173 | + |
| 174 | + cy.window().its('commonService.session.style.widgets.link-color-variable') |
| 175 | + .should('equal', contactTypeField); |
| 176 | + cy.get('#key-tables-link-table', { timeout: 15000 }).should('be.visible'); |
| 177 | + |
| 178 | + cy.window({ timeout: 15000 }).should((win: unknown) => { |
| 179 | + const typedWindow = win as WinWithCy; |
| 180 | + const cyInstance = typedWindow.cytoscapeInstance; |
| 181 | + |
| 182 | + expect(cyInstance, 'cytoscapeInstance').to.exist; |
| 183 | + |
| 184 | + const expectedCounts = countVisibleLinksByContactType(cyInstance); |
| 185 | + const assignedColors = assignedLinkColorsByContactType(cyInstance); |
| 186 | + const $table = Cypress.$('#key-tables-link-table'); |
| 187 | + |
| 188 | + expect($table.length, 'link color table exists').to.equal(1); |
| 189 | + expect($table.is(':visible'), 'link color table visible').to.equal(true); |
| 190 | + |
| 191 | + const rows = readLinkColorTableRows($table); |
| 192 | + const tableValues = rows.map((row) => row.value).sort(); |
| 193 | + const expectedValues = Object.keys(expectedCounts).sort(); |
| 194 | + |
| 195 | + expect(tableValues, 'link color table categories').to.deep.equal(expectedValues); |
| 196 | + |
| 197 | + const emptyRow = rows.find((row) => row.value === emptyValueKey); |
| 198 | + expect(emptyRow, '(Empty) link color row').to.exist; |
| 199 | + expect(emptyRow!.label, '(Empty) row label').to.equal('(Empty)'); |
| 200 | + expect(emptyRow!.count, '(Empty) row count').to.equal(expectedCounts[emptyValueKey]); |
| 201 | + expect(emptyRow!.count, '(Empty) row count is visible').to.be.greaterThan(0); |
| 202 | + |
| 203 | + const uniqueTableColors = new Set(rows.map((row) => row.colorHex)); |
| 204 | + expect(uniqueTableColors.size, 'unique contact type table colors').to.equal(rows.length); |
| 205 | + |
| 206 | + rows.forEach((row) => { |
| 207 | + expect(row.count, `table count for ${row.value}`).to.equal(expectedCounts[row.value]); |
| 208 | + |
| 209 | + const uniqueAssignedColors = [...new Set(assignedColors[row.value] || [])]; |
| 210 | + expect(uniqueAssignedColors, `assigned render colors for ${row.value}`).to.have.length(1); |
| 211 | + expect(uniqueAssignedColors[0], `assigned render color matches table for ${row.value}`) |
| 212 | + .to.equal(row.colorRgb); |
| 213 | + }); |
| 214 | + }); |
| 215 | + }); |
| 216 | +}); |
0 commit comments