enhancement: add missing "autocomplete", "placeholder" and "readonly"…

[lionel-bijaoui]

Add missing "autocomplete", "placeholder" and "readonly" attr to input fields. Ordered alphabetically.

[coveralls]

Coverage remained the same at 86.515% when pulling f5af70c on lionel-bijaoui:LB_autocomplete into 672e656 on icebob:master.

[coveralls]

Coverage remained the same at 86.515% when pulling f5af70c on lionel-bijaoui:LB_autocomplete into 672e656 on icebob:master.

[coveralls]

Coverage remained the same at 86.515% when pulling a7e39d9 on lionel-bijaoui:LB_autocomplete into 672e656 on icebob:master.

[coveralls]

Coverage remained the same at 86.515% when pulling c645cea on lionel-bijaoui:LB_autocomplete into 672e656 on icebob:master.

[icebob]

Why removed the placeholder from here?

[coveralls]

Coverage remained the same at 86.515% when pulling 79bfee6 on lionel-bijaoui:LB_autocomplete into 672e656 on icebob:master.

[icebob]

Please add tests to the new attributes like disabled attr.

[coveralls]

Coverage remained the same at 86.515% when pulling 9ea47cc on lionel-bijaoui:LB_autocomplete into bccc910 on icebob:master.

[coveralls]

Coverage remained the same at 86.515% when pulling 9ea47cc on lionel-bijaoui:LB_autocomplete into bccc910 on icebob:master.

[lionel-bijaoui]

I had a little bit of hard time (dead computer 💀 ), but I was able to simplify the test for attributes to this:

import { createVueField, trigger, /*new thing in util.js --> */ attributesList } from "../util";

// other tests... 

describe.only("check optional attribute", () => {
            // here you name which attribute you want to test and that's it.
            let attributes = ["autocomplete", "disabled"];

            attributes.forEach(function(name) {
                it('should set ' + name, function(done) {
                    let schematic;
                    let attr = attributesList[name];

                    if (attr.field) {
                        schematic = field;
                    } else {
                        schematic = schema;
                    }
                    schematic[name] = attr.before;
                    vm.$nextTick(() => {
                        expect(input[name]).to.be.equal(schematic[name]);
                        schematic[name] = attr.after;
                        done();
                    });
                });
            });
        });

// util.js
export let attributesList = {
    "autocomplete": { before: "on", after: "off" },
    "disabled": { before: true, after: false, field: true },
    "placeholder": { before: "Field placeholder", after: "" },
    "readonly": { before: true, after: false }
    // etc...
};

[lionel-bijaoui]

My tests fail if the properties are not set in the schema

[lionel-bijaoui]

Woops my bad

[icebob]

My tests fail if the properties are not set in the schema

Please explain, I don't understand.

[lionel-bijaoui]

describe("check template", () => {
    let schema = {
        type: "masked",
        label: "Phone",
        model: "phone",
        // autocomplete: "off", // <-- not set here
        placeholder: "",
        readonly: false,
        cleaveOptions: {
            phone: true,
            phoneRegionCode: "HU",
        }
    };
    let model = { phone: "30 123 4567" };
    let input;

    before(() => {
        createField(this, schema, model, false);
        input = el.getElementsByTagName("input")[0];
    });

    it('should set autocomplete', function(done) {
        schema.autocomplete = "on";
        vm.$nextTick(() => {
            expect(input.autocomplete).to.be.equal(schema.autocomplete);  // <-- fail here
            schema.autocomplete = "off";
            done();
        });
    });
});

but:

describe("check template", () => {
    let schema = {
        type: "masked",
        label: "Phone",
        model: "phone",
        autocomplete: "off", // <-- set here
        placeholder: "",
        readonly: false,
        cleaveOptions: {
            phone: true,
            phoneRegionCode: "HU",
        }
    };
    let model = { phone: "30 123 4567" };
    let input;

    before(() => {
        createField(this, schema, model, false);
        input = el.getElementsByTagName("input")[0];
    });

    it('should set autocomplete', function(done) {
        schema.autocomplete = "on";
        vm.$nextTick(() => {
            expect(input.autocomplete).to.be.equal(schema.autocomplete);  // <-- work here
            schema.autocomplete = "off";
            done();
        });
    });
});

Why ?

[icebob]

Yes, because first case the "autocomplete" property is not reactive. Use schema.$set("autocomplete", "on") or field.schema.$set("autocomplete", "on")

[lionel-bijaoui]

I tried it and it trigger other errors. I want to finish it so I'm going to do it by initializing for now.

[icebob]

Please remove this old commented rows (other files too).

[lionel-bijaoui]

Yeah, I wasn't sure you wanted to delete them or not, so meanwhile, I commented them. I will clean things now !

[icebob]

You are mindful. But if we covered with your new code we can delete them. Because after 3 months, we won't know it is a skipped tests (what need to fix) or unneccessary :)

[lionel-bijaoui]

Ok, make sense, sorry about that.

[icebob]

Nop, if you ready, I will merge it. 🎉

[icebob]

So can be merge? (after green travis)