Add latest changes from gitlab-org/gitlab@master

1 files changed, 38 insertions, 0 deletions

diff --git a/spec/frontend/behaviors/markdown/render_observability_spec.js b/spec/frontend/behaviors/markdown/render_observability_spec.js
new file mode 100644
index 00000000000..c87d11742dc
--- /dev/null
+++ b/spec/frontend/behaviors/markdown/render_observability_spec.js
@@ -0,0 +1,38 @@
+import renderObservability from '~/behaviors/markdown/render_observability';
+import * as ColorUtils from '~/lib/utils/color_utils';
+
+describe('Observability iframe renderer', () => {
+  const findObservabilityIframes = (theme = 'light') =>
+    document.querySelectorAll(`iframe[src="https://observe.gitlab.com/?theme=${theme}&kiosk"]`);
+
+  const renderEmbeddedObservability = () => {
+    renderObservability([...document.querySelectorAll('.js-render-observability')]);
+    jest.runAllTimers();
+  };
+
+  beforeEach(() => {
+    document.body.dataset.page = '';
+    document.body.innerHTML = '';
+  });
+
+  it('renders an observability iframe', () => {
+    document.body.innerHTML = `<div class="js-render-observability" data-frame-url="https://observe.gitlab.com/"></div>`;
+
+    expect(findObservabilityIframes()).toHaveLength(0);
+
+    renderEmbeddedObservability();
+
+    expect(findObservabilityIframes()).toHaveLength(1);
+  });
+
+  it('renders iframe with dark param when GL has dark theme', () => {
+    document.body.innerHTML = `<div class="js-render-observability" data-frame-url="https://observe.gitlab.com/"></div>`;
+    jest.spyOn(ColorUtils, 'darkModeEnabled').mockImplementation(() => true);
+
+    expect(findObservabilityIframes('dark')).toHaveLength(0);
+
+    renderEmbeddedObservability();
+
+    expect(findObservabilityIframes('dark')).toHaveLength(1);
+  });
+});