cucumber / cucumber/react-components

Support errors with messages containing ANSI color code

Aperta
#393 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
38
Fork
13
Merge medio
16h 2m
PR unite (30g)
7

Descrizione

### 🤔 What's the problem you're trying to solve?

Hello 👋

I've started to use Cucumber-js with its default HTML reporting tool

In order to have a more flexible assertions, I'm also using Jest's expect as well as jest-extended

Both of those assertion modules are throwing exceptions with messages that contains ANSI colore code characters

Unfortunately, those characters don't seems to be handled the right way, as those codes are not taken into account to highlight the text with the right color, but instead are displayed as is.

See this screen shoot example :

Image

Someone form the help-js channel of Cucumber's Discord advised me to create a feature request here about this trouble

### ✨ What's your proposed solution?

Also have the React analyzing the error messages, and have each of the ANSI color codes turned into a corresponding block to have the text colorized the right way ?

Maybe it would necessitate to change the way the background color is managed on such error message display, else I guess that a red colored text displayed over a red background would be quite unreadable

As the coloring of such tools is most of the time targeting terminals with black background, maybe it would be better to have error messages simply surrounded by a red frame, but displayed over a black background ?

### ⛏ Have you considered any alternatives or workarounds?

Except using another HTML reporting tool, I've also considered the following :
- catch the exceptions thrown by expect, and perform the stripping of color codes from the message before rethrowing it
- add an extra step in my CI in order to apply a transformation on the produced HTML file(s) myself
- create a PR myself to solve this problem, but I didn't knew in which Cucumber's github repository I had to do it, and since I've learned it's related to current repository, as I'm not familiar at with React coding, I prefer simply creating the issue 😛

But none of those solutions are really appealing 😢

### 📚 Any additional context?

_No response_

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia individuando nel repository il componente React che esegue il rendering dei messaggi di errore, quindi riproduci il problema con un messaggio contenente codici colore ANSI. L'attività è completata quando i codici vengono renderizzati come colori invece di essere mostrati letteralmente, con uno stile leggibile e una copertura per i messaggi contenenti ANSI.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.