| 6dd74de | | | 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ |
| 6dd74de | | | 2 | import { Buffer } from 'buffer'; |
| 6dd74de | | | 3 | import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js'; |
| 6dd74de | | | 4 | |
| 6dd74de | | | 5 | interface CypressConfig { |
| 6dd74de | | | 6 | listUrl?: boolean; |
| 6dd74de | | | 7 | listId?: string; |
| 6dd74de | | | 8 | name?: string; |
| 6dd74de | | | 9 | screenshot?: boolean; |
| 6dd74de | | | 10 | } |
| 6dd74de | | | 11 | type CypressMermaidConfig = MermaidConfig & CypressConfig; |
| 6dd74de | | | 12 | |
| 6dd74de | | | 13 | interface CodeObject { |
| 6dd74de | | | 14 | code: string | string[]; |
| 6dd74de | | | 15 | mermaid: CypressMermaidConfig; |
| 6dd74de | | | 16 | } |
| 6dd74de | | | 17 | |
| 6dd74de | | | 18 | export const utf8ToB64 = (str: string): string => { |
| 6dd74de | | | 19 | return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64'); |
| 6dd74de | | | 20 | }; |
| 6dd74de | | | 21 | |
| 6dd74de | | | 22 | const batchId: string = |
| 6dd74de | | | 23 | 'mermaid-batch-' + |
| 6dd74de | | | 24 | (Cypress.env('useAppli') |
| 6dd74de | | | 25 | ? Date.now().toString() |
| 6dd74de | | | 26 | : (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString())); |
| 6dd74de | | | 27 | |
| 6dd74de | | | 28 | export const mermaidUrl = ( |
| 6dd74de | | | 29 | graphStr: string | string[], |
| 6dd74de | | | 30 | options: CypressMermaidConfig, |
| 6dd74de | | | 31 | api: boolean |
| 6dd74de | | | 32 | ): string => { |
| 6dd74de | | | 33 | options.handDrawnSeed = 1; |
| 6dd74de | | | 34 | const codeObject: CodeObject = { |
| 6dd74de | | | 35 | code: graphStr, |
| 6dd74de | | | 36 | mermaid: options, |
| 6dd74de | | | 37 | }; |
| 6dd74de | | | 38 | const objStr: string = JSON.stringify(codeObject); |
| 6dd74de | | | 39 | let url = `/e2e.html?graph=${utf8ToB64(objStr)}`; |
| 6dd74de | | | 40 | if (api && typeof graphStr === 'string') { |
| 6dd74de | | | 41 | url = `/xss.html?graph=${graphStr}`; |
| 6dd74de | | | 42 | } |
| 6dd74de | | | 43 | |
| 6dd74de | | | 44 | if (options.listUrl) { |
| 6dd74de | | | 45 | cy.log(options.listId, ' ', url); |
| 6dd74de | | | 46 | } |
| 6dd74de | | | 47 | |
| 6dd74de | | | 48 | return url; |
| 6dd74de | | | 49 | }; |
| 6dd74de | | | 50 | |
| 6dd74de | | | 51 | export const imgSnapshotTest = ( |
| 6dd74de | | | 52 | graphStr: string, |
| 6dd74de | | | 53 | _options: CypressMermaidConfig = {}, |
| 6dd74de | | | 54 | api = false, |
| 6dd74de | | | 55 | validation?: any |
| 6dd74de | | | 56 | ): void => { |
| 6dd74de | | | 57 | const options: CypressMermaidConfig = { |
| 6dd74de | | | 58 | ..._options, |
| 6dd74de | | | 59 | fontFamily: _options.fontFamily ?? 'courier', |
| 6dd74de | | | 60 | // @ts-ignore TODO: Fix type of fontSize |
| 6dd74de | | | 61 | fontSize: _options.fontSize ?? '16px', |
| 6dd74de | | | 62 | sequence: { |
| 6dd74de | | | 63 | ...(_options.sequence ?? {}), |
| 6dd74de | | | 64 | actorFontFamily: 'courier', |
| 6dd74de | | | 65 | noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier', |
| 6dd74de | | | 66 | messageFontFamily: 'courier', |
| 6dd74de | | | 67 | }, |
| 6dd74de | | | 68 | }; |
| 6dd74de | | | 69 | |
| 6dd74de | | | 70 | const url: string = mermaidUrl(graphStr, options, api); |
| 6dd74de | | | 71 | openURLAndVerifyRendering(url, options, validation); |
| 6dd74de | | | 72 | }; |
| 6dd74de | | | 73 | |
| 6dd74de | | | 74 | export const urlSnapshotTest = ( |
| 6dd74de | | | 75 | url: string, |
| 6dd74de | | | 76 | options: CypressMermaidConfig = {}, |
| 6dd74de | | | 77 | _api = false, |
| 6dd74de | | | 78 | validation?: any |
| 6dd74de | | | 79 | ): void => { |
| 6dd74de | | | 80 | openURLAndVerifyRendering(url, options, validation); |
| 6dd74de | | | 81 | }; |
| 6dd74de | | | 82 | |
| 6dd74de | | | 83 | export const renderGraph = ( |
| 6dd74de | | | 84 | graphStr: string | string[], |
| 6dd74de | | | 85 | options: CypressMermaidConfig = {}, |
| 6dd74de | | | 86 | api = false |
| 6dd74de | | | 87 | ): void => { |
| 6dd74de | | | 88 | const url: string = mermaidUrl(graphStr, options, api); |
| 6dd74de | | | 89 | openURLAndVerifyRendering(url, options); |
| 6dd74de | | | 90 | }; |
| 6dd74de | | | 91 | |
| 6dd74de | | | 92 | export const openURLAndVerifyRendering = ( |
| 6dd74de | | | 93 | url: string, |
| 6dd74de | | | 94 | { screenshot = true, ...options }: CypressMermaidConfig, |
| 6dd74de | | | 95 | validation?: any |
| 6dd74de | | | 96 | ): void => { |
| 6dd74de | | | 97 | const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); |
| 6dd74de | | | 98 | |
| 6dd74de | | | 99 | cy.visit(url); |
| 6dd74de | | | 100 | cy.window().should('have.property', 'rendered', true); |
| 6dd74de | | | 101 | |
| 6dd74de | | | 102 | // Handle sandbox mode where SVG is inside an iframe |
| 6dd74de | | | 103 | if (options.securityLevel === 'sandbox') { |
| 6dd74de | | | 104 | cy.get('iframe').should('be.visible'); |
| 6dd74de | | | 105 | if (validation) { |
| 6dd74de | | | 106 | cy.get('iframe').should(validation); |
| 6dd74de | | | 107 | } |
| 6dd74de | | | 108 | } else { |
| 6dd74de | | | 109 | cy.get('svg').should('be.visible'); |
| 6dd74de | | | 110 | // cspell:ignore viewbox |
| 6dd74de | | | 111 | cy.get('svg').should('not.have.attr', 'viewbox'); |
| 6dd74de | | | 112 | |
| 6dd74de | | | 113 | if (validation) { |
| 6dd74de | | | 114 | cy.get('svg').should(validation); |
| 6dd74de | | | 115 | } |
| 6dd74de | | | 116 | } |
| 6dd74de | | | 117 | |
| 6dd74de | | | 118 | if (screenshot) { |
| 6dd74de | | | 119 | verifyScreenshot(name); |
| 6dd74de | | | 120 | } |
| 6dd74de | | | 121 | }; |
| 6dd74de | | | 122 | |
| 6dd74de | | | 123 | export const verifyScreenshot = (name: string): void => { |
| 6dd74de | | | 124 | const useAppli: boolean = Cypress.env('useAppli'); |
| 6dd74de | | | 125 | const useArgos: boolean = Cypress.env('useArgos'); |
| 6dd74de | | | 126 | |
| 6dd74de | | | 127 | if (useAppli) { |
| 6dd74de | | | 128 | cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`); |
| 6dd74de | | | 129 | cy.eyesOpen({ |
| 6dd74de | | | 130 | appName: 'Mermaid', |
| 6dd74de | | | 131 | testName: name, |
| 6dd74de | | | 132 | batchName: Cypress.spec.name, |
| 6dd74de | | | 133 | batchId: batchId + Cypress.spec.name, |
| 6dd74de | | | 134 | }); |
| 6dd74de | | | 135 | cy.log(`Check eyes ${Cypress.spec.name}`); |
| 6dd74de | | | 136 | cy.eyesCheckWindow('Click!'); |
| 6dd74de | | | 137 | cy.log(`Closing eyes ${Cypress.spec.name}`); |
| 6dd74de | | | 138 | cy.eyesClose(); |
| 6dd74de | | | 139 | } else if (useArgos) { |
| 6dd74de | | | 140 | cy.argosScreenshot(name, { |
| 6dd74de | | | 141 | threshold: 0.01, |
| 6dd74de | | | 142 | }); |
| 6dd74de | | | 143 | } else { |
| 6dd74de | | | 144 | cy.matchImageSnapshot(name); |
| 6dd74de | | | 145 | } |
| 6dd74de | | | 146 | }; |
| 6dd74de | | | 147 | |
| 6dd74de | | | 148 | export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => { |
| 6dd74de | | | 149 | expect(value).to.be.within( |
| 6dd74de | | | 150 | expected * (1 - deltaPercent / 100), |
| 6dd74de | | | 151 | expected * (1 + deltaPercent / 100) |
| 6dd74de | | | 152 | ); |
| 6dd74de | | | 153 | }; |