How to use the test-drive-react.selectDom function in test-drive-react

import * as React from 'react';
import {ClientRenderer, expect, selectDom, simulate, sinon, trigger, waitForDom as gWaitForDom} from 'test-drive-react';
import {AutoCompleteDemo} from '../../demo/components/auto-complete.demo';
import {AutoComplete} from '../../src';

const autoComp = 'AUTO_COMPLETE';
const autoCompDemo = autoComp + '_DEMO';
const autoCompInput = autoComp + '_INPUT';

const items = ['Muffins', 'Pancakes', 'Cupcakes', 'Souffles', 'Pasta', 'Soup', 'Caramel', 'Avazim', 'Moses'];
const bodySelect = selectDom(document.body);
const bodyWaitForDom = gWaitForDom.bind(null, document.body);

describe('', () => {
    const clientRenderer = new ClientRenderer();
    afterEach(() => clientRenderer.cleanup());

    describe('The autocomplete user', () => {
        it('types in the input and selects a value', async () => {
            const {select, waitForDom} = clientRenderer.render();
            const prefix = 'P';
            const filteredItems = items.filter(item => item.startsWith(prefix)).join('');

            simulate.click(select(autoComp + '_CARET'));

            const itemList = bodySelect('LIST')!;
            await bodyWaitForDom(() => {

describe('', () => {
    const clientRenderer = new ClientRenderer();
    const bodySelect = selectDom(document.body);

    afterEach(() => clientRenderer.cleanup());

    describe('A typical use case for the modal:', () => {
        it('is hidden at first, a user clicks on a button, the modal appears,' +
            'and then the user clicks on the background and the model closes', async () => {
            clientRenderer.render();

            await waitFor(() => expect(bodySelect('MODAL')).to.be.absent());

            simulate.click(bodySelect('MODAL_BUTTON'));

            await waitFor(() => expect(bodySelect('MODAL')).to.be.present());

            simulate.click(bodySelect('MODAL')!);

describe('The DatePicker Component', () => {
    const clientRenderer = new ClientRenderer();
    const bodySelect = selectDom(document.body);
    afterEach(() => clientRenderer.cleanup());

    const JANUARY_FIRST = new Date(2017, 0, 1);
    const FEBRUARY_FIRST = new Date(2017, 1, 1);
    const MARCH_FIRST  = new Date(2017, 2, 1);
    const DECEMBER_FIRST = new Date(2017, 11, 1);

    describe('A Typical User', () => {
        it('writes into the date picker input field, presses enter, ' +
            'and expects the date picker input to have the proper value', async () => {
            const {select, waitForDom} = clientRenderer.render();

            const datePickerInput = select(datePickerInputId);
            trigger.change(datePickerInput!, '2017/02/01');
            simulate.keyDown(datePickerInput, {keyCode: keycode('enter')});

function elementsInRow(row: number) {
            const rowElements = [];
            const select = selectDom(document.body);

            for (let i = 1; i < 7; i++) {
                rowElements.push(select('DAY_' + (((row - 1) * 7) + i)));
            }

            return rowElements;
        }

public render() {
                return (
                    <div>
                        
                            <div data-automation-id="POPUP">Popup body</div>
                        
                        <div data-automation-id="ANCHOR"> this.setState({anchor: node})}&gt;
                            {this.props.children}
                        </div>
                    </div>
                );
            }
        }

        const select = selectDom(document.body);
        const {container, waitForDom} = clientRenderer.render(*);
        await waitForDom(() =&gt; expect([select('ANCHOR'), select('POPUP')]).to.be.inVerticalSequence());
        clientRenderer.render(*<br>*, container);
        await waitForDom(() =&gt; expect([select('ANCHOR'), select('POPUP')]).to.be.inVerticalSequence());
    });

import {DriverBase, selectDom, simulate, trigger} from 'test-drive-react';
import {DatePicker} from '../../src';
import {getDayNames} from '../../src/utils';

const bodySelect = selectDom(document.body);
const datePickerDropdown = 'DATE_PICKER_DROPDOWN';

export class DatePickerTestDriver extends DriverBase {
    public static ComponentClass = DatePicker;

    public get input(): HTMLInputElement {
        return this.select('DATE_PICKER_INPUT');
    }

    public get selectedDate(): string {
        return this.select('DATE_PICKER_INPUT').value;
    }

    public changeDate(value: string): void {
        trigger.change(this.input, value);
        simulate.blur(this.input);

import {DriverBase, selectDom, simulate} from 'test-drive-react';
import {DropDown} from '../../src/components/drop-down/drop-down';

const bodySelect = selectDom(document.body);

export class DropDownDriver extends DriverBase {
    public static ComponentClass = DropDown;

    public get selection(): string | null {
        return this.root.textContent;
    }

    public isOpen(): boolean {
        return !!this.list;
    }

    public clickOnItem(idx: number): void {
        if (this.items) {
            this.items[idx] && simulate.click(this.items![idx]);
        }