@thoughtspot/visual-embed-sdk 1.33.0-alpha.1 → 1.33.0-dc.1

package/src/test/test-utils.ts

@@ -1,12 +1,16 @@
+import { has } from 'lodash';
 import { version } from '../../package.json';
 import { Action, AuthType } from '../types';
 
 /**
  Initialises fetch to the global object
  */
-global.fetch = jest.fn(() => Promise.resolve({
-    json: () => ({ mixpanelAccessToken: '' }),
-}));
+if (!(global.fetch as any).mockResponse) {
+    console.log('mocking fetch');
+    global.fetch = jest.fn(() => Promise.resolve({
+        json: () => ({ mixpanelAccessToken: '' }),
+    }));
+}
 
 export const defaultParamsWithoutHiddenActions = `hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=${AuthType.None}&blockNonEmbedFullAppAccess=true`;
 export const defaultParams = `&${defaultParamsWithoutHiddenActions}&hideAction=[%22${Action.ReportError}%22]`;
@@ -106,6 +110,27 @@ export const expectUrlMatchesWithParams = (source: string, target: string) => {
     const sourceParamsObj = Object.fromEntries(sourceUrl.searchParams);
     const targetParamsObj = Object.fromEntries(targetUrl.searchParams);
     expect(sourceParamsObj).toMatchObject(targetParamsObj);
+
+    const sourceHashParams = getHashQueryParams(sourceUrl.hash);
+    const targetHashParams = getHashQueryParams(targetUrl.hash);
+    expect(sourceHashParams).toMatchObject(targetHashParams);
+};
+
+export const expectUrlToHaveParamsWithValues = (
+    url: string, paramsWithValues: Record<string, any>,
+) => {
+    const urlObj = new URL(url);
+    const urlParams = Object.fromEntries(urlObj.searchParams);
+
+    const sourceHashParams = getHashQueryParams(urlObj.hash);
+    const sourceParams = {
+        ...urlParams, ...sourceHashParams,
+    };
+
+    Object.entries(paramsWithValues).forEach(([key, value]) => {
+        expect(has(sourceParams, key)).toBeTruthy();
+        expect(`${sourceParams[key]}`).toBe(`${value}`);
+    });
 };
 
 export const expectUrlMatch = (source: string, target: string) => {
@@ -123,3 +148,21 @@ export const createRootEleForEmbed = () => {
     rootEle.appendChild(tsEmbedDiv);
     document.body.appendChild(rootEle);
 };
+
+export const getHashQueryParams = (hash: string): any => {
+    const params = hash.split('?')[1];
+    const hashParams = new URLSearchParams(params);
+    return Object.fromEntries(hashParams);
+};
+
+export const mockSessionInfo = {
+    userGUID: '1234',
+    mixpanelToken: 'abc123',
+    isPublicUser: false,
+    sessionId: '6588e7d9-710c-453e-a7b4-535fb3a8cbb2',
+    genNo: 3,
+    acSession: {
+        sessionId: 'cb202c48-b14b-4466-8a70-899ea666d46q',
+        genNo: 5,
+    },
+};

package/src/tokenizedFetch.ts

@@ -22,7 +22,11 @@ import { AuthType } from './types';
 export const tokenizedFetch: typeof fetch = async (input, init): Promise<Response> => {
     const embedConfig = getEmbedConfig();
     if (embedConfig.authType !== AuthType.TrustedAuthTokenCookieless) {
-        return fetch(input, init);
+        return fetch(input, {
+            // ensure cookies are included for the non cookie-less api calls.
+            credentials: 'include',
+            ...init,
+        });
     }
 
     const req = new Request(input, init);

package/src/types.ts

@@ -201,6 +201,10 @@ export enum HomeLeftNavItem {
      * @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
      */
     SpotIQAnalysis = 'spotiq-analysis',
+    /**
+     * @version SDK: 1.34.0| ThoughtSpot: 10.3.0.cl
+     */
+    LiveboardSchedules = 'liveboard-schedules'
 }
 export type DOMSelector = string | HTMLElement;
 
@@ -445,13 +449,6 @@ export interface EmbedConfig {
      */
     queueMultiRenders?: boolean;
 
-    /**
-     * Dynamic CSS URL to be injected in the loaded application.
-     * You would also need to set `style-src` in the CSP settings.
-     * @version SDK: 1.6.0 | ThoughtSpot: ts8.nov.cl, 8.4.1.sw
-     * @default ''
-     */
-    customCssUrl?: string;
     /**
      * [AuthServer|Basic] Detect if third-party party cookies are enabled by doing an
      * additional call. This is slower and should be avoided. Listen to the
@@ -585,6 +582,13 @@ export interface EmbedConfig {
      * @version SDK: 1.28.5 | Thoughtspot: *
      */
     disableTokenVerification?: boolean;
+
+    /**
+     * This flag is used to disable showing the login failure page in the embedded app.
+     *
+     * @version SDK 1.32.3 | Thoughtspot: *
+     */
+    disableLoginFailurePage?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -711,11 +715,12 @@ export interface ViewConfig {
      */
     visibleActions?: Action[];
     /**
-     * Show alert messages and toast messages in the embedded view.
+     * Show alert messages and toast messages in the embedded
+     * view in full app embed.
      * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1.sw
      * @example
      * ```js
-     * const embed = new LiveboardEmbed('#embed-container', {
+     * const embed = new AppEmbed('#embed-container', {
      *    ... // other options
      *    showAlerts:true,
      * })
@@ -1012,6 +1017,43 @@ export interface ViewConfig {
      */
     // eslint-disable-next-line camelcase
     enableV2Shell_experimental?: boolean;
+    /**
+     * To set the initial state of the search bar in case of saved-answers.
+     * @default true
+     * @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   liveboardId: '123',
+     *   collapseSearchBar: true
+     * });
+     */
+    collapseSearchBar?: boolean;
+    /**
+     * This flag can be used to disable links inside the embedded app,
+     * and disables redirection of links in a new tab.
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   disableRedirectionLinksInNewTab: true
+     * });
+     * ```
+     * @version SDK: 1.32.1 | ThoughtSpot: 10.3.0.cl
+     */
+    disableRedirectionLinksInNewTab?: boolean;
+    /**
+     * Flag to control Data panel experience
+     * @default true
+     * @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataPanelV2: true,
+     * })
+     * ```
+     */
+    dataPanelV2?: boolean;
 }
 
 /**
@@ -1224,6 +1266,28 @@ export interface RuntimeParameter {
  *   console.log('Drilldown event', drilldown);
  * }));
  * ```
+ *
+ * If you are using React components for embedding, you can register to any
+ * events from the `EmbedEvent` list by using the `on<EventName>` convention.
+ * For example,`onAlert`, `onCopyToClipboard` and so on.
+ *
+ *  @example
+ * ```js
+ * // ...
+ * const MyComponent = ({ dataSources }) => {
+ *      const onLoad = () => {
+ *      console.log(EmbedEvent.Load, {});
+ *      };
+ *
+ *      return (
+ *          <SearchEmbed
+ *              dataSources={dataSources}
+ *              onLoad = {logEvent("Load")}
+ *          />
+ *     );
+ * };
+ * ```
+ *
  * @group Events
  */
 // eslint-disable-next-line no-shadow
@@ -2093,21 +2157,61 @@ export enum EmbedEvent {
      */
     Rename = 'rename',
     /**
-     * Emitted when user wants to intercept the search execution
+     * Emitted if the user wants to intercept the search execution
+     * and implement logic to decide whether to run the search or not
      *
-     * Set IsOnBeforeGetVizDataInterceptEnabled : true to use
-     * this embed event
+     * Prerequisite: Set isOnBeforeGetVizDataInterceptEnabled : true
+     * for this embed event to get emitted.
      *
+     * @param: payload
+     * @param: responder
+     * Contains elements that lets developers define whether ThoughtSpot
+     * will run the search or not, and if not, which error message to provide.
+     *
+     * execute: When execute returns true, the search will be run.
+     * When execute returns false, the search will not be executed.
+     *
+     * error: Developers can customize the user facing message when execute is
+     * set to false using the error parameter in responder
+     *
+     * @version SDK : 1.29.0 | Thoughtspot : 10.2.0.cl
+     *
+     * @example
      *```js
-     * searchEmbed.on(EmbedEvent.OnBeforeGetVizDataIntercept,
+     * .on(EmbedEvent.OnBeforeGetVizDataIntercept,
      * (payload, responder) => {
      *  responder({
      *      data: {
-     *          execute: true,
-     *   }})
+     *          execute:false,
+     *          error: {
+     *          //Provide a custom error message to explain to your end user
+     *          //why their search did not run
+     *          errorText: "This search query cannot be run.
+     *          Please contact your administrator for more details."
+     *          }
+     *  }})
+     * })
+     * ```
+     *
+     *```js
+     * .on(EmbedEvent.OnBeforeGetVizDataIntercept,
+     * (payload, responder) => {
+     * const query = payload.data.data.answer.search_query
+     * responder({
+     *  data: {
+     *      // returns true as long as the query does not include
+     *      // both the 'sales' AND the 'county' column
+     *      execute: !(query.includes("sales")&&query.includes("county")),
+     *      error: {
+     *      //Provide a custom error message to explain to your end user
+     *      // why their search did not run, and which searches are accepted by your custom logic.
+     *      errorText: "You can't use this query :" + query + ".
+     *      The 'sales' measures can never be used at the 'county' level.
+     *      Please try another measure, or remove 'county' from your search."
+     *      }
+     *  }})
      * })
      *```
-     * @version SDK : 1.29.0 | Thoughtspot : 10.2.0.cl
      */
     OnBeforeGetVizDataIntercept = 'onBeforeGetVizDataIntercept',
     /**
@@ -2126,7 +2230,7 @@ export enum EmbedEvent {
 
 /**
  * Event types that can be triggered by the host application
- * to the embedded ThoughtSpot app
+ * to the embedded ThoughtSpot app.
  *
  * To trigger an event use the corresponding
  * {@link LiveboardEmbed.trigger} or {@link AppEmbed.trigger} or {@link
@@ -2143,6 +2247,40 @@ export enum EmbedEvent {
  *   { columnName: 'state, operator: RuntimeFilterOp.EQ, values: ['california']}
  * ]);
  * ```
+ * @example
+ * If using React components to embed, use the format shown in this example:
+ *
+ * ```js
+ *  const selectVizs = () => {
+ *      embedRef.current.trigger(HostEvent.SetVisibleVizs, [
+ *         "715e4613-c891-4884-be44-aa8d13701c06",
+ *         "3f84d633-e325-44b2-be25-c6650e5a49cf"
+ *      ]);
+ *    };
+ * ```
+ *
+ *
+ * You can also attach an Embed event to a Host event to trigger
+ * a specific action as shown in this example:
+ *
+ * @example
+ * ```js
+ *  const EmbeddedComponent = () => {
+ *       const embedRef = useRef(null); // import { useRef } from react
+ *       const onLiveboardRendered = () => {
+ *          embedRef.current.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
+ *      };
+ *
+ *      return (
+ *          <LiveboardEmbed
+ *              ref={embedRef}
+ *              liveboardId="<liveboard-guid>"
+ *              onLiveboardRendered={onLiveboardRendered}
+ *          />
+ *      );
+ *  }
+ * ```
+ *
  * @group Events
  */
 // eslint-disable-next-line no-shadow
@@ -2227,6 +2365,15 @@ export enum HostEvent {
      * @hidden
      */
     Reload = 'reload',
+    /**
+     * Get current iframe src
+     * @example
+     * ```js
+     * const frameUrl = AppEmbed.trigger(HostEvent.GetIframeUrl)
+     * ```
+     * @version SDK: 1.35.0 | Thoughtspot: 10.4.0.cl
+     */
+    GetIframeUrl = 'GetIframeUrl',
     /**
      * Display specific visualizations on a Liveboard.
      * @param - An array of GUIDs of the visualization to show. The visualization IDs not passed
@@ -2493,13 +2640,15 @@ export enum HostEvent {
      *
      * @example
      * ```js
-     * appEmbed.trigger(HostEvent.CreateMonitor)
+     * searchEmbed.trigger(HostEvent.CreateMonitor)
      * ```
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
      */
     CreateMonitor = 'createMonitor',
     /**
-     * Trigger the **Manage alerts** action on a visualization
+     * Trigger the **Manage alerts** action on a KPI chart
+     * in a visualization or saved Answer.
+     *
      * @param - an object with `vizId` as a key
      * @example
      * ```js
@@ -2507,6 +2656,16 @@ export enum HostEvent {
      *  vizId: '730496d6-6903-4601-937e-2c691821af3c'
      * })
      * ```
+     *
+     * @example
+     * ```js
+     * searchEmbed.trigger(HostEvent.ManageMonitor)
+     * ```
+     *
+     * @example
+     * ```js
+     * vizEmbed.trigger(HostEvent.ManageMonitor)
+     * ```
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
      */
     ManageMonitor = 'manageMonitor',
@@ -2816,11 +2975,24 @@ export enum HostEvent {
      *     filter: {
      *         column: "item type",
      *         oper: "IN",
-     *         values: ["bags","shirts"],
+     *         values: ["bags","shirts"]
      *        }
      *    });
      * ```
      * @example
+     * ```js
+     *
+     * liveboardEmbed.trigger(HostEvent.UpdateFilters, {
+     *     filter: {
+     *         column: "date",
+     *         oper: "EQ",
+     *         values: ["JULY","2023"],
+     *         type: "MONTH_YEAR"
+     *        }
+     *    });
+     * ```
+     *
+     * @example
      *
      * ```js
      * liveboardEmbed.trigger(HostEvent.UpdateFilters, {
@@ -2837,7 +3009,8 @@ export enum HostEvent {
      *    {
      *      column: "Date",
      *      oper: 'EQ',
-     *      values: ["1656680400"]
+     *      values: ["2023-07-31"],
+     *      types: "EXACT_DATE"
      *    }]
      * });
      * ```
@@ -3027,7 +3200,6 @@ export enum Param {
     ViewPortHeight = 'viewPortHeight',
     ViewPortWidth = 'viewPortWidth',
     VisibleActions = 'visibleAction',
-    CustomCSSUrl = 'customCssUrl',
     DisableLoginRedirect = 'disableLoginRedirect',
     visibleVizs = 'pinboardVisibleVizs',
     LiveboardV2Enabled = 'isPinboardV2Enabled',
@@ -3084,6 +3256,11 @@ export enum Param {
     IsFullAppEmbed = 'isFullAppEmbed',
     IsOnBeforeGetVizDataInterceptEnabled = 'isOnBeforeGetVizDataInterceptEnabled',
     FocusSearchBarOnRender = 'focusSearchBarOnRender',
+    DisableRedirectionLinksInNewTab = 'disableRedirectionLinksInNewTab',
+    HomePageSearchBarMode = 'homePageSearchBarMode',
+    ShowLiveboardVerifiedBadge = 'showLiveboardVerifiedBadge',
+    ShowLiveboardReverifyBanner = 'showLiveboardReverifyBanner',
+    LiveboardHeaderV2 = 'isLiveboardHeaderV2Enabled',
 }
 
 /**
@@ -3234,6 +3411,7 @@ export enum Action {
      */
     ConfigureFilter = 'configureFilter',
     CollapseDataSources = 'collapseDataSources',
+    CollapseDataPanel = 'collapseDataPanel',
     /**
      * The **Choose sources** button on Search page.
      * Allows selecting data sources for search queries.
@@ -3630,12 +3808,15 @@ export enum Action {
      * The Create alert action on KPI charts.
      * @example
      * ```js
-     * disabledActions: [Action.CreateMonitor ]
+     * disabledActions: [Action.CreateMonitor]
      * ```
      * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1.sw
      */
     CreateMonitor = 'createMonitor',
     /**
+     * @deprecated
+     * Reports errors
+     *
      * @example
      * ```js
      * disabledActions: [Action.ReportError]
@@ -3860,35 +4041,84 @@ export enum Action {
      */
     RenameModalTitleDescription = 'renameModalTitleDescription',
     /**
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.RequestVerification]
+     * ```
      *
      * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
      */
     RequestVerification = 'requestVerification',
     /**
+     *
+     * Allows users to mark a Liveboard as verified.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.MarkAsVerified]
+     * ```
      * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
      */
     MarkAsVerified = 'markAsVerified',
     /**
+     * The **Add Tab** action on a Liveboard.
+     * Allows adding a new tab to a Liveboard view.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.AddTab]
+     * ```
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     AddTab = 'addTab',
     /**
+     *
+     * Initiates contextual change analysis on KPI charts.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.EnableContextualChangeAnalysis]
+     * ```
      * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
      */
     EnableContextualChangeAnalysis = 'enableContextualChangeAnalysis',
     /**
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.ShowSageQuery]
+     * ```
+     *
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     ShowSageQuery = 'showSageQuery',
     /**
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.EditSageAnswer]
+     * ```
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     EditSageAnswer = 'editSageAnswer',
     /**
+     *
+     * This action allows users to send feedback on AI-generated Answers.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.SageAnswerFeedback]
+     * ```
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     SageAnswerFeedback = 'sageAnswerFeedback',
     /**
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.ModifySageAnswer]
+     * ```
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     ModifySageAnswer = 'modifySageAnswer',
@@ -3957,7 +4187,7 @@ export enum Action {
      *
      * @version SDK: 1.32.0 | Thoughtspot: 10.1.0.cl
      */
-    CreateLiveboard = 'CreateLiveboard',
+    CreateLiveboard = 'createLiveboard',
 
     /**
      * Action ID for to hide Verified Liveboard Banner
@@ -4018,6 +4248,77 @@ export enum Action {
      *  @version SDK: 1.27.10 | Thoughtspot: 9.12.5.cl
      */
     AIHighlights = 'AIHighlights',
+
+    /**
+     * Action ID for edit schedule action on schedule on homepage
+     * @example
+     * ```js
+     * disabledActions: [Action.EditScheduleHomepage]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    EditScheduleHomepage = 'editScheduleHomepage',
+
+    /**
+     * Action ID for pause schedule action on schedule on homepage
+     * @example
+     * ```js
+     * disabledActions: [Action.PauseScheduleHomepage]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    PauseScheduleHomepage = 'pauseScheduleHomepage',
+
+    /**
+     * Action ID for view schedule run action on schedule on homepage
+     * @example
+     * ```js
+     * disabledActions: [Action.ViewScheduleRunHomepage]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    ViewScheduleRunHomepage = 'viewScheduleRunHomepage',
+
+    /**
+     * Action ID for unsubscribe schedule action on schedule on homepage
+     * @example
+     * ```js
+     * disabledActions: [Action.UnsubscribeScheduleHomepage]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    UnsubscribeScheduleHomepage = 'unsubscribeScheduleHomepage',
+
+    /**
+     * The **Manage Tags** action on Homepage Favourite Module.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.ManageTags]
+     * ```
+     * @version SDK : 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    ManageTags = 'manageTags',
+
+    /**
+     * Action ID for delete schedule action on schedule on homepage
+     * @example
+     * ```js
+     * disabledActions: [Action.DeleteScheduleHomepage]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    DeleteScheduleHomepage = 'deleteScheduleHomepage',
+
+    /**
+     * The **Analyze CTA** action on KPI chart.
+     * @example
+     * ```js
+     * disabledActions: [Action.KPIAnalysisCTA]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    KPIAnalysisCTA = 'kpiAnalysisCTA',
 }
 
 export interface AnswerServiceType {

package/src/utils/authService/authService.spec.ts

@@ -29,7 +29,9 @@ describe('Unit test for authService', () => {
         const response = await fetchSessionInfoService(thoughtSpotHost);
         expect(response.success).toBe(true);
         expect(fetch).toHaveBeenCalledTimes(1);
-        expect(fetch).toBeCalledWith(`${thoughtSpotHost}${EndPoints.SESSION_INFO}`, {});
+        expect(fetch).toBeCalledWith(`${thoughtSpotHost}${EndPoints.SESSION_INFO}`, {
+            credentials: 'include',
+        });
     });
 
     test('fetchAuthTokenService', async () => {
@@ -112,9 +114,16 @@ describe('Unit test for authService', () => {
         try {
             await fetchSessionInfoService(authVerificationUrl);
         } catch (e) {
-            expect(e.message).toContain('Failed to fetch session info');
+            //
         }
         expect(logger.error).toHaveBeenCalledWith('Failed to fetch http://localhost:3000/callosum/v1/session/info', 'error');
+
+        try {
+            await fetchBasicAuthService(thoughtSpotHost, username, password);
+        } catch (e) {
+            expect(e.message).toContain('Failed to fetch session info');
+        }
+        expect(logger.error).toHaveBeenCalledWith('Failure', 'error');
     });
 
     test('verifyTokenService if token api works', async () => {

package/src/utils/authService/tokenizedAuthService.ts

@@ -18,7 +18,6 @@ function tokenizedFailureLoggedFetch(url: string, options: RequestInit = {}): Pr
 
 /**
  * Fetches the session info from the ThoughtSpot server.
- *
  * @param thoughtspotHost
  * @returns {Promise<any>}
  * @example
@@ -52,7 +51,6 @@ export async function fetchLogoutService(thoughtSpotHost: string): Promise<any>
 
 /**
  * Is active service to check if the user is logged in.
- *
  * @param thoughtSpotHost
  * @version SDK: 1.28.4 | ThoughtSpot: *
  */

package/src/utils/global-styles.spec.ts

@@ -0,0 +1,20 @@
+import { getDocumentBody } from '../test/test-utils';
+import { addPreviewStylesIfNotPresent } from './global-styles';
+
+describe('addPreviewStylesIfNotPresent', () => {
+    afterEach(() => {
+        document.body.innerHTML = getDocumentBody();
+    });
+    it('should not add preview styles if present', () => {
+        document.body.innerHTML = '<div id="ts-preview-style">test</div>';
+        addPreviewStylesIfNotPresent();
+        const styleEl = document.getElementById('ts-preview-style');
+        expect(styleEl.innerHTML).toBe('test');
+    });
+
+    it('should add preview styles if not present', () => {
+        addPreviewStylesIfNotPresent();
+        const styleEl = document.getElementById('ts-preview-style');
+        expect(styleEl).not.toBeNull();
+    });
+});