import * as React from 'react';
import { triplet } from '../src/triplet';
import {cleanup, render} from '@testing-library/react';

afterEach(cleanup);

describe('triplet tests', () => {
  it('can proxy stuff', async () => {
    const TripletDiv = triplet.div`derek`;
    const testId = 'someTestingId';

    let dom = render(<TripletDiv id={testId}>{testId}</TripletDiv>);
    const data = await dom.getAllByText(testId);
    expect(data.length).toEqual(1);
    data.forEach(item => {
      expect(item.id).toEqual(testId);
    })
  });
  it('can works with td colSpan', async () => {
    const TripletTd = triplet.td`h-20`;
    const testId = 'someTestingId';

    let dom = render(<table><tbody><tr><TripletTd colSpan={10} id={testId}>{testId}</TripletTd></tr></tbody></table>);
    const data = await dom.getAllByText(testId);
    expect(data.length).toEqual(1);
    data.forEach(item => {
      expect(item.id).toEqual(testId);
      expect((item as any).colSpan).toEqual(10);
    })
  });
});