Stub / spy counter badge is cut off

[bahmutov]

Cypress 3.4.0 with Electron or Chrome

Recipe in https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__window

Run the spec file and after it is finished click on the button "Open new window" inside the application frame (like a user). The cy.stub counter keeps incrementing - and the badge appears, but the badge gets cut off on the left.

Relevant markup

Relevant files:

• packages/reporter/src/commands/command.jsx
• packages/reporter/src/commands/commands.scss

[hhudson]

Hello @bahmutov - I think I know how to address this. It would seem that the counter is not so much being 'cut off' as the border-radius css hasn't been defined to create a symmetrical pill shape around the counter.

Specifically, I would propose changing the css to

.num-duplicates.has-alias {
      border-radius: 10px 10px 10px 10px;
      line-height: 2;
      padding: 3px 5px 3px 5px;
    }

I believe this change would give the desired 'not cut-off look' you are seeking. Would you like me to contribute this change?

[jennifer-shehane]

@hhudson Sure! The CSS is here. I def broke this about a month ago. 😝 https://github.com/cypress-io/cypress/blob/issue-4874/packages/reporter/src/commands/commands.scss#L164

[cypress-bot]

The code for this is done in cypress-io/cypress#4910, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 3.5.0.