Skip to content

Commit

Permalink
feat: support positionals in the browser
Browse files Browse the repository at this point in the history
  • Loading branch information
@kettanaito
kettanaito committed Apr 12, 2023
1 parent 668156e commit d9d315b
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 28 deletions.
8 changes: 7 additions & 1 deletion playwright.extend.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,13 @@ Date.now = () => __DateNow() + __DateNowOffset;
const messages = new Map()
page.on('console', (message) => {
const prevMessages = messages.get(message.type()) || []
messages.set(message.type(), prevMessages.concat(message.text()))
const text = message
.text()
.replace(
/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
''
)
messages.set(message.type(), prevMessages.concat(text))
})

await use(messages)
Expand Down
43 changes: 29 additions & 14 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,11 @@ export class Logger {
* @example
* logger.debug('no duplicates found, creating a document...')
*/
public debug(message: string): void {
public debug(message: string, ...positionals: Array<unknown>): void {
this.logEntry({
level: 'debug',
message: colors.gray(message),
positionals,
prefix: this.prefix,
colors: {
prefix: 'gray',
Expand All @@ -75,23 +76,26 @@ export class Logger {
* @example
* logger.info('start parsing...')
*/
public info(message: string) {
public info(message: string, ...positionals: Array<unknown>) {
this.logEntry({
level: 'info',
message,
positionals,
prefix: this.prefix,
colors: {
prefix: 'blue',
},
})

const performance = new PerformanceEntry()
return (message: string) => {

return (message: string, ...positionals: Array<unknown>) => {
performance.measure()

this.logEntry({
level: 'info',
message: `${message} ${colors.gray(`${performance.deltaTime}ms`)}`,
positionals,
prefix: this.prefix,
colors: {
prefix: 'blue',
Expand All @@ -105,10 +109,11 @@ export class Logger {
* @example
* logger.success('successfully created document')
*/
public success(message: string): void {
public success(message: string, ...positionals: Array<unknown>): void {
this.logEntry({
level: 'info',
message,
positionals,
prefix: `✔ ${this.prefix}`,
colors: {
timestamp: 'green',
Expand All @@ -122,10 +127,11 @@ export class Logger {
* @example
* logger.warning('found legacy document format')
*/
public warning(message: string): void {
public warning(message: string, ...positionals: Array<unknown>): void {
this.logEntry({
level: 'warning',
message,
positionals,
prefix: `⚠ ${this.prefix}`,
colors: {
timestamp: 'yellow',
Expand All @@ -139,10 +145,11 @@ export class Logger {
* @example
* logger.error('something went wrong')
*/
public error(message: string): void {
public error(message: string, ...positionals: Array<unknown>): void {
this.logEntry({
level: 'error',
message,
positionals,
prefix: `✖ ${this.prefix}`,
colors: {
timestamp: 'red',
Expand Down Expand Up @@ -175,14 +182,21 @@ export class Logger {
private logEntry(args: {
level: LogLevel
message: string
positionals?: Array<unknown>
prefix?: string
colors?: {
timestamp?: LogColors
prefix?: LogColors
message?: LogColors
}
}): void {
const { level, message, prefix, colors: customColors } = args
const {
level,
message,
prefix,
colors: customColors,
positionals = [],
} = args
const entry = this.createEntry(level, message)
const timestampColor = customColors?.timestamp || 'gray'
const prefixColor = customColors?.prefix || 'gray'
Expand All @@ -197,7 +211,8 @@ export class Logger {
[colorize.timestamp(this.formatTimestamp(entry.timestamp))]
.concat(prefix != null ? colorize.prefix(prefix) : [])
.concat(message)
.join(' ')
.join(' '),
...positionals
)
}

Expand Down Expand Up @@ -242,31 +257,31 @@ class PerformanceEntry {

const noop = () => void 0

function log(message: string): void {
function log(message: string, ...positionals: Array<unknown>): void {
if (IS_NODE) {
process.stdout.write(message + '\n')
return
}

console.log(message)
console.log(message, ...positionals)
}

function warn(message: string): void {
function warn(message: string, ...positionals: Array<unknown>): void {
if (IS_NODE) {
process.stderr.write(message + '\n')
return
}

console.warn(message)
console.warn(message, ...positionals)
}

function error(message: string): void {
function error(message: string, ...positionals: Array<unknown>): void {
if (IS_NODE) {
process.stderr.write(message + '\n')
return
}

console.error(message)
console.error(message, ...positionals)
}

/**
Expand Down
63 changes: 50 additions & 13 deletions test/browser/Logger.browser.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { Page } from '@playwright/test'
import { WebpackHttpServer } from 'webpack-http-server'
import { test, expect } from '../../playwright.extend'
import { Logger as LoggerClass } from '../../src'
import * as colors from '../../src/colors'

declare namespace window {
export const Logger: typeof LoggerClass
Expand Down Expand Up @@ -51,9 +50,9 @@ test('prints info messages', async ({ page, consoleMessages }) => {
})

expect(consoleMessages.get('log')).toEqual([
`${colors.gray('12:34:56:789')} ${colors.blue('[test]')} first`,
`${colors.gray('12:34:56:789')} ${colors.blue('[test]')} second`,
`${colors.gray('12:34:56:789')} ${colors.blue('[test]')} third`,
`12:34:56:789 [test] first`,
`12:34:56:789 [test] second`,
`12:34:56:789 [test] third`,
])
})

Expand All @@ -70,9 +69,9 @@ test('prints success messages', async ({ page, consoleMessages }) => {
})

expect(consoleMessages.get('log')).toEqual([
`${colors.green('12:34:56:789')} ${colors.green('✔ [test]')} first`,
`${colors.green('12:34:56:789')} ${colors.green('✔ [test]')} second`,
`${colors.green('12:34:56:789')} ${colors.green('✔ [test]')} third`,
`12:34:56:789 ✔ [test] first`,
`12:34:56:789 ✔ [test] second`,
`12:34:56:789 ✔ [test] third`,
])
})

Expand All @@ -87,9 +86,7 @@ test('prints warning messages', async ({ page, consoleMessages }) => {
})

expect(consoleMessages.get('warning')).toEqual([
`${colors.yellow('12:34:56:789')} ${colors.yellow(
'⚠ [test]'
)} double-check this`,
`12:34:56:789 ⚠ [test] double-check this`,
])
})

Expand All @@ -104,8 +101,48 @@ test('prints error messages', async ({ page, consoleMessages }) => {
})

expect(consoleMessages.get('error')).toEqual([
`${colors.red('12:34:56:789')} ${colors.red(
'✖ [test]'
)} something went wrong`,
`12:34:56:789 ✖ [test] something went wrong`,
])
})

test('supports positionals', async ({ page, consoleMessages }) => {
await loadRuntime(page)

await page.evaluate(() => {
globalThis.DEBUG = true

const logger = new window.Logger('test')
logger.debug('debug %d ("%s")', 123, 'abc', 'end')
logger.info('info %d ("%s")', 123, 'abc', 'end')
logger.success('success %d ("%s")', 123, 'abc', 'end')
logger.warning('warning %d ("%s")', 123, 'abc', 'end')
logger.error('error %d ("%s")', 123, 'abc', 'end')
})

/**
* @note Playwright doesn't expose the resolved console messages.
* They are correctly printed to the console so asserting the
* arguments is enough.
*/
expect(consoleMessages.get('log')).toEqual(
expect.arrayContaining([`12:34:56:789 [test] debug %d ("%s") 123 abc end`])
)
expect(consoleMessages.get('log')).toEqual(
expect.arrayContaining([`12:34:56:789 [test] info %d ("%s") 123 abc end`])
)
expect(consoleMessages.get('log')).toEqual(
expect.arrayContaining([
`12:34:56:789 ✔ [test] success %d ("%s") 123 abc end`,
])
)
expect(consoleMessages.get('warning')).toEqual(
expect.arrayContaining([
`12:34:56:789 ⚠ [test] warning %d ("%s") 123 abc end`,
])
)
expect(consoleMessages.get('error')).toEqual(
expect.arrayContaining([
`12:34:56:789 ✖ [test] error %d ("%s") 123 abc end`,
])
)
})

0 comments on commit d9d315b

Please sign in to comment.