vinayakkulkarni / nuxt-ava-e2e-unit-testing Goto Github PK

View Code? Open in Web Editor NEW

46.0 4.0 11.0 3.98 MB

🧪 Nuxt + Ava for E2E & Unit Testing

License: MIT License

JavaScript 52.00% Vue 46.40% HTML 1.60%

nuxt babel testing ava e2e-testing unit-testing code-coverage nyc vue javascript testing-framework

nuxt-ava-e2e-unit-testing's Introduction

Nuxt & Ava

Nuxt.js app with Ava -> Unit Testing & E2E Testing

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate

# run e2e tests
$ npm run test:e2e

# run unit tests
$ npm run test:unit

# run e2e and unit tests
$ npm t

For detailed explanation on how things work, checkout Nuxt.js docs.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Wagner Souza}

⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

nuxt-ava-e2e-unit-testing's People

Contributors

Stargazers

Watchers

Forkers

lredoban waghcwb travis-r6s fossabot motorstreak guidouil alwindeleon dannywp lgtm-migrator nikitoring sakarozone

nuxt-ava-e2e-unit-testing's Issues

Using components in layout

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>

[docs] Add examples

Vuex (refer #15)
Vue-Router -> NLink, NChild examples.
Globals -> Nuxt modules $recaptcha, $auth etc.

How to implement e2e testing with nuxtServerInit

I'm new about AVAJS and testing.
So forgive me about below question.
How can I implement the case of I have axios get function in my store INDEX in nuntServerInit.
I've try to mock this function

actions = {
    nuxtServerInit: async () => true,
  };

but it seems not working, still called axios.
SO what shall I do?
May I get any help here.

Error when running test script

Steps:

Clone repository
Run yarn
Run yarn test

[vue-test-utils]: window is undefined, vue-test-utils needs to be run in a browser environment.
You can run the tests in node using jsdom
See https://vue-test-utils.vuejs.org/guides/#browser-environment for more details.

Is there a misconfiguration with jsdom somewhere?

Istanbul code coverage line number

Hi,

When execute npm run test:unit, here is the following result :

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |    86.36 |    70.45 |    83.33 |    86.36 |                   |
 Logo.vue |      100 |    89.47 |      100 |      100 |              5,12 |
 Todo.vue |       80 |       56 |       80 |       80 |... ,68,89,120,126 |
----------|----------|----------|----------|----------|-------------------|

Problem :
The Logo.vue isn't coverage in branch at 100% because there are some missing conditionnals states according to Istanbul.
I check on my project, and get the same strange thing : uncovered line are totally incorrect.
In this example, line 5 at Logo corresponding to html class.
Another example, Todo.vue : uncovered line 120, 126 ... but there are only 73 line in this file :/

How to resolve this ?
I try to follow this https://stackoverflow.com/questions/44120502/nyc-coverage-shows-incorrect-line-numbers. But i got this error : Module not found : babel-register

Thanks for your help :)
Thanks for this repository to start with NuxtJs and Ava :)

Add cross-env to run scripts in package.json

When trying to run the tests on windows I get the following error

λ npm run test:e2e

> [email protected] test:e2e C:\my-user\server\nuxt-ava-e2e-unit-testing
> TEST=e2e nyc ava ./test/e2e/*.js --verbose --color

TEST: extra argument ‘nyc’

Adding cross-env seems to solve the problem.

Snapshot doesn't work

Hi guys,

Thank you for your work and this setup 🙏
I have a problem with the AVA snapshots, the first test works but when I run it a second time I have an error.

First try

Second trial

My code, from Logo.spec.js file :

import { mount } from '@vue/test-utils';
import test from 'ava';
import Logo from '@/components/Logo.vue';

test('is a Vue instance', (t) => {
  const wrapper = mount(Logo);
  t.is(wrapper.isVueInstance(), true);
});

test('Logo.vue snapshot', (t) => {
  const wrapper = mount(Logo);

  t.snapshot({ html: wrapper.html() });
});

Do you have an idea?

Thank you

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.