TypeScript alloy.TestHelpers.GuiSetup類代碼示例

    (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('Grid component Test', (success, failure) => {

  const sharedBackstage = {
    interpreter: (x) => x,
    translate: I18n.translate
  };

  TestHelpers.GuiSetup.setup(
    (store, doc, body) => {
      return GuiFactory.build(
        renderGrid({
          type: 'grid',
          columns: 10,
          items: [
            {
              dom: {
                tag: 'div',
                classes: ['foo']
              }
            } as any,
            {
              dom: {
                tag: 'div',
                classes: ['bar']
              }
            } as any
          ]
         }, sharedBackstage)
      );
    },
    (doc, body, gui, component, store) => {
      return [
        Assertions.sAssertStructure(
          'Checking initial structure',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [arr.has('tox-form__grid'), arr.has('tox-form__grid--10col')],
              children: [
                s.element('div', {
                  classes: [arr.has('foo')]
                }),
                s.element('div', {
                  classes: [arr.has('bar')]
                })
              ]
            });
          }),
          component.element()
        )
      ];
    },
    success,
    failure
  );
});

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('Ui Label component Test', (success, failure) => {
  const sharedBackstage = {
    providers: TestProviders,
    interpreter: Fun.identity
  };

  TestHelpers.GuiSetup.setup(
    (store, doc, body) => {
      return GuiFactory.build(
        renderLabel({
          type: 'label',
          label: 'Group of Options',
          items: [
            {
              dom: {
                tag: 'label',
                classes: ['tox-checkbox']
              }
            } as any
          ]
        }, sharedBackstage)
      );
    },
    (doc, body, gui, component, store) => {

      return [
        Assertions.sAssertStructure(
          'Checking initial structure',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [ arr.has('tox-form__group') ],
              children: [
                s.element('label', {
                  children: [
                    s.text(str.is('Group of Options')),
                  ]
                }),
                s.element('label', {
                  classes: [ arr.has('tox-checkbox') ]
                })
              ]
            });
          }),
          component.element()
        )
      ];
    },
    success,
    failure
  );
});

UnitTest.asynctest('SizeInput <space> webdriver Test', (success, failure) => {

  TestHelpers.GuiSetup.setup(
    (store, doc, body) => {
      return GuiFactory.build(
        renderSizeInput({
          type: 'sizeinput',
          name: 'dimensions',
          label: Option.some('size'),
          constrain: true
        }, TestProviders)
      );
    },
    (doc, body, gui, component, store) => {
      const sAssertLockedStatus = (label: string, expected: boolean) => Logger.t(
        label,
        Chain.asStep(component.element(), [
          UiFinder.cFindIn('.tox-lock'),
          Assertions.cAssertStructure(
            'Checking the state of the lock button. Should be: ' + expected,
            ApproxStructure.build((s, str, arr) => {
              return s.element('button', {
                classes: [ arr.has('tox-lock') ],
                attrs: {
                  'aria-pressed': str.is(expected ? 'true' : 'false')
                }
              });
            })
          )
        ])
      );

      const sSendRealSpace = RealKeys.sSendKeysOn('.tox-lock', [
        // Space key
        RealKeys.text('\uE00D')
      ]);

      return [
        FocusTools.sSetFocus('Focus the constrain button', component.element(), '.tox-lock'),
        sAssertLockedStatus('Initially: ', true),
        sSendRealSpace,
        sAssertLockedStatus('Firing space on a pressed button', false),
        sSendRealSpace,
        sAssertLockedStatus('Firing space on a non-pressed button', true)
      ];
    },
    success,
    failure
  );
});

UnitTest.asynctest('ColorPicker component Test', (success, failure) => {
  TestHelpers.GuiSetup.setup(
    (store, doc, body) => {
      return GuiFactory.build(
        renderColorPicker({
          type: 'colorpicker',
          label: Option.some('ColorPicker label'),
          name: 'col1'
        })
      );
    },
    (doc, body, gui, component, store) => {

      const sAssertColour = (label: string, expected: string, labelText: string) =>
        Logger.t(
          label,
          Waiter.sTryUntil(
            'Waiting until hex updates the other fields',
            Chain.asStep(component.element(), [
              UiFinder.cFindIn(`label:contains("${labelText}") + input`),
              UiControls.cGetValue,
              Assertions.cAssertEq('Checking value in input', expected)
            ]),
            100,
            1000
          )
        );

      return [
        RepresentingSteps.sSetComposedValue(
          'Let us set the colour picker!',
          component,
          '#ccaa33'
        ),

        sAssertColour('Red', '204', 'R'),
        sAssertColour('Green', '170', 'G'),
        sAssertColour('Blue', '51', 'B'),

        RepresentingSteps.sAssertComposedValue(
          'Checking composed value worked',
          '#ccaa33',
          component
        )
      ];
    },
    success,
    failure
  );
});

UnitTest.asynctest('Table component Test', (success, failure) => {

  TestHelpers.GuiSetup.setup(
    (store, doc, body) => {
      return GuiFactory.build(
        renderTable({
          type: 'table',
          header: [ 'one', 'two', 'three'],
          cells: [
            [ 'a', 'b', 'c'],
            [ 'd', 'e', 'f']
          ]
        }, TestProviders)
      );
    }, (doc, body, gui, component, store) => {
      return [
        Assertions.sAssertStructure(
          'Assert table structure',
          ApproxStructure.fromHtml((
            '<table class="tox-dialog__table">' +
              '<thead>' +
                '<tr>' +
                  '<th>one</th>' +
                  '<th>two</th>' +
                  '<th>three</th>' +
                '</tr>' +
              '</thead>' +
              '<tbody>' +
                '<tr>' +
                  '<td>a</td>' +
                  '<td>b</td>' +
                  '<td>c</td>' +
                '</tr>' +
                '<tr>' +
                  '<td>d</td>' +
                  '<td>e</td>' +
                  '<td>f</td>' +
                '</tr>' +
              '</tbody>' +
            '</table>'
          )),
          component.element()
        )
      ];
    },
    success,
    failure
  );
});

UnitTest.asynctest('Input component Test', (success, failure) => {

  TestHelpers.GuiSetup.setup(
    (store, doc, body) => {
      return GuiFactory.build(
        renderInput({
          name: 'input',
          label: Option.some('LabelA'),
          placeholder: Option.none(),
          validation: Option.none()
        }, TestProviders)
      );
    },
    (doc, body, gui, component, store) => {

      return [
        Assertions.sAssertStructure(
          'Checking initial structure',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [ arr.has('tox-form__group') ],
              children: [
                s.element('label', {
                  classes: [ arr.has('tox-label') ],
                  html: str.is('LabelA')
                }),
                s.element('input', {
                  classes: [ arr.has('tox-textfield') ],
                  attrs: {
                    'data-alloy-tabstop': str.is('true')
                  }
                })
              ]
            });
          }),
          component.element()
        ),

        RepresentingSteps.sSetValue('Setting to new value', component, 'New-Value'),
        RepresentingSteps.sAssertComposedValue('After setting value on form field', 'New-Value', component)
      ];
    },
    success,
    failure
  );
});

UnitTest.asynctest('DialogButton component Test', (success, failure) => {

  TestHelpers.GuiSetup.setup(
    (store, doc, body) => {
      return GuiFactory.build(
        renderButton({
          name: 'test-button',
          text: 'ButtonText',
          disabled: false,
          primary: true,
          icon: Option.none()
        }, store.adder('button.action'), TestProviders)
      );
    },
    (_doc, _body, gui, component, store) => {

      return [
        Assertions.sAssertStructure(
          'Checking initial structure',
          ApproxStructure.build((s, str, arr) => {
            return s.element('button', {
              classes: [ arr.has('tox-button'), arr.not('tox-button--secondary') ],
              children: [
                s.text( str.is('ButtonText') )
              ]
            });
          }),
          component.element()
        ),

        store.sAssertEq('No button action should have fired yet', [ ]),
        Mouse.sClickOn(gui.element(), '.tox-button'),
        store.sAssertEq('Button action should have fired', [ 'button.action' ])
      ];
    },
    success,
    failure
  );
});

UnitTest.asynctest('Checkbox component Test', (success, failure) => {

  TestHelpers.GuiSetup.setup(
    (store, doc, body) => {
      return GuiFactory.build(
        {
          dom: {
            tag: 'div'
          },
          components: [
            renderCheckbox({
              label: 'TestCheckbox',
              name: 'test-check-box'
            }, TestProviders)
          ],
          behaviours: Behaviour.derive([
            AddEventsBehaviour.config('test-checkbox', [
              AlloyEvents.run(formChangeEvent, (component, event) => {
                store.adder((event.event() as any).name())();
              })
            ])
          ])
        }
      );
    },
    (doc, body, gui, component, store) => {
      return [
        FocusTools.sSetFocus('Focus checkbox', body, '.tox-checkbox__input'),
        Keyboard.sKeydown(doc, Keys.enter(), {}),
        store.sAssertEq('Form change should have fired', ['test-check-box'])
      ];
    },
    success,
    failure
  );
});