Merge branch '339346-link-frontend-fixtures-jest' into 'master'

Import JSON fixtures as modules

See merge request gitlab-org/gitlab!70893

.eslintrc.yml

@@ -100,6 +100,7 @@ overrides:
       - 'scripts/**/*'
       - '*.config.js'
       - '*.config.*.js'
+      - 'jest_resolver.js'
       - storybook/config/*.js
     rules:
       '@gitlab/require-i18n-strings': off

doc/development/testing_guide/frontend_testing.md

@@ -783,20 +783,25 @@ often using fixtures to validate correct integration with the backend code.
 
 ### Use fixtures
 
-Jest uses `spec/frontend/__helpers__/fixtures.js` to import fixtures in tests.
-
-The following are examples of tests that work for Jest:
+To import a JSON fixture, `import` it using the `test_fixtures` alias. 
 
 ```javascript
+import responseBody from 'test_fixtures/some/fixture.json' // loads spec/frontend/fixtures/some/fixture.json
+
 it('makes a request', () => {
-  const responseBody = getJSONFixture('some/fixture.json'); // loads spec/frontend/fixtures/some/fixture.json
   axiosMock.onGet(endpoint).reply(200, responseBody);
 
   myButton.click();
 
   // ...
 });
+```
 
+For other fixtures, Jest uses `spec/frontend/__helpers__/fixtures.js` to import them in tests.
+
+The following are examples of tests that work for Jest:
+
+```javascript
 it('uses some HTML element', () => {
   loadFixtures('some/page.html'); // loads spec/frontend/fixtures/some/page.html and adds it to the DOM
 
@@ -860,7 +865,7 @@ end
 This will create a new fixture located at
 `tmp/tests/frontend/fixtures-ee/graphql/releases/graphql/queries/all_releases.query.graphql.json`.
 
-You can import the JSON fixture in a Jest test using the `getJSONFixture` method
+You can import the JSON fixture in a Jest test using the `test_fixtures` alias
 [as described below](#use-fixtures).
 
 ## Data-driven tests

jest.config.base.js

@@ -112,6 +112,7 @@ module.exports = (path, options = {}) => {
     cacheDirectory: '<rootDir>/tmp/cache/jest',
     modulePathIgnorePatterns: ['<rootDir>/.yarn-cache/'],
     reporters,
+    resolver: './jest_resolver.js',
     setupFilesAfterEnv: [`<rootDir>/${path}/test_setup.js`, 'jest-canvas-mock'],
     restoreMocks: true,
     transform: {

jest_resolver.js

+const fs = require('fs');
+
+// Wrap jest default resolver to detect missing frontend fixtures.
+module.exports = (request, options) => {
+  try {
+    return options.defaultResolver(request, options);
+  } catch (e) {
+    if (request.match(/tmp\/tests\/frontend\/fixtures/) && !fs.existsSync(request)) {
+      console.error(
+        '\x1b[1m\x1b[41m\x1b[30m %s \x1b[0m %s',
+        '!',
+        `Fixture file ${request} does not exist. Did you run bin/rake frontend:fixtures?`,
+      );
+    }
+    throw e;
+  }
+};

spec/frontend/.eslintrc.yml

@@ -26,4 +26,9 @@ rules:
     - off
   "@gitlab/no-global-event-off":
     - off
-
+  import/no-unresolved:
+    - error
+    # The test fixtures and graphql schema are dynamically generated in CI
+    # during the `frontend-fixtures` and `graphql-schema-dump` jobs.
+    # They may not be present during linting.
+    - ignore: ['^test_fixtures\/', 'tmp/tests/graphql/gitlab_schema.graphql']

spec/frontend/deploy_freeze/helpers.js

+import freezePeriodsFixture from 'test_fixtures/api/freeze-periods/freeze_periods.json';
+import timezoneDataFixture from 'test_fixtures/timezones/short.json';
 import { secondsToHours } from '~/lib/utils/datetime_utility';
 
-export const freezePeriodsFixture = getJSONFixture('/api/freeze-periods/freeze_periods.json');
-export const timezoneDataFixture = getJSONFixture('/timezones/short.json');
+export { freezePeriodsFixture, timezoneDataFixture };
 
 export const findTzByName = (identifier = '') =>
   timezoneDataFixture.find(({ name }) => name.toLowerCase() === identifier.toLowerCase());

spec/frontend_integration/test_helpers/mock_server/graphql.js

 import { buildSchema, graphql } from 'graphql';
 import { memoize } from 'lodash';
 
-// The graphql schema is dynamically generated in CI
-// during the `graphql-schema-dump` job.
-// eslint-disable-next-line global-require, import/no-unresolved
+// eslint-disable-next-line global-require
 const getGraphqlSchema = () => require('../../../../tmp/tests/graphql/gitlab_schema.graphql');
 
 const graphqlResolvers = {