Merge branch 'fe-ide-fe-integration-specs' into 'master'

Update jest.config to support FE integration specs

See merge request gitlab-org/gitlab!31984

.eslintignore

@@ -9,6 +9,6 @@
 /scripts/
 /tmp/
 /vendor/
-jest.config.js
+jest.config.*.js
 karma.config.js
 webpack.config.js

.gitlab/ci/frontend.gitlab-ci.yml

@@ -238,6 +238,18 @@ jest:
       junit: junit_jest.xml
   parallel: 2
 
+jest-integration:
+  extends: .frontend-job-base
+  script:
+    - date
+    - yarn jest:integration --ci
+  needs: ["frontend-fixtures"]
+  cache:
+    key: jest-integration
+    paths:
+      - tmp/cache/jest/
+    policy: pull-push
+
 jest-as-if-foss:
   extends:
     - .jest-base

config/helpers/is_eslint.js

+/**
+ * Returns true if the given module is required from eslint
+ */
+const isESLint = mod => {
+  let parent = mod.parent;
+
+  while (parent) {
+    if (parent.filename.includes('/eslint')) {
+      return true;
+    }
+
+    parent = parent.parent;
+  }
+
+  return false;
+};
+
+module.exports = isESLint;

jest.config.base.js

+const IS_EE = require('./config/helpers/is_ee_env');
+const isESLint = require('./config/helpers/is_eslint');
+
+module.exports = path => {
+  const reporters = ['default'];
+
+  // To have consistent date time parsing both in local and CI environments we set
+  // the timezone of the Node process. https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/27738
+  process.env.TZ = 'GMT';
+
+  if (process.env.CI) {
+    reporters.push([
+      'jest-junit',
+      {
+        output: './junit_jest.xml',
+      },
+    ]);
+  }
+
+  const glob = `${path}/**/*_spec.js`;
+  let testMatch = [`<rootDir>/${glob}`];
+  if (IS_EE) {
+    testMatch.push(`<rootDir>/ee/${glob}`);
+  }
+
+  // workaround for eslint-import-resolver-jest only resolving in test files
+  // see https://github.com/JoinColony/eslint-import-resolver-jest#note
+  if (isESLint(module)) {
+    testMatch = testMatch.map(path => path.replace('_spec.js', ''));
+  }
+
+  const moduleNameMapper = {
+    '^~(/.*)$': '<rootDir>/app/assets/javascripts$1',
+    '^ee_component(/.*)$':
+      '<rootDir>/app/assets/javascripts/vue_shared/components/empty_component.js',
+    '^ee_else_ce(/.*)$': '<rootDir>/app/assets/javascripts$1',
+    '^helpers(/.*)$': '<rootDir>/spec/frontend/helpers$1',
+    '^vendor(/.*)$': '<rootDir>/vendor/assets/javascripts$1',
+    '\\.(jpg|jpeg|png|svg|css)$': '<rootDir>/spec/frontend/__mocks__/file_mock.js',
+    'emojis(/.*).json': '<rootDir>/fixtures/emojis$1.json',
+    '^spec/test_constants$': '<rootDir>/spec/frontend/helpers/test_constants',
+    '^jest/(.*)$': '<rootDir>/spec/frontend/$1',
+  };
+
+  const collectCoverageFrom = ['<rootDir>/app/assets/javascripts/**/*.{js,vue}'];
+
+  if (IS_EE) {
+    const rootDirEE = '<rootDir>/ee/app/assets/javascripts$1';
+    Object.assign(moduleNameMapper, {
+      '^ee(/.*)$': rootDirEE,
+      '^ee_component(/.*)$': rootDirEE,
+      '^ee_else_ce(/.*)$': rootDirEE,
+      '^ee_jest/(.*)$': '<rootDir>/ee/spec/frontend/$1',
+    });
+
+    collectCoverageFrom.push(rootDirEE.replace('$1', '/**/*.{js,vue}'));
+  }
+
+  const coverageDirectory = () => {
+    if (process.env.CI_NODE_INDEX && process.env.CI_NODE_TOTAL) {
+      return `<rootDir>/coverage-frontend/jest-${process.env.CI_NODE_INDEX}-${process.env.CI_NODE_TOTAL}`;
+    }
+
+    return '<rootDir>/coverage-frontend/';
+  };
+
+  return {
+    clearMocks: true,
+    testMatch,
+    moduleFileExtensions: ['js', 'json', 'vue'],
+    moduleNameMapper,
+    collectCoverageFrom,
+    coverageDirectory: coverageDirectory(),
+    coverageReporters: ['json', 'lcov', 'text-summary', 'clover'],
+    cacheDirectory: '<rootDir>/tmp/cache/jest',
+    modulePathIgnorePatterns: ['<rootDir>/.yarn-cache/'],
+    reporters,
+    setupFilesAfterEnv: ['<rootDir>/spec/frontend/test_setup.js', 'jest-canvas-mock'],
+    restoreMocks: true,
+    transform: {
+      '^.+\\.(gql|graphql)$': 'jest-transform-graphql',
+      '^.+\\.js$': 'babel-jest',
+      '^.+\\.vue$': 'vue-jest',
+    },
+    transformIgnorePatterns: ['node_modules/(?!(@gitlab/ui|bootstrap-vue|three|monaco-editor)/)'],
+    timers: 'fake',
+    testEnvironment: '<rootDir>/spec/frontend/environment.js',
+    testEnvironmentOptions: {
+      IS_EE,
+    },
+  };
+};

jest.config.integration.js

+const baseConfig = require('./jest.config.base');
+
+module.exports = {
+  ...baseConfig('spec/frontend_integration'),
+};

jest.config.js

-const IS_EE = require('./config/helpers/is_ee_env');
-
-const reporters = ['default'];
-
-// To have consistent date time parsing both in local and CI environments we set
-// the timezone of the Node process. https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/27738
-process.env.TZ = 'GMT';
-
-if (process.env.CI) {
-  reporters.push([
-    'jest-junit',
-    {
-      output: './junit_jest.xml',
-    },
-  ]);
-}
-
-let testMatch = ['<rootDir>/spec/frontend/**/*_spec.js'];
-if (IS_EE) {
-  testMatch.push('<rootDir>/ee/spec/frontend/**/*_spec.js');
-}
-
-// workaround for eslint-import-resolver-jest only resolving in test files
-// see https://github.com/JoinColony/eslint-import-resolver-jest#note
-const { filename: parentModuleName } = module.parent;
-const isESLint = parentModuleName && parentModuleName.includes('/eslint-import-resolver-jest/');
-if (isESLint) {
-  testMatch = testMatch.map(path => path.replace('_spec.js', ''));
-}
-
-const moduleNameMapper = {
-  '^~(/.*)$': '<rootDir>/app/assets/javascripts$1',
-  '^ee_component(/.*)$':
-    '<rootDir>/app/assets/javascripts/vue_shared/components/empty_component.js',
-  '^ee_else_ce(/.*)$': '<rootDir>/app/assets/javascripts$1',
-  '^helpers(/.*)$': '<rootDir>/spec/frontend/helpers$1',
-  '^vendor(/.*)$': '<rootDir>/vendor/assets/javascripts$1',
-  '\\.(jpg|jpeg|png|svg|css)$': '<rootDir>/spec/frontend/__mocks__/file_mock.js',
-  'emojis(/.*).json': '<rootDir>/fixtures/emojis$1.json',
-  '^spec/test_constants$': '<rootDir>/spec/frontend/helpers/test_constants',
-  '^jest/(.*)$': '<rootDir>/spec/frontend/$1',
-};
-
-const collectCoverageFrom = ['<rootDir>/app/assets/javascripts/**/*.{js,vue}'];
-
-if (IS_EE) {
-  const rootDirEE = '<rootDir>/ee/app/assets/javascripts$1';
-  Object.assign(moduleNameMapper, {
-    '^ee(/.*)$': rootDirEE,
-    '^ee_component(/.*)$': rootDirEE,
-    '^ee_else_ce(/.*)$': rootDirEE,
-    '^ee_jest/(.*)$': '<rootDir>/ee/spec/frontend/$1',
-  });
-
-  collectCoverageFrom.push(rootDirEE.replace('$1', '/**/*.{js,vue}'));
-}
-
-const coverageDirectory = () => {
-  if (process.env.CI_NODE_INDEX && process.env.CI_NODE_TOTAL) {
-    return `<rootDir>/coverage-frontend/jest-${process.env.CI_NODE_INDEX}-${process.env.CI_NODE_TOTAL}`;
-  }
-
-  return '<rootDir>/coverage-frontend/';
-};
-
-// eslint-disable-next-line import/no-commonjs
-module.exports = {
-  clearMocks: true,
-  testMatch,
-  moduleFileExtensions: ['js', 'json', 'vue'],
-  moduleNameMapper,
-  collectCoverageFrom,
-  coverageDirectory: coverageDirectory(),
-  coverageReporters: ['json', 'lcov', 'text-summary', 'clover'],
-  cacheDirectory: '<rootDir>/tmp/cache/jest',
-  modulePathIgnorePatterns: ['<rootDir>/.yarn-cache/'],
-  reporters,
-  setupFilesAfterEnv: ['<rootDir>/spec/frontend/test_setup.js', 'jest-canvas-mock'],
-  restoreMocks: true,
-  transform: {
-    '^.+\\.(gql|graphql)$': 'jest-transform-graphql',
-    '^.+\\.js$': 'babel-jest',
-    '^.+\\.vue$': 'vue-jest',
-  },
-  transformIgnorePatterns: ['node_modules/(?!(@gitlab/ui|bootstrap-vue|three|monaco-editor)/)'],
-  timers: 'fake',
-  testEnvironment: '<rootDir>/spec/frontend/environment.js',
-  testEnvironmentOptions: {
-    IS_EE,
-  },
-};
-
-const karmaTestFile = process.argv.find(arg => arg.includes('spec/javascripts/'));
-if (karmaTestFile) {
-  console.error(`
-Files in spec/javascripts/ and ee/spec/javascripts need to be run with Karma.
-Please use the following command instead:
-
-yarn karma -f ${karmaTestFile}
-
-`);
-  process.exit(1);
-}

jest.config.unit.js

+const baseConfig = require('./jest.config.base');
+
+module.exports = {
+  ...baseConfig('spec/frontend'),
+};
+
+const karmaTestFile = process.argv.find(arg => arg.includes('spec/javascripts/'));
+if (karmaTestFile) {
+  console.error(`
+Files in spec/javascripts/ and ee/spec/javascripts need to be run with Karma.
+Please use the following command instead:
+
+yarn karma -f ${karmaTestFile}
+
+`);
+  process.exit(1);
+}

package.json

@@ -10,8 +10,9 @@
     "eslint-report": "eslint --max-warnings 0 --ext .js,.vue --format html --output-file ./eslint-report.html --no-inline-config .",
     "file-coverage": "scripts/frontend/file_test_coverage.js",
     "prejest": "yarn check-dependencies",
-    "jest": "jest",
+    "jest": "jest --config jest.config.unit.js",
     "jest-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "jest:integration": "jest --config jest.config.integration.js",
     "jsdoc": "jsdoc -c config/jsdocs.config.js",
     "prekarma": "yarn check-dependencies",
     "karma": "BABEL_ENV=${BABEL_ENV:=karma} karma start --single-run true config/karma.config.js",

spec/frontend/.eslintrc.yml

@@ -10,7 +10,7 @@ settings:
     - path
   import/resolver:
     jest:
-      jestConfigFile: 'jest.config.js'
+      jestConfigFile: 'jest.config.unit.js'
 globals:
   getJSONFixture: false
   loadFixtures: false

spec/frontend_integration/.eslintrc.yml

+---
+extends: ../frontend/.eslintrc.yml
+settings:
+  import/resolver:
+    jest:
+      jestConfigFile: 'jest.config.integration.js'

spec/frontend_integration/README.md

+## 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

spec/frontend_integration/ide/__snapshots__/ide_integration_spec.js.snap

+// 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>
+`;

spec/frontend_integration/ide/ide_integration_spec.js

+/**
+ * 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();
+    });
+  });
+});