connect

Updated:

This is the starting point for the Tecton system.

Calling connect is required to initialize the connection between the module and the running platform. It is also required to register the elements. connect returns a promise that will resolve with a Tecton object that contains the actions and sources implemented by the platform you are connecting to.

Details

Type

interface IOptions {
  loadDefaultTheme?: boolean;
  loadUtilities?: boolean;
  loadPlatformCSS?: boolean;
  loadElements?: boolean;
  baseLanguagePath?: string;
  legacy?: boolean;
  moduleId?: string;
  testOptions?: {
    actions?: IActionsStubs;
    sources?: ISourcesStubs;
    outletContext?: string;
    outletName?: string;
    initialParams?: IDict<any>;
    loadElements?: boolean;
  };
}

tecton.connect(options: IOptions): Promise<{actions: object; sources: object, params$: BehaviorSubject}>;

Example

tecton.connect().then((tecton) => {
  window.tecton = tecton;
});

Return Object Properties

Using TestOptions to Test Your Application

The primary function of Tecton is to create an environment in an iframe that matches the application in which it is embeded. connect establishes this relationship with the containing app and returns functionality exposed by it.

However there are times when you might wish to run your application outside of the iframe.

Such as:

  • Running tests
  • Easy development/Continuous Integration

Passing any testOptions or even an empty object to the testOptions property, it puts Tecton in test mode, bypassing any attempt to contact a parent application and only returning stubbed functions.

tecton.connect({
  testOptions: {}
})

The return value of connect is a promise containing all of the functions documented in this guide. Any of these functions that are relied upon must be stubbed out, (except setParams and paramsChanged, are still provided). These stubed functions are what you pass to testOptions. If your app recieves params from the containing app on bootup, those can also be passed to testOptions under the property initialParams.

testOption Properties

Example of stubbing out an action and source method, while turning off elements for testing

Note: The values here are for demonstration purposes and are not complete implementations and likely do not apply to your application.

tecton.connect({
  testOptions: {
    actions: {
      sendModal({message, button1, button2}) {
      let result =  window.confirm(message);
      return Promise.resolve(result ? button1.actionName : button2.actionName);
    }
  },
  sources: {
    fetchPlatformData(endPoint) {
      return HypotheticalFixturesCatalog.get(endPoint);
    }
  },
  initialParams: {
    hasEnrolled: true,
    userId: 121
  },
  loadElements: false
}
})

There are some creative ways to use this dynamically that will provide value based on your situation.

  • The most basic would be to have static config for testMode but turned on based on if you are in an iframe or not. When not in an iframe window.parent === window.
tecton.connect({testOptions: window.parent === window ? {loadElements: false} : undefined})
  • Using namespaced globals that can be passed from your test will give you more control to use stub methods for assertions in your test, and to choose values based on situation needed
tecton.connect({testOptions: App.TectonTestOptions})

it('submitting feature form shows modal', async function() {
  let wasCalled;
  
  App.TectonTestOptions = {
    actions: {
      showModal({message}) {
      expect(message).to.equal('Form Submitted!');
      wasCalled = true;
    }
  }
};

await BootApp();
await NavigateToFeature();
await fillOutFormAndSubmit();

expect(wasCalled).to.be.ok;
});

Arguments

UUX
Console
Config

Passing a testOptions object value puts Tecton into test mode. Tecton does not require a platform in test mode and can be run outside of an iframe. The testOptions object provides the ability to stub all methods that require platform functionality. See the Testing & Mocking guide for information on developing and testing with testOptions.

UUX
Console
Config

Determines whether to load the default theme provided by Tecton. This includes the CSS variables documented in Style constants.

UUX
Console
Config

Determines whether to load the utility CSS. This includes the styles and classes documented in the Grid system and Functional CSS classes.

UUX
Console
Config

Determines whether to load the styles inherited from the platform level. This includes all CSS variables to render the themed Tecton UI components and the basic Tecton UI components.

UUX
Console
Config

Determines whether to load the Tecton UI components.

Release Notes

Initial Release