1 files changed, 71 insertions, 73 deletions

diff --git a/spec/frontend/observability/observability_app_spec.js b/spec/frontend/observability/observability_app_spec.js
index e3bcd140d60..4a9be71b880 100644
--- a/spec/frontend/observability/observability_app_spec.js
+++ b/spec/frontend/observability/observability_app_spec.js
@@ -1,19 +1,20 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ObservabilityApp from '~/observability/components/observability_app.vue';
 import ObservabilitySkeleton from '~/observability/components/skeleton/index.vue';
-
-import { MESSAGE_EVENT_TYPE, SKELETON_VARIANTS_BY_ROUTE } from '~/observability/constants';
+import {
+  MESSAGE_EVENT_TYPE,
+  INLINE_EMBED_DIMENSIONS,
+  FULL_APP_DIMENSIONS,
+  SKELETON_VARIANT_EMBED,
+} from '~/observability/constants';
 
 import { darkModeEnabled } from '~/lib/utils/color_utils';
 
 jest.mock('~/lib/utils/color_utils');
 
-describe('Observability root app', () => {
+describe('ObservabilityApp', () => {
   let wrapper;
-  const replace = jest.fn();
-  const $router = {
-    replace,
-  };
+
   const $route = {
     pathname: 'https://gitlab.com/gitlab-org/',
     path: 'https://gitlab.com/gitlab-org/-/observability/dashboards',
@@ -26,21 +27,19 @@ describe('Observability root app', () => {
 
   const TEST_IFRAME_SRC = 'https://observe.gitlab.com/9970/?groupId=14485840';
 
-  const OBSERVABILITY_ROUTES = Object.keys(SKELETON_VARIANTS_BY_ROUTE);
-
-  const SKELETON_VARIANTS = Object.values(SKELETON_VARIANTS_BY_ROUTE);
+  const TEST_USERNAME = 'test-user';
 
-  const mountComponent = (route = $route) => {
+  const mountComponent = (props) => {
     wrapper = shallowMountExtended(ObservabilityApp, {
       propsData: {
         observabilityIframeSrc: TEST_IFRAME_SRC,
+        ...props,
       },
       stubs: {
         'observability-skeleton': ObservabilitySkeleton,
       },
       mocks: {
-        $router,
-        $route: route,
+        $route,
       },
     });
   };
@@ -48,17 +47,11 @@ describe('Observability root app', () => {
   const dispatchMessageEvent = (message) =>
     window.dispatchEvent(new MessageEvent('message', message));
 
-  afterEach(() => {
-    wrapper.destroy();
+  beforeEach(() => {
+    gon.current_username = TEST_USERNAME;
   });
 
   describe('iframe src', () => {
-    const TEST_USERNAME = 'test-user';
-
-    beforeAll(() => {
-      gon.current_username = TEST_USERNAME;
-    });
-
     it('should render an iframe with observabilityIframeSrc, decorated with light theme and username', () => {
       darkModeEnabled.mockReturnValueOnce(false);
       mountComponent();
@@ -92,48 +85,70 @@ describe('Observability root app', () => {
     });
   });
 
-  describe('on GOUI_ROUTE_UPDATE', () => {
-    it('should not call replace method from vue router if message event does not have url', () => {
-      mountComponent();
-      dispatchMessageEvent({
-        type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE,
-        payload: { data: 'some other data' },
+  describe('iframe kiosk query param', () => {
+    it('when inlineEmbed, it should set the proper kiosk query parameter', () => {
+      mountComponent({
+        inlineEmbed: true,
       });
-      expect(replace).not.toHaveBeenCalled();
+
+      const iframe = findIframe();
+
+      expect(iframe.attributes('src')).toBe(
+        `${TEST_IFRAME_SRC}&theme=light&username=${TEST_USERNAME}&kiosk=inline-embed`,
+      );
     });
+  });
 
-    it.each`
-      condition                                                  | origin                          | observability_path | url
-      ${'message origin is different from iframe source origin'} | ${'https://example.com'}        | ${'/'}             | ${'/explore'}
-      ${'path is same as before (observability_path)'}           | ${'https://observe.gitlab.com'} | ${'/foo?bar=test'} | ${'/foo?bar=test'}
-    `(
-      'should not call replace method from vue router if $condition',
-      async ({ origin, observability_path, url }) => {
-        mountComponent({ ...$route, query: { observability_path } });
-        dispatchMessageEvent({
-          data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload: { url } },
-          origin,
-        });
-        expect(replace).not.toHaveBeenCalled();
-      },
-    );
+  describe('iframe size', () => {
+    it('should set the specified size', () => {
+      mountComponent({
+        height: INLINE_EMBED_DIMENSIONS.HEIGHT,
+        width: INLINE_EMBED_DIMENSIONS.WIDTH,
+      });
+
+      const iframe = findIframe();
+
+      expect(iframe.attributes('width')).toBe(INLINE_EMBED_DIMENSIONS.WIDTH);
+      expect(iframe.attributes('height')).toBe(INLINE_EMBED_DIMENSIONS.HEIGHT);
+    });
+
+    it('should fallback to default size', () => {
+      mountComponent({});
+
+      const iframe = findIframe();
 
-    it('should call replace method from vue router on message event callback', () => {
+      expect(iframe.attributes('width')).toBe(FULL_APP_DIMENSIONS.WIDTH);
+      expect(iframe.attributes('height')).toBe(FULL_APP_DIMENSIONS.HEIGHT);
+    });
+  });
+
+  describe('skeleton variant', () => {
+    it('sets the specified skeleton variant', () => {
+      mountComponent({ skeletonVariant: SKELETON_VARIANT_EMBED });
+      const props = wrapper.findComponent(ObservabilitySkeleton).props();
+
+      expect(props.variant).toBe(SKELETON_VARIANT_EMBED);
+    });
+
+    it('should have a default skeleton variant', () => {
+      mountComponent();
+      const props = wrapper.findComponent(ObservabilitySkeleton).props();
+
+      expect(props.variant).toBe('dashboards');
+    });
+  });
+
+  describe('on GOUI_ROUTE_UPDATE', () => {
+    it('should emit a route-update event', () => {
       mountComponent();
 
+      const payload = { url: '/explore' };
       dispatchMessageEvent({
-        data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload: { url: '/explore' } },
+        data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload },
         origin: 'https://observe.gitlab.com',
       });
 
-      expect(replace).toHaveBeenCalled();
-      expect(replace).toHaveBeenCalledWith({
-        name: 'https://gitlab.com/gitlab-org/',
-        query: {
-          otherQuery: 100,
-          observability_path: '/explore',
-        },
-      });
+      expect(wrapper.emitted('route-update')[0]).toEqual([payload]);
     });
   });
 
@@ -167,34 +182,17 @@ describe('Observability root app', () => {
     });
   });
 
-  describe('skeleton variant', () => {
-    it.each`
-      pathDescription        | path                       | variant
-      ${'dashboards'}        | ${OBSERVABILITY_ROUTES[0]} | ${SKELETON_VARIANTS[0]}
-      ${'explore'}           | ${OBSERVABILITY_ROUTES[1]} | ${SKELETON_VARIANTS[1]}
-      ${'manage dashboards'} | ${OBSERVABILITY_ROUTES[2]} | ${SKELETON_VARIANTS[2]}
-      ${'any other'}         | ${'unknown/route'}         | ${SKELETON_VARIANTS[0]}
-    `('renders the $variant skeleton variant for $pathDescription path', ({ path, variant }) => {
-      mountComponent({ ...$route, path });
-      const props = wrapper.findComponent(ObservabilitySkeleton).props();
-
-      expect(props.variant).toBe(variant);
-    });
-  });
-
-  describe('on observability ui unmount', () => {
-    it('should remove message event and should not call replace method from vue router', () => {
+  describe('on unmount', () => {
+    it('should not emit any even on route update', () => {
       mountComponent();
       wrapper.destroy();
 
-      // testing event cleanup logic, should not call on messege event after component is destroyed
-
       dispatchMessageEvent({
         data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload: { url: '/explore' } },
         origin: 'https://observe.gitlab.com',
       });
 
-      expect(replace).not.toHaveBeenCalled();
+      expect(wrapper.emitted('route-update')).toBeUndefined();
     });
   });
 });