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 withloadHTMLFixture. -
setFixtures- same as above. loadHTMLFixturesetHTMLFixture
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 setFixtureswithsetHTMLFixturein EE code. -
Replace loadFixtureswithloadHTMLFixturein EE code. -
Replace setFixtureswithsetHTMLFixturein CE code. -
Replace loadFixtureswithloadHTMLFixturein CE code. -
Remove hooks from loadHTMLFixture. This step requires addingresetHTMLFixture. -
Remove hooks from setTMLFixture. This step requires addingresetHTMLFixture. -
Remove global declarations from ESLint configuration.
Edited by Vitaly Slobodin