mercredi 3 juin 2020

Trying to test a table which will be created by mapping over a response from an endpoint using Jest, not sure how to go about doing this

I am hitting an endpoint and trying to test if a table is populated with the data using jest. It basically hits an endpoint and maps over the response to create rows and populate the table data. The JS works but it's the test i'm a little stuck on.

My function:

const data = require('./getUsers.js');

const Table = () => {
  data.then(users => {
    users.data.map(user => {
      var row = document.createElement('tr');
      var id = document.createElement('td');
      var name = document.createElement('th');

      id.innerHTML = user.id;
      name.innerHTML = user.first_name;

      row.appendChild(id);
      row.appendChild(name);

      document.getElementById('table').appendChild(row);
    });
  });
  data.catch(res => console.log(res));
};


//Get getUsers.js

const axios = require('axios');

const data = axios.get(
  'https://api.com/users'
);

module.exports = data;


//Test
const data = require('./getUsers.js');
const axios = require('axios');
describe('User Table', () => {
  jest.mock('axios');

  it('get endpoint', async done => {
    const response = await data;
    expect(response.status).toBe(200);
    done();
  });

  test('Table updates with users', () => {
    jest.fn().mockResolvedValue({
      data: [
        {
          id: 135,
          first_name: 'Test',
        },
        {
          id: 396,
          first_name: 'User',
        },
      ],
    });
    document.body.innerHTML = `
      <table id="table">
      <thead id="head">
        <tr>
          <th scope="col">Id</th>
          <th scope="col">Name</th>
        </tr>
      </thead>
      <tbody id="table-people">
      </tbody>
    </table>`;

    let table = document.getElementById('table-people');
    let selectRows = table.querySelectorAll('tbody *');

    //expect table to be populated with users
    done();
  });
});

I got this far but not sure how to actually finish the test, any help would be appreciated.

Aucun commentaire:

Enregistrer un commentaire