import 'reflect-metadata';

import {
    ElementRef,
} from '@angular/core';

import {
    FormatPaymentCardDirective,
} from './format-payment-card.directive';

const initFormatPaymentCardDirective = (
    elementRef: ElementRef,
) => {
    return new FormatPaymentCardDirective(elementRef);
};

describe('onKeyUp', () => {
    test('formats the value of the input for readability', () => {
        const elementRef = {
            nativeElement: document.createElement('input'),
        } as ElementRef;

        const formatPaymentCardDirective =
            initFormatPaymentCardDirective(elementRef);

        elementRef.nativeElement.value = '4242424242424242';

        formatPaymentCardDirective.onKeyUp();

        expect(
            elementRef.nativeElement.value,
        ).toBe('4242 4242 4242 4242');
    });
});