Customise AppVeyor Test 'passed', 'failed', 'skipped' status #1321

NZSmartie · 2017-12-04T03:22:03Z

This is to allow users to display text in their own language, or (in my case) unicode characters. For example:

http://img.shields.io/appveyor/tests/NZSmartie/coap-net-iu0to.svg?passed=%E2%9C%94&failed=%E2%9D%8C&skipped=%E2%9D%97

would show the following badge

tooomm · 2017-12-04T10:13:41Z

Interesting idea, I would like to see a documentation for that in the parameters section!

NZSmartie · 2017-12-04T10:34:28Z

One of the problems is that it's difficult to document what a badge has. There has been progress for improving registering services API (#963) which could allow for standarised documentation for badges.

The query parameters introduced in this PR are specific to the AppVeyor test status badge. Thus, adding information to the parameters section at the bottom would be very misleading since it does not apply to other badges.

tooomm · 2017-12-04T10:53:08Z

Ohh, I thought you could customize any badge in the sense that it would replace given words with the selected characters!

But undocumented or poorly documented features are always bad.
There could be a hint to this pr (or a wiki article) next to the appveyor badge at least for example.
The best solution might be to have an explanation right within the appveyor badge pop-up, like the text that all GitHub badges have. Check this screenshot: #1311 (comment)
The Documenation section is only there for "GitHub badges", you could use that to explain the appveyor specific custom options.

A general availability of something like this would be cool, sure.

NZSmartie · 2017-12-04T12:29:14Z

Heh, that's new from last time I did a PR. will add what I can. cheers @tooomm

paulmelnikow · 2017-12-04T15:14:26Z

Another way to document it would be an additional badge example. This also needs a test.

Could you clarify why this is better than the standard text? Since a goal of the project is to provide consistent badges, we try to choose a good default and avoid providing customization options. Do you think we should change the standard text? Translation is one thing (all the badges are in English; only some of that can be overridden) but what you're wanting here is more like an alternate format.

platan · 2017-12-04T19:06:10Z

Code and documentation looks good for me. Additionally you could add some test for overriding values (default values are already tested in service tests).
But badges (examples from documentation) does not look good at my PC (Ubuntu 16.04)
Chrome:

Firefox:

edit:
It looks similar at Linux Mint 18.1

And Windows 10, Chrome 62

NZSmartie · 2017-12-04T19:49:20Z

Regarding the mangled badges in development builds: Grab a copy of Verdana.ttf and place it in the repository root directory. then it'll look right

platan · 2017-12-04T21:09:40Z

@NZSmartie with the font it works great! Thanks!

NZSmartie · 2017-12-04T21:47:16Z

@paulmelnikow This PR is an alternative way of displaying the AppVeyor test badge. Because other components of the badge can already be customised (label, style, link, logo, logoWidth, link, colorA and colorB), adding badge specific customisation seemed like a not too far stretch.

The main motivation is that badges can get very wide when all 3 metric labels (passed, failed and skipped) are displayed. Allowing use of single unicode helps free up screen space

paulmelnikow · 2017-12-04T23:36:19Z

The main motivation is that badges can get very wide when all 3 metric labels (passed, failed and skipped) are displayed. Allowing use of single unicode helps free up screen space

That makes sense to me.

Another way we could go about this is to add a flag like ?valueStyle=compact that uses compact values without needing to specify unicode characters. That helps our goal of uniformity, while also being helpful for another use case.

What do you think about this tweak to the format?

https://img.shields.io/badge/tests-%E2%9C%94%2012%20%20%E2%9D%8C%203%20%20%E2%9D%97%203-orange.svg

I'm not sure if the ! is a clear way to convey skipped – it seems more like errored. I wonder if there is another symbol that might be more understandable.

The x and ! characters don't look great on my machine because they display in red:

paulmelnikow · 2017-12-04T23:41:36Z

Another possibility:

https://img.shields.io/badge/tests-%E2%9C%94%2012%20%20%E2%9C%98%203%20%20%E2%A4%B8%203-orange.svg

paulmelnikow · 2017-12-04T23:44:18Z

service-tests/appveyor.js

+// Test AppVeyor tests status badge with emoji
+t.create('tests status with emoji labels')
+.get('/tests/NZSmartie/coap-net-iu0to.json?passed=%E2%9C%94&failed=%E2%9D%8C&skipped=%E2%9D%97')
+.expectJSONTypes(Joi.object().keys({ name: 'tests', value: isEmojiAppveyorTestTotals }));


Tests look great!

NZSmartie · 2017-12-05T00:10:27Z

We could use the info unicode character
https://img.shields.io/badge/tests-%E2%9C%94%2012%20%20%E2%9C%98%203%20%20%E2%84%B9%203-orange.svg

NZSmartie · 2017-12-05T00:11:08Z

I like the idea of a &valueStyle=compact query parameter. lemme implement that

paulmelnikow · 2017-12-05T02:07:48Z

Does the information symbol convey skipped, though?

Here are some other ideas:

I'm rather partial to 6, which is the symbol for "escape."

The "skip track" icon, 3, is clear in meaning, but doesn't look good.

NZSmartie · 2017-12-05T02:30:43Z

Hmm, what about tilde?

RedSparr0w · 2017-12-05T03:06:19Z

I quite like the tilde sign, as its pretty simple and gets the point across.
Or the escape key, but it looks a little too small.

paulmelnikow · 2017-12-05T05:25:28Z

The tilde is simple looking, though how does it convey "skipped"?

NZSmartie · 2017-12-05T21:21:22Z

So, skipped tests may also indicate inconclusive tests (not enough input to assert on). With that in mind. I think a '?' could be used to say that a test isn't failed or passed.

Even when there's no failed tests, its easy to tell there were skipped tests

And for comparason; Fully passing tests

NZSmartie · 2017-12-05T21:28:24Z

If someone want's to use another symbol for skipped tests, they can use the &skipped= query parameter 😛

platan · 2017-12-05T21:41:00Z

In my opinion ? and ~ looks good, however ? looks a bit like 'unknown' for me.

tooomm · 2017-12-06T23:42:31Z

I really like horizontal lines as divider:

Too bad macOS messes around with the fast-forward icon. I'm not convinced by the dot.
Also, ~~macOS~~ iOS changes the checkmark to a bigger black one which is bad as well.
Is there some other checkmark that works for apple and stays white?

On Windows+Firefox it looks clean and uniform:

By the way... would the badge turn red if it contains only fails, or fails+skipped?

NZSmartie · 2017-12-06T23:47:03Z

@tooomm
By the way... would the badge turn red if it contains only fails, or fails+skipped?

yup, that's exactly what it does

NZSmartie · 2017-12-06T23:49:17Z

the reason why the symbols are inconsistent on each platform as the browser will fallback onto another font on the host OS that supports that unicode range. A solution would be to include a second true type font that includes a standardised set of fonts. like Font Awesome for example

NZSmartie · 2017-12-07T02:52:36Z

How difficult would it be to embed a symbol (much like the brand logos) and use that for the ✔ ✘ and [skip symbol]?

RedSparr0w · 2017-12-07T03:02:13Z

For the sake of consistency i think the only way will be to embed an svg image for the check, cross, and other symbol

paulmelnikow · 2017-12-07T05:54:33Z

Also, macOS changes the checkmark to a black one which is bad as well.

Where are you seeing that? I'm not seeing it in Chrome or Firefox.

I'm fine with that. ^^

It feels slightly cramped but we could tweak the spacing later on.

Another suggestion, riffing on the dot: midline horizontal ellipsis.

Black flag:

Circle with backslash:

Warning sign:

Rightward arrow to bar:

Double question mark:

NZSmartie · 2017-12-07T06:22:35Z

@paulmelnikow have changed it to the full circle with horizontal bars. but the CI is failing due ot an error outside of my control. unless i need to merge with master?

paulmelnikow · 2017-12-07T06:31:08Z

Yea, merging master into this branch should fix it.

RedSparr0w · 2017-12-07T06:31:45Z

The checkmarks are black on iOS:

Also the extra squares aren't showing on this badge, but they are on the earlier example post you made:

NZSmartie · 2017-12-07T06:38:58Z

@RedSparr0w I think for now this will do and I'll see what I can do in regards to #127 / #552 to make it cleaner

tooomm · 2017-12-07T12:22:13Z

And/Or this:

For the sake of consistency i think the only way will be to embed an svg image for the check, cross, and other symbol

By the way: Font Awesome includes icons for github, twitter, telegram, bitbucket, facebook, gitlab, gratipay, slack etc. too! They also have icons in solid and outlined style.

paulmelnikow · 2017-12-07T18:09:38Z

After sleeping on it, I like rightward arrow to bar. Most of our suggestions have conveyed "maybe" or "indeterminate," but this one actually suggests skipping.

These are different checks and X's. Arguably the badge more legible as the symbols are lighter so the numbers stand out more. How do they look on iOS?

RedSparr0w · 2017-12-07T20:13:45Z

The second thinner check mark looks good on iOS,

iOS 9 (safari):

Windows 10 (chrome):

My votes for either the arrow or the dot

tooomm · 2017-12-08T01:19:54Z

Is there some other thicker arrow available? This one is really hard to see at all!
Also, it doesn't need to point against a wall in my opinion because that symbolizes end or to the end more than skip.

The dot is kinda bold next to the others, that's why I searched http://graphemica.com/search?q=arrow...
(had to use the bolder x, couldn't find the other)

Also found a bit smaller dot:

paulmelnikow · 2018-03-21T02:20:13Z

Hi! Whoever picks this up, this work will need to be reworked a bit. A bunch of files moved in #1563, and an entirely rewritten copy of the appveyor service was merged in #1543.

NZSmartie · 2018-03-22T18:12:39Z

This issue became stalled as there was disagreement on what icons/symbols to use for representing the various results. If a consensus is made, i'll be happy to pick it up again

kzu · 2018-07-29T00:18:04Z

Plz, merge some form of this. Given users can customize the icons, the defaults aren't critical to agree on.

I personally like this one mentioned above:

PyvesB · 2018-08-09T21:20:49Z

Okay, shall we try to push this forward again? We can always pick one solution, and change it later on if users dislike it. We could even create a poll in an separate issue to get feedback and some community interaction.

@NZSmartie I'm keen on you making an informed final call based on the discussions above. Quite a few things have changed with the Appveyor service, in particular in #1743, but I'm sure @paulmelnikow will be glad to assist you if you run into any trouble!

How does that sound? 😄

kzu · 2018-08-12T02:17:36Z

IMHO, since the icons can customize, it doesn't matter a whole lot which one you pick as a default. Any one is better than nothing at this point. And, if someone dislikes them, they can just customize it via the URL itself, so, no blocking issues ;)

paulmelnikow · 2018-08-17T23:24:30Z

I can pick this up after #1940 is merged.

paulmelnikow · 2018-08-29T05:25:38Z

Reopened at #2000.

This picks up the work from #1321 on top of the work from #1940. It allows the user to choose a compact tests format, or to override the labels with their own text or symbols.

Customise AppVeyor Test 'passed', 'failed', 'skipped' status

34c8789

paulmelnikow added the service-badge New or updated service badge label Dec 4, 2017

Document new queryParameters based on github's status badge

5fffb65

NZSmartie added 2 commits December 5, 2017 11:16

recude complexity on shrug emoji

ec01621

add custom label example and tests

0befd06

paulmelnikow reviewed Dec 4, 2017

View reviewed changes

NZSmartie added 3 commits December 5, 2017 14:47

add compactValue query parameter to standardied shortness

c160b65

fix incorrect doc typo

5745393

remove unnecessary semicolon

4112d3f

use ? for skipped tests for compact value

26e401b

NZSmartie mentioned this pull request Dec 6, 2017

Support consistant unicode/emoji symbols by using a dedicated True Type Font #1351

Closed

use horizontal bars in compact mode and update documentation

b27203f

Merge branch 'master' of https://github.com/badges/shields

febd849

paulmelnikow mentioned this pull request Dec 8, 2017

The Great Service Rewrite 🏆 #1358

Closed

paulmelnikow mentioned this pull request Aug 4, 2018

[RFC] Add Joi-based request validation to BaseJsonService and rewrite [NPM] and [node] badges; also affects [apm appveyor cdnjs clojars gem] #1743

Merged

6 tasks

paulmelnikow mentioned this pull request Aug 17, 2018

Rewrite [appveyor] tests badge #1940

Merged

paulmelnikow mentioned this pull request Aug 29, 2018

[AppVeyorTests] compact format and custom labels #2000

Merged

paulmelnikow closed this Aug 29, 2018

Customise AppVeyor Test 'passed', 'failed', 'skipped' status #1321

Customise AppVeyor Test 'passed', 'failed', 'skipped' status #1321

Conversation

NZSmartie commented Dec 4, 2017

tooomm commented Dec 4, 2017

NZSmartie commented Dec 4, 2017

tooomm commented Dec 4, 2017

NZSmartie commented Dec 4, 2017

paulmelnikow commented Dec 4, 2017

platan commented Dec 4, 2017 • edited Loading

NZSmartie commented Dec 4, 2017

platan commented Dec 4, 2017

NZSmartie commented Dec 4, 2017

paulmelnikow commented Dec 4, 2017 • edited Loading

paulmelnikow commented Dec 4, 2017

paulmelnikow Dec 4, 2017

Choose a reason for hiding this comment

NZSmartie commented Dec 5, 2017

NZSmartie commented Dec 5, 2017

paulmelnikow commented Dec 5, 2017 • edited Loading

NZSmartie commented Dec 5, 2017

RedSparr0w commented Dec 5, 2017 • edited Loading

paulmelnikow commented Dec 5, 2017

NZSmartie commented Dec 5, 2017 • edited Loading

NZSmartie commented Dec 5, 2017

platan commented Dec 5, 2017

tooomm commented Dec 6, 2017 • edited Loading

NZSmartie commented Dec 6, 2017

NZSmartie commented Dec 6, 2017 • edited Loading

NZSmartie commented Dec 7, 2017

RedSparr0w commented Dec 7, 2017

paulmelnikow commented Dec 7, 2017 • edited Loading

NZSmartie commented Dec 7, 2017

paulmelnikow commented Dec 7, 2017

RedSparr0w commented Dec 7, 2017

NZSmartie commented Dec 7, 2017

tooomm commented Dec 7, 2017 • edited Loading

paulmelnikow commented Dec 7, 2017

RedSparr0w commented Dec 7, 2017 • edited Loading

tooomm commented Dec 8, 2017

paulmelnikow commented Mar 21, 2018

NZSmartie commented Mar 22, 2018

kzu commented Jul 29, 2018

PyvesB commented Aug 9, 2018

kzu commented Aug 12, 2018

paulmelnikow commented Aug 17, 2018

paulmelnikow commented Aug 29, 2018

platan commented Dec 4, 2017 •

edited

Loading

paulmelnikow commented Dec 4, 2017 •

edited

Loading

paulmelnikow commented Dec 5, 2017 •

edited

Loading

RedSparr0w commented Dec 5, 2017 •

edited

Loading

NZSmartie commented Dec 5, 2017 •

edited

Loading

tooomm commented Dec 6, 2017 •

edited

Loading

NZSmartie commented Dec 6, 2017 •

edited

Loading

paulmelnikow commented Dec 7, 2017 •

edited

Loading

tooomm commented Dec 7, 2017 •

edited

Loading

RedSparr0w commented Dec 7, 2017 •

edited

Loading