import 'reflect-metadata';

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

import {
    FormatCardExpiryDirective,
} from './format-card-expiry.directive';

const initFormatCardExpiryDirective = (
    elementRef: ElementRef,
) => {
    return new FormatCardExpiryDirective(elementRef);
};

describe('onKeyUp', () => {

    test('does not format with a / if only one digit input', () => {
        const elementRef = {
            nativeElement: document.createElement('input'),
        } as ElementRef;

        const formatCardExpiryDirective =
            initFormatCardExpiryDirective(elementRef);

        const event = {
            key: '1',
        } as KeyboardEvent;

        elementRef.nativeElement.value = '1';

        formatCardExpiryDirective.onKeyUp(event);

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

    test('add a / after the 2nd digit is input', () => {
        const elementRef = {
            nativeElement: document.createElement('input'),
        } as ElementRef;

        const formatCardExpiryDirective =
            initFormatCardExpiryDirective(elementRef);

        const event = {
            key: '2',
        } as KeyboardEvent;

        elementRef.nativeElement.value = '12';

        formatCardExpiryDirective.onKeyUp(event);

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

    test('Allows a four digit year to be added after the /', () => {
        const elementRef = {
            nativeElement: document.createElement('input'),
        } as ElementRef;

        const formatCardExpiryDirective =
            initFormatCardExpiryDirective(elementRef);

        const event = {
            key: '7',
        } as KeyboardEvent;

        elementRef.nativeElement.value = '12/2017';

        formatCardExpiryDirective.onKeyUp(event);

        expect(
            elementRef.nativeElement.value,
        ).toBe('12/2017');
    });

    test('Allows deleting the / with backspace (does not reformat)', () => {
        const elementRef = {
            nativeElement: document.createElement('input'),
        } as ElementRef;

        const formatCardExpiryDirective =
            initFormatCardExpiryDirective(elementRef);

        const event = {
            key: 'Backspace',
        } as KeyboardEvent;

        elementRef.nativeElement.value = '12';

        formatCardExpiryDirective.onKeyUp(event);

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

    test('Allows deleting the / with delete key (does not reformat)', () => {
        const elementRef = {
            nativeElement: document.createElement('input'),
        } as ElementRef;

        const formatCardExpiryDirective =
            initFormatCardExpiryDirective(elementRef);

        const event = {
            key: 'Delete',
        } as KeyboardEvent;

        elementRef.nativeElement.value = '12';

        formatCardExpiryDirective.onKeyUp(event);

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