TypeScript TestHelpers.GuiSetup.mAddStyles方法代碼示例

    (editor, onSuccess, onFailure) => {
      const doc = Element.fromDom(document);

      Pipeline.async({ }, Logger.ts(
        'Check structure of grid collection menu',
        [
          TestHelpers.GuiSetup.mAddStyles(doc, [
            ':focus { background-color: rgb(222, 224, 226); }'
          ]),
          Mouse.sClickOn(Body.body(), '.tox-split-button__chevron'),
          UiFinder.sWaitForVisible('Waiting for menu', Body.body(), '[role="menu"]'),
          Chain.asStep(Body.body(), [
            UiFinder.cFindIn('[role="menu"]'),
            Assertions.cAssertStructure(
              'Checking structure',
              ApproxStructure.build((s, str, arr) => {
                return s.element('div', {
                  classes: [ arr.has('tox-menu'), arr.has('tox-collection'), arr.has('tox-collection--grid') ],
                  children: [
                    s.element('div', {
                      classes: [ arr.has('tox-collection__group') ],
                      children: Arr.map([ '1', '2', '3', '4', '5', '6', '7', '8' ], (num) => {
                        return s.element('div', {
                          classes: [ arr.has('tox-collection__item') ],
                          attrs: {
                            title: str.is(num)
                          },
                          children: [
                            // NOTE: The oxide demo page has div, but I think that's just a mistake
                            s.element('div', {
                             classes: [ arr.has('tox-collection__item-icon') ],
                             children: [
                               s.element('svg', {})
                             ]
                            })
                          ]
                        });
                      })
                    })
                  ]
                });
              })
            )
          ]),

          // Without layout, the flatgrid cannot be calculated on phantom
          navigator.userAgent.indexOf('PhantomJS') > -1 ? Step.pass : GeneralSteps.sequence([
            FocusTools.sTryOnSelector('Focus should be on 1', doc, '.tox-collection__item[title="1"]'),
            Keyboard.sKeydown(doc, Keys.right(), { }),
            FocusTools.sTryOnSelector('Focus should be on 2', doc, '.tox-collection__item[title="2"]'),
            Keyboard.sKeydown(doc, Keys.right(), { }),
            FocusTools.sTryOnSelector('Focus should be on 3', doc, '.tox-collection__item[title="3"]')
          ]),
          TestHelpers.GuiSetup.mRemoveStyles
        ]
      ), onSuccess, onFailure);
    },

UnitTest.asynctest('WindowManager:inline-dialog Test', (success, failure) => {
  const helpers = TestExtras();
  const windowManager = WindowManager.setup(helpers.extras);

  const cGetDialogLabelId = Chain.binder((dialogE: Element) => {
    if (Attr.has(dialogE, 'aria-labelledby')) {
      const labelId = Attr.get(dialogE, 'aria-labelledby');
      return labelId.length > 0 ? Result.value(labelId) : Result.error('Dialog has zero length aria-labelledby attribute');
    } else {
      return Result.error('Dialog has no aria-labelledby attribute');
    }
  });

  const sAssertDialogLabelledBy =
    Chain.asStep(Body.body(), [NamedChain.asChain([
      NamedChain.direct(NamedChain.inputName(), UiFinder.cFindIn('[role="dialog"]'), 'dialog'),
      NamedChain.direct('dialog', cGetDialogLabelId, 'labelId'),
      NamedChain.bundle((obj) => UiFinder.findIn(obj.dialog, `#${obj.labelId}`)),
    ])]);

  const sTestDialogLabelled = (params) =>
    Logger.t(
      `Dialog should have "aria-labelledby" for config "${JSON.stringify(params)}"`,
      GeneralSteps.sequence([
        Step.sync(() => {
            const dialogSpec: Types.Dialog.DialogApi<{}> = {
              title: 'Silver Test Inline (Toolbar) Dialog',
              body: {
                type: 'panel',
                items: []
              },
              buttons: [],
              initialData: {}
            };
            windowManager.open(dialogSpec, params, Fun.noop );
        }),
        sAssertDialogLabelledBy,
      ])
    );

  Pipeline.async({}, [
    TestHelpers.GuiSetup.mAddStyles(Element.fromDom(document), [
      '.tox-dialog { background: white; border: 2px solid black; padding: 1em; margin: 1em; }'
    ]),
    sTestDialogLabelled({ inline: 'toolbar' }),
    sTestDialogLabelled({ inline: 'not-inline!!' }),
    TestHelpers.GuiSetup.mRemoveStyles
  ], () => {
    helpers.destroy();
    success();
  }, failure);
});

UnitTest.asynctest('Dialog Focus Test (webdriver)', (success, failure) => {
  const helpers = TestExtras();
  const windowManager = WindowManager.setup(helpers.extras);

  const doc = Element.fromDom(document);

  const isPhantomJs = function () {
    return /PhantomJS/.test(window.navigator.userAgent);
  };

  const tests =
    isPhantomJs ? [ ] : [
      TestHelpers.GuiSetup.mAddStyles(doc, [
        '[role="dialog"] { border: 1px solid black; padding: 2em; background-color: rgb(131,193,249); top: 40px; position: absolute; }',

        ':focus { outline: 3px solid green; !important; }',
      ]),

      Step.sync(() => {
        windowManager.open({
          title: 'Custom Dialog',
          body: {
            type: 'panel',
            items: [
              {
                name: 'input1',
                type: 'input'
              }
            ]
          },
          buttons: [
            {
              type: 'cancel',
              text: 'Close'
            }
          ],
          initialData: {
            input1: 'Dog'
          }
        }, { }, Fun.noop);
      }),

      FocusTools.sTryOnSelector(
        'focus should start on input',
        doc,
        '.tox-textfield'
      ),

      RealMouse.sClickOn('body'),

      FocusTools.sTryOnSelector(
        'focus should be on body',
        doc,
        'body'
      ),

      RealMouse.sClickOn('.tox-dialog'),

      FocusTools.sTryOnSelector(
        'focus should move to input after clicking on the dialog',
        doc,
        '.tox-textfield'
      ),

      RealMouse.sClickOn('body'),

      FocusTools.sTryOnSelector(
        'focus should be on body (again)',
        doc,
        'body'
      ),

      RealMouse.sClickOn('.tox-dialog__footer'),

      FocusTools.sTryOnSelector(
        'focus should move to input after clicking on the dialog footer',
        doc,
        '.tox-textfield'
      ),
    ];

  Pipeline.async({ }, tests, () => {
    helpers.destroy();
    success();
  }, failure);
});

    (doc, body, gui, component, store) => {

      const input = component.getSystem().getByDom(
        SelectorFind.descendant(component.element(), 'input').getOrDie(
          'Could not find input'
        )
      ).getOrDie();

      return [
        TestHelpers.GuiSetup.mAddStyles(doc, [
          '.tox-menu { background: white; }',
          '.tox-collection__item--active { background: #cadbee }'
        ]),

        Step.sync(() => {
          Focusing.focus(input);
        }),
        Keyboard.sKeydown(doc, Keys.down(), { }),

        Waiter.sTryUntil(
          'Waiting for menu to appear',
          UiFinder.sExists(
            sink,
            '.tox-menu .tox-collection__item'
          ),
          100,
          4000
        ),

        Chain.asStep(sink, [
          UiFinder.cFindIn('[role="menu"]'),
          Assertions.cAssertStructure(
            'Checking structure of menu (especially text)',
            ApproxStructure.build((s, str, arr) => {
              return s.element('div', {
                classes: [ arr.has('tox-menu'), arr.has('tox-collection--list'), arr.has('tox-collection') ],
                children: [
                  s.element('div', {
                    classes: [ arr.has('tox-collection__group') ],
                    children: [
                      s.element('div', {
                        classes: [ arr.has('tox-collection__item')],
                        children: [
                          s.element('div', { html: str.is('Header1') })
                        ]
                      }),
                      s.element('div', {
                        classes: [ arr.has('tox-collection__item')],
                        children: [
                          s.element('div', { html: str.is('Header2') })
                        ]
                      })
                    ]
                  }),
                  s.element('div', {
                    classes: [ arr.has('tox-collection__group') ],
                    children: [
                      s.element('div', {
                        children: [
                          s.element('div', { html: str.is('<top>') })
                        ]
                      })
                    ]
                  })
                ]
              });
            })
          )
        ]),

        UiControls.sSetValue(input.element(), 'He'),
        Step.sync(() => {
          AlloyTriggers.emit(input, NativeEvents.input());
        }),
        Waiter.sTryUntil(
          'Waiting for the menu to update',
          Chain.asStep(sink, [
            UiFinder.cFindAllIn('.tox-collection__item'),
            Chain.op((menuItems) => {
              if (menuItems.length > 2) {
                throw Error('Menu hasn\'t been updated yet');
              }
            })
          ]),
          100,
          3000
        ),
        Chain.asStep(sink, [
          UiFinder.cFindIn('[role="menu"]'),
          Assertions.cAssertStructure(
            'Checking the menu shows items that match the input string',
            ApproxStructure.build((s, str, arr) => {
              return s.element('div', {
                classes: [ arr.has('tox-menu'), arr.has('tox-collection--list'), arr.has('tox-collection') ],
                children: [
                  s.element('div', {
                    classes: [ arr.has('tox-collection__group') ],
                    children: [
                      s.element('div', {
                        classes: [ arr.has('tox-collection__item')],
//.........這裏部分代碼省略.........

    function (realm, apis, toolbar, socket, buttons, onSuccess, onFailure) {

      const sSetP1 = apis.sSetSelection([ 0, 0, 0 ], 'Thi'.length, [ 0, 0, 0 ], 'Thi'.length);
      const sSetP2 = apis.sSetSelection([ 1, 0 ], 'Norma'.length, [ 1, 0 ], 'Norma'.length);
      const sSetP3 = apis.sSetSelection([ 2, 0, 0 ], 'Bu'.length, [ 2, 0, 0 ], 'Bu'.length);

      const sCheckComponent = function (label, state) {
        return function (memento) {
          return TestUi.sWaitForToggledState(label, state, realm, memento);
        };
      };

      const sCheckLists = function (situation, stateOfNumlist, stateOfBullist) {
        return GeneralSteps.sequence([
          sCheckComponent('checking numlist: ' + situation, stateOfNumlist)(buttons.numlist),
          sCheckComponent('checking bullist: ' + situation, stateOfBullist)(buttons.bullist)
        ]);
      };

      const sCheckInNumlist = function (situation) {
        return sCheckLists(situation, true, false);
      };

      const sCheckInBullist = function (situation) {
        return sCheckLists(situation, false, true);
      };

      const sCheckInNoList = function (situation) {
        return sCheckLists(situation, false, false);
      };

      const sCheckP1 = function (situation) {
        return GeneralSteps.sequence([
          sSetP1,
          sCheckInNumlist(situation)
        ]);
      };

      const sCheckP2 = function (situation) {
        return GeneralSteps.sequence([
          sSetP2,
          sCheckInNoList(situation)
        ]);
      };

      const sCheckP3 = function (situation) {
        return GeneralSteps.sequence([
          sSetP3,
          sCheckInBullist(situation)
        ]);
      };

      Pipeline.async({}, [
        TestHelpers.GuiSetup.mAddStyles(Traverse.owner(body), [
          '.tinymce-mobile-toolbar-button { padding: 2px; border: 1px solid black; background: white; }',
          '.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected { background: #cadbee; }',
          '.tinymce-mobile-icon-unordered-list:before { content: "ul"; }',
          '.tinymce-mobile-icon-ordered-list:before { content: "ol"; }'
        ]),
        apis.sFocus,
        apis.sSetContent(
          '<ol><li>This is an ordered list</li></ol><p>Normal paragraph</p><ul><li>Bullet list</li></ul>'
        ),
        sCheckP1('initial selection in ol'),
        sCheckP2('ol >>> p'),
        sCheckP3('p >>> ul'),
        sCheckP1('ul >>> ol'),

        TestUi.sClickComponent(realm, buttons.bullist),
        sCheckInBullist('ol converted to ul'),
        TestUi.sClickComponent(realm, buttons.numlist),
        sCheckInNumlist('ul converted back to ol'),
        TestUi.sClickComponent(realm, buttons.numlist),
        sCheckInNoList('ol converted to p'),
        TestHelpers.GuiSetup.mRemoveStyles
      ], onSuccess, onFailure);
    }

    (doc, body, gui, component, store) => {
      const input = component.getSystem().getByDom(
        SelectorFind.descendant(component.element(), 'input').getOrDie('Could not find input in colorinput')
      ).getOrDie();

      const legend = component.getSystem().getByDom(
        // Intentionally, only finding direct child
        SelectorFind.descendant(component.element(), 'span').getOrDie('Could not find legend in colorinput')
      ).getOrDie();

      const sSetColorInputValue = (newValue: string) => Step.sync(() => {
        // Once we put more identifying marks on a colorinput, use that instead.
        const colorinput = component.components()[0];
        Representing.setValue(colorinput, newValue);
      });

      const sOpenPicker = Logger.t(
        'Clicking the legend should bring up the colorswatch',
        GeneralSteps.sequence([
          Mouse.sClickOn(legend.element(), 'root:span'),
          UiFinder.sWaitFor('Waiting for colorswatch to show up!', sink, '.tox-swatches')
        ])
      );

      const sAssertFocusedValue = (label: string, expected: string) => Logger.t(label, Chain.asStep(sink, [
        FocusTools.cGetActiveValue,
        Assertions.cAssertEq('Checking value of focused element', expected)
      ]));

      const sAssertLegendBackground = (label: string, f) => Assertions.sAssertStructure(
        label + ': Checking background of legend button',
        ApproxStructure.build((s, str, arr) => {
          return s.element('span', {
            styles: {
              'background-color': f(s, str, arr)
            }
          });
        }),
        legend.element()
      );

      const sAssertContainerClasses = (label: string, f) => {
        return Waiter.sTryUntil(
          label + ': Checking classes on container',
          Assertions.sAssertStructure(
            'Checking classes only',
            ApproxStructure.build((s, str, arr) => {
              return s.element('div', {
                classes: f(s, str, arr)
                // ignore children
              });
            }),
            Traverse.parent(input.element()).getOrDie('Could not find parent of input')
          ),
          100,
          1000
        );
      };

      return [
        TestHelpers.GuiSetup.mAddStyles(doc, [
          '.tox-textbox-field-invalid input { outline: 2px solid red; }',
          '.tox-color-input span { padding: 4px 8px; }',
          '.tox-swatch { padding: 8px 4px }'
        ]),
        Assertions.sAssertStructure(
          'Checking initial structure',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              children: [
                s.element('div', {
                  children: [
                    // Ignore other information because it is subject to change. No oxide example yet.
                    s.element('label', { }),
                    s.element('div', {
                      children: [
                        s.element('input', { }),
                        s.element('span', { })
                      ]
                    })
                  ]
                })
              ]
            });
          }),
          component.element()
        ),

        Logger.t(
          'Initially, the colour should not be invalid',
          GeneralSteps.sequence([
            Assertions.sAssertEq('Invalidating.isInvalid', false, Invalidating.isInvalid(input))
          ])
        ),

        Logger.t(
          'Type an invalid colour: "notblue"',
          GeneralSteps.sequence([
            FocusTools.sSetFocus('Move focus to input field', component.element(), 'input'),
            FocusTools.sSetActiveValue(doc, 'notblue'),
//.........這裏部分代碼省略.........

    function (realm, apis, toolbar, socket, buttons, onSuccess, onFailure) {

      const sSetS1 = apis.sSetSelection([ 0, 0 ], 'n'.length, [ 0, 0 ], 'n'.length);
      const sSetS2 = apis.sSetSelection([ 0, 1, 0 ], 'tin'.length, [ 0, 1, 0 ], 'tin'.length);

      const sCheckComponent = function (label, state) {
        return function (memento) {
          return TestUi.sWaitForToggledState(label, state, realm, memento);
        };
      };

      const sCheckS1 = function (situation) {
        return GeneralSteps.sequence([
          sSetS1,
          sCheckLink(situation, false)
        ]);
      };

      const sCheckS2 = function (situation) {
        return GeneralSteps.sequence([
          sSetS2,
          sCheckLink(situation, true)
        ]);
      };

      const sCheckLink = function (situation, expected) {
        return GeneralSteps.sequence([
          sCheckComponent(situation + ' (unlink state)', expected)(buttons.unlink),
          sCheckComponent(situation + ' (link state)', expected)(buttons.link)
        ]);
      };

      Pipeline.async({}, [
        TestHelpers.GuiSetup.mAddStyles(Traverse.owner(body), [
          '.tinymce-mobile-toolbar-button { padding: 2px; border: 1px solid black; background: white; }',
          '.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected { background: #cadbee; }',
          '.tinymce-mobile-icon-unlink:before { content: "UNLINK"; }',
          '.tinymce-mobile-icon-link:before { content: "LINK"; }'
        ]),
        apis.sFocus,

        apis.sSetContent(
          '<p>no link <a href="www.tinymce.com">tinymce</a></p>'
        ),
        sCheckS1('initial selection in text'),
        sCheckS2('normal >>> link'),
        sCheckS1('link >>> normal'),
        apis.sAssertContentPresence({
          a: 1
        }),

        sSetS2,
        TestUi.sClickComponent(realm, buttons.unlink),
        apis.sAssertContentPresence({
          a: 0
        }),

        // Tinymce moves the cursor after an unlink, so return the selection to the same spot
        apis.sSetSelection([ 0, 1 ], 'for'.length, [ 0, 1 ], 'for'.length),
        sCheckLink('link should be removed', false),
        TestHelpers.GuiSetup.mRemoveStyles
      ], onSuccess, onFailure);
    }

//.........這裏部分代碼省略.........

    return Logger.t(
      scenario.label,
      GeneralSteps.sequence([
        tEditor.sPrepareState(scenario.node.dom(), scenario.content),
        sClickLink,
        TestUi.sSetFieldOptValue(scenario.fields.url),
        sClickNext,
        sAssertTextFocused,
        TestUi.sSetFieldOptValue(scenario.fields.text),
        sClickNext,
        sAssertTitleFocused,
        TestUi.sSetFieldOptValue(scenario.fields.title),
        sClickNext,
        sAssertTargetFocused,
        TestUi.sSetFieldOptValue(scenario.fields.target),
        sClickPrev,
        sAssertTitleFocused,
        sClickPrev,
        sAssertTextFocused,
        sClickPrev,
        sAssertUrlFocused,
        scenario.beforeExecute,
        Keyboard.sKeydown(doc, Keys.enter(), { }),
        tEditor.sAssertEq('Checking insert content', scenario.expected),
        scenario.mutations(scenario.node),
        tEditor.sClear

      ])
    );
  };

  Pipeline.async({}, detection.browser.isChrome() ? [
    TestHelpers.GuiSetup.mAddStyles(doc, [
      '.tinymce-mobile-toolbar-button:before { content: "LINK"; background: black; color: white; }',
      // Speeds up tests.
      '.tinymce-mobile-serialised-dialog-chain { transition: left linear 0.000001s !important }'
    ]),

    TestStyles.sWaitForToolstrip(realm),

    tEditor.sPrepareState(Element.fromText('hi'), 'link-text'),

    sClickLink,
    FocusTools.sTryOnSelector('Focus should be on input with link URL', doc, 'input[placeholder="Type or paste URL"]'),
    sAssertNavigation('Checking initial navigation on text node', false, true),

    sTestNavigation,
    Step.sync(function () {
      realm.restoreToolbar();
    }),

    sTestScenario({
      label: 'Testing hitting ENTER after just setting URL',
      fields: {
        url: 'http://fake-url'
      },
      expected: [
        {
          method: 'insertContent',
          data: {
            tag: 'a',
            attributes: {
              href: 'http://fake-url'
            },
            innerText: 'http://fake-url'

    function (realm, apis, toolbar, socket, buttons, onSuccess, onFailure) {

      const sSetS1 = apis.sSetSelection([ 0, 0 ], 'n'.length, [ 0, 0 ], 'n'.length);
      const sSetS2 = apis.sSetSelection([ 0, 1, 0 ], 'for'.length, [ 0, 1, 0 ], 'for'.length);

      const sCheckComponent = function (label, state) {
        return function (memento) {
          return TestUi.sWaitForToggledState(label, state, realm, memento);
        };
      };

      const sTestFormatter = function (openTag, closeTag, name) {
        const sCheckS1 = function (situation) {
          return GeneralSteps.sequence([
            sSetS1,
            sCheckComponent(situation, false)(buttons[name])
          ]);
        };

        const sCheckS2 = function (situation) {
          return GeneralSteps.sequence([
            sSetS2,
            sCheckComponent(situation, true)(buttons[name])
          ]);
        };

        return GeneralSteps.sequence([
          apis.sSetContent(
            '<p>no format <' + openTag + '>format</' + closeTag + '>'
          ),
          sCheckS1('initial selection in text'),
          sCheckS2('normal >>> ' + name),
          sCheckS1(name + ' >>> normal'),

          TestUi.sClickComponent(realm, buttons[name]),
          sCheckComponent('"no" converted to ' + name, true)(buttons[name]),
          TestUi.sClickComponent(realm, buttons[name]),
          sCheckComponent('"no" reverted to normal', false)(buttons[name]),

          apis.sSetSelection([ 0, 1 + 1, 0 ], 'for'.length, [ 0, 1 + 1, 0 ], 'for'.length),
          sCheckComponent('moving back to ' + name, true)(buttons[name]),
          TestUi.sClickComponent(realm, buttons[name]),
          sCheckComponent('converting ' + name + ' to normal', false)(buttons[name]),
          TestUi.sClickComponent(realm, buttons[name]),
          sCheckComponent('reverting normal back to ' + name, true)(buttons[name])
        ]);
      };

      Pipeline.async({}, browser.isIE() || browser.isEdge() ? [] : [
        TestHelpers.GuiSetup.mAddStyles(Traverse.owner(body), [
          '.tinymce-mobile-toolbar-button { padding: 2px; border: 1px solid black; background: white; }',
          '.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected { background: #cadbee; }',
          '.tinymce-mobile-icon-bold:before { content: "BOLD"; }',
          '.tinymce-mobile-icon-italic:before { content: "ITALIC"; }',
          '.tinymce-mobile-icon-underline:before { content: "UNDERLINE"; }'
        ]),
        apis.sFocus,

        sTestFormatter('strong', 'strong', 'bold'),
        sTestFormatter('em', 'em', 'italic'),
        sTestFormatter('span style="text-decoration: underline;"', 'span', 'underline'),
        TestHelpers.GuiSetup.mRemoveStyles
      ], onSuccess, onFailure);
    }

    (editor, onSuccess, onFailure) => {
      const doc = Element.fromDom(document);

      const structureItem = (optText: Option<string>, optIcon: Option<string>) => (s, str, arr) => {
        return s.element('div', {
          classes: [ arr.has('tox-collection__item') ],
          children: Options.cat([
            optIcon.map((icon) => s.element('div', {
              classes: [ arr.has('tox-collection__item-icon') ],
              html: str.is(icon)
            })),

            optText.map((text) => s.element('div', {
              classes: [ arr.has('tox-collection__item-label') ],
              html: str.is(text)
            }))
          ])
        });
      };

      const cFindNthIn = (selector, n) => Chain.binder((elem: Element) => {
        const matches = UiFinder.findAllIn(elem, selector);
        return matches.length > 0 && n < matches.length ? Result.value(matches[n]) :
          Result.error(`Could not find match ${n} of selector: ${selector}`);
      });

      Pipeline.async({ }, Logger.ts(
        'Check structure of collection in a dialog',
        [
          TestHelpers.GuiSetup.mAddStyles(doc, [
            ':focus { outline: 2px solid green; }'
          ]),
          Mouse.sClickOn(Body.body(), '.tox-toolbar button'),
          UiFinder.sWaitForVisible('Waiting for dialog', Body.body(), '[role="dialog"]'),

          FocusTools.sTryOnSelector('Focus should start on input', doc, 'input'),
          Keyboard.sKeydown(doc, Keys.tab(), { }),

          Logger.t(
            'Checking the first collection: columns = 1, list',
            GeneralSteps.sequence([
              Chain.asStep(Body.body(), [
                cFindNthIn('[role="dialog"] .tox-form__group .tox-collection', 0),
                Assertions.cAssertStructure(
                  'Checking structure',
                  ApproxStructure.build((s, str, arr) => {
                    return s.element('div', {
                      classes: [ arr.has('tox-collection'), arr.has('tox-collection--list'), arr.not('tox-menu') ],
                      children: [
                        s.element('div', {
                          classes: [ arr.has('tox-collection__group') ],
                          children: Arr.map([ 'A', 'B', 'C' ], (letter) =>
                            structureItem(Option.some('text-' + letter), Option.some('icon-' + letter))(s, str, arr)
                          )
                        })
                      ]
                    });
                  })
                )
              ]),
              FocusTools.sTryOnSelector('Focus should be on A', doc, '.tox-collection__item:contains(A).tox-collection__item--active'),
              Keyboard.sKeydown(doc, Keys.down(), { }),
              FocusTools.sTryOnSelector('Focus should be on B', doc, '.tox-collection__item:contains(B)'),
              Keyboard.sKeydown(doc, Keys.down(), { }),
              FocusTools.sTryOnSelector('Focus should be on C', doc, '.tox-collection__item:contains(C)'),
            ])
          ),

          // NOTE: We need a layout engine to use flex-wrap navigation.
          navigator.userAgent.indexOf('PhantomJS') > -1 ?
            FocusTools.sSetFocus('Force focus to F on phantom', Body.body(), '.tox-collection__item:contains("F")')
            : Logger.t(
            'Checking the second collection: columns = auto',
            GeneralSteps.sequence([
              Chain.asStep(Body.body(), [
                cFindNthIn('[role="dialog"] .tox-form__group .tox-collection', 1),
                Assertions.cAssertStructure(
                  'Checking structure',
                  ApproxStructure.build((s, str, arr) => {
                    return s.element('div', {
                      classes: [ arr.has('tox-collection'), arr.has('tox-collection--grid'), arr.not('tox-menu') ],
                      children: [
                        s.element('div', {
                          classes: [ arr.has('tox-collection__group') ],
                          children: Arr.map([ 'D', 'E', 'F' ], (letter) =>
                            structureItem(Option.none(), Option.some('icon-' + letter))(s, str, arr)
                          )
                        })
                      ]
                    });
                  })
                )
              ]),
              FocusTools.sTryOnSelector('Focus should be on C', doc, '.tox-collection__item:contains(C)'),
              Keyboard.sKeydown(doc, Keys.tab(), { }),
              FocusTools.sTryOnSelector('Focus should be on D', doc, '.tox-collection__item:contains(D)'),
              Keyboard.sKeydown(doc, Keys.right(), { }),
              FocusTools.sTryOnSelector('Focus should be on E', doc, '.tox-collection__item:contains(E)'),
              Keyboard.sKeydown(doc, Keys.right(), { }),
              FocusTools.sTryOnSelector('Focus should be on F', doc, '.tox-collection__item:contains(F)'),
//.........這裏部分代碼省略.........