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

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('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
  );
});

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

  TestHelpers.GuiSetup.setup(
    (store, doc, body) => {
      return GuiFactory.build({
        dom: {
          tag: 'div',
          classes: [ 'test-container' ]
        },
        behaviours: Behaviour.derive([
          Replacing.config({ })
        ])
      });
    },
    (doc, body, gui, component, store) => {
      const cellWithDestroy = Cell(store.adder('fallbackWithDestroy'));

      const onDestroy1 = store.adder('onDestroy.1');

      const infoWithDestroy = {
        onSetup: () => {
          store.adder('onSetup.1')();
          return onDestroy1;
        },
        getApi: () => { }
      };

      const cellWithoutDestroy = Cell(store.adder('fallbackWithoutDestroy'));
      const infoWithoutDestroy = {
        onSetup: () => {
          store.adder('onSetup.2')();
        },
        getApi: () => { }
      } as any; // "any" cast to get around Typescript asking for a return function

      return [
        Log.stepsAsStep('TBA', 'Checking onSetup works as expected when it does not return anything', [
          Step.sync(() => {

            Replacing.set(component, [
              {
                dom: {
                  tag: 'div',
                  classes: [ 'child-1' ]
                },
                behaviours: SimpleBehaviours.unnamedEvents([
                  onControlAttached(infoWithDestroy, cellWithDestroy),
                  onControlDetached(infoWithDestroy, cellWithDestroy)
                ])
              },
              {
                dom: {
                  tag: 'div',
                  classes: [ 'child-2' ]
                },
                behaviours: SimpleBehaviours.unnamedEvents([
                  onControlAttached(infoWithoutDestroy, cellWithoutDestroy),
                  onControlDetached(infoWithoutDestroy, cellWithoutDestroy)
                ])
              }
            ]);
          }),

          store.sAssertEq('Both should have fired setup', [ 'onSetup.1', 'onSetup.2' ]),
          store.sClear,

          Logger.t('Clear the component', Step.sync(() => {
            Replacing.set(component, [ ]);
          })),

          store.sAssertEq(
            'First should have fired destroy, second should have fired fallback',
            [ 'onDestroy.1', 'fallbackWithoutDestroy' ]
          )
        ])
      ];
    },
    success,
    failure
  );
});

UnitTest.asynctest('Toolbar Buttons Test', (success, failure) => {

  const helpers = TestExtras();

  const shouldDisable = Cell(false);
  const shouldActivate = Cell(false);

  TestHelpers.GuiSetup.setup(
    (store, doc, body) => {
      return GuiFactory.build(
        {
          dom: {
            tag: 'div'
          },
          components: [
            {
              dom: {
                tag: 'div',
                classes: [ 'button1-container' ]
              },
              components: [
                renderToolbarButton({
                  type: 'button',
                  disabled: false,
                  tooltip: Option.some('tooltip'),
                  icon: Option.none(),
                  text: Option.some('button1'),
                  onSetup: (api: Toolbar.ToolbarButtonInstanceApi) => {
                    store.adder('onSetup.1')();
                    return () => { };
                  },
                  onAction: (api: Toolbar.ToolbarButtonInstanceApi) => {
                    store.adder('onAction.1')();
                    api.setDisabled(shouldDisable.get());
                  }
                }, TestProviders)
              ]
            },

            {
              dom: {
                tag: 'div',
                classes: [ 'button2-container' ]
              },
              components: [
                renderToolbarToggleButton({
                  type: 'togglebutton',
                  disabled: false,
                  active: false,
                  tooltip: Option.some('tooltip'),
                  icon: Option.none(),
                  text: Option.some('button2'),
                  onSetup: (api: Toolbar.ToolbarToggleButtonInstanceApi) => {
                    store.adder('onSetup.2')();
                    return () => { };
                  },
                  onAction: (api: Toolbar.ToolbarToggleButtonInstanceApi) => {
                    store.adder('onToggleAction.2')();
                    api.setDisabled(shouldDisable.get());
                    api.setActive(shouldActivate.get());
                  }
                }, TestProviders)
              ]
            },

            {
              dom: {
                tag: 'div',
                classes: [ 'button3-container' ]
              },
              components: [
                renderSplitButton({
                  type: 'splitbutton',
                  tooltip: Option.some('tooltip'),
                  icon: Option.none(),
                  text: Option.some('button3'),
                  columns: 1,
                  presets: 'normal',
                  select: Option.none(),
                  fetch: (callback) => {
                    callback([
                      {
                        type: 'choiceitem',
                        text: 'Item 1'
                      }
                    ]);
                  },
                  onSetup: (api: Toolbar.ToolbarToggleButtonInstanceApi) => {
                    store.adder('onSetup.3')();
                    return () => { };
                  },
                  onAction: (api: Toolbar.ToolbarToggleButtonInstanceApi) => {
                    store.adder('onToggleAction.3')();
                    api.setDisabled(shouldDisable.get());
                    api.setActive(shouldActivate.get());
                  },
                  onItemAction: (api: Toolbar.ToolbarToggleButtonInstanceApi, value: string) => {
                    store.adder('onItemAction.3')();
                    api.setActive(true);
                  }
//.........這裏部分代碼省略.........