move prettyprint log into register.js

This commit is contained in:
Joshua 2024-02-05 16:17:41 +01:00
parent f51bcae462
commit 4b96c41056
2 changed files with 108 additions and 108 deletions

View file

@ -1,111 +1,4 @@
// register .snapshot() command // 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() require('../../src/index').register()

View file

@ -2,12 +2,119 @@ const lazy = require("lazy-ass");
const is = require("check-more-types"); const is = require("check-more-types");
const snapshot = require("./snapshot"); 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 = () => { module.exports = () => {
lazy(is.fn(global.before), "Missing global before function"); lazy(is.fn(global.before), "Missing global before function");
lazy(is.fn(global.after), "Missing global after function"); lazy(is.fn(global.after), "Missing global after function");
lazy(is.object(global.Cypress), "Missing Cypress object"); lazy(is.object(global.Cypress), "Missing Cypress object");
Cypress.Commands.add("snapshot", { prevSubject: "optional" }, snapshot); Cypress.Commands.add("snapshot", { prevSubject: "optional" }, snapshot);
Cypress.Commands.add('SNAPSHOT_prettyprint', cyPrint)
return snapshot; return Cypress;
}; };