@@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?"/>`{:.language-html} soll dann `<h3>Und sonst so?</h3>`{:.language-html} rauskommen. ~~~html <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"/>`{:.language-html} aufruft, meckert zwar der Validator; aber wer liest schon Warnungen? 🧐 Es wird `<h42>Antwort</h42>`{:.language-html.bad} generiert. Fehlerbehandlung eingebaut: ~~~js computed: { headingType() { return isValidHeadingLevel(this.level) ? `h${this.level}` : 'div'; }, }, ~~~ Lass den Validator meckern, die Komponente ist robust und gibt `<div>Antwort</div>`{:.language-html} aus. Und genau das will ich im Unit-Test auch abfragen. Und *dabei* soll der Validator schön still sein. LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling

@@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?"/>`{:.language-html} soll dann `<h3>Und sonst so?</h3>`{:.language-html} rauskommen. ~~~html <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, }, /** * heding text */ text: { type: String, required: true, }, }, computed: { headingType() { return `h${this.level}`; }, }, }; </script> ~~~ Wenn man da nun aber `<Heading level="42" text="Antwort"/>`{:.language-html} aufruft, meckert zwar der Validator; aber wer liest schon Warnungen? 🧐 Es wird `<h42>Antwort</h42>`{:.language-html.bad} generiert. Fehlerbehandlung eingebaut: ~~~js computed: { headingType() { return isValidHeadingLevel(this.level) ? `h${this.level}` : 'div'; }, }, ~~~ Lass den Validator meckern, die Komponente ist robust und gibt `<div>Antwort</div>`{:.language-html} aus. Und genau das will ich im Unit-Test auch abfragen. Und *dabei* soll der Validator schön still sein. LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling