mirror of
https://github.com/datashard/snapshot.git
synced 2024-10-05 03:09:10 +00:00
move prettyprint log into register.js
This commit is contained in:
Joshua
parent
f51bcae462
commit
4b96c41056
2 changed files with 108 additions and 108 deletions
|
|
@ -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()
|
||||
|
|
|
|||
109
src/register.js
109
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;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue