• Testergebnisse
  • Notizen zu Fails
• Welche Komponenten updaten sich überhaupt
• Generelle Notizen

Testergebnisse

Framework	✅ Passed	⚠️ Flaky	❌ Failed
Angular	112	0	0
Astro	103	3	6
Next	111	0	1
Nuxt	112	0	0
React	110	2	0
Svelte	108	0	4
Vue	110	2	0

Notizen zu Fails

• Astro
  • Page Load (Index, domComplete 2360 -> 2472 -> 2594 ms, responseEnd schon über 2000 ms), Page Load (About, domComplete 2169 -> 2196 -> 2209 ms, responseEnd schon über 1500 ms), Page Load (Create, domComplete 2224 -> 2264 -> 2232 ms, responseEnd schon über 2000 ms), Page Load (Profile, domComplete 2514 -> 2392 -> 2355 ms, responseEnd schon über 2000 ms) unter Firefox, State Change (Media Selection, minimale Reaktionzeit 101 -> 118 -> 133 ms) unter Webkit und State Change (Post Creation, minimale Reaktionszeit 112 -> 145 -> 117 ms) unter Webkit failen
  • State Change (Media Source Insert, minimale Reaktionszeit 116 -> 87 ms) unter Webkit, State Change (Media Source Insert, mininmale Reaktionszeit 104 -> 78 ms) unter Mobile Safari und State Change (Post Creation, minimale Reaktionszeit 116 -> 96 ms) unter Mobile Safari sind flaky
• Next
  • State Change (Post Creation, minimale Reaktionszeit 102 -> 144 -> 130 ms) unter Webkit failt
• React
  • State Change (Media Selection, minimale Reaktionszeit 180 -> 68 ms) unter Firefox und State Change (Media Selection, minimale Reaktionszeit 125 -> 132 -> 91 ms) unter Webkit sind flaky
• Svelte
  • Alle Page Loads unter Firefox:
    • Index (domComplete 2616 -> 2588 -> 2586 ms, responseEnd schon über 2000 ms)
    • About (domComplete 2202 -> 2219 -> 2212 ms, responseEnd schon über 1500 ms)
    • Create (domComplete 2273 -> 2199 -> 2229 ms, responseEnd schon über 2000 ms)
    • Profile (domComplete 2372 -> 2349 -> 2341 ms, responseEnd schon über 2000 ms)
• Vue
  • State Change (Media Source Insert, minimale Reaktionszeit 102 -> 77 ms) unter Webkit und State Change (Media Source Insert, minimale Reaktionszeit 102 -> 78 ms) unter Mobile Safari sind flaky

Welche Komponenten updaten sich überhaupt

• Angular
  • Caption Change: Caption <p> Paragraph + <span>-Elemente + Formular + Textarea aus dem Create-Formular
  • Media Selection: Formular + Select aus dem Create-Formular + <app-media-component> + <img>-Element darin
  • Media Source Insert: Formular + URL input-Element aus dem Create-Formular + <app-media-component> + <img>-Element darin
  • Post Creation: Formular + Select aus dem Create-Formular + <app-media-component> + <img>-Element darin + Caption <p> Paragraph + <span>-Elemente + Formular + Textarea aus dem Create-Formular
• Astro
  • Caption Change: Caption <p> Paragraph + <span>-Elemente + Textarea aus dem Create-Formular
  • Media Selection: Gesamte Astro-Island (Formular + Post) + <img>-Element
  • Media Source Insert: Gesamte Astro-Island (Formular + Post) + <img>-Element + URL input-Element
  • Post Creation: Caption <p> Paragraph + <span>-Elemente + Textarea aus dem Create-Formular + Button aus dem Create-Formular + gesamte Astro-Island (Formular + Post) + <img>-Element
• Next
  • Caption Change: Caption <p> Paragraph + <span>-Elemente + URL <input> (name-Attribut) + Textarea
  • Media Selection: Media-Component <div> + Media-Component <img> + URL <input>
  • Media Source Insert: Media-Component <div> + Media-Component <img> + URL <input>
  • Post Creation: Media-Component <div> + Media-Component <img> + Caption <p> Paragraph + <span>-Elemente + URL <input> + Textarea + Button
• Nuxt
  • Caption Change: Caption <p> Paragraph + <span>-Elemente
  • Media Selection: <main>-Element und <img>-Element darin
  • Media Source Insert: <main>-Element und <img>-Element darin
  • Post Creation: <main>-Element und <img>-Element darin + Button + Caption <p> Paragraph + <span>-Elemente
• React
  • Caption Change: Textarea + Caption <p> Paragraph + <span>-Elemente
  • Media Selection: <main>-Element und <img>-Element darin
  • Media Source Insert: <main>-Element und <img>-Element darin + URL <input>
  • Post Creation: <main>-Element und <img>-Element darin + Textarea + Caption <p> Paragraph + <span>-Elemente + Button
• Svelte
  • Caption Change: Caption <p> Paragraph + <span>-Elemente
  • Media Selection: Post <div> + <img> darin
  • Media Source Insert: Post <div> + <img> darin
  • Post Creation: Post <div> + <img> darin + Button + Caption <p> Paragraph + <span>-Elemente
• Vue
  • Caption Change: Caption <p> Paragraph + <span>-Elemente
  • Media Selection: Post <div> + <picture>-Elemente und <source>- und <img>-Elemente darin
  • Media Source Insert:
  • Post Creation: <picture>-Elemente und <source>- und <img>-Elemente darin + Button + Caption <p> Paragraph + <span>-Elemente

Generelle Notizen

• Textarea wird geupdatet durch Änderung des Children (Astro, Next, Nuxt, React)
• Astro-Island wird durch Children geupdated (Media Selection Image, Media Source Insert Image), aber nicht bei Caption, weil Paragraph immer da ist (mit 1 leeren Span)
• Post Creation updatet Image Source und Alt-Attribut und Button disabled-Attribut
• URL-Input wird geupdatet durch name-Attribut, wenn Textarea geupdatet wird (Next)
• Main-Element wird durch Einfügen des Images geupdatet (Nuxt)
• URL-Input-Change und Textarea-Change ändern den Value nicht (Nuxt, Vue)
• Textarea wird geupdated durch Änderung des ng-reflex-model Attributs (Angular)
• Caption-Change triggert Änderung des ng-reflect-caption Attributs von <app-post>
• Source Selection triggert Änderung des ng-reflect-media-source Attributs von <app-post> und ng-reflect-src Attributs von <app-media-component>