Use HTML fixtures explicitly

To load or set HTML fixtures for tests we have 4 functions:

  • loadFixtures - deprecated as it was defined for our migration from karma to jest. We need to replace it with loadHTMLFixture.
  • setFixtures - same as above.
  • loadHTMLFixture
  • setHTMLFixture

The problem with loadHTMLFixture and setHTMLFixture is these functions have automatic Jest lifecylce hooks to reset DOM after each test run. Jest 27 forbids that so we have to remove these hooks and reset the DOM manually after each call to loadHTMLFixture or setHTMLFixture. Jest does not perform automatic clean up of the DOM tree after each test but resets it per file (suite) only.

From https://gitlab.com/gitlab-org/gitlab/blob/master/spec/frontend/helpers/fixtures.js

export const setHTMLFixture = (htmlContent, resetHook = afterEach /* remove this argument */) => {
  document.body.innerHTML = htmlContent;
  resetHook(resetHTMLFixture); // <- remove this line
};

export const loadHTMLFixture = (relativePath, resetHook = afterEach /* remove this argument */) => {
  const fileContent = getFixture(relativePath);
  setHTMLFixture(fileContent, resetHook); // <- remove the last argument
};

Migration plan

  • Replace setFixtures with setHTMLFixture in EE code.
  • Replace loadFixtures with loadHTMLFixture in EE code.
  • Replace setFixtures with setHTMLFixture in CE code.
  • Replace loadFixtures with loadHTMLFixture in CE code.
  • Remove hooks from loadHTMLFixture. This step requires adding resetHTMLFixture.
  • Remove hooks from setTMLFixture. This step requires adding resetHTMLFixture.
  • Remove global declarations from ESLint configuration.
Edited by Vitaly Slobodin