analyze testing data in a tabular format with Jest

I am working with an HTML table that contains the following data:


id | name

2 | C

1 | B

3 | A

My task is to test the order of items in the table. I am currently able to retrieve the rows using:

wrapper.findAll('table tr')

However, I am unsure how to assert the order of rows by comparing the columns (tds). Any suggestions would be greatly appreciated. Thank you.

Answer №1

Here is a way to accomplish the task:

const $tableRows = wrapper.findAll('tbody > tr').wrappers

const firstColumnValues = $tableRows.map(row => {
  return row.
    findAll('td')
    .at(0)
    .text()
})

expect(firstColumnValues[0]).toBe('value 1')
expect(firstColumnValues[1]).toBe('value 2')

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

Adjusting the line-height in CSS dynamically based on the length of characters using jQuery

I am facing an issue with the Twitter widget on my website where our company's latest tweet sometimes gets cut off if it exceeds a certain length. I want to dynamically adjust the line-height CSS property of the element based on the tweet's chara ...

Organizing layers with Leaflet's layerGroup controls

I am working with a series of Leaflet FeatureGroups, each made up of GeoJSON layers. These FeatureGroups have similar concepts but need to be kept separate for control purposes. I also require the ability to toggle all FeatureGroups on and off simultaneous ...

Switch out the DOM element for either the opening tag or the closing tag only

Currently, I utilize Blogger for my blogging needs. However, I have encountered an issue where pressing enter in the Rich Text Editor generates <br /> (line break) tags rather than <p></p> (paragraph tags). Unfortunately, there is no appa ...

Vue: Do not process property until axios response

When making API calls using axios, I encounter an issue where I have to specify blank values for mustache properties before they are populated. For example, {{page_data.title}} generates an error even though axios will eventually populate the value. To o ...

How do I retrieve a nested object element based on the value of a specific field in Mongoose?

Below is the teamModelSchema schema that I am working with. var teamMemberModelSchema = new mongoose.Schema({ "email": { "type": String, "required": true, "min": 5, "max": 20 }, "name": { "type": String ...

Utilize Express efficiently by requiring modules only once for multiple routes within the application

Here is an overview of my project directory structure: MyProject -app.js -routes -routeone -routetwo In the app.js file, I have the following setup: var express = require('express'); var app = express(); var routeone = ...

Which is Better for Creating DropDown Menus: CSS or JavaScript?

Starting a new project that involves dropdown menus with categories and subcategories within them. I'm curious about the advantages of using CSS3 only menus compared to traditional JavaScript ones. There are several jQuery menu options available as we ...

Creating a "Container" component in Vue.js step by step

As a newcomer to Vue, I am facing a challenge in implementing a wrapper component similar to React's 'Wrapper' component. Specifically, I want to create a reusable datagrid component using a 3rd-party some-table component and a pagination co ...

Using ASCII 3D text can create a stunning visual effect on a website, but it can sometimes appear

My website is displaying ASCII 3D Text with glitchy lines, but this issue is not present on other websites. Example 1: Glitchy lines visible on my website Example 2: A different website using the same text without any glitchy lines. No glitches detected h ...

What is the best way to transform the words in my JavaScript array into clickable links?

I am working on a search bar that autofills words and I want to turn those autofilled words into clickable links. For example, if I type "locations" in the search bar, I want it to autofill the word "locations" and turn it into a link that directs me to pa ...

Enhance your viewing experience with the Zoom feature that activates when

I recently noticed on that I am able to zoom/enlarge a photo by clicking on it. Is there a way for me to incorporate this feature without purchasing the entire theme? While I understand the theme is designed for purchase, I only need this specific functi ...

Executing npm / http-server script

I'm currently working on a shell script that will compile an Angular app using the "ng build" command and then launch a web server to host the app from the dist folder. The web server will be started with the "http-server" command, which needs to be i ...

Validate the button's status in Ionic

When I click on a button, I am trying to retrieve the Toggle state immediately. However, I consistently receive a value of true, even when my toggle is actually set to false. I believe the issue lies in how I am manipulating the DOM. Here is an example ...

jQuery allows you to easily load a page fragment using Ajax

Below is the script I created to load a specific page using ajax. $(function(){ // Keep a mapping of url-to-container for caching purposes. var cache = { // If url is '' (no fragment), display this div's content. ...

How should elements be properly inserted into injected HTML code?

We are currently phasing out our custom forms in React on the website, and transitioning to Microsoft Dynamics 365 generated forms. These new forms are injected through a React placeholder component created by a script that loads the js bundle and inserts ...

fetch Active Directory user details using React

I'm working on a React web application. I need to pull user information from Active Directory and verify if the user belongs to a specific AD group. Is this achievable? What would be the best approach to create an API for this integration? ...

Validation method in jQuery for a set of checkboxes with distinct identifiers

I am faced with a situation where I have a set of checkboxes that, due to the integration with another platform, must have individual names even though they are all interconnected. <div class="form-group col-xs-6 checkbox-group"> <label cla ...

Issue with Intel XDK: the document.location.href is directing to an incorrect page

Hello Community of Developers, I have been experimenting with different methods but still haven't found a solution. In my project using Intel XDK, whenever I attempt to change the page using location.location.href = "#EndGame" or similar codes in Java ...

Clicking to fade in and out with jQuery on data attributes

I have structured my HTML code as follows: <div class="col-sm-8"> <img id="click-1" class="glasses one active" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png"/> ...

Troubleshooting Vue.js data binding problems

Utilizing HTML targeting with data binding <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div class="row" v-for="test in tests"> <div class="col-12"> <router-link tag="a" :to="{ name: ...