Angular 2+ : simuler un Pipe personnalisé pour les tests unitaires

Avec Angular on peut être amené à écrire un pipe personnalisé pour remplir une fonction bien particulière.
Ceci peut amener des soucis lors de l’écriture des tests unitaires si ce pipe a des dépendances.

La solution simple est de mocker ce pipe dans votre fichier .spec.ts :

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'myPipe'})
class MockPipe implements PipeTransform {
    transform(value: number): number {
        // blah blah
        return value;
    }
}

“myPipe” doit être remplacé par le nom de votre pipe tel qu’utilisé dans vos templates. Peu importe la valeur retournée par la fonction transform(), puisque c’est un mock !

Ensuite il faut ajout ce mock dans les déclarations du TestBed:

TestBed.configureTestingModule({
  declarations: [ MyComponentUnderTesting, MockPipe ]
})

Et voilà \o/

Sauvegarder une page HTML avec son CSS et ses images

L’extension Scrapbook pour Firefox fait très bien le boulot, à savoir sauvegarder une page, les images incluses, ainsi que toutes les images référencées par les feuilles de style.

Extrêmement utile lorsqu’on a besoin de créer une maquette basée sur un site existant.

https://addons.mozilla.org/fr/firefox/addon/scrapbook/

Désactiver jQuery Colorbox sur mobile

Colorbox est une lightbox légère et classe, mais sur mobile le rendu n’est pas forcément génial: pas de zoom possible, problèmes de centrage…

Voici un bout de script jQuery pour désactiver Colorbox si la résolution d’écran est inférieure à 768 pixels:

(function ($){

    $(document).ready(function (){

        /* Disable Colorbox on mobile devices */

        $mobile_colorbox();

        $(window).resize(function () {
            $mobile_colorbox()
        });

    });

    $mobile_colorbox = function ()
    {
        if ( $(window).width() <= 767 ) {
            $('.colorbox').colorbox.remove();
        } else {
            $('.colorbox').colorbox({rel:'colorbox'});
        }            
    }

})(jQuery);

Insérez ce code après l’inclusion de Colorbox.

Ce code est encapsulé afin d’être utilisé sans soucis avec d’autres librairies JS.

Crédits: TemplateStock.