From 80939413195a3c06858ce9521ac561cba506818c Mon Sep 17 00:00:00 2001 From: Andrew Stacy Date: Wed, 11 Sep 2024 10:37:35 -0400 Subject: [PATCH] test: fixes unit tests checking padding after altering styles --- package-lock.json | 154 ++++++++++++++++++ package.json | 1 + test/filters.test.ts | 14 +- .../pretty/modifiers.browser.test.ts | 38 ++--- .../pretty/terminators.browser.test.ts | 32 ++-- test/mdc.test.ts | 8 +- test/modifiers.test.ts | 4 +- 7 files changed, 203 insertions(+), 48 deletions(-) diff --git a/package-lock.json b/package-lock.json index eb81acac..156990af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@types/eslint__js": "^8.42.3", "@types/eslint-config-prettier": "^6.11.3", "@types/jsdom": "^21.1.7", + "@vitest/ui": "^2.0.5", "@vuepress/bundler-vite": "^2.0.0-rc.7", "@vuepress/plugin-markdown-container": "^2.0.0-rc.42", "@vuepress/theme-default": "^2.0.0-rc.11", @@ -1009,6 +1010,12 @@ "node": ">= 8" } }, + "node_modules/@polka/url": { + "version": "1.0.0-next.25", + "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz", + "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", + "dev": true + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.19.1", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.1.tgz", @@ -1765,6 +1772,54 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/@vitest/ui": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-2.0.5.tgz", + "integrity": "sha512-m+ZpVt/PVi/nbeRKEjdiYeoh0aOfI9zr3Ria9LO7V2PlMETtAXJS3uETEZkc8Be2oOl8mhd7Ew+5SRBXRYncNw==", + "dev": true, + "dependencies": { + "@vitest/utils": "2.0.5", + "fast-glob": "^3.3.2", + "fflate": "^0.8.2", + "flatted": "^3.3.1", + "pathe": "^1.1.2", + "sirv": "^2.0.4", + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "vitest": "2.0.5" + } + }, + "node_modules/@vitest/ui/node_modules/@vitest/pretty-format": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz", + "integrity": "sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==", + "dev": true, + "dependencies": { + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/ui/node_modules/@vitest/utils": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz", + "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==", + "dev": true, + "dependencies": { + "@vitest/pretty-format": "2.0.5", + "estree-walker": "^3.0.3", + "loupe": "^3.1.1", + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, "node_modules/@vitest/utils": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.4.tgz", @@ -6161,6 +6216,15 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/mrmime": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", + "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -7242,6 +7306,20 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/sirv": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz", + "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==", + "dev": true, + "dependencies": { + "@polka/url": "^1.0.0-next.24", + "mrmime": "^2.0.0", + "totalist": "^3.0.0" + }, + "engines": { + "node": ">= 10" + } + }, "node_modules/sitemap": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-8.0.0.tgz", @@ -7656,6 +7734,15 @@ "node": ">=8.0" } }, + "node_modules/totalist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", + "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/tough-cookie": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", @@ -9732,6 +9819,12 @@ "fastq": "^1.6.0" } }, + "@polka/url": { + "version": "1.0.0-next.25", + "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz", + "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", + "dev": true + }, "@rollup/rollup-android-arm-eabi": { "version": "4.19.1", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.1.tgz", @@ -10243,6 +10336,44 @@ "tinyspy": "^3.0.0" } }, + "@vitest/ui": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-2.0.5.tgz", + "integrity": "sha512-m+ZpVt/PVi/nbeRKEjdiYeoh0aOfI9zr3Ria9LO7V2PlMETtAXJS3uETEZkc8Be2oOl8mhd7Ew+5SRBXRYncNw==", + "dev": true, + "requires": { + "@vitest/utils": "2.0.5", + "fast-glob": "^3.3.2", + "fflate": "^0.8.2", + "flatted": "^3.3.1", + "pathe": "^1.1.2", + "sirv": "^2.0.4", + "tinyrainbow": "^1.2.0" + }, + "dependencies": { + "@vitest/pretty-format": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz", + "integrity": "sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==", + "dev": true, + "requires": { + "tinyrainbow": "^1.2.0" + } + }, + "@vitest/utils": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz", + "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==", + "dev": true, + "requires": { + "@vitest/pretty-format": "2.0.5", + "estree-walker": "^3.0.3", + "loupe": "^3.1.1", + "tinyrainbow": "^1.2.0" + } + } + } + }, "@vitest/utils": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.4.tgz", @@ -13353,6 +13484,12 @@ "minimist": "^1.2.6" } }, + "mrmime": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", + "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==", + "dev": true + }, "ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -14055,6 +14192,17 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==" }, + "sirv": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz", + "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==", + "dev": true, + "requires": { + "@polka/url": "^1.0.0-next.24", + "mrmime": "^2.0.0", + "totalist": "^3.0.0" + } + }, "sitemap": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-8.0.0.tgz", @@ -14337,6 +14485,12 @@ "is-number": "^7.0.0" } }, + "totalist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", + "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==", + "dev": true + }, "tough-cookie": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", diff --git a/package.json b/package.json index aa817d59..2fffa233 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "@types/eslint__js": "^8.42.3", "@types/eslint-config-prettier": "^6.11.3", "@types/jsdom": "^21.1.7", + "@vitest/ui": "^2.0.5", "@vuepress/bundler-vite": "^2.0.0-rc.7", "@vuepress/plugin-markdown-container": "^2.0.0-rc.42", "@vuepress/theme-default": "^2.0.0-rc.11", diff --git a/test/filters.test.ts b/test/filters.test.ts index 79b0eb1f..5cb78069 100644 --- a/test/filters.test.ts +++ b/test/filters.test.ts @@ -101,7 +101,7 @@ describe('log filtering', () => { const logLeader = '%c Log'; const logStyle = - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;'; + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;'; expect(console.log).toHaveBeenNthCalledWith(1, logLeader, logStyle, '#bar ', 'Included'); expect(console.log).toHaveBeenCalledTimes(1); @@ -127,7 +127,7 @@ describe('log filtering', () => { const logLeader = '%c Log'; const logStyle = - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;'; + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;'; expect(console.log).toHaveBeenNthCalledWith(1, logLeader, logStyle, '#foo ', 'Included'); expect(console.log).toHaveBeenNthCalledWith(2, logLeader, logStyle, '#baz ', 'Included'); @@ -155,7 +155,7 @@ describe('log filtering', () => { const logLeader = '%c Log'; const logStyle = - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;'; + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;'; expect(console.log).toHaveBeenNthCalledWith(1, logLeader, logStyle, '[bar] ', 'Included'); expect(console.log).toHaveBeenCalledTimes(1); @@ -180,7 +180,7 @@ describe('log filtering', () => { const logLeader = '%c Log'; const logStyle = - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;'; + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;'; expect(console.log).toHaveBeenNthCalledWith(1, logLeader, logStyle, '[foo] ', 'Included'); expect(console.log).toHaveBeenNthCalledWith(2, logLeader, logStyle, '[baz] ', 'Included'); @@ -208,7 +208,7 @@ describe('log filtering', () => { const logLeader = '%c Info'; const logStyle = - 'padding-right: 52px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #d8ebff, #b2d7ff); color: #465464; border-color: #96b5d7;'; + 'padding-right: 44px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #d8ebff, #b2d7ff); color: #465464; border-color: #96b5d7;'; expect(console.info).toHaveBeenNthCalledWith(1, logLeader, logStyle, 'Included'); expect(console.error).not.toHaveBeenCalled(); @@ -238,14 +238,14 @@ describe('log filtering', () => { expect(console.log).toHaveBeenNthCalledWith( 1, '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'Included' ); expect(console.log).toHaveBeenCalledTimes(2); expect(console.error).toHaveBeenNthCalledWith( 1, '%c Alert', - 'padding-right: 26px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fc8585, #fc2323); color: #fff; border-color: #b70101;', + 'padding-right: 24px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fc8585, #fc2323); color: #fff; border-color: #b70101;', 'Included' ); expect(console.info).not.toHaveBeenCalled(); diff --git a/test/formatters/pretty/modifiers.browser.test.ts b/test/formatters/pretty/modifiers.browser.test.ts index ec682902..c6168f07 100644 --- a/test/formatters/pretty/modifiers.browser.test.ts +++ b/test/formatters/pretty/modifiers.browser.test.ts @@ -20,14 +20,14 @@ describe('modifiers with pretty format in the browser', () => { expect(console.log).toHaveBeenNthCalledWith( 1, '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '[timer] ', 'Test timer.' ); expect(console.log).toHaveBeenNthCalledWith( 2, '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '[timer] (Time elapsed: 0s 0ms)', 'Test timer.' ); @@ -41,7 +41,7 @@ describe('modifiers with pretty format in the browser', () => { expect(console.log).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '[timer] (Time elapsed: 0s 0ms)', 'Test timer.' ); @@ -59,7 +59,7 @@ describe('modifiers with pretty format in the browser', () => { expect(console.log).toHaveBeenNthCalledWith( i, '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', `[counter] (Count: ${i}) `, 'Counting log.' ); @@ -77,7 +77,7 @@ describe('modifiers with pretty format in the browser', () => { expect(console.log).toHaveBeenNthCalledWith( 6, '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '[counter] ', 'Clearing count.' ); @@ -94,7 +94,7 @@ describe('modifiers with pretty format in the browser', () => { expect(console.log).toHaveBeenNthCalledWith( 6, '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '[counter] (Count: 0) ', 'Resetting count.' ); @@ -128,7 +128,7 @@ describe('modifiers with pretty format in the browser', () => { adze.group.log('Grouping logs.'); expect(console.group).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'Grouping logs.' ); }); @@ -138,7 +138,7 @@ describe('modifiers with pretty format in the browser', () => { adze.groupCollapsed.log('Grouping logs.'); expect(console.groupCollapsed).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'Grouping logs.' ); }); @@ -148,7 +148,7 @@ describe('modifiers with pretty format in the browser', () => { adze.groupCollapsed.log('Grouping logs.'); expect(console.groupCollapsed).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'Grouping logs.' ); }); @@ -160,7 +160,7 @@ describe('modifiers with pretty format in the browser', () => { adze.groupEnd.log(); expect(console.group).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'Grouping logs.' ); expect(console.groupEnd).toHaveBeenCalled(); @@ -171,7 +171,7 @@ describe('modifiers with pretty format in the browser', () => { adze.label('test').log('Test log.'); expect(console.log).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '[test] ', 'Test log.' ); @@ -182,7 +182,7 @@ describe('modifiers with pretty format in the browser', () => { adze.namespace('foo', 'bar').log('Test log.'); expect(console.log).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '#foo #bar ', 'Test log.' ); @@ -193,7 +193,7 @@ describe('modifiers with pretty format in the browser', () => { adze.ns('foo', 'bar').log('Test log.'); expect(console.log).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '#foo #bar ', 'Test log.' ); @@ -205,7 +205,7 @@ describe('modifiers with pretty format in the browser', () => { adze.if(2 === 2).log('Test log.'); expect(console.log).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'Expression passed:', 'Test log.' ); @@ -218,7 +218,7 @@ describe('modifiers with pretty format in the browser', () => { expect(console.log).toHaveBeenCalledWith( '%c🪵 %c Log', 'font-size: 12px;', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '✅ Expression passed:', 'Test log.' ); @@ -231,7 +231,7 @@ describe('modifiers with pretty format in the browser', () => { adze.assert(2 === 3).log('Test log.'); expect(console.log).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'Assertion failed:', 'Test log.' ); @@ -245,7 +245,7 @@ describe('modifiers with pretty format in the browser', () => { expect(console.log).toHaveBeenCalledWith( '%c🪵 %c Log', 'font-size: 12px;', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '❌ Assertion failed:', 'Test log.' ); @@ -259,7 +259,7 @@ describe('modifiers with pretty format in the browser', () => { adze.timestamp.log('Test log.'); expect(console.log).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '2024-08-03T16:37:11-04:00 ', 'Test log.' ); @@ -272,7 +272,7 @@ describe('modifiers with pretty format in the browser', () => { if (log.data) { expect(log.data.message[0]).toBe('%c Log'); expect(log.data.message[1]).toBe( - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;' + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;' ); expect(log.data.message[2]).toBe('Test log.'); expect(log.data.stacktrace).toBeTruthy(); diff --git a/test/formatters/pretty/terminators.browser.test.ts b/test/formatters/pretty/terminators.browser.test.ts index 215db506..ffc4da3a 100644 --- a/test/formatters/pretty/terminators.browser.test.ts +++ b/test/formatters/pretty/terminators.browser.test.ts @@ -15,7 +15,7 @@ describe('terminators with pretty format in the browser', () => { adze.alert('This is an alert log.'); expect(console.error).toHaveBeenCalledWith( '%c Alert', - 'padding-right: 26px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fc8585, #fc2323); color: #fff; border-color: #b70101;', + 'padding-right: 24px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fc8585, #fc2323); color: #fff; border-color: #b70101;', 'This is an alert log.' ); }); @@ -25,7 +25,7 @@ describe('terminators with pretty format in the browser', () => { adze.error('This is an error log.'); expect(console.error).toHaveBeenCalledWith( '%c Error', - 'padding-right: 26px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fff, #ffd1d1); color: #a4000f; border-color: #e3bbbb;', + 'padding-right: 24px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fff, #ffd1d1); color: #a4000f; border-color: #e3bbbb;', 'This is an error log.' ); }); @@ -35,7 +35,7 @@ describe('terminators with pretty format in the browser', () => { adze.warn('This is a warn log.'); expect(console.warn).toHaveBeenCalledWith( '%c Warn', - 'font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fff, #fff0a8); color: #715100; border-color: #e3d696; padding-right: 44px;', + 'font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fff, #fff0a8); color: #715100; border-color: #e3d696; padding-right: 30px;', 'This is a warn log.' ); }); @@ -45,7 +45,7 @@ describe('terminators with pretty format in the browser', () => { adze.info('This is an info log.'); expect(console.info).toHaveBeenCalledWith( '%c Info', - 'padding-right: 52px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #d8ebff, #b2d7ff); color: #465464; border-color: #96b5d7;', + 'padding-right: 44px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #d8ebff, #b2d7ff); color: #465464; border-color: #96b5d7;', 'This is an info log.' ); }); @@ -65,7 +65,7 @@ describe('terminators with pretty format in the browser', () => { adze.success('This is a success log.'); expect(console.info).toHaveBeenCalledWith( '%c Success', - 'font-size: 12px; border-radius: 4px; padding-right: 30px; background: linear-gradient(to right, #e6f6e4, #ceedc9); color: #4e594d; border-color: #b7d1b3;', + 'font-size: 12px; border-radius: 4px; padding-right: 22px; background: linear-gradient(to right, #e6f6e4, #ceedc9); color: #4e594d; border-color: #b7d1b3;', 'This is a success log.' ); }); @@ -76,7 +76,7 @@ describe('terminators with pretty format in the browser', () => { adze.log('This is a log log.'); expect(console.log).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'This is a log log.' ); }); @@ -87,7 +87,7 @@ describe('terminators with pretty format in the browser', () => { adze.debug('This is a debug log.'); expect(console.debug).toHaveBeenCalledWith( '%c Debug', - 'font-size: 12px; padding-right: 44px; border-right: 1px solid #d9dce0; color: #465464; border-color: #999999;', + 'font-size: 12px; padding-right: 36px; border-right: 1px solid #d9dce0; color: #465464; border-color: #999999;', 'This is a debug log.' ); }); @@ -98,7 +98,7 @@ describe('terminators with pretty format in the browser', () => { adze.verbose('This is a verbose log.'); expect(console.debug).toHaveBeenCalledWith( '%c Verbose', - 'font-size: 12px; padding-right: 31px; color: #999999;', + 'font-size: 12px; padding-right: 22px; color: #999999;', 'This is a verbose log.' ); }); @@ -136,7 +136,7 @@ describe('terminators with emoji', () => { expect(console.error).toHaveBeenCalledWith( '%c🚨 %c Alert', 'font-size: 12px;', - 'padding-right: 26px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fc8585, #fc2323); color: #fff; border-color: #b70101;', + 'padding-right: 24px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fc8585, #fc2323); color: #fff; border-color: #b70101;', 'This is an alert log.' ); }); @@ -147,7 +147,7 @@ describe('terminators with emoji', () => { expect(console.error).toHaveBeenCalledWith( '%c🔥 %c Error', 'font-size: 12px;', - 'padding-right: 26px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fff, #ffd1d1); color: #a4000f; border-color: #e3bbbb;', + 'padding-right: 24px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fff, #ffd1d1); color: #a4000f; border-color: #e3bbbb;', 'This is an error log.' ); }); @@ -158,7 +158,7 @@ describe('terminators with emoji', () => { expect(console.warn).toHaveBeenCalledWith( '%c🔔 %c Warn', 'font-size: 12px;', - 'font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fff, #fff0a8); color: #715100; border-color: #e3d696; padding-right: 44px;', + 'font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #fff, #fff0a8); color: #715100; border-color: #e3d696; padding-right: 30px;', 'This is a warn log.' ); }); @@ -169,7 +169,7 @@ describe('terminators with emoji', () => { expect(console.info).toHaveBeenCalledWith( '%cℹ️ %c Info', 'font-size: 12px;', - 'padding-right: 52px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #d8ebff, #b2d7ff); color: #465464; border-color: #96b5d7;', + 'padding-right: 44px; font-size: 12px; border-radius: 4px; background: linear-gradient(to right, #d8ebff, #b2d7ff); color: #465464; border-color: #96b5d7;', 'This is an info log.' ); }); @@ -191,7 +191,7 @@ describe('terminators with emoji', () => { expect(console.info).toHaveBeenCalledWith( '%c🎉 %c Success', 'font-size: 12px;', - 'font-size: 12px; border-radius: 4px; padding-right: 30px; background: linear-gradient(to right, #e6f6e4, #ceedc9); color: #4e594d; border-color: #b7d1b3;', + 'font-size: 12px; border-radius: 4px; padding-right: 22px; background: linear-gradient(to right, #e6f6e4, #ceedc9); color: #4e594d; border-color: #b7d1b3;', 'This is a success log.' ); }); @@ -202,7 +202,7 @@ describe('terminators with emoji', () => { expect(console.log).toHaveBeenCalledWith( '%c🪵 %c Log', 'font-size: 12px;', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'This is a log log.' ); }); @@ -214,7 +214,7 @@ describe('terminators with emoji', () => { expect(console.debug).toHaveBeenCalledWith( '%c🐞 %c Debug', 'font-size: 12px;', - 'font-size: 12px; padding-right: 44px; border-right: 1px solid #d9dce0; color: #465464; border-color: #999999;', + 'font-size: 12px; padding-right: 36px; border-right: 1px solid #d9dce0; color: #465464; border-color: #999999;', 'This is a debug log.' ); }); @@ -226,7 +226,7 @@ describe('terminators with emoji', () => { expect(console.debug).toHaveBeenCalledWith( '%c💬 %c Verbose', 'font-size: 12px;', - 'font-size: 12px; padding-right: 31px; color: #999999;', + 'font-size: 12px; padding-right: 22px; color: #999999;', 'This is a verbose log.' ); }); diff --git a/test/mdc.test.ts b/test/mdc.test.ts index a437c36f..8e36570f 100644 --- a/test/mdc.test.ts +++ b/test/mdc.test.ts @@ -27,7 +27,7 @@ describe('mapped diagnostic context', () => { adze.label('test').dump.log('This log contains output from MDC thread.'); expect(console.log).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '[test] ', 'This log contains output from MDC thread.', { @@ -57,7 +57,7 @@ describe('mapped diagnostic context', () => { expect(console.log).toHaveBeenNthCalledWith( 1, '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '[test] ', 'This log contains output from MDC thread.', { @@ -70,7 +70,7 @@ describe('mapped diagnostic context', () => { expect(console.log).toHaveBeenNthCalledWith( 2, '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '[test] ', 'This log closes an MDC thread.' ); @@ -78,7 +78,7 @@ describe('mapped diagnostic context', () => { expect(console.log).toHaveBeenNthCalledWith( 3, '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', '[test] ', 'Nothing is dumped.' ); diff --git a/test/modifiers.test.ts b/test/modifiers.test.ts index 2e5f5385..97c2c9ff 100644 --- a/test/modifiers.test.ts +++ b/test/modifiers.test.ts @@ -19,7 +19,7 @@ describe('modifiers with pretty format in the browser', () => { adze.meta({ foo: 'bar' }).log('Test log.'); expect(console.log).toHaveBeenCalledWith( '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'Test log.' ); }); @@ -31,7 +31,7 @@ describe('modifiers with pretty format in the browser', () => { if (log.data) { expect(log.data.message).toStrictEqual([ '%c Log', - 'font-size: 12px; border-radius: 4px; padding-right: 60px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', + 'font-size: 12px; border-radius: 4px; padding-right: 51px; background: linear-gradient(to right, #ecedef, #d9dce0); color: #333435; border-color: #bfc1c5;', 'Test log.', ]); } else {