## Enzyme/ReactTestUtils TestKit API

| method                         | arguments            | returned value | description                                                      |
| ------------------------------ | -------------------- | -------------- | ---------------------------------------------------------------- |
| getRowsCount                   | -                    | number         | num of rows                                                      |
| getRowsWithClassCount          | string               | number         | num of rows with <arg> class name                                |
| getRowText                     | number               | string         | get row index <arg> text                                         |
| getRowClasses                  | number               | string         | get row index <arg> classes                                      |
| getHeaderCellStyle             | number               | string         | get header cell index <arg> inline style                         |
| getCellStyle                   | (rowIndex, colIndex) | string         | get cell index <args> inline style                               |
| isRowClickable                 | number               | bool           | true if row index <arg> is clickable                             |
| getTitles                      | -                    | map            | get map of all titles                                            |
| isDisplayingNothing            | -                    | bool           | true if the table has no data and the header is not displayed    |
| isDisplayingHeaderOnly         | -                    | bool           | true if displaying only headers                                  |
| hasChildWithId                 | string               | bool           | true if the element has a child with <arg> id                    |
| isDisplayingHeader             | -                    | bool           | true if the element is displaying it's headers                   |
| clickRow                       | (number, eventData)  | -              | click with <eventData> the row index <number>                    |
| mouseEnterRow                  | (number, eventData)  | -              | mouse enter with <eventData> the row index <number>              |
| mouseLeaveRow                  | (number, eventData)  | -              | mouse leave with <eventData> the row index <number>              |
| setProps                       | json                 | element        | returns a clone of this element with the new props from the json |
| hasRowDetails                  | string               | bool           | true if row index has details                                    |
| getRowDetailsText              | string               | string         | returns details text                                             |
| hasSortableTitle               | (index)              | bool           | true if column title is sortable                                 |
| hasSortDescending              | (index)              | bool           | true if column title has sort descending style                   |
| clickSort                      | (index, eventData)   | -              | click with <eventData> the column index <number>                 |
| getRowDetails                  | string               | element        | returns row details by row index                                 |
| getRowCheckboxDriver           | index: number        | CheckboxDriver | Get driver of row selection checkbox by row index                 |
| getBulkSelectionCheckboxDriver | -                    | CheckboxDriver | Get driver of row bulk-selection checkbox                         |
| clickRowCheckbox                | index                | -              | Click the row selection checkbox                                 |
| clickBulkSelectionCheckbox     | -                    | -              | Click the bulk-selection checkbox                                |
| isRowSelected                  | index : number       | boolean        | Is row selected by index                                         |
| getBulkSelectionState          | -                    | string         | Get bulk selection state. Possible value 'ALL', 'SOME', 'NONE.   |
| getTitlebar                    | -                    | element        | Get title-bar (column titles)                                    |

## Protractor TestKit API

| method            | arguments | returned value | description                         |
| ----------------- | --------- | -------------- | ----------------------------------- |
| clickRowByIndex   | number    | -              | click row index <number>            |
| getRowTextByIndex | number    | string         | get row index <number> text         |
| element           | -         | element        | get the actual element              |
| hoverRow          | (index)   | element        | Hover a specific row with the mouse |

## Usage Example

> Unit Testing Example

```javascript
  import React from 'react';
  import {TableTestkit} from 'wix-style-react/dist/testkit';
  import {TableTestkit as EnzymeTableTestkit} from 'wix-style-react/dist/testkit/enzyme';

  /***************
   enzyme example
  ***************/

  const dataHook = 'myDataHook';
  const wrapper = mount(<div/><Table {...props} dataHook={dataHook}/></div>);
  const testkit = EnzymeTableTestkit({wrapper, dataHook});

  //Do tests
  expect(testkit.getRowsCount()).toBe(5);

  /**********************
   ReactTestUtils example
  **********************/

  const div = document.createElement('div');
  const dataHook = 'myDataHook';
  const wrapper = div.appendChild(
    ReactTestUtils.renderIntoDocument(<div/><Table {...props} dataHook={dataHook}/></div>, {dataHook})
  );
  const testkit = TableTestkit({wrapper, dataHook});

  //Do tests
  expect(testkit.getRowsCount()).toBe(5);
```

> Unit Testing Example - Table in Page

```javascript
import React from 'react';
import { TableTestkit } from 'wix-style-react/dist/testkit';
/***************
 enzyme example
***************/

const dataHook = 'myDataHook';
const wrapper = mount(
  <Table withWrapper={false} data={tableData} showSelection>
    <Page>
      <Page.Header title="My Table Title" />
      <Page.FixedContent>
        <Card>
          <Table.ToolbarContainer />
          <Table.Titlebar dataHook="test-table-titlebar" />
        </Card>
      </Page.FixedContent>
      <Page.Content>
        <Card>
          <Table.Content titleBarVisible={false} dataHook="test-table-content" />
        </Card>
      </Page.Content>
    </Page>
  </Table>
);

const titlebarDriver = EnzymeTableTestkit({
  wrapper,
  dataHook: 'test-table-titlebar'
});

const contentDriver = EnzymeTableTestkit({
  wrapper,
  dataHook: 'test-table-content'
});

//Do tests
expect(titlebarDriver.getBulkSelectionCheckboxDriver().isChecked()).toBeTruthy();
expect(contentDriver.getRowsCount()).toBe(defaultProps.data.length);
expect(contentDriver.isRowSelected(0)).toBeTruthy();
```

> E2E example

```javascript
//Element should be rendered with a data-hook into the DOM
<Table dataHook="myDataHook" />;

/**********************
   Protractor example
  **********************/

import { TableTestkit, waitForVisibilityOf } from 'wix-style-react/dist/testkit/protractor';

//Create an element testkit via the data-hook attribute
const testkit = TableTestkit({ dataHook: 'myDataHook' });

describe('Table', () => {
  it('should be displayed', async () => {
    await browser.get(appUrl); //Your application url
    await waitForVisibilityOf(testkit.element(), 'Cannot find Table');
    expect(await testkit.element().isPresent()).toBeTruthy();
  });
});
```

```javascript
/*******************
   Puppeteer example
  *******************/

import puppeteer from 'puppeteer';
import { TableTestkit } from 'wix-style-react/dist/testkit/puppeteer';

//puppeteer setup
const browser = await puppeteer.launch();
const page = await browser.newPage();

//Create an element testkit via the data-hook attribute
const testkit = await TableTestkit({ dataHook: 'myDataHook', page });
await page.goto(appUrl); //Your application url

expect(await testkit.getCellTextValue(2, 3)).to.equal('my test');
```