2014-12-04 19 views
6

Sto costruendo un semplice metodo di test unitario in JavaScript. L'output viene stampato nella console.Aggiungere stili a console.table() in chrome

Desidero che le righe dei test passati siano verdi e che i test non riusciti siano rossi (di sfondo o di testo).

So che posso aggiungere stili al console.log(), ma non ho trovato un modo per aggiungere stili al console.table().

Quindi, è possibile? In caso contrario, quale sarebbe un'alternativa. esempio

Codice:

console.table([ 
    { 
     status: 'failed', 
     function: 'Validate.int', 
     asserted: true, 
     result: false 
    },{ 
     status: 'passed', 
     function: 'Validate.float', 
     asserted: true, 
     result: true 
    } 
]); 

Tnx in anticipo!

+0

Ho aggiornato la mia risposta . Fammi sapere se soddisfa le tue esigenze – faby

risposta

2

Anche se @faby ha creato un bell'esempio per usare console.log(), non l'ho ancora trovato applicabile al mio problema. Sono anche arrivato alla conclusione che l'aggiunta di stili a console.table() non è possibile.

mi si avvicinò con una soluzione che nidifica i risultati in gruppi, che mostra la tabella nidificato all'interno:

console.groupCollapsed('Testing unit: %s', unit); 
for (var r in results) { 
    var res = results[r]; 
    console.groupCollapsed('%c %c' + res.status, 'background-color: ' + (res.status === 'failed' ? 'red' : 'green') + '; margin-right: 10px', 'background-color: transparent'); 
    console.table({ 
     Result: {value: res.status}, 
     Function: {value: res.function}, 
     Asserted: {value: res.asserted}, 
     Returned: {value: res.returned} 
    }); 
    console.groupEnd(); 
} 
console.groupEnd(); 

Questo ha pronunciato la seguente uscita:

Output

5

Prova utilizzando console.log all'interno console.table e utilizzare gli stili

di lavoro e testato Codice:

console.table(console.log('%c test1 ', 'background: #cdcdcd; color: #000000'),console.log('%c test2 ', 'background: #ff0000; color: #ffffff')); 

per il vostro caso si può fare questo

var x = { 
      status: 'failed', 
      function: 'Validate.int', 
      asserted: true, 
      result: false 
     }; 

console.table(
     console.log('%c '+ x.status + x.function + ' ', 'background: #cdcdcd; color: #000000'), add other elements of the array); 

sostituire il mio x con elementi della vostra array

+0

Questo non sembra influenzare la tabella, ma aggiunge un'altra riga con l'output in stile. Mi piace l'idea anche se –

+1

Questa soluzione è sorprendente! E funziona davvero! –

+0

@ChrisLaarman perché non funziona? Ho testato il mio codice. Mostrami il tuo codice e cercherò di aiutarti – faby

Problemi correlati