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

[Gunnar Bittersmann]

@@Christian Kruse

Ich kann das nur vermuten, da mit der Einblick in dein genaues Szenario fehlt.

Szenario ist eine Heading-Komponente.
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>

Wenn man da nun aber <Heading level="42" text="Antwort"/> aufruft, meckert zwar der Validator; aber wer liest schon Warnungen? 🧐 Es wird <h42>Antwort</h42> generiert.

Fehlerbehandlung eingebaut:

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

Lass den Validator meckern, die Komponente ist robust und gibt <div>Antwort</div> aus.

Und genau das will ich im Unit-Test auch abfragen. Und dabei soll der Validator schön still sein.

LLAP 🖖