1 files changed, 73 insertions, 0 deletions
diff --git a/spec/frontend/observability/observability_app_spec.js b/spec/frontend/observability/observability_app_spec.js
new file mode 100644
index 00000000000..f0b318e69ec
--- /dev/null
+++ b/spec/frontend/observability/observability_app_spec.js
@@ -0,0 +1,73 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ObservabilityApp from '~/observability/components/observability_app.vue';
+
+describe('Observability root app', () => {
+  let wrapper;
+  const replace = jest.fn();
+  const $router = {
+    replace,
+  };
+  const $route = {
+    pathname: 'https://gitlab.com/gitlab-org/',
+    query: { otherQuery: 100 },
+  };
+
+  const findIframe = () => wrapper.findByTestId('observability-ui-iframe');
+
+  const TEST_IFRAME_SRC = 'https://observe.gitlab.com/9970/?groupId=14485840';
+
+  const mountComponent = (route = $route) => {
+    wrapper = shallowMountExtended(ObservabilityApp, {
+      propsData: {
+        observabilityIframeSrc: TEST_IFRAME_SRC,
+      },
+      mocks: {
+        $router,
+        $route: route,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render an iframe with observabilityIframeSrc as src', () => {
+    mountComponent();
+    const iframe = findIframe();
+    expect(iframe.exists()).toBe(true);
+    expect(iframe.attributes('src')).toBe(TEST_IFRAME_SRC);
+  });
+
+  it('should not call replace method from vue router if message event does not have url', () => {
+    mountComponent();
+    wrapper.vm.messageHandler({ data: 'some other data' });
+    expect(replace).not.toHaveBeenCalled();
+  });
+
+  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 } });
+      wrapper.vm.messageHandler({ data: { url }, origin });
+      expect(replace).not.toHaveBeenCalled();
+    },
+  );
+
+  it('should call replace method from vue router on messageHandle call', () => {
+    mountComponent();
+    wrapper.vm.messageHandler({ data: { url: '/explore' }, origin: 'https://observe.gitlab.com' });
+    expect(replace).toHaveBeenCalled();
+    expect(replace).toHaveBeenCalledWith({
+      name: 'https://gitlab.com/gitlab-org/',
+      query: {
+        otherQuery: 100,
+        observability_path: '/explore',
+      },
+    });
+  });
+});