Add latest changes from gitlab-org/gitlab@master

4 files changed, 259 insertions, 0 deletions

diff --git a/spec/frontend_integration/.eslintrc.yml b/spec/frontend_integration/.eslintrc.yml
new file mode 100644
index 00000000000..26b6f935ffb
--- /dev/null
+++ b/spec/frontend_integration/.eslintrc.yml
@@ -0,0 +1,6 @@
+---
+extends: ../frontend/.eslintrc.yml
+settings:
+  import/resolver:
+    jest:
+      jestConfigFile: 'jest.config.integration.js'
diff --git a/spec/frontend_integration/README.md b/spec/frontend_integration/README.md
new file mode 100644
index 00000000000..573a385d81e
--- /dev/null
+++ b/spec/frontend_integration/README.md
@@ -0,0 +1,17 @@
+## Frontend Integration Specs
+
+This directory contains Frontend integration specs. Go to `spec/frontend` if you're looking for Frontend unit tests.
+
+Frontend integration specs:
+
+- Mock out the Backend.
+- Don't test individual components, but instead test use cases.
+- Are expected to run slower than unit tests.
+- Could end up having their own environment.
+
+As a result, they deserve their own special place.
+
+## References
+
+- https://docs.gitlab.com/ee/development/testing_guide/testing_levels.html#frontend-integration-tests
+- https://gitlab.com/gitlab-org/gitlab/-/issues/208800
diff --git a/spec/frontend_integration/ide/__snapshots__/ide_integration_spec.js.snap b/spec/frontend_integration/ide/__snapshots__/ide_integration_spec.js.snap
new file mode 100644
index 00000000000..a76f7960d03
--- /dev/null
+++ b/spec/frontend_integration/ide/__snapshots__/ide_integration_spec.js.snap
@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WebIDE runs 1`] = `
+<div>
+  <article
+    class="ide position-relative d-flex flex-column align-items-stretch"
+  >
+    <div
+      class="ide-view flex-grow d-flex"
+    >
+      <div
+        class="file-finder-overlay"
+        style="display: none;"
+      >
+        (jest: contents hidden)
+      </div>
+      <div
+        class="multi-file-commit-panel flex-column"
+        style="width: 340px;"
+      >
+        <div
+          class="multi-file-commit-panel-inner"
+        >
+          <div
+            class="multi-file-loading-container"
+          >
+            <div
+              class="animation-container"
+            >
+              <div
+                class="skeleton-line-1"
+              />
+              <div
+                class="skeleton-line-2"
+              />
+              <div
+                class="skeleton-line-3"
+              />
+            </div>
+          </div>
+          <div
+            class="multi-file-loading-container"
+          >
+            <div
+              class="animation-container"
+            >
+              <div
+                class="skeleton-line-1"
+              />
+              <div
+                class="skeleton-line-2"
+              />
+              <div
+                class="skeleton-line-3"
+              />
+            </div>
+          </div>
+          <div
+            class="multi-file-loading-container"
+          >
+            <div
+              class="animation-container"
+            >
+              <div
+                class="skeleton-line-1"
+              />
+              <div
+                class="skeleton-line-2"
+              />
+              <div
+                class="skeleton-line-3"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-absolute position-top-0 position-bottom-0 drag-handle position-right-0"
+          size="340"
+          style="cursor: ew-resize;"
+        />
+      </div>
+      <div
+        class="multi-file-edit-pane"
+      >
+        <div
+          class="ide-empty-state"
+        >
+          <div
+            class="row js-empty-state"
+          >
+            <div
+              class="col-12"
+            >
+              <div
+                class="svg-content svg-250"
+              >
+                <img
+                  src="/test/empty_state.svg"
+                />
+              </div>
+            </div>
+            <div
+              class="col-12"
+            >
+              <div
+                class="text-content text-center"
+              >
+                <h4>
+                  Make and review changes in the browser with the Web IDE
+                </h4>
+                <div
+                  class="gl-spinner-container"
+                >
+                  <span
+                    aria-hidden="true"
+                    aria-label="Loading"
+                    class="align-text-bottom gl-spinner gl-spinner-orange gl-spinner-md"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <footer
+      class="ide-status-bar"
+    >
+      <div
+        class="ide-status-list d-flex ml-auto"
+      >
+      </div>
+    </footer>
+  </article>
+</div>
+`;
diff --git a/spec/frontend_integration/ide/ide_integration_spec.js b/spec/frontend_integration/ide/ide_integration_spec.js
new file mode 100644
index 00000000000..7e8fb3a32ee
--- /dev/null
+++ b/spec/frontend_integration/ide/ide_integration_spec.js
@@ -0,0 +1,100 @@
+/**
+ * WARNING: WIP
+ *
+ * Please do not copy from this spec or use it as an example for anything.
+ *
+ * This is in place to iteratively set up the frontend integration testing environment
+ * and will be improved upon in a later iteration.
+ *
+ * See https://gitlab.com/gitlab-org/gitlab/-/issues/208800 for more information.
+ */
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { initIde } from '~/ide';
+
+jest.mock('~/api', () => {
+  return {
+    project: jest.fn().mockImplementation(() => new Promise(() => {})),
+  };
+});
+
+jest.mock('~/ide/services/gql', () => {
+  return {
+    query: jest.fn().mockImplementation(() => new Promise(() => {})),
+  };
+});
+
+describe('WebIDE', () => {
+  let vm;
+  let root;
+  let mock;
+  let initData;
+  let location;
+
+  beforeEach(() => {
+    root = document.createElement('div');
+    initData = {
+      emptyStateSvgPath: '/test/empty_state.svg',
+      noChangesStateSvgPath: '/test/no_changes_state.svg',
+      committedStateSvgPath: '/test/committed_state.svg',
+      pipelinesEmptyStateSvgPath: '/test/pipelines_empty_state.svg',
+      promotionSvgPath: '/test/promotion.svg',
+      ciHelpPagePath: '/test/ci_help_page',
+      webIDEHelpPagePath: '/test/web_ide_help_page',
+      clientsidePreviewEnabled: 'true',
+      renderWhitespaceInCode: 'false',
+      codesandboxBundlerUrl: 'test/codesandbox_bundler',
+    };
+
+    mock = new MockAdapter(axios);
+    mock.onAny('*').reply(() => new Promise(() => {}));
+
+    location = { pathname: '/-/ide/project/gitlab-test/test', search: '', hash: '' };
+    Object.defineProperty(window, 'location', {
+      get() {
+        return location;
+      },
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    vm = null;
+
+    mock.restore();
+  });
+
+  const createComponent = () => {
+    const el = document.createElement('div');
+    Object.assign(el.dataset, initData);
+    root.appendChild(el);
+    vm = initIde(el);
+  };
+
+  expect.addSnapshotSerializer({
+    test(value) {
+      return value instanceof HTMLElement && !value.$_hit;
+    },
+    print(element, serialize) {
+      element.$_hit = true;
+      element.querySelectorAll('[style]').forEach(el => {
+        el.$_hit = true;
+        if (el.style.display === 'none') {
+          el.textContent = '(jest: contents hidden)';
+        }
+      });
+
+      return serialize(element)
+        .replace(/^\s*<!---->$/gm, '')
+        .replace(/\n\s*\n/gm, '\n');
+    },
+  });
+
+  it('runs', () => {
+    createComponent();
+
+    return vm.$nextTick().then(() => {
+      expect(root).toMatchSnapshot();
+    });
+  });
+});