Test Plugin

TestPlugin lägger till stöd för att lägga till data-test attribute dynamiskt på HTML element. Plugin:et är tänkt att användas vid testautomation, enhets- och e2e-tester.

TestPlugin initialiseras på nedan sätt (bör göras så tidigt i applikationen som möjligt, t.ex. main.ts )

import { defineComponent } from "vue";

const App = defineComponent({});

/* --- cut above ---*/

import { createApp } from "vue";
import { TestPlugin } from "@fkui/vue";

const app = createApp(App);
app.use(TestPlugin);
app.mount("#app");

Användning

Lägg till direktivet v-test till elementet som ska få data-test attributet.

Notera att om värdet som skickas in till v-test är en sträng så måste värdet ha '' runt sig, t.ex. v-test="'exempel-v-test'". Detta är för att det som är innanför v-test="" evalueras som JavaScript.

<script>
import { defineComponent } from "vue";
import { FTextField } from "@fkui/vue";

export default defineComponent({
    name: "TestPluginExample",
    components: { FTextField },
});
</script>

<template>
    <f-text-field id="child-name" v-validation.maxLength="{ maxLength: { length: 100 } }">
        Barnets namn
    </f-text-field>
</template>

Exempel

<script>
import { defineComponent } from "vue";
import { FTextField } from "@fkui/vue";

export default defineComponent({
    name: "TestPluginHidden",
    components: { FTextField },
    data() {
        return { isVisible: false };
    },
});
</script>

<template>
    <div>
        <f-text-field
            v-if="isVisible"
            id="child-name"
            v-validation.maxLength="{ maxLength: { length: 100 } }"
        >
            Barnets namn
        </f-text-field>

        <button type="button" @click="isVisible = !isVisible">
            {{ isVisible ? "Göm inmatningsfält" : "Visa inmatningsfält" }}
        </button>
    </div>
</template>

Kakor på webbplatsen

Test Plugin

Användning

Exempel