Evaluating Vue with AVA - The key is in the whitespace

Currently, I am engrossed in a Laracast Episode about Vue Testing with AVA. Everything has been going smoothly so far, but now I have encountered an intriguing bug.

This is my notification.js:

import test from 'ava';
import Notification from '../src/Notification';

test('that it renders a notification', t => {
    //V2
    let N = Vue.extend(Notification);
    let string = 'Foobar';
    string.trim();
    let vm = new N({propsData:{message: string}}).$mount();


    // V1
    //let n = new Vue(Notification).$mount();
    //t.truthy('unicorn'); // assertation needed, does not have any importance
    //console.log(n.$el.innerHTML);

    t.is(vm.$el.textContent,'Foobar');
});

This is how the imported Notification.js file looks:

export default{
    template:'<div> {{ message }} </div>',

    props:['message']
};

The error message I receive is as follows:

that it renders a notification

  test/notification.js:18

   17:                                       
   18:     t.is(vm.$el.textContent,'Foobar');
   19: });                                   

  Difference:

  - ' Foobar '
  + 'Foobar'

As evident, AVA detects a discrepancy between the strings due to two whitespaces before and after 'Foobar'. I attempted to trim() the string, yet the issue persists.

Does anyone have insights on where these extra whitespaces are originating from or how to resolve this?

Answer №1

After closely examining the issue, I discovered a simple mistake:

'<div> {{ message }} </div>'

should actually be

<div>{{ message }}</div>'

The issue was caused by unnecessary whitespaces in the div element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure accurate detection of invalid values for SVG Elements in React using jest testing framework

When testing my react app, I am attempting to capture any errors that are thrown or logged to the console. If a regular HTML element such as <p> contains invalid attributes like <p color={false}></p>, react will display an error via cons ...

Mongoose: execute population step after making the query

What is the proper way to populate the query result in Mongoose after executing a query similar to this: users .find({name:"doejohn"}) .skip(3) .limit(9) .exec((err,user) => { user // result ...

Fixed width for the last column in DataTables

Here's the scenario: I have a jQuery script that loads DataTables, and I know how to set the "aoColumns" : "sWidth" parameter to fix the width of a specific column, which is working fine. However, my issue arises from having multiple tables with var ...

The reflight response received an unexpected HTTP status code of 500

Recently, I've been working on utilizing the Yelp Fusion API by making a simple ajax call. I started off by using the client_id and client_secret provided by Yelp to successfully obtain an access token through a 'POST' request in Postman, fo ...

Unable to retrieve this object because of a intricate JavaScript function in Vue.js

For my VueJs project, I am utilizing the popular vue-select component. I wanted to customize a keyDownEvent and consulted the documentation for guidance. However, I found the example provided using a mix of modern JS techniques to be quite cryptic. <tem ...

Exploring the world of tweets using React

While trying to retrieve tweets using the Twit package, I keep encountering error 400. I received an error message stating: "Failed to load https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=twitterdev&count=10: Response to prefligh ...

Click on the link within the Checkbox label on MUI

I am working on creating a checkbox for the "Terms of Use," using FormControlLabel to nest a Checkbox. However, I also need to include a link that opens a Dialog component displaying the terms. The challenge is that clicking on the link checks the checkbox ...

Duplicating labels with JavaScript

I need assistance with copying HTML to my clipboard. The issue I am encountering is that when I try to copy the button inside the tagHolder, it ends up copying <span style="font-family: Arial; font-size: 13.3333px; text-align: center; background-color: ...

Simultaneously activate the top and bottom stacked components by clicking on them

One of my components has two child components, A and B. Component A is set to position: absolute and placed on top of component B like an overlay. Additionally, component A has a higher z-index. Both components have onClick events attached to them. My que ...

Using the $.ajax function to make requests with CORS restrictions

Having some trouble with an AJAX request. I encountered the following error message: Error: Access is denied This is the jQuery AJAX request I attempted: $.support.cors = true; $.ajax({ url: 'http://testwebsite.com/test', type: "GET" ...

Refresh a dynamically loaded webpage following an update

Trying to grasp the concept of reloading a dynamic page loaded with AJAX after a record is updated. Here's the jquery script on the page: <script type="text/javascript> function showUser(str) { if (str == "") { $("#txtHint").empty() ...

Is there a specific method for organizing cached buffer conversions in Node.js for optimal efficiency?

In a GitHub discussion, it was pointed out that the Map's .has method does not work with buffers because identical buffers are considered as distinct objects. This limitation became apparent when attempting to store buffer string conversions in a map ...

The functionality of the "Slots" prop has no impact when used on the material-ui Slider component

Trying to understand the purpose of the "slots" prop in relation to customizing how inner components like track and thumb are rendered within the Slider component. A basic example of rendering a Slider component is shown below const marks = [ { value: 0 ...

Having trouble with installing the most recent versions of React App dependencies

After cloning a project from GitHub, I attempted to install dependencies using npm install, but encountered an error: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email ...

Nested loops with synchronous calls running in parallel

Is there a way to make synchronous calls in two nested 'for' loops in Node.JS? I have an Asynchronous call, but I am unsure how to modify it to work synchronously and go to the next iteration when create_db is done! var new_items = []; f ...

I'm having trouble understanding the distinction between this.query and this.query.find(). Can you explain the difference to me?

Currently, I am working on a MERN tutorial where I am developing a full E-commerce application. This is the class that handles querying and various other tasks. constructor(query, querystr) { this.query = query; this.querystr = querystr; con ...

Pushing state history causes browser back and forward button failure

I'm currently utilizing jQuery to dynamically load content within a div container. On the server side, the code is set up to detect if the request is being made through AJAX or GET. In order to ensure that the browser's back and forward buttons ...

Ways to halt the repetition of clicking the like button on my social media posts

I've been working on a new post system that allows users to like posts. Everything seems to be in order except for one issue - when iterating through the likes table from the post-like relation, the like button is being duplicated even with added cond ...

Adjust the size of the text within the div element as needed

Here is my code on jsFiddle where I am dynamically changing the text font to fit in the div. Everything is working perfectly fine. Currently, the text is within a span element, but I would like to remove the span and have the same functionality. However, w ...

Disable the mouseenter event in jQuery when the window is resized

I am facing a challenge with my code. I have two different functions that are triggered based on the screen size - one for desktop and one for mobile. The issue arises when transitioning from a desktop to a mobile view, as the hover/mouseenter effect still ...