TypeScript WindowManager.setup函數代碼示例

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

export default () => {
  const helpers = setupDemo();
  const winMgr = WindowManager.setup(helpers.extras);

  // The end user will use this as config
  winMgr.open(
    {
      title: 'Preview',
      size: 'large',
      body: {
        type: 'panel',
        items: [
          {
            name: 'preview',
            type: 'iframe',
          }
        ]
      },
      buttons: [
        {
          type: 'cancel',
          name: 'cancel',
          text: 'Close'
        }
      ],
      initialData: {
        preview: 'Some content '
      },
      onSubmit: (api) => {
        console.log('Preview Demo onSubmit');
      },
      onClose: () => {
        console.log('Preview Demo Close');
      }
    }, {}, Fun.noop);
};

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

  const doc = Element.fromDom(document);

  const tests = (Env.ie > 0 || Env.webkit || Env.gecko) ? [] :
    [
      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; }',
        // NOTE: this is just for aiding debugging. It only works in some browsers
        'iframe:focus-within { outline: 3px solid green; !important; }'
      ]),

      Step.sync(() => {
        windowManager.open({
          title: 'Custom Dialog',
          body: {
            type: 'panel',
            items: [
              {
                name: 'input1',
                type: 'input'
              },
              {
                name: 'frame1',
                type: 'iframe'
              }
            ]
          },
          buttons: [
            {
              type: 'cancel',
              text: 'Close'
            }
          ],
          initialData: {
            input1: 'Dog',
            // NOTE: Tried some postMessage stuff to broadcast the scroll. Couldn't get it to work.
            // We can't just read the scroll value due to permissions
            frame1: '<!doctype html><html><head>' +
              '</head>' +
              '<body><h1>Heading</h1>' +
              Arr.map([ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], (n) => {
                return '<p>This is paragraph: ' + n + '</p>';
              }).join('\n') +
            '</body>'
          }
        }, { }, Fun.noop);
      }),

      RealKeys.sSendKeysOn(
        'input',
        [
          RealKeys.text('\u0009')
        ]
      ),
      FocusTools.sTryOnSelector(
        'focus should be on iframe',
        doc,
        'iframe'
      ),

      Step.wait(1000),

      RealKeys.sSendKeysOn(
        'iframe => body',
        [
          RealKeys.text('\uE015')
        ]
      ),

      RealKeys.sSendKeysOn(
        'iframe => body',
        [
          RealKeys.text('\u0009')
        ]
      ),

      FocusTools.sTryOnSelector(
        'focus should be on button (cancel)',
        doc,
        'button:contains("cancel")'
      ),

      // Tag it for using with selenium. Note, I should just
      // implement the automatic id tagging in agar, and
      // pass in a DOM reference (or assume focused element)
      Step.sync(() => {
        Focus.active().each((button) => {
          Class.add(button, 'cancel-button');
        });
      }),

      RealKeys.sSendKeysOn(
        '.cancel-button',
        [
          RealKeys.combo( { shiftKey: true }, '\u0009')
//.........這裏部分代碼省略.........

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

  const currentDialogApi = Cell<Types.Dialog.DialogInstanceApi<any>>({ } as any);

  const store = TestHelpers.TestStore();

  const dialogA: Types.Dialog.DialogApi<any> = {
    title: 'DialogA',
    body: {
      type: 'panel',
      items: [
      ]
    },
    buttons: [
      {
        type: 'custom',
        name: 'Dest.DialogB',
        text: 'Destination: DialogB'
      },
      {
        type: 'custom',
        name: 'disable-dest',
        text: 'Disable other'
      },
      {
        type: 'custom',
        name: 'enable-dest',
        text: 'Enable other'
      }
    ],
    initialData: {

    },
    onSubmit: (api) => {
      store.adder('onSubmitA');
      api.close();
    },
    onClose: store.adder('onCloseA'),
    onChange: store.adder('onChangeA'),
    onAction: (dialogApi, actionData) => {
      if (actionData.name === 'Dest.DialogB') {
        dialogApi.redial(dialogB);
      } else if (actionData.name === 'disable-dest') {
        dialogApi.disable('Dest.DialogB');
      } else if (actionData.name === 'enable-dest') {
        dialogApi.enable('Dest.DialogB');
      }
    }
  };

  const dialogB: Types.Dialog.DialogApi<any> =  {
    title: 'DialogB',
    body: {
      type: 'panel',
      items: [ ]
    },
    buttons: [
      {
        type: 'custom',
        name: 'Dest.DialogC',
        text: 'Destination: DialogC'
      },
    ],
    initialData: { },
    onSubmit: (api) => {
      store.adder('onSubmitB');
      api.close();
    },
    onClose: store.adder('onCloseB'),
    onAction: (dialogApi, actionData) => {
      if (actionData.name === 'Dest.DialogC') {
        dialogApi.redial(dialogC);
      }
    }
  };

  const dialogC: Types.Dialog.DialogApi<any> =  {
    title: 'DialogC',
    body: {
      type: 'tabpanel',
      tabs: [
        {
          title: 'one',
          items: [
            {
              type: 'input',
              name: 'c.alpha'
            }
          ]
        },
        {
          title: 'two',
          items: [

          ]
        }
      ]
    },
//.........這裏部分代碼省略.........

export const open = () => {
  const helpers = setupDemo();
  const winMgr = WindowManager.setup(helpers.extras);
  // The end user will use this as config
  winMgr.open(SearchReplaceDialogSpec, {}, () => {});
};

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

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

  const currentApi = Cell<Types.Dialog.DialogInstanceApi<any>>({ } as any);

  const store = TestHelpers.TestStore();

  const sTestOpen = (params) => Chain.asStep({ }, [
    Chain.mapper((_) => {
      return windowManager.open({
        title: 'Silver Test Access Dialog',
        body: {
          type: 'panel',
          items: [
            {
              type: 'input',
              name: 'fieldA',
              label: 'Label'
            },
          ]
        },
        buttons: [
          {
            type: 'custom',
            name: 'async.setData',
            text: 'Call api.setData after two seconds',
            align: 'start',
            primary: true
          },
        ],
        initialData: {
          fieldA: 'Init Value'
        },
        onSubmit: store.adder('onSubmit'),
        onClose: store.adder('onClose'),
        onCancel: store.adder('onCancel'),
        onChange: store.adder('onChange'),
        onAction: (api, _actionData) => {
          Delay.setTimeout(() => {
            const currentData = api.getData();
            store.adder('currentData: ' + currentData.fieldA)();
            // Currently, this will be ignored once the dialog is closed.
            api.setData({
              fieldA: 'New Value'
            });

            // Check all APIs do not throw errors
            api.disable('async.setData');
            api.enable('async.setData');
            api.block('message');
            api.unblock();
            api.showTab('new tab');
            // Currently, it is only going to validate it if the dialog is still open
            api.redial({
              title: 'temporary redial to check the API',
              body: {
                type: 'panel',
                items: []
              },
              buttons: []
            });
            api.close();

            store.adder('newData: ' + currentData.fieldA)();
          }, 2000);
        }
      }, params, () => store.adder('closeWindow')());
    }),

    Chain.op((dialogApi) => {
      Assertions.assertEq('Initial data', {
        fieldA: 'Init Value'
      }, dialogApi.getData());

      currentApi.set(dialogApi);
    })
  ]);

  const sTestClose = GeneralSteps.sequence([
    Mouse.sClickOn(Body.body(), '[aria-label="Close"]'),
    UiFinder.sNotExists(Body.body(), '[role="dialog"]')
  ]);

  const testDialog = (label: string, params: { inline?: string }) => Logger.t(
    `Testing ${label}`,
    GeneralSteps.sequence([
      store.sClear,
      Logger.t(
        'Open a dialog, with a change button that accesses API asynchronously',
        sTestOpen(params)
      ),

      Logger.t(
        'Trigger the async functions by clicking on the button',
        Mouse.sClickOn(Body.body(), 'button:contains("Call")')
      ),

      Logger.t(
        'Click on the close button, so that dialog is shut down',
//.........這裏部分代碼省略.........

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

  const doc = Element.fromDom(document);

  const testLog = Cell([ ]);

  const sAssertFocusedCheckbox = (label: string, expected: boolean) => {
    return Logger.t(
      label,
      Chain.asStep(doc, [
        FocusTools.cGetFocused,
        Chain.op((checkbox) => {
          Assertions.assertEq('Checking checked status', expected, checkbox.dom().checked);
        })
      ])
    );
  };

  const selectors = {
    field1: 'input', // nothing more useful, because it does not have a label
    field2: 'label:contains("F2") + textarea',
    field3: 'label:contains("F3") + .tox-form__controls-h-stack input',
    field4_a: '.tox-collection__item:contains("a")',
    field4_b: '.tox-collection__item:contains("b")',
    field5: 'input[type="checkbox"]',
    field6: 'label:contains("nested1") + input',
    field7: 'label:contains("nested2") + input',
    field8: 'button:contains("Cancel")',
    field9: 'button:contains("Save")',
    browseButton: 'button[title=F3]'
  };

  Pipeline.async({ }, [
    GuiSetup.mAddStyles(doc, [
      '[role="dialog"] { background: white; }',
      'input:checked + .tox-checkbox__icons .tox-checkbox-icon__unchecked { display: none; }',
      'input:checked + .tox-checkbox__icons .tox-checkbox-icon__indeterminate { display: none; }',

      'input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__unchecked { display: none; }',
      'input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__checked { display: none; }',

      'input:not(:checked):not(:indeterminate) + .tox-checkbox__icons .tox-checkbox-icon__indeterminate { display: none; }',
      'input:not(:checked):not(:indeterminate) + .tox-checkbox__icons .tox-checkbox-icon__checked { display: none; }',

      '.tox-checkbox__input { height: 1px; left: -10000px; oveflow: hidden; position: absolute; top: auto; width: 1px; }',

      '[role="dialog"] { border: 1px solid black; padding: 2em; background-color: rgb(131,193,249); top: 40px; position: absolute; }',

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

      '.tox-collection__item { display: inline-block; }'
    ]),

    Step.sync(() => {
      windowManager.open({
        title: 'Custom Dialog',
        body: {
          type: 'panel',
          items: [
            {
              name: 'f1-input',
              type: 'input'
            },
            {
              name: 'f2-textarea',
              label: 'F2',
              type: 'textarea'
            },
            {
              name: 'f3-urlinput',
              filetype: 'file',
              label: 'F3',
              type: 'urlinput'
            },
            {
              name: 'f4-charmap',
              type: 'collection',
              // columns: 'auto'
            },
            {
              name: 'f5-checkbox',
              label: 'Checkbox',
              type: 'checkbox'
            },
            {
              type: 'grid',
              columns: 2,
              items: [
                {
                  type: 'input',
                  label: 'nested1',
                  name: 'nested-input'
                },
                {
                  type: 'grid',
                  columns: 2,
                  items: [
                    {
//.........這裏部分代碼省略.........

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

  const shouldFail = (label, conf, asserter) => {
    return Step.async(function (next, die) {
      try {
        windowManager.open(conf, {}, Fun.noop);
      } catch (err) {
        asserter(err);
        return next();
      }

      die('This should throw a configuration error: ' + label);
    });
  };

  const sSetupDialog = (conf) => Step.sync(() => {
    windowManager.open(conf, {}, Fun.noop);
  });

  const sTeardown = GeneralSteps.sequence([
    Mouse.sClickOn(Body.body(), '.tox-button--icon[aria-label="Close"]'),
    Waiter.sTryUntil(
      'Waiting for blocker to disappear after clicking close',
      UiFinder.sNotExists(Body.body(), '.tox-dialog-wrap'),
      100,
      1000
    )
  ]);

  const sAssertSinkStructure = (asserter) => Chain.asStep(Body.body(), [
    UiFinder.cWaitFor('Looking for sink', '.mce-silver-sink'),
    Chain.op(asserter)
  ]);

  const createTest = (label, conf, asserter) => Logger.t(
    label,
    GeneralSteps.sequence([
      Waiter.sTryUntil(
        'Waiting for any other dialogs to disappear',
        UiFinder.sNotExists(Body.body(), '.tox-button--icon[aria-label="Close"]'),
        100,
        1000
      ),
      sSetupDialog(conf),
      UiFinder.sWaitFor('Waiting for dialog to appear', Body.body(), '.tox-button--icon[aria-label="Close"]'),
      sAssertSinkStructure(asserter),
      sTeardown,
    ])
  );

  const sTestWrongBodyType = shouldFail('The body type should return a useful error', {
    title: 'test-wrong-body',
    body: {
      type: 'foo'
    },
    buttons: []
  }, (err) => {
    const message = err.message.split('\n');
    Assertions.assertEq('This should throw a configuration error: showing the exact failure', message[1], 'Failed path: (dialog > body)');
    Assertions.assertEq('This should throw a configuration error: showing the exact failure', message[2], 'The chosen schema: "foo" did not exist in branches: {');
  });

  const sTestMissingPanelItems = shouldFail('body panel is missing items: []', {
    title: 'test-missing-panel',
    body: {
      type: 'panel'
      /*items: []*/ // I need items: [] to work, thats what this test should complain about
    },
    buttons: []
  }, (err) => {
    const message = err.message.split('\n');
    Assertions.assertEq('This should throw a configuration error: showing the exact failure', message[1], 'Failed path: (dialog > body > branch: panel)');
    Assertions.assertEq('This should throw a configuration error: showing the exact failure', message[2], 'Could not find valid *strict* value for "items" in {');
  });

  const sTestMinRequiredConfig = createTest('The smallest config to get dialog working, it should have this DOM structure', {
    title: 'test-min-required',
    body: {
      type: 'panel',
      items: []
    },
    buttons: []
  }, (rootElement: SugarElement) => {

    Assertions.assertStructure('A basic dialog should have these components',
      ApproxStructure.build((s, str, arr) => {
        return s.element('div', {
          classes: [ arr.has('mce-silver-sink') ],
          children: [
            s.element('div', {
              classes: [ arr.has('tox-dialog-wrap') ],
              children: [
                s.element('div', { classes: [ arr.has('tox-dialog-wrap__backdrop') ] }),
                s.element('div', {
                  classes: [ arr.has('tox-dialog') ],
                  children: [
                    s.element('div', {
                      classes: [ arr.has('tox-dialog__header') ],
//.........這裏部分代碼省略.........

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

  const currentApi = Cell<Types.UrlDialog.UrlDialogInstanceApi>({ } as any);

  const store = TestHelpers.TestStore();

  const sTestOpen = Chain.asStep({ }, [
    Chain.mapper((_) => {
      return windowManager.openUrl({
        title: 'Silver Test Modal URL Dialog',
        url: '/project/tinymce/src/themes/silver/test/html/iframe.html',
        buttons: [
          {
            type: 'custom',
            name: 'barny',
            text: 'Barny Text',
            align: 'start',
            primary: true
          },
        ],
        onClose: store.adder('onClose'),
        onAction: store.adder('onAction'),
        onMessage: store.adder('onMessage')
      }, () => store.adder('closeWindow')());
    }),

    Chain.op((dialogApi) => {
      currentApi.set(dialogApi);
    })
  ]);

  const sTestClose = GeneralSteps.sequence([
    Mouse.sClickOn(Body.body(), '[aria-label="Close"]'),
    UiFinder.sNotExists(Body.body(), '[role="dialog"]')
  ]);

  Pipeline.async({}, [
    sTestOpen,
    Assertions.sAssertStructure('"tox-dialog__scroll-disable" should exist on the body',
      ApproxStructure.build((s, str, arr) => {
        return s.element('body', {
          classes: [ arr.has('tox-dialog__disable-scroll') ]
        });
      }),
      Body.body()
    ),
    Waiter.sTryUntil(
      'Waiting for an initial message to be received from the iframe',
      store.sAssertEq('Checking stuff', [ 'onMessage' ]),
      100,
      3000
    ),
    Step.label('Sending message to iframe', Step.sync(() => {
      // Send a message to the iframe
      currentApi.get().sendMessage({ message: 'Some message' });
    })),
    Waiter.sTryUntil(
      'Waiting for the reply message to be received from the iframe',
      store.sAssertEq('Checking stuff', [ 'onMessage', 'onMessage' ]),
      100,
      3000
    ),
    Mouse.sClickOn(Body.body(), 'button:contains("Barny Text")'),
    sTestClose,
    Waiter.sTryUntil(
      'Waiting for all dialog events when closing',
      store.sAssertEq('Checking stuff', [
        'onMessage',
        'onMessage',
        'onAction',
        'closeWindow',
        'onClose'
      ]),
      100,
      3000
    ),
    Assertions.sAssertStructure('"tox-dialog__scroll-disable" should have been removed from the body',
      ApproxStructure.build((s, str, arr) => {
        return s.element('body', {
          classes: [ arr.not('tox-dialog__disable-scroll') ]
        });
      }),
      Body.body()
    ),
  ], () => {
    helpers.destroy();
    success();
  }, failure);
});