Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Using components in layout #264

Open
Juice10 opened this issue Nov 27, 2020 · 0 comments
Open

Using components in layout #264

Juice10 opened this issue Nov 27, 2020 · 0 comments

Comments

@Juice10
Copy link

Juice10 commented Nov 27, 2020 •
edited
Loading

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 -&gt; Unit Testing &amp; 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Juice10