Wenn zwei (Validator und Unit-Test) sich streiten, ärgert sich der dritte (ich)

[Christian Kruse]

Hallo Gunnar,

ich persönlich würde so einen Validator gar nicht erst einbauen. Man sollte Entwicklern zumuten, dass sie wissen, dass es h1 bis h6 gibt. Genau genommen würde ich nichtmal die Heading-Komponente bauen, wenn sie wirklich nur ein h1 mit entsprechendem Level generiert. Warum sollte man dann nicht direkt h1 bis h6 verwenden?

Wenn du es aber doch tun willst (etwa weil du Infos weg gelassen hast und es in deinem Fall tatsächlich sinnvoll ist):

Für <Heading level="3" text="Und sonst so?"/> soll dann
<h3>Und sonst so?</h3> rauskommen.

<template>
  <component :is="headingType">{{ text }}</component>
</template>

<script type="text/babel">
  function isValidHeadingLevel(value) {
    return [1, 2, 3, 4, 5, 6].includes(value);
  }

  export default {
    name: 'Heading',
    props: {
      /**
       * heading level (integer from 1 to 6)
       */
      level: {
        type: Number,
        required: true,
        validator: isValidHeadingLevel,
      },
      /**
       * heading text
       */
      text: {
        type: String,
        required: true,
      },
    },
    computed: {
      headingType() {
        return `h${this.level}`;
      },
    },
  };
</script>

[…]

    computed: {
      headingType() {
        return isValidHeadingLevel(this.level) ? `h${this.level}` : 'div';
      },
    },

Ich würde hier headingType und isValidHeadingLevel einzeln testen und nicht die ganze Komponente. Du schreibst ja einen Unit Test und keinen Integration Test.

Freundliche Grüße,
Christian Kruse