How to use the testcafe-react-selectors.ReactSelector function in testcafe-react-selectors

Array.from(Array(24).keys()).forEach(async index => {
      this.seedWordInputs.push(new SeedWordAtIndex(index).input)
    })
  }

  // Controls
  backButton = ReactSelector('BackButton')
  nextButton = ReactSelector('NextButton')

  // Steps
  connectionType = ReactSelector('ConnectionType')
  connectionDetails = ReactSelector('ConnectionDetails')
  connectionConfirm = ReactSelector('ConnectionConfirm')
  seedView = ReactSelector('SeedView')
  seedConfirm = ReactSelector('SeedConfirm')
  password = ReactSelector('Password')
  autopilot = ReactSelector('Autopilot')
  network = ReactSelector('Network')

  // Connection type radio options.
  connectionTypes = {
    create: new ConnectionTypeOption('create'),
    import: new ConnectionTypeOption('import'),
    custom: new ConnectionTypeOption('custom'),
    btcpayserver: new ConnectionTypeOption('btcpayserver'),
  }

  connectionDetailsTabs = {
    string: new ConnectionDetailsTab('FORM_TYPE_CONNECTION_STRING'),
    manual: new ConnectionDetailsTab('FORM_TYPE_MANUAL'),
  }

test('Can create content node from inside InlineUI', async t => {
    const headlineTitle = 'Helloworld!';
    subSection('Create a headline node');
    await Page.waitForIframeLoading(t);
    await t
        .switchToIframe('[name="neos-content-main"]')
        .click(Selector('.neos-contentcollection'))
        .click(Selector('#neos-InlineToolbar-AddNode'))
        .switchToMainWindow()
        .click(Selector('button#into'))
        // TODO: this selector will only work with English translation.
        // Change to `withProps` when implemented: https://github.com/DevExpress/testcafe-react-selectors/issues/14
        .click(ReactSelector('NodeTypeItem').find('button>span>span').withText('Headline'));

    subSection('Type something inside of it');
    await Page.waitForIframeLoading(t);
    await t
        .switchToIframe('[name="neos-content-main"]')
        .typeText(Selector('.test-headline h1'), headlineTitle)
        .expect(Selector('.neos-contentcollection').withText(headlineTitle).exists).ok('Typed headline text exists');

    subSection('Inline validation');
    // We have to wait for ajax requests to be triggered, since they are debounced for 0.5s
    await t.wait(600);
    await changeRequestLogger.clear();
    await t
        .expect(Selector('.test-headline h1').exists).ok('Validation tooltip appeared')
        .click('.test-headline h1')
        .pressKey('ctrl+a delete')

test('Sidebar Header exists and user may set location', async t => {
  const sidebarComponent = await Selector('.issues__header');
  await t.expect(sidebarComponent.exists).ok();

  const Location = await ReactSelector('Location');
  await t.expect(Location).ok('Location component is not displayed');

  const setLocationMessage = await Selector('#setLocationMessage');
  await t
    .expect(setLocationMessage.exists)
    .ok('Set location message is not displayed');

  let locationSetMessage = await Selector('#locationMessage').withText(
    'Set your location'
  );

  if (await locationSetMessage.exists) {
    const locationButton = await Location.findReact('button');
    await t.expect(locationButton.innerText).eql('CHANGE LOCATION');
    await t.click(locationButton);

test(`basic render`, async t => {
  await t.expect(ReactSelector('Panel').count).eql(3);
});

seeedWordInput3 = ReactSelector('SeedConfirm Input')
    .nth(2)
    .find('input')
  passwordInput = ReactSelector('Password Input').find('input')
  nameInput = ReactSelector('Name Input').find('input')

  hostInput = ReactSelector('ConnectionDetailsManual Input')
    .nth(0)
    .find('input')
  certInput = ReactSelector('ConnectionDetailsManual Input')
    .nth(1)
    .find('input')
  macaroonInput = ReactSelector('ConnectionDetailsManual Input')
    .nth(2)
    .find('input')
  connectionStringInput = ReactSelector('ConnectionDetails TextArea')
    .withProps({ field: 'connectionString' })
    .find('textarea')
}

export default Onboarding

test('PageTree search and filter', async t => {
    subSection('Search the page tree');
    const seachTerm = 'Searchme';
    const notSearchedPage = 'Not searched page';
    const notSearchedShortcut = 'Not searched shortcut';
    const searchmePage = 'Searchme page';
    const searchmeShortcut = 'Searchme shortcut';

    const nodeTreeSearchToggler = ReactSelector('NodeTreeSearchBar IconButton');
    const nodeTreeSearchInput = ReactSelector('NodeTreeSearchInput');
    const nodeTreeFilter = ReactSelector('NodeTreeFilter');
    const shortcutFilter = ReactSelector('NodeTreeFilter').find('li').withText('Shortcut');
    await t
        .click(nodeTreeSearchToggler)
        .typeText(nodeTreeSearchInput, seachTerm)
        .expect(Page.treeNode.withText(seachTerm).count).eql(2, 'Two "Searchme" nodes should be found, one shortcut and one normal page')
        .expect(Page.treeNode.withText(notSearchedPage).exists).notOk('Other unsearched page should be hidden ');

    subSection('Set the Shortcut filter');
    await t
        .click(nodeTreeFilter)
        .click(shortcutFilter)
        .expect(Page.treeNode.withText(searchmeShortcut).count).eql(1, 'Only one "Searchme" page should be found, of type Shortcut')
        .expect(Page.treeNode.withText(searchmePage).exists).notOk('No matching "Shortcut" pages should be hidden')
        .expect(Page.treeNode.withText(notSearchedPage).exists).notOk('Other unsearched page should still be hidden');

    subSection('Clear search');
    const clearSearch = ReactSelector('NodeTreeSearchInput IconButton');

test('Can toggle sidebars', async t => {
    subSection('LeftSideBar');
    const leftSideBarToggler = Selector('#neos-LeftSideBarToggler');
    const leftSideBar = ReactSelector('LeftSideBar');
    await t
        .expect(leftSideBar.getReact(({props}) => props.isHidden)).eql(false)
        .click(leftSideBarToggler)
        .expect(leftSideBar.getReact(({props}) => props.isHidden)).eql(true)
        .click(leftSideBarToggler)
        .expect(leftSideBar.getReact(({props}) => props.isHidden)).eql(false);

    subSection('RightSideBar');
    const rightSideBarToggler = ReactSelector('RightSideBar Button');
    const rightSideBar = ReactSelector('RightSideBar');
    await t
        .expect(rightSideBar.getReact(({props}) => props.isHidden)).eql(false)
        .click(rightSideBarToggler)
        .expect(rightSideBar.getReact(({props}) => props.isHidden)).eql(true)
        .click(rightSideBarToggler)
        .expect(rightSideBar.getReact(({props}) => props.isHidden)).eql(false);

.expect(ReactSelector('Provider').getReact(({props}) => {
            const reduxState = props.store.getState();
            const {isLoading} = reduxState.ui.contentCanvas;
            const activeDimension = reduxState.cr.contentDimensions.active.language[0];
            return !isLoading && activeDimension === 'lv';
        })).ok('Loading stopped and dimension switched to Latvian')
        .expect(ReactSelector('Provider').getReact(({props}) => {
            const reduxState = props.store.getState();
            return reduxState.cr.workspaces.personalWorkspace.publishableNodes.length;
        })).gt(0, 'There are some unpublished nodes after adoption')
        .expect(page.treeNode.withText('Navigation elements').exists).notOk('Untranslated node gone from the tree');

    subSection('Switch back to original dimension');
    await t
        .click(ReactSelector('DimensionSwitcher'))
        .click(ReactSelector('DimensionSwitcher SelectBox'))
        .click(ReactSelector('DimensionSwitcher SelectBox').find('li').withText('English (US)'))
        .expect(ReactSelector('Provider').getReact(({props}) => {
            const reduxState = props.store.getState();
            const {isLoading} = reduxState.ui.contentCanvas;
            const activeDimension = reduxState.cr.contentDimensions.active.language[0];
            return !isLoading && activeDimension === 'en_US';
        })).ok('Loading stopped and dimension back to English')
        .expect(page.treeNode.withText('Navigation elements').exists).ok('Untranslated node back in the tree');
});

static async waitForIframeLoading() {
        await t.expect(ReactSelector('Provider').getReact(({props}) => {
            const reduxState = props.store.getState();
            return !reduxState.ui.contentCanvas.isLoading;
        })).ok('Loading stopped');
    }
}