Using components in layout #264
Description
Components used in layouts aren't rendered in the tests.
Expected behaviour:
Content of components should be rendered tests when they are included in layout files.
Example code:
layouts/default.vue
<template>
<div>
<nuxt />
+ <logo />
</div>
</template>test/e2e/index.js
+test('Layout includes logo', async (t) => {
+ const { html } = await nuxt.renderRoute('/', {});
+ console.log(html);
+ t.true(html.includes('<div class="Triangle Triangle--two">'));
+});This test fails
Output of the console.log in HTML (note the <logo></logo>)
<!doctype html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" data-n-head-ssr><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html data-n-head-ssr><!--<![endif]-->
<head>
<link rel="preload" href="/_nuxt/a87e61b.js" as="script"><link rel="preload" href="/_nuxt/69dabde.js" as="script"><link rel="preload" href="/_nuxt/03356f7.js" as="script"><link rel="preload" href="/_nuxt/288bb25.js" as="script"><style data-vue-ssr-id="3191d5ad:0">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style><style data-vue-ssr-id="932a8f60:0">html{font-family:"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;word-spacing:1px;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;box-sizing:border-box}*,:after,:before{box-sizing:border-box;margin:0}.button--green{display:inline-block;border-radius:4px;border:1px solid #3b8070;color:#3b8070;text-decoration:none;padding:10px 30px}.button--green:hover{color:#fff;background-color:#3b8070}.button--grey{display:inline-block;border-radius:4px;border:1px solid #35495e;color:#35495e;text-decoration:none;padding:10px 30px;margin-left:15px}.button--grey:hover{color:#fff;background-color:#35495e}</style><style data-vue-ssr-id="6759f5ab:0">.container{margin:0 auto;min-height:100vh;display:flex;justify-content:center;align-items:center;text-align:center}.title{font-family:"Quicksand","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;display:block;font-weight:300;font-size:100px;color:#35495e;letter-spacing:1px}.subtitle{font-weight:300;font-size:42px;color:#526488;word-spacing:5px;padding-bottom:15px}.links{padding-top:15px}</style><style data-vue-ssr-id="e46b6ba2:0">.VueToNuxtLogo{display:inline-block;-webkit-animation:turn 2s linear 1s forwards;animation:turn 2s linear 1s forwards;transform:rotateX(180deg);position:relative;overflow:hidden;height:180px;width:245px}.Triangle{position:absolute;top:0;left:0;width:0;height:0}.Triangle--one{border-left:105px solid transparent;border-right:105px solid transparent;border-bottom:180px solid #41b883}.Triangle--two{top:30px;border-left:87.5px solid transparent;border-right:87.5px solid transparent;border-bottom:150px solid #3b8070}.Triangle--three,.Triangle--two{left:35px;-webkit-animation:goright .5s linear 3.5s forwards;animation:goright .5s linear 3.5s forwards}.Triangle--three{top:60px;border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:120px solid #35495e}.Triangle--four{top:120px;left:70px;-webkit-animation:godown .5s linear 3s forwards;animation:godown .5s linear 3s forwards;border-left:35px solid transparent;border-right:35px solid transparent;border-bottom:60px solid #fff}@-webkit-keyframes turn{to{transform:rotateX(0deg)}}@keyframes turn{to{transform:rotateX(0deg)}}@-webkit-keyframes godown{to{top:180px}}@keyframes godown{to{top:180px}}@-webkit-keyframes goright{to{left:70px}}@keyframes goright{to{left:70px}}</style>
</head>
<body >
<div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><section class="container"><div><div class="VueToNuxtLogo"><div class="Triangle Triangle--two"></div> <div class="Triangle Triangle--one"></div> <div class="Triangle Triangle--three"></div> <div class="Triangle Triangle--four"></div></div> <h1 class="title">
nuxt-ava-e2e-unit-testing
</h1> <h2 class="subtitle">
Nuxt app with Ava -> Unit Testing & E2E Testing
</h2> <div class="links"><a href="https://nuxtjs.org/" target="_blank" class="button--green">
Documentation
</a> <a href="/examples" class="button--green">
Examples
</a> <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">
GitHub
</a></div></div></section> <logo></logo></div></div></div><script>window.__NUXT__={layout:"default",data:[{}],fetch:[],error:null,state:{list:[]},serverRendered:true,routePath:"\u002F",config:{}};</script><script src="/_nuxt/a87e61b.js" defer></script><script src="/_nuxt/288bb25.js" defer></script><script src="/_nuxt/69dabde.js" defer></script><script src="/_nuxt/03356f7.js" defer></script>
</body>
</html>