diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 21cb158..887788f 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -1,111 +1,4 @@ // 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() diff --git a/src/register.js b/src/register.js index e1b1fa0..8a77604 100644 --- a/src/register.js +++ b/src/register.js @@ -2,12 +2,119 @@ const lazy = require("lazy-ass"); const is = require("check-more-types"); const snapshot = require("./snapshot"); +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, + }) +} + module.exports = () => { lazy(is.fn(global.before), "Missing global before function"); lazy(is.fn(global.after), "Missing global after function"); lazy(is.object(global.Cypress), "Missing Cypress object"); Cypress.Commands.add("snapshot", { prevSubject: "optional" }, snapshot); + Cypress.Commands.add('SNAPSHOT_prettyprint', cyPrint) - return snapshot; + return Cypress; };