vendredi 12 avril 2019

How to write tests for Component that uses Table component material UI?

I'm having a lot of trouble writing a test for the following code:

import { Table, TableBody, TableCell, TableHead, TableRow, Tooltip } from '@material-ui/core';
import React, { Component } from 'react';

const Status = ({ id, dependency}) => {

  let text, tooltipText;

  if (id === 'something' ) {
    tooltipText = `Some helpful text.`;
    text = "undefined";
  } else if (id === 'other' ) {
    tooltipText = `Some other helpful text.`;
    text = "undefined";
  } else{
    tooltipText = `Unknown`;
    text = "unknown";
  } 
  return (
    <Tooltip title={tooltipText} >
        <span>
          {text}
        </span>
    </Tooltip>
  );
};

class StatusList extends Component {

  render() {
    const { cardTitle, dependencies, id } = this.props;

    if (!dependencies) {
      return null;
    }

    return (
      <Card title={cardTitle}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell>STATUS</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {dependencies.map(dep => (
              <TableRow key={dep.id}>
                <TableCell>
                  <URL to={`/${dep.id}`}>{dep.id}</URL>
                </TableCell>
                <TableCell>
                  <Status id={id} dependency={dep} />
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Card>
      );
   }
};

So far, I have the following tests:

import { shallow } from 'enzyme';

describe('test', () => {
const props = {
    cardTitle: "Dependencies",
    dependencies: [id: 'something'],
    id: 'my-id'
};
it('renders', () => {
    const wrapper = shallow(<Status {...props} />);
    expect(wrapper.find(TableBody).find(TableRow)).toHaveLength(4);
  });
}); 

Which works fine, but I now want to assert what's being rendered by the Status function - i.e. I want to check the logic in there, and make sure that the right tooltipText is being rendered. I have tried to write the following test:

it('renders row with expected status', () => {
    const wrapper = shallow(<StatusList {...props} />);
    expect(wrapper.find(Table).find(TableBody).find(TableRow).first().find(TableCell).find('Tooltip').props.title).toEqual('Some helpful text.');
  });

but I get the error:

Expected value to equal: "Some helpful text." Received: undefined

and I'm not sure what I'm doing wrong..

Aucun commentaire:

Enregistrer un commentaire