fix badge style when logo only #10794

LitoMore · 2025-01-09T18:52:10Z

Resolves #10628

It looks like there is no unit test for this. The badges below can used for previewing:

![](https://img.shields.io/badge/-blue?logo=amg)
![](https://img.shields.io/badge/-blue?logo=amg&style=social)
![](https://img.shields.io/badge/-blue?logo=amg&style=plastic)
![](https://img.shields.io/badge/-blue?logo=amg&style=flat-square)
![](https://img.shields.io/badge/-blue?logo=amg&style=for-the-badge)

![](https://img.shields.io/badge/-blue?logo=amg&logoSize=auto)
![](https://img.shields.io/badge/-blue?logo=amg&logoSize=auto&style=social)
![](https://img.shields.io/badge/-blue?logo=amg&logoSize=auto&style=plastic)
![](https://img.shields.io/badge/-blue?logo=amg&logoSize=auto&style=flat-square)
![](https://img.shields.io/badge/-blue?logo=amg&logoSize=auto&style=for-the-badge)

github-actions · 2025-01-09T18:53:18Z

	Messages
📖	✨ Thanks for your contribution to Shields, @LitoMore!

Generated by 🚫 dangerJS against e05753f

badge-maker/lib/badge-renderers.js

github-actions · 2025-01-10T19:39:36Z

🚀 Updated review app: https://pr-10794-badges-shields.fly.dev

badge-maker/lib/badge-renderers.js

chris48s · 2025-01-10T19:53:08Z

Can we add snapshot test cases for this

LitoMore · 2025-01-11T23:45:23Z

@chris48s Where should I add the snapshot test? The badge-maker/lib/make-badge.spec.mjs looks not in the test:package's scope. The test:package only runs .js files.

chris48s · 2025-01-12T10:10:22Z

Oh crap. Good catch. Thanks!
I accidentally broke this in #10732 😞

I've submitted a PR at #10809 fixing this
Lets get that PR in, then we can come back to this ad add tests.

chris48s · 2025-01-18T19:23:04Z

You should be able to finish off the tests on this one now

github-actions · 2025-01-21T19:13:58Z

🚀 Updated review app: https://pr-10794-badges-shields.fly.dev

chris48s · 2025-01-21T19:19:48Z

There's a bug here in the case where there is a message and logo but no label:

example call: https://img.shields.io/badge/just%20the%20message-blue?logo=javascript

master:
this branch:

Note how the end of the message is cut off in the second image.

I think those changes where you're updating the snapshot width

-  width="63"
+  width="49"

are changing because of this bug.

LitoMore · 2025-01-23T08:04:48Z

@chris48s It should be fixed now.

github-actions · 2025-01-23T20:33:25Z

🚀 Updated review app: https://pr-10794-badges-shields.fly.dev

chris48s · 2025-01-23T21:12:32Z

OK, cool. So that's that bug fixed.

So now I'm just having a look over the test cases and the snapshots generated from your tests in a bit more detail.

There's a few things here..

__snapshots__/make-badge.spec.mjs.js

chris48s · 2025-01-23T21:14:30Z

If we zoom back out to the original point of this issue, the thing you're actually trying to change is the case where both label and message are empty string, and that's the thing we'd like to get under test. But that is the one thing you don't seem to have added any test cases for in this PR. Every test case added in this PR has some text in either the label or message field.

We already have existing tests in this file with badges with a logo for each of the 5 styles with text in the label or message so a lot of these are trying to duplicate existing test cases.

I think the only new test cases we actually need to add here to cover the changes you're trying to make are:

{
  label: '',
  message: '',
  format: 'svg',
  logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu',
  style: 'flat',
}

{
  label: '',
  message: '',
  format: 'svg',
  logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu',
  style: 'flat-square',
}

{
  label: '',
  message: '',
  format: 'svg',
  logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu',
  style: 'for-the-badge',
}

{
  label: '',
  message: '',
  format: 'svg',
  logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu',
  style: 'social',
}

{
  label: '',
  message: '',
  format: 'svg',
  logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu',
  style: 'plastic',
}

LitoMore · 2025-01-24T16:59:23Z

@chris48s Updated, thanks for reviewing!

chris48s · 2025-01-24T21:15:30Z

badge-maker/lib/make-badge.spec.mjs

+    it('social badge, logo-only', async function () {
+      await expectBadgeToMatchSnapshot({
+        label: '',
+        message: '',
+        format: 'svg',
+        logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu',
+        style: 'for-the-badge',
+      })
+    })
+
+    it('plastic badge, logo-only', async function () {
+      await expectBadgeToMatchSnapshot({
+        label: '',
+        message: '',
+        format: 'svg',
+        logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu',
+        style: 'for-the-badge',


The style values in the test data and the descriptions of the tests here don't match up.

~~Rather than go through another round of back and forth on this I'm just going to push another commit fixing it so we can get done with this one.~~

OK scratch that. I don't have permission to push to your branch.

Here's a patch to apply:

commit 61c5f021d565f7161c217eb9d20a2166083627e7 Author: chris48s <[email protected]> Date: Fri Jan 24 21:13:42 2025 +0000 align test cases and descriptions diff --git a/__snapshots__/make-badge.spec.mjs.js b/__snapshots__/make-badge.spec.mjs.js index 4c0277862a..861e70e727 100644 --- a/__snapshots__/make-badge.spec.mjs.js +++ b/__snapshots__/make-badge.spec.mjs.js @@ -2624,7 +2624,7 @@ exports['The badge generator badges with logo-only should always produce the sam ` -exports['The badge generator badges with logo-only should always produce the same badge social badge, logo-only 1'] = ` +exports['The badge generator badges with logo-only should always produce the same badge for-the-badge badge, logo-only 1'] = ` <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" @@ -2664,41 +2664,121 @@ exports['The badge generator badges with logo-only should always produce the sam ` +exports['The badge generator badges with logo-only should always produce the same badge social badge, logo-only 1'] = ` +<svg + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="26" + height="20" + role="img" + aria-label="" +> + <title></title> + <style> + a:hover #llink { + fill: url(#b); + stroke: #ccc; + } + a:hover #rlink { + fill: #4183c4; + } + </style> + <linearGradient id="a" x2="0" y2="100%"> + <stop offset="0" stop-color="#fcfcfc" stop-opacity="0" /> + <stop offset="1" stop-opacity=".1" /> + </linearGradient> + <linearGradient id="b" x2="0" y2="100%"> + <stop offset="0" stop-color="#ccc" stop-opacity=".1" /> + <stop offset="1" stop-opacity=".1" /> + </linearGradient> + <g stroke="#d5d5d5"> + <rect + stroke="none" + fill="#fcfcfc" + x="0.5" + y="0.5" + width="25" + height="19" + rx="2" + /> + </g> + <image + x="5" + y="3" + width="14" + height="14" + xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu" + /> + <g + aria-hidden="true" + fill="#333" + text-anchor="middle" + font-family="Helvetica Neue,Helvetica,Arial,sans-serif" + text-rendering="geometricPrecision" + font-weight="700" + font-size="110px" + line-height="14px" + > + <rect + id="llink" + stroke="#d5d5d5" + fill="url(#a)" + x=".5" + y=".5" + width="25" + height="19" + rx="2" + /> + <text + aria-hidden="true" + x="195" + y="150" + fill="#fff" + transform="scale(.1)" + textLength="10" + ></text> + <text x="195" y="140" transform="scale(.1)" textLength="10"></text> + </g> +</svg> + +` + exports['The badge generator badges with logo-only should always produce the same badge plastic badge, logo-only 1'] = ` <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - width="35" - height="28" + width="25" + height="18" role="img" aria-label="" > <title></title> - <g shape-rendering="crispEdges"> - <rect width="35" height="28" fill="#4c1" /> + <linearGradient id="s" x2="0" y2="100%"> + <stop offset="0" stop-color="#fff" stop-opacity=".7" /> + <stop offset=".1" stop-color="#aaa" stop-opacity=".1" /> + <stop offset=".9" stop-color="#000" stop-opacity=".3" /> + <stop offset="1" stop-color="#000" stop-opacity=".5" /> + </linearGradient> + <clipPath id="r"><rect width="25" height="18" rx="4" fill="#fff" /></clipPath> + <g clip-path="url(#r)"> + <rect width="0" height="18" fill="#555" /> + <rect x="0" width="25" height="18" fill="#4c1" /> + <rect width="25" height="18" fill="url(#s)" /> </g> <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" - font-size="100" + font-size="110" > <image - x="9" - y="7" + x="5" + y="2" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu" /> - <text - transform="scale(.1)" - x="230" - y="175" - textLength="0" - fill="#fff" - font-weight="bold" - ></text> </g> </svg> diff --git a/badge-maker/lib/make-badge.spec.mjs b/badge-maker/lib/make-badge.spec.mjs index 933d173dc1..763a87d6d9 100644 --- a/badge-maker/lib/make-badge.spec.mjs +++ b/badge-maker/lib/make-badge.spec.mjs @@ -731,7 +731,7 @@ describe('The badge generator', function () { }) }) - it('social badge, logo-only', async function () { + it('for-the-badge badge, logo-only', async function () { await expectBadgeToMatchSnapshot({ label: '', message: '', @@ -741,13 +741,23 @@ describe('The badge generator', function () { }) }) + it('social badge, logo-only', async function () { + await expectBadgeToMatchSnapshot({ + label: '', + message: '', + format: 'svg', + logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu', + style: 'social', + }) + }) + it('plastic badge, logo-only', async function () { await expectBadgeToMatchSnapshot({ label: '', message: '', format: 'svg', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu', - style: 'for-the-badge', + style: 'plastic', }) }) })

That gives us a test case for each of the 5 styles (flat, flat-square, FTB, social and plastic) with the test data matching the descriptions.

goyalyashpal reviewed Jan 10, 2025

View reviewed changes

badge-maker/lib/badge-renderers.js Outdated Show resolved Hide resolved

chris48s added the npm-package Badge generation and badge templates label Jan 10, 2025

chris48s reviewed Jan 10, 2025

View reviewed changes

badge-maker/lib/badge-renderers.js Outdated Show resolved Hide resolved

LitoMore mentioned this pull request Jan 12, 2025

[Badges] Add support for setting label to empty raycast/extensions#16311

Merged

5 tasks

chris48s mentioned this pull request Jan 12, 2025

fix badge-maker package tests #10809

Merged

LitoMore added 4 commits January 21, 2025 10:25

fix badge style when logo only

1f14a91

simply logo-only condition

eef8280

Update variable name

65708d3

Update and add snapshots

2a29628

LitoMore force-pushed the fix-badge-style-when-logo-only branch from 1a70f04 to 2a29628 Compare January 21, 2025 02:35

LitoMore requested a review from chris48s January 21, 2025 02:35

Fixes

2d92c8b

chris48s reviewed Jan 23, 2025

View reviewed changes

__snapshots__/make-badge.spec.mjs.js Outdated Show resolved Hide resolved

Update test and snapshot

e05753f

LitoMore requested a review from chris48s January 24, 2025 16:59

chris48s reviewed Jan 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix badge style when logo only #10794

fix badge style when logo only #10794

LitoMore commented Jan 9, 2025

github-actions bot commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 10, 2025

chris48s commented Jan 10, 2025

LitoMore commented Jan 11, 2025

chris48s commented Jan 12, 2025

chris48s commented Jan 18, 2025

github-actions bot commented Jan 21, 2025

chris48s commented Jan 21, 2025

LitoMore commented Jan 23, 2025

github-actions bot commented Jan 23, 2025

chris48s commented Jan 23, 2025

chris48s commented Jan 23, 2025

LitoMore commented Jan 24, 2025

chris48s Jan 24, 2025 •

edited

Loading

chris48s Jan 24, 2025

fix badge style when logo only #10794

Are you sure you want to change the base?

fix badge style when logo only #10794

Conversation

LitoMore commented Jan 9, 2025

github-actions bot commented Jan 9, 2025 • edited Loading

github-actions bot commented Jan 10, 2025

chris48s commented Jan 10, 2025

LitoMore commented Jan 11, 2025

chris48s commented Jan 12, 2025

chris48s commented Jan 18, 2025

github-actions bot commented Jan 21, 2025

chris48s commented Jan 21, 2025

LitoMore commented Jan 23, 2025

github-actions bot commented Jan 23, 2025

chris48s commented Jan 23, 2025

chris48s commented Jan 23, 2025

LitoMore commented Jan 24, 2025

chris48s Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

chris48s Jan 24, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 9, 2025 •

edited

Loading

chris48s Jan 24, 2025 •

edited

Loading