diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 4bea380..21cb158 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -1,2 +1,111 @@ // register .snapshot() command + +const baseStyles = [ + { + name: 'info', + color: '#cbd5e1', + }, + { + name: 'success', + color: '#10b981', + }, + { + name: 'warning', + color: '#fbbf24', + }, + { + name: 'error', + color: '#dc2626', + }, +] + +/** + * Helper function to convert hex colors to rgb + * @param {string} hex - hex color + * @returns {string} + * + * @example + * // returns "255 255 255" + * hex2rgb("#ffffff") + */ +function hex2rgb(hex) { + const r = parseInt(hex.slice(1, 3), 16) + const g = parseInt(hex.slice(3, 5), 16) + const b = parseInt(hex.slice(5, 7), 16) + + return `${r} ${g} ${b}` +} + +baseStyles.forEach((style) => { + createCustomLog(style.name, style.color) +}) + +/** + * Create a custom log + * @param {string} name - Name of the custom log + * @param {string} baseColor - Base color of the custom log in hex format + * + * @example + * // Create a custom log with name "misc" and base color "#9333ea" + * createCustomLog("misc", "#9333ea") + */ +export function createCustomLog(name, baseColor) { + if (!name || !baseColor) { + throw new Error('Missing parameters') + } + + const logStyle = document.createElement('style') + + logStyle.textContent = ` + .command.command-name-log-${name} span.command-method { + margin-right: 0.5rem; + min-width: 10px; + border-radius: 0.125rem; + border-width: 1px; + padding-left: 0.375rem; + padding-right: 0.375rem; + padding-top: 0.125rem; + padding-bottom: 0.125rem; + text-transform: uppercase; + + border-color: rgb(${hex2rgb(baseColor)} / 1); + background-color: rgb(${hex2rgb(baseColor)} / 0.2); + color: rgb(${hex2rgb(baseColor)} / 1) !important; + } + + .command.command-name-log-${name} span.command-message{ + color: rgb(${hex2rgb(baseColor)} / 1); + font-weight: normal; + } + + .command.command-name-log-${name} span.command-message strong, + .command.command-name-log-${name} span.command-message em { + color: rgb(${hex2rgb(baseColor)} / 1); + } + ` + + Cypress.$(window.top.document.head).append(logStyle) +} + +/** + * Print a message with a formatted style + * @param {Object} log - The message to be printed. + * @param {string} log.title - The title of the message. + * @param {string} log.message - The content of the message. + * @param {('info' | 'warning' | 'error' | 'success')} log.type - The type of the message. + * + * @example + * // Print a message with a formatted style e.g. success + * cy.print({ title: 'foo', message: 'bar', type: 'success' }) + */ +function cyPrint({ title, message, type }) { + Cypress.log({ + name: `log-${type}`, + displayName: `${title}`, + message, + }) +} + +Cypress.Commands.add('SNAPSHOT_prettyprint', cyPrint) + require('../../src/index').register()