Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/forms / build / dist / src / __tests__ / adapters.test.js
Size: Mime:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
 * @todo to test for @deprecated form state needs more work
 */
require("./_setup");
const React = require("react");
const ReactTestRenderer = require("react-test-renderer");
const react_testing_library_1 = require("react-testing-library");
const OneForm_1 = require("../new-forms/OneForm/OneForm");
// import { ObserverForm, FormState } from '../new-forms/forms'
const PluginsContext_1 = require("../new-forms/plugins/PluginsContext");
// === old ===
// import { FormState } from '../deprecated/forms'
// import { } from '../inputs'
// import AutoSuggestInput from '../deprecated/forms/input/plugins/Special/AutoSuggestInput'
// import TextAreaInput from '../deprecated/forms/input/plugins/Text/TextAreaInput'
const TextInput_1 = require("../deprecated/forms/input/plugins/Text/TextInput");
const CheckboxInput_1 = require("../deprecated/forms/input/plugins/Special/CheckboxInput");
const CardTypeInput_1 = require("../deprecated/forms/input/plugins/Special/CardTypeInput");
const ExpiryDateInputType_1 = require("../deprecated/forms/input/plugins/Special/ExpiryDateInputType");
const LabelInput_1 = require("../deprecated/forms/input/plugins/Simple/LabelInput");
const FlatButtonInput_1 = require("../deprecated/forms/input/plugins/Button/FlatButtonInput");
const ButtonInput_1 = require("../deprecated/forms/input/plugins/Button/ButtonInput");
const SelectBoxInput_1 = require("../deprecated/forms/input/plugins/Special/SelectBoxInput");
/**
 * @todo use proxy/ until wording is updated
 */
const wording = {};
describe('@skava/forms - adapters', () => {
    afterEach(react_testing_library_1.cleanup);
    it('should support old forms using the adapter', () => {
        const mockBlur = jest.fn();
        const inputList = [
            {
                identity: 'firstName',
                type: 'text',
                value: '',
                className: 'form-inputs',
                name: 'cardFirstName',
                labelText: `${wording.firstNameLabel}*`,
                maxLength: '100',
                wrapperClassName: 'form-item-wrapper card-first-name',
                validationType: 'name',
                errorMessageFor: 'firstName',
                dataQa: 'qa-first-name',
                autocomplete: 'first-name',
                animatePlaceholder: false,
                onBlur: mockBlur,
            },
            {
                identity: 'lastName',
                type: 'text',
                value: '',
                className: 'form-inputs',
                name: 'cardLastName',
                labelText: `${wording.lastNameLabel}*`,
                maxLength: '100',
                wrapperClassName: 'form-item-wrapper card-last-name',
                validationType: 'name',
                errorMessageFor: 'lastName',
                dataQa: 'qa-last-name',
                autocomplete: 'last-name',
                animatePlaceholder: false,
                onBlur: mockBlur,
            },
            {
                identity: 'cardNumber',
                type: 'text',
                value: '',
                className: 'form-inputs',
                name: 'cardNumber',
                labelText: `${wording.cardNumber}*`,
                maxLength: '16',
                wrapperClassName: 'form-item-wrapper card-number',
                validationType: 'creditCard',
                errorMessageFor: 'creditCard',
                dataQa: 'qa-card-number',
                autocomplete: 'card-number',
                animatePlaceholder: false,
                onBlur: mockBlur,
            },
            {
                identity: 'month',
                type: 'text',
                value: '',
                className: 'form-inputs',
                name: 'expirationMonth',
                labelText: `${wording.month}*`,
                maxLength: '2',
                wrapperClassName: 'form-item-wrapper card-month',
                validationType: 'month',
                errorMessageFor: 'expirationMonth',
                dataQa: 'qa-month',
                autocomplete: 'month',
                ariaLabel: wording.month,
                animatePlaceholder: false,
                onBlur: mockBlur,
            },
            {
                identity: 'year',
                type: 'text',
                value: '',
                className: 'form-inputs',
                name: 'expirationYear',
                labelText: `${wording.year}*`,
                maxLength: '4',
                wrapperClassName: 'form-item-wrapper card-expire-year',
                validationType: 'year',
                errorMessageFor: 'expirationYear',
                dataQa: 'qa-year',
                autocomplete: 'year',
                ariaLabel: wording.year,
                animatePlaceholder: false,
                onBlur: mockBlur,
            },
            {
                identity: 'defaultPaymentMethod',
                type: 'checkbox',
                label: wording.setToDefaultPaymentMethod,
                className: 'form-item-wrapper checkbox-label default-address',
                name: 'defaultPaymentMethod',
                isSelected: true,
                bgColor: '#00a0db',
                dataQa: 'qa-default-payment-method',
                ariaLabel: wording.setToDefaultPaymentMethod,
            },
            {
                identity: 'billingAddressSameasShipping',
                type: 'checkbox',
                label: wording.billingAddressSameAsShipping,
                className: 'form-item-wrapper checkbox-label default-address',
                name: 'billingAddressSameasShipping',
                isSelected: true,
                bgColor: '#00a0db',
                dataQa: 'qa-ship-billing-address',
                ariaLabel: wording.billingAddressSameAsShipping,
            },
            {
                type: 'groupElements',
                name: 'billing-address',
                className: 'billing-address-wrapper',
                validationType: 'groupElements',
                isHidden: false,
                elementList: [
                    {
                        identity: 'billingAddress',
                        type: 'label',
                        value: wording.billingAddress,
                        wrapperClass: 'form-item-wrapper billing-address-heading',
                        className: '',
                    },
                    {
                        identity: 'firstName',
                        type: 'text',
                        value: '',
                        className: 'form-inputs',
                        name: 'addressFirstName',
                        labelText: `${wording.firstNameLabel}*`,
                        maxLength: '100',
                        wrapperClassName: 'form-item-wrapper first-name',
                        validationType: 'name',
                        errorMessageFor: 'firstName',
                        dataQa: 'qa-first-name',
                        autocomplete: 'first-name',
                        animatePlaceholder: false,
                        onBlur: mockBlur,
                    },
                    {
                        identity: 'lastName',
                        type: 'text',
                        value: '',
                        className: 'form-inputs',
                        name: 'addressLastName',
                        labelText: `${wording.lastNameLabel}*`,
                        maxLength: '100',
                        wrapperClassName: 'form-item-wrapper last-name',
                        validationType: 'name',
                        errorMessageFor: 'lastName',
                        dataQa: 'qa-last-name',
                        autocomplete: 'family-name',
                        animatePlaceholder: false,
                        onBlur: mockBlur,
                    },
                    {
                        identity: 'addressLine1',
                        type: 'text',
                        value: '',
                        className: 'form-inputs',
                        name: 'addressLine1',
                        labelText: 'address line 1*',
                        maxLength: '150',
                        wrapperClassName: 'form-item-wrapper address',
                        placeholderText: 'Street address, PO box, ect.',
                        validationType: 'address',
                        errorMessageFor: 'addressLine1',
                        dataQa: 'qa-address',
                        autocomplete: 'address-line1',
                        animatePlaceholder: false,
                        onBlur: mockBlur,
                    },
                    {
                        identity: 'addressLine2',
                        type: 'text',
                        value: '',
                        className: 'form-inputs',
                        name: 'addressLine2',
                        labelText: 'address line 2 / company name',
                        maxLength: '150',
                        wrapperClassName: 'form-item-wrapper address',
                        placeholderText: 'Apt., suite, unit, building, floor, etc.',
                        validationType: 'address',
                        errorMessageFor: 'addressLine2',
                        dataQa: 'qa-address',
                        autocomplete: 'address-line2',
                        animatePlaceholder: false,
                        onBlur: mockBlur,
                    },
                    {
                        identity: 'city',
                        type: 'text',
                        value: '',
                        className: 'form-inputs',
                        name: 'city',
                        labelText: `${wording.cityLabel}*`,
                        maxLength: '80',
                        wrapperClassName: 'form-item-wrapper city',
                        validationType: 'city',
                        errorMessageFor: 'city',
                        dataQa: 'qa-city',
                        autocomplete: 'given-name',
                        ariaLabel: wording.cityLabel,
                        animatePlaceholder: false,
                        onBlur: mockBlur,
                    },
                    {
                        identity: 'state',
                        type: 'text',
                        value: '',
                        className: 'form-inputs',
                        name: 'state',
                        labelText: `${wording.stateOrProvince}*`,
                        maxLength: '80',
                        wrapperClassName: 'form-item-wrapper state',
                        validationType: 'state',
                        errorMessageFor: 'state',
                        dataQa: 'qa-state',
                        autocomplete: 'state',
                        ariaLabel: wording.stateLabel,
                        animatePlaceholder: false,
                        onBlur: mockBlur,
                    },
                    {
                        identity: 'postalCode',
                        type: 'text',
                        value: '',
                        className: 'form-inputs',
                        name: 'postalCode',
                        labelText: `${wording.zipCode}*`,
                        maxLength: '6',
                        wrapperClassName: 'form-item-wrapper zip-code',
                        validationType: 'zipCode',
                        errorMessageFor: 'zipCode',
                        dataQa: 'qa-zip-code',
                        autocomplete: 'zip-code',
                        animatePlaceholder: false,
                        onBlur: mockBlur,
                    },
                    {
                        identity: 'country',
                        type: 'text',
                        value: '',
                        className: 'form-inputs',
                        name: 'country',
                        labelText: `${wording.countryLabel}*`,
                        maxLength: '80',
                        wrapperClassName: 'form-item-wrapper country',
                        validationType: 'country',
                        errorMessageFor: 'country',
                        dataQa: 'qa-country',
                        autocomplete: 'country',
                        ariaLabel: wording.countryLabel,
                        animatePlaceholder: false,
                        onBlur: mockBlur,
                    },
                    {
                        identity: 'phoneNumber',
                        type: 'telephone',
                        value: '',
                        className: 'form-inputs',
                        name: 'phoneNumber',
                        labelText: `${wording.phoneNumber}*`,
                        maxLength: '10',
                        wrapperClassName: 'form-item-wrapper phone',
                        validationType: 'telephone',
                        errorMessageFor: 'phoneNumber',
                        dataQa: 'qa-phone-number',
                        autocomplete: 'tel',
                        animatePlaceholder: false,
                        onBlur: mockBlur,
                    },
                ],
            },
        ];
        // @todo FormState
        const formState = new OneForm_1.OneFormState().setInputsList(inputList);
        const view = (React.createElement(PluginsContext_1.PluginsContext.Provider, { value: [
                CheckboxInput_1.default,
                CardTypeInput_1.default,
                ExpiryDateInputType_1.default,
                SelectBoxInput_1.default,
                // easy
                FlatButtonInput_1.default,
                LabelInput_1.default,
                // not proper lists
                ButtonInput_1.default,
                TextInput_1.default,
            ] },
            React.createElement(OneForm_1.OneObserverForm, { state: formState })));
        const renderer = ReactTestRenderer.create(view);
        expect(renderer.toJSON()).toMatchSnapshot();
    });
});
//# sourceMappingURL=adapters.test.js.map