diff options
| author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-13 15:08:49 +0300 |
|---|---|---|
| committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-13 15:08:49 +0300 |
| commit | 988424215cf104d9ee24bb1751141424cffb32d1 (patch) | |
| tree | 9d2525571ecc693902b949ac8441e8c97b299c3c /spec/frontend | |
| parent | 2705a15deaef07b1a38a53b9539d02f8ad499ce3 (diff) | |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
144 files changed, 888 insertions, 251 deletions
diff --git a/spec/frontend/.eslintrc.yml b/spec/frontend/.eslintrc.yml index a8182bcae51..45639f4c948 100644 --- a/spec/frontend/.eslintrc.yml +++ b/spec/frontend/.eslintrc.yml @@ -11,9 +11,6 @@ settings: import/resolver: jest: jestConfigFile: 'jest.config.js' -globals: - loadFixtures: false - setFixtures: false rules: jest/expect-expect: - off diff --git a/spec/frontend/__helpers__/fixtures.js b/spec/frontend/__helpers__/fixtures.js index d8054d32fae..a6f7b37161e 100644 --- a/spec/frontend/__helpers__/fixtures.js +++ b/spec/frontend/__helpers__/fixtures.js @@ -20,24 +20,15 @@ Did you run bin/rake frontend:fixtures?`, return fs.readFileSync(absolutePath, 'utf8'); } -/** - * @deprecated Use `import` to load a JSON fixture instead. - * See https://docs.gitlab.com/ee/development/testing_guide/frontend_testing.html#use-fixtures, - * https://gitlab.com/gitlab-org/gitlab/-/issues/339346. - */ -export const getJSONFixture = (relativePath) => JSON.parse(getFixture(relativePath)); - export const resetHTMLFixture = () => { document.head.innerHTML = ''; document.body.innerHTML = ''; }; -export const setHTMLFixture = (htmlContent, resetHook = afterEach) => { +export const setHTMLFixture = (htmlContent) => { document.body.innerHTML = htmlContent; - resetHook(resetHTMLFixture); }; -export const loadHTMLFixture = (relativePath, resetHook = afterEach) => { - const fileContent = getFixture(relativePath); - setHTMLFixture(fileContent, resetHook); +export const loadHTMLFixture = (relativePath) => { + setHTMLFixture(getFixture(relativePath)); }; diff --git a/spec/frontend/__helpers__/shared_test_setup.js b/spec/frontend/__helpers__/shared_test_setup.js index 7b5df18ee0f..011e1142c76 100644 --- a/spec/frontend/__helpers__/shared_test_setup.js +++ b/spec/frontend/__helpers__/shared_test_setup.js @@ -6,7 +6,6 @@ import 'jquery'; import Translate from '~/vue_shared/translate'; import setWindowLocation from './set_window_location_helper'; import { setGlobalDateToFakeDate } from './fake_date'; -import { loadHTMLFixture, setHTMLFixture } from './fixtures'; import { TEST_HOST } from './test_constants'; import * as customMatchers from './matchers'; @@ -28,12 +27,6 @@ Vue.config.productionTip = false; Vue.use(Translate); -// convenience wrapper for migration from Karma -Object.assign(global, { - loadFixtures: loadHTMLFixture, - setFixtures: setHTMLFixture, -}); - const JQUERY_MATCHERS_TO_EXCLUDE = ['toHaveLength', 'toExist']; // custom-jquery-matchers was written for an old Jest version, we need to make it compatible diff --git a/spec/frontend/activities_spec.js b/spec/frontend/activities_spec.js index 00519148b30..ebace21217a 100644 --- a/spec/frontend/activities_spec.js +++ b/spec/frontend/activities_spec.js @@ -1,6 +1,7 @@ /* eslint-disable no-unused-expressions, no-prototype-builtins, no-new, no-shadow */ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import Activities from '~/activities'; import Pager from '~/pager'; @@ -38,11 +39,15 @@ describe('Activities', () => { } beforeEach(() => { - loadFixtures(fixtureTemplate); + loadHTMLFixture(fixtureTemplate); jest.spyOn(Pager, 'init').mockImplementation(() => {}); new Activities(); }); + afterEach(() => { + resetHTMLFixture(); + }); + for (let i = 0; i < filters.length; i += 1) { ((i) => { describe(`when selecting ${getEventName(i)}`, () => { diff --git a/spec/frontend/admin/applications/components/delete_application_spec.js b/spec/frontend/admin/applications/components/delete_application_spec.js index 20119b64952..1a400a101b5 100644 --- a/spec/frontend/admin/applications/components/delete_application_spec.js +++ b/spec/frontend/admin/applications/components/delete_application_spec.js @@ -1,5 +1,6 @@ import { GlModal, GlSprintf } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import DeleteApplication from '~/admin/applications/components/delete_application.vue'; const path = 'application/path/1'; @@ -22,7 +23,7 @@ describe('DeleteApplication', () => { const findForm = () => wrapper.find('form'); beforeEach(() => { - setFixtures(` + setHTMLFixture(` <button class="js-application-delete-button" data-path="${path}" data-name="${name}">Destroy</button> `); @@ -31,6 +32,7 @@ describe('DeleteApplication', () => { afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); describe('the modal component', () => { diff --git a/spec/frontend/admin/users/new_spec.js b/spec/frontend/admin/users/new_spec.js index 692c583dca8..5e5763822a8 100644 --- a/spec/frontend/admin/users/new_spec.js +++ b/spec/frontend/admin/users/new_spec.js @@ -4,6 +4,7 @@ import { ID_USER_EXTERNAL, ID_WARNING, } from '~/admin/users/new'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; describe('admin/users/new', () => { const FIXTURE = 'admin/users/new_with_internal_user_regex.html'; @@ -13,7 +14,7 @@ describe('admin/users/new', () => { let elWarningMessage; beforeEach(() => { - loadFixtures(FIXTURE); + loadHTMLFixture(FIXTURE); setupInternalUserRegexHandler(); elExternal = document.getElementById(ID_USER_EXTERNAL); @@ -23,6 +24,10 @@ describe('admin/users/new', () => { elExternal.checked = true; }); + afterEach(() => { + resetHTMLFixture(); + }); + const changeEmail = (val) => { elUserEmail.value = val; elUserEmail.dispatchEvent(new Event('input')); diff --git a/spec/frontend/alert_handler_spec.js b/spec/frontend/alert_handler_spec.js index 228053b1b2b..ba8e5bcb202 100644 --- a/spec/frontend/alert_handler_spec.js +++ b/spec/frontend/alert_handler_spec.js @@ -1,4 +1,4 @@ -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initAlertHandler from '~/alert_handler'; describe('Alert Handler', () => { @@ -25,6 +25,10 @@ describe('Alert Handler', () => { initAlertHandler(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should render the alert', () => { expect(findFirstAlert()).not.toBe(null); }); @@ -41,6 +45,10 @@ describe('Alert Handler', () => { initAlertHandler(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should render two alerts', () => { expect(findAllAlerts()).toHaveLength(2); }); @@ -57,6 +65,10 @@ describe('Alert Handler', () => { initAlertHandler(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should render the banner', () => { expect(findFirstBanner()).not.toBe(null); }); @@ -78,6 +90,10 @@ describe('Alert Handler', () => { initAlertHandler(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should render the banner', () => { expect(findFirstAlert()).not.toBe(null); }); diff --git a/spec/frontend/attention_requests/components/navigation_popover_spec.js b/spec/frontend/attention_requests/components/navigation_popover_spec.js index d0231afbdc4..e4d53d5dbdb 100644 --- a/spec/frontend/attention_requests/components/navigation_popover_spec.js +++ b/spec/frontend/attention_requests/components/navigation_popover_spec.js @@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils'; import { GlPopover, GlButton, GlSprintf, GlIcon } from '@gitlab/ui'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import NavigationPopover from '~/attention_requests/components/navigation_popover.vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser'; let wrapper; @@ -29,13 +30,14 @@ function createComponent(provideData = {}, shouldShowCallout = true) { describe('Attention requests navigation popover', () => { beforeEach(() => { - setFixtures('<div><div class="js-test-popover"></div><div class="js-test"></div></div>'); + setHTMLFixture('<div><div class="js-test-popover"></div><div class="js-test"></div></div>'); dismiss = jest.fn(); }); afterEach(() => { wrapper.destroy(); wrapper = null; + resetHTMLFixture(); }); it('hides popover if callout is disabled', () => { diff --git a/spec/frontend/authentication/u2f/authenticate_spec.js b/spec/frontend/authentication/u2f/authenticate_spec.js index 31782899ce4..3ae7fcf1c49 100644 --- a/spec/frontend/authentication/u2f/authenticate_spec.js +++ b/spec/frontend/authentication/u2f/authenticate_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import U2FAuthenticate from '~/authentication/u2f/authenticate'; import 'vendor/u2f'; import MockU2FDevice from './mock_u2f_device'; @@ -9,7 +10,7 @@ describe('U2FAuthenticate', () => { let component; beforeEach(() => { - loadFixtures('u2f/authenticate.html'); + loadHTMLFixture('u2f/authenticate.html'); u2fDevice = new MockU2FDevice(); container = $('#js-authenticate-token-2fa'); component = new U2FAuthenticate( @@ -23,6 +24,10 @@ describe('U2FAuthenticate', () => { ); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('with u2f unavailable', () => { let oldu2f; diff --git a/spec/frontend/authentication/u2f/register_spec.js b/spec/frontend/authentication/u2f/register_spec.js index 810396aa9fd..7ae3a2734cb 100644 --- a/spec/frontend/authentication/u2f/register_spec.js +++ b/spec/frontend/authentication/u2f/register_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import U2FRegister from '~/authentication/u2f/register'; import 'vendor/u2f'; import MockU2FDevice from './mock_u2f_device'; @@ -9,13 +10,17 @@ describe('U2FRegister', () => { let component; beforeEach(() => { - loadFixtures('u2f/register.html'); + loadHTMLFixture('u2f/register.html'); u2fDevice = new MockU2FDevice(); container = $('#js-register-token-2fa'); component = new U2FRegister(container, {}); return component.start(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('allows registering a U2F device', () => { const setupButton = container.find('#js-setup-token-2fa-device'); diff --git a/spec/frontend/authentication/webauthn/authenticate_spec.js b/spec/frontend/authentication/webauthn/authenticate_spec.js index 8b27560bbbe..b1f4e43e56d 100644 --- a/spec/frontend/authentication/webauthn/authenticate_spec.js +++ b/spec/frontend/authentication/webauthn/authenticate_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import waitForPromises from 'helpers/wait_for_promises'; import WebAuthnAuthenticate from '~/authentication/webauthn/authenticate'; import MockWebAuthnDevice from './mock_webauthn_device'; @@ -34,7 +35,7 @@ describe('WebAuthnAuthenticate', () => { }; beforeEach(() => { - loadFixtures('webauthn/authenticate.html'); + loadHTMLFixture('webauthn/authenticate.html'); fallbackElement = document.createElement('div'); fallbackElement.classList.add('js-2fa-form'); webAuthnDevice = new MockWebAuthnDevice(); @@ -62,6 +63,10 @@ describe('WebAuthnAuthenticate', () => { submitSpy = jest.spyOn(HTMLFormElement.prototype, 'submit'); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('with webauthn unavailable', () => { let oldGetCredentials; diff --git a/spec/frontend/authentication/webauthn/register_spec.js b/spec/frontend/authentication/webauthn/register_spec.js index 0f8ea2b635f..95cb993fc70 100644 --- a/spec/frontend/authentication/webauthn/register_spec.js +++ b/spec/frontend/authentication/webauthn/register_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import setWindowLocation from 'helpers/set_window_location_helper'; import waitForPromises from 'helpers/wait_for_promises'; import WebAuthnRegister from '~/authentication/webauthn/register'; @@ -23,7 +24,7 @@ describe('WebAuthnRegister', () => { let component; beforeEach(() => { - loadFixtures('webauthn/register.html'); + loadHTMLFixture('webauthn/register.html'); webAuthnDevice = new MockWebAuthnDevice(); container = $('#js-register-token-2fa'); component = new WebAuthnRegister(container, { @@ -41,6 +42,10 @@ describe('WebAuthnRegister', () => { component.start(); }); + afterEach(() => { + resetHTMLFixture(); + }); + const findSetupButton = () => container.find('#js-setup-token-2fa-device'); const findMessage = () => container.find('p'); const findDeviceResponse = () => container.find('#js-device-response'); diff --git a/spec/frontend/awards_handler_spec.js b/spec/frontend/awards_handler_spec.js index c4002ec11f3..b588a27b028 100644 --- a/spec/frontend/awards_handler_spec.js +++ b/spec/frontend/awards_handler_spec.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import Cookies from 'js-cookie'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { initEmojiMock, clearEmojiMock } from 'helpers/emoji'; import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame'; import loadAwardsHandler from '~/awards_handler'; @@ -75,7 +76,7 @@ describe('AwardsHandler', () => { beforeEach(async () => { await initEmojiMock(emojiData); - loadFixtures('snippets/show.html'); + loadHTMLFixture('snippets/show.html'); awardsHandler = await loadAwardsHandler(true); jest.spyOn(awardsHandler, 'postEmoji').mockImplementation((button, url, emoji, cb) => cb()); @@ -91,6 +92,8 @@ describe('AwardsHandler', () => { $('body').removeAttr('data-page'); awardsHandler.destroy(); + + resetHTMLFixture(); }); describe('::showEmojiMenu', () => { diff --git a/spec/frontend/badges/components/badge_form_spec.js b/spec/frontend/badges/components/badge_form_spec.js index ba2ec775b61..6d8a00eb50b 100644 --- a/spec/frontend/badges/components/badge_form_spec.js +++ b/spec/frontend/badges/components/badge_form_spec.js @@ -1,5 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import Vue, { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { DUMMY_IMAGE_URL, TEST_HOST } from 'helpers/test_constants'; import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; import BadgeForm from '~/badges/components/badge_form.vue'; @@ -16,7 +17,7 @@ describe('BadgeForm component', () => { let vm; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div id="dummy-element"></div> `); @@ -26,6 +27,7 @@ describe('BadgeForm component', () => { afterEach(() => { vm.$destroy(); axiosMock.restore(); + resetHTMLFixture(); }); describe('methods', () => { diff --git a/spec/frontend/badges/components/badge_list_row_spec.js b/spec/frontend/badges/components/badge_list_row_spec.js index 0fb0fa86a02..ad8426f3168 100644 --- a/spec/frontend/badges/components/badge_list_row_spec.js +++ b/spec/frontend/badges/components/badge_list_row_spec.js @@ -1,4 +1,5 @@ import Vue, { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; import BadgeListRow from '~/badges/components/badge_list_row.vue'; import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants'; @@ -11,7 +12,7 @@ describe('BadgeListRow component', () => { let vm; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div id="delete-badge-modal" class="modal"></div> <div id="dummy-element"></div> `); @@ -29,6 +30,7 @@ describe('BadgeListRow component', () => { afterEach(() => { vm.$destroy(); + resetHTMLFixture(); }); it('renders the badge', () => { diff --git a/spec/frontend/badges/components/badge_list_spec.js b/spec/frontend/badges/components/badge_list_spec.js index 39fa502b207..32cd9483ef8 100644 --- a/spec/frontend/badges/components/badge_list_spec.js +++ b/spec/frontend/badges/components/badge_list_spec.js @@ -1,4 +1,5 @@ import Vue, { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; import BadgeList from '~/badges/components/badge_list.vue'; import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants'; @@ -11,7 +12,7 @@ describe('BadgeList component', () => { let vm; beforeEach(() => { - setFixtures('<div id="dummy-element"></div>'); + setHTMLFixture('<div id="dummy-element"></div>'); const badges = []; for (let id = 0; id < numberOfDummyBadges; id += 1) { badges.push({ id, ...createDummyBadge() }); @@ -34,6 +35,7 @@ describe('BadgeList component', () => { afterEach(() => { vm.$destroy(); + resetHTMLFixture(); }); it('renders a header with the badge count', () => { diff --git a/spec/frontend/badges/components/badge_spec.js b/spec/frontend/badges/components/badge_spec.js index fe4cf8ce8eb..19b3a9f23a6 100644 --- a/spec/frontend/badges/components/badge_spec.js +++ b/spec/frontend/badges/components/badge_spec.js @@ -1,4 +1,5 @@ import Vue, { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import mountComponent from 'helpers/vue_mount_component_helper'; import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants'; import Badge from '~/badges/components/badge.vue'; @@ -90,10 +91,14 @@ describe('Badge component', () => { describe('behavior', () => { beforeEach(() => { - setFixtures('<div id="dummy-element"></div>'); + setHTMLFixture('<div id="dummy-element"></div>'); return createComponent({ ...dummyProps }, '#dummy-element'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('shows a badge image after loading', () => { expect(vm.isLoading).toBe(false); expect(vm.hasError).toBe(false); diff --git a/spec/frontend/behaviors/autosize_spec.js b/spec/frontend/behaviors/autosize_spec.js index a9dbee7fd08..7008b7b2eb6 100644 --- a/spec/frontend/behaviors/autosize_spec.js +++ b/spec/frontend/behaviors/autosize_spec.js @@ -1,4 +1,5 @@ import '~/behaviors/autosize'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; jest.mock('~/helpers/startup_css_helper', () => { return { @@ -20,19 +21,22 @@ jest.mock('~/helpers/startup_css_helper', () => { describe('Autosize behavior', () => { beforeEach(() => { - setFixtures('<textarea class="js-autosize"></textarea>'); + setHTMLFixture('<textarea class="js-autosize"></textarea>'); + }); + + afterEach(() => { + resetHTMLFixture(); }); it('is applied to the textarea', () => { // This is the second part of the Hack: // Because we are forcing the mock for WaitForCSSLoaded and the very end of our callstack // to call its callback. This querySelector needs to go to the very end of our callstack - // as well, if we would not have this setTimeout Function here, the querySelector - // would run before the mockImplementation called its callBack Function - // the DOM Manipulation didn't happen yet and the test would fail. - setTimeout(() => { - const textarea = document.querySelector('textarea'); - expect(textarea.classList).toContain('js-autosize-initialized'); - }, 0); + // as well, if we would not have this jest.runOnlyPendingTimers here, the querySelector + // would not run and the test would fail. + jest.runOnlyPendingTimers(); + + const textarea = document.querySelector('textarea'); + expect(textarea.classList).toContain('js-autosize-initialized'); }); }); diff --git a/spec/frontend/behaviors/date_picker_spec.js b/spec/frontend/behaviors/date_picker_spec.js index 9f7701a0366..363052ad7fb 100644 --- a/spec/frontend/behaviors/date_picker_spec.js +++ b/spec/frontend/behaviors/date_picker_spec.js @@ -1,4 +1,5 @@ import * as Pikaday from 'pikaday'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initDatePickers from '~/behaviors/date_picker'; import * as utils from '~/lib/utils/datetime_utility'; @@ -12,7 +13,7 @@ describe('date_picker behavior', () => { beforeEach(() => { pikadayMock = jest.spyOn(Pikaday, 'default'); parseMock = jest.spyOn(utils, 'parsePikadayDate'); - setFixtures(` + setHTMLFixture(` <div> <input class="datepicker" value="2020-10-01" /> </div> @@ -21,6 +22,10 @@ describe('date_picker behavior', () => { </div>`); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('Instantiates Pickaday for every instance of a .datepicker class', () => { initDatePickers(); diff --git a/spec/frontend/behaviors/load_startup_css_spec.js b/spec/frontend/behaviors/load_startup_css_spec.js index 59f49585645..e9e4c06732f 100644 --- a/spec/frontend/behaviors/load_startup_css_spec.js +++ b/spec/frontend/behaviors/load_startup_css_spec.js @@ -1,4 +1,4 @@ -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { loadStartupCSS } from '~/behaviors/load_startup_css'; describe('behaviors/load_startup_css', () => { @@ -25,6 +25,10 @@ describe('behaviors/load_startup_css', () => { loadStartupCSS(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('does nothing at first', () => { expect(loadListener).not.toHaveBeenCalled(); }); diff --git a/spec/frontend/behaviors/markdown/highlight_current_user_spec.js b/spec/frontend/behaviors/markdown/highlight_current_user_spec.js index 3305ddc412d..38d19ac3808 100644 --- a/spec/frontend/behaviors/markdown/highlight_current_user_spec.js +++ b/spec/frontend/behaviors/markdown/highlight_current_user_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user'; describe('highlightCurrentUser', () => { @@ -5,7 +6,7 @@ describe('highlightCurrentUser', () => { let elements; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div id="dummy-root-element"> <div data-user="1">@first</div> <div data-user="2">@second</div> @@ -15,6 +16,10 @@ describe('highlightCurrentUser', () => { elements = rootElement.querySelectorAll('[data-user]'); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('without current user', () => { beforeEach(() => { window.gon = window.gon || {}; diff --git a/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js b/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js index b4844ebc765..2b9442162aa 100644 --- a/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js +++ b/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js @@ -1,10 +1,11 @@ import $ from 'jquery'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import renderMermaid from '~/behaviors/markdown/render_sandboxed_mermaid'; describe('Render mermaid diagrams for Gitlab Flavoured Markdown', () => { it('Does something', () => { document.body.dataset.page = ''; - setFixtures(` + setHTMLFixture(` <div class="gl-relative markdown-code-block js-markdown-code"> <pre data-sourcepos="1:1-7:3" class="code highlight js-syntax-highlight language-mermaid white" lang="mermaid" id="code-4"> <code class="js-render-mermaid"> @@ -27,5 +28,7 @@ describe('Render mermaid diagrams for Gitlab Flavoured Markdown', () => { jest.runAllTimers(); expect(document.querySelector('pre.js-syntax-highlight').classList).toContain('gl-sr-only'); + + resetHTMLFixture(); }); }); diff --git a/spec/frontend/behaviors/quick_submit_spec.js b/spec/frontend/behaviors/quick_submit_spec.js index 86a85831c6b..317c671cd2b 100644 --- a/spec/frontend/behaviors/quick_submit_spec.js +++ b/spec/frontend/behaviors/quick_submit_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import '~/behaviors/quick_submit'; describe('Quick Submit behavior', () => { @@ -7,7 +8,7 @@ describe('Quick Submit behavior', () => { const keydownEvent = (options = { keyCode: 13, metaKey: true }) => $.Event('keydown', options); beforeEach(() => { - loadFixtures('snippets/show.html'); + loadHTMLFixture('snippets/show.html'); testContext = {}; @@ -24,6 +25,10 @@ describe('Quick Submit behavior', () => { testContext.textarea = $('.js-quick-submit textarea').first(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('does not respond to other keyCodes', () => { testContext.textarea.trigger( keydownEvent({ diff --git a/spec/frontend/behaviors/requires_input_spec.js b/spec/frontend/behaviors/requires_input_spec.js index bb22133ae44..f2f68f17d1c 100644 --- a/spec/frontend/behaviors/requires_input_spec.js +++ b/spec/frontend/behaviors/requires_input_spec.js @@ -1,14 +1,19 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import '~/behaviors/requires_input'; describe('requiresInput', () => { let submitButton; beforeEach(() => { - loadFixtures('branches/new_branch.html'); + loadHTMLFixture('branches/new_branch.html'); submitButton = $('button[type="submit"]'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('disables submit when any field is required', () => { $('.js-requires-input').requiresInput(); diff --git a/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js b/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js index bd5f74247f4..edcacb0f740 100644 --- a/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js +++ b/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import Mousetrap from 'mousetrap'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import waitForPromises from 'helpers/wait_for_promises'; import initCopyAsGFM, { CopyAsGFM } from '~/behaviors/markdown/copy_as_gfm'; import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable'; @@ -25,7 +26,7 @@ describe('ShortcutsIssuable', () => { const FORM_SELECTOR = '.js-main-target-form .js-vue-comment-form'; beforeEach(() => { - loadFixtures(snippetShowFixtureName); + loadHTMLFixture(snippetShowFixtureName); $('body').append( `<div class="js-main-target-form"> <textarea class="js-vue-comment-form"></textarea> @@ -40,6 +41,7 @@ describe('ShortcutsIssuable', () => { $(FORM_SELECTOR).remove(); delete window.shortcut; + resetHTMLFixture(); }); // Stub getSelectedFragment to return a node with the provided HTML. @@ -286,7 +288,7 @@ describe('ShortcutsIssuable', () => { let sidebarExpandedBtn; beforeEach(() => { - loadFixtures(mrShowFixtureName); + loadHTMLFixture(mrShowFixtureName); window.shortcut = new ShortcutsIssuable(); @@ -299,6 +301,7 @@ describe('ShortcutsIssuable', () => { afterEach(() => { delete window.shortcut; + resetHTMLFixture(); }); describe('when the sidebar is expanded', () => { diff --git a/spec/frontend/blob/blob_file_dropzone_spec.js b/spec/frontend/blob/blob_file_dropzone_spec.js index 47c90030e18..d6fc824258b 100644 --- a/spec/frontend/blob/blob_file_dropzone_spec.js +++ b/spec/frontend/blob/blob_file_dropzone_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import BlobFileDropzone from '~/blob/blob_file_dropzone'; describe('BlobFileDropzone', () => { @@ -6,7 +7,7 @@ describe('BlobFileDropzone', () => { let replaceFileButton; beforeEach(() => { - loadFixtures('blob/show.html'); + loadHTMLFixture('blob/show.html'); const form = $('.js-upload-blob-form'); // eslint-disable-next-line no-new new BlobFileDropzone(form, 'POST'); @@ -15,6 +16,10 @@ describe('BlobFileDropzone', () => { replaceFileButton = $('#submit-all'); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('submit button', () => { it('requires file', () => { jest.spyOn(window, 'alert').mockImplementation(() => {}); diff --git a/spec/frontend/blob/components/table_contents_spec.js b/spec/frontend/blob/components/table_contents_spec.js index ade35d39b4f..358ac31819c 100644 --- a/spec/frontend/blob/components/table_contents_spec.js +++ b/spec/frontend/blob/components/table_contents_spec.js @@ -1,6 +1,7 @@ import { GlDropdownItem } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import TableContents from '~/blob/components/table_contents.vue'; let wrapper; @@ -17,7 +18,7 @@ async function setLoaded(loaded) { describe('Markdown table of contents component', () => { beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div class="blob-viewer" data-type="rich" data-loaded="false"> <h1><a href="#1"></a>Hello</h1> <h2><a href="#2"></a>World</h2> @@ -29,6 +30,7 @@ describe('Markdown table of contents component', () => { afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); describe('not loaded', () => { diff --git a/spec/frontend/blob/file_template_mediator_spec.js b/spec/frontend/blob/file_template_mediator_spec.js index 44e12deb564..907a3c97799 100644 --- a/spec/frontend/blob/file_template_mediator_spec.js +++ b/spec/frontend/blob/file_template_mediator_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import TemplateSelectorMediator from '~/blob/file_template_mediator'; describe('Template Selector Mediator', () => { @@ -11,7 +12,7 @@ describe('Template Selector Mediator', () => { }))(); beforeEach(() => { - setFixtures('<div class="file-editor"><input class="js-file-path-name-input" /></div>'); + setHTMLFixture('<div class="file-editor"><input class="js-file-path-name-input" /></div>'); input = document.querySelector('.js-file-path-name-input'); mediator = new TemplateSelectorMediator({ editor, @@ -20,6 +21,10 @@ describe('Template Selector Mediator', () => { }); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('fills out the input field', () => { expect(input.value).toBe(''); mediator.setFilename(newFileName); diff --git a/spec/frontend/blob/line_highlighter_spec.js b/spec/frontend/blob/line_highlighter_spec.js index 330f1f3137e..21d4e8db503 100644 --- a/spec/frontend/blob/line_highlighter_spec.js +++ b/spec/frontend/blob/line_highlighter_spec.js @@ -1,6 +1,7 @@ /* eslint-disable no-return-assign, no-new, no-underscore-dangle */ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import LineHighlighter from '~/blob/line_highlighter'; import * as utils from '~/lib/utils/common_utils'; @@ -14,8 +15,9 @@ describe('LineHighlighter', () => { const e = $.Event('click', eventData); return $(`#L${number}`).trigger(e); }; + beforeEach(() => { - loadFixtures('static/line_highlighter.html'); + loadHTMLFixture('static/line_highlighter.html'); testContext.class = new LineHighlighter(); testContext.css = testContext.class.highlightLineClass; return (testContext.spies = { @@ -25,6 +27,10 @@ describe('LineHighlighter', () => { }); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('behavior', () => { it('highlights one line given in the URL hash', () => { new LineHighlighter({ hash: '#L13' }); diff --git a/spec/frontend/blob/openapi/index_spec.js b/spec/frontend/blob/openapi/index_spec.js index 4b3d3ce2d35..53220809f80 100644 --- a/spec/frontend/blob/openapi/index_spec.js +++ b/spec/frontend/blob/openapi/index_spec.js @@ -1,4 +1,5 @@ import { SwaggerUIBundle } from 'swagger-ui-dist'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import renderOpenApi from '~/blob/openapi'; jest.mock('swagger-ui-dist'); @@ -8,10 +9,14 @@ describe('OpenAPI blob viewer', () => { const mockEndpoint = 'some/endpoint'; beforeEach(() => { - setFixtures(`<div id="${id}" data-endpoint="${mockEndpoint}"></div>`); + setHTMLFixture(`<div id="${id}" data-endpoint="${mockEndpoint}"></div>`); renderOpenApi(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('initializes SwaggerUI with the correct configuration', () => { expect(SwaggerUIBundle).toHaveBeenCalledWith({ url: mockEndpoint, diff --git a/spec/frontend/blob/sketch/index_spec.js b/spec/frontend/blob/sketch/index_spec.js index d608a6d1f85..5e1922a24f4 100644 --- a/spec/frontend/blob/sketch/index_spec.js +++ b/spec/frontend/blob/sketch/index_spec.js @@ -1,4 +1,5 @@ import SketchLoader from '~/blob/sketch'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import waitForPromises from 'helpers/wait_for_promises'; jest.mock('jszip', () => { @@ -15,7 +16,11 @@ jest.mock('jszip', () => { describe('Sketch viewer', () => { beforeEach(() => { - loadFixtures('static/sketch_viewer.html'); + loadHTMLFixture('static/sketch_viewer.html'); + }); + + afterEach(() => { + resetHTMLFixture(); }); describe('with error message', () => { diff --git a/spec/frontend/blob/viewer/index_spec.js b/spec/frontend/blob/viewer/index_spec.js index fe55a537b89..5f6baf3f63d 100644 --- a/spec/frontend/blob/viewer/index_spec.js +++ b/spec/frontend/blob/viewer/index_spec.js @@ -2,6 +2,7 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { setTestTimeout } from 'helpers/timeout'; import { BlobViewer } from '~/blob/viewer/index'; import axios from '~/lib/utils/axios_utils'; @@ -26,7 +27,7 @@ describe('Blob viewer', () => { $.fn.extend(jQueryMock); mock = new MockAdapter(axios); - loadFixtures('blob/show_readme.html'); + loadHTMLFixture('blob/show_readme.html'); $('#modal-upload-blob').remove(); mock.onGet(/blob\/.+\/README\.md/).reply(200, { @@ -39,6 +40,8 @@ describe('Blob viewer', () => { afterEach(() => { mock.restore(); window.location.hash = ''; + + resetHTMLFixture(); }); it('loads source file after switching views', async () => { diff --git a/spec/frontend/blob_edit/blob_bundle_spec.js b/spec/frontend/blob_edit/blob_bundle_spec.js index 2c9ddfaf867..644539308c2 100644 --- a/spec/frontend/blob_edit/blob_bundle_spec.js +++ b/spec/frontend/blob_edit/blob_bundle_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import waitForPromises from 'helpers/wait_for_promises'; import blobBundle from '~/blob_edit/blob_bundle'; @@ -14,15 +15,17 @@ describe('BlobBundle', () => { }); it('loads SourceEditor for the edit screen', async () => { - setFixtures(`<div class="js-edit-blob-form"></div>`); + setHTMLFixture(`<div class="js-edit-blob-form"></div>`); blobBundle(); await waitForPromises(); expect(SourceEditor).toHaveBeenCalled(); + + resetHTMLFixture(); }); describe('No Suggest Popover', () => { beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div class="js-edit-blob-form" data-blob-filename="blah"> <button class="js-commit-button"></button> <button id='cancel-changes'></button> @@ -31,6 +34,10 @@ describe('BlobBundle', () => { blobBundle(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('sets the window beforeunload listener to a function returning a string', () => { expect(window.onbeforeunload()).toBe(''); }); @@ -52,7 +59,7 @@ describe('BlobBundle', () => { let trackingSpy; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div class="js-edit-blob-form" data-blob-filename="blah" id="target"> <div class="js-suggest-gitlab-ci-yml" data-target="#target" @@ -73,6 +80,7 @@ describe('BlobBundle', () => { afterEach(() => { unmockTracking(); + resetHTMLFixture(); }); it('sends a tracking event when the commit button is clicked', () => { diff --git a/spec/frontend/blob_edit/edit_blob_spec.js b/spec/frontend/blob_edit/edit_blob_spec.js index 9c974e79e6e..ae678f6f25f 100644 --- a/spec/frontend/blob_edit/edit_blob_spec.js +++ b/spec/frontend/blob_edit/edit_blob_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import waitForPromises from 'helpers/wait_for_promises'; import EditBlob from '~/blob_edit/edit_blob'; import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base'; @@ -34,7 +35,7 @@ describe('Blob Editing', () => { focus: jest.fn(), }; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <form class="js-edit-blob-form"> <div id="file_path"></div> <div id="editor"></div> @@ -48,6 +49,7 @@ describe('Blob Editing', () => { EditorMarkdownExtension.mockClear(); EditorMarkdownPreviewExtension.mockClear(); FileTemplateExtension.mockClear(); + resetHTMLFixture(); }); const editorInst = (isMarkdown) => { diff --git a/spec/frontend/bootstrap_jquery_spec.js b/spec/frontend/bootstrap_jquery_spec.js index d5d592e3839..15186600a8a 100644 --- a/spec/frontend/bootstrap_jquery_spec.js +++ b/spec/frontend/bootstrap_jquery_spec.js @@ -1,10 +1,15 @@ import $ from 'jquery'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import '~/commons/bootstrap'; describe('Bootstrap jQuery extensions', () => { describe('disable', () => { beforeEach(() => { - setFixtures('<input type="text" />'); + setHTMLFixture('<input type="text" />'); + }); + + afterEach(() => { + resetHTMLFixture(); }); it('adds the disabled attribute', () => { @@ -24,7 +29,11 @@ describe('Bootstrap jQuery extensions', () => { describe('enable', () => { beforeEach(() => { - setFixtures('<input type="text" disabled="disabled" class="disabled" />'); + setHTMLFixture('<input type="text" disabled="disabled" class="disabled" />'); + }); + + afterEach(() => { + resetHTMLFixture(); }); it('removes the disabled attribute', () => { diff --git a/spec/frontend/bootstrap_linked_tabs_spec.js b/spec/frontend/bootstrap_linked_tabs_spec.js index 30fb140bc69..5ee1ca32141 100644 --- a/spec/frontend/bootstrap_linked_tabs_spec.js +++ b/spec/frontend/bootstrap_linked_tabs_spec.js @@ -1,8 +1,13 @@ +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs'; describe('Linked Tabs', () => { beforeEach(() => { - loadFixtures('static/linked_tabs.html'); + loadHTMLFixture('static/linked_tabs.html'); + }); + + afterEach(() => { + resetHTMLFixture(); }); describe('when is initialized', () => { diff --git a/spec/frontend/broadcast_notification_spec.js b/spec/frontend/broadcast_notification_spec.js index cd947cd417a..cfb9fffffc3 100644 --- a/spec/frontend/broadcast_notification_spec.js +++ b/spec/frontend/broadcast_notification_spec.js @@ -1,4 +1,5 @@ import Cookies from 'js-cookie'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initBroadcastNotifications from '~/broadcast_notification'; describe('broadcast message on dismiss', () => { @@ -9,7 +10,7 @@ describe('broadcast message on dismiss', () => { const endsAt = '2020-01-01T00:00:00Z'; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div class="js-broadcast-notification-1"> <button class="js-dismiss-current-broadcast-notification" data-id="1" data-expire-date="${endsAt}"></button> </div> @@ -18,6 +19,10 @@ describe('broadcast message on dismiss', () => { initBroadcastNotifications(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('removes broadcast message', () => { dismiss(); diff --git a/spec/frontend/ci_variable_list/ci_variable_list/ci_variable_list_spec.js b/spec/frontend/ci_variable_list/ci_variable_list/ci_variable_list_spec.js index 1bca21b1d57..2210b0f48d6 100644 --- a/spec/frontend/ci_variable_list/ci_variable_list/ci_variable_list_spec.js +++ b/spec/frontend/ci_variable_list/ci_variable_list/ci_variable_list_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import VariableList from '~/ci_variable_list/ci_variable_list'; const HIDE_CLASS = 'hide'; @@ -10,7 +11,7 @@ describe('VariableList', () => { describe('with only key/value inputs', () => { describe('with no variables', () => { beforeEach(() => { - loadFixtures('pipeline_schedules/edit.html'); + loadHTMLFixture('pipeline_schedules/edit.html'); $wrapper = $('.js-ci-variable-list-section'); variableList = new VariableList({ @@ -20,6 +21,10 @@ describe('VariableList', () => { variableList.init(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should remove the row when clicking the remove button', () => { $wrapper.find('.js-row-remove-button').trigger('click'); @@ -64,7 +69,7 @@ describe('VariableList', () => { describe('with persisted variables', () => { beforeEach(() => { - loadFixtures('pipeline_schedules/edit_with_variables.html'); + loadHTMLFixture('pipeline_schedules/edit_with_variables.html'); $wrapper = $('.js-ci-variable-list-section'); variableList = new VariableList({ @@ -74,6 +79,10 @@ describe('VariableList', () => { variableList.init(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should have "Reveal values" button initially when there are already variables', () => { expect($wrapper.find('.js-secret-value-reveal-button').text()).toBe('Reveal values'); }); @@ -97,7 +106,7 @@ describe('VariableList', () => { describe('toggleEnableRow method', () => { beforeEach(() => { - loadFixtures('pipeline_schedules/edit_with_variables.html'); + loadHTMLFixture('pipeline_schedules/edit_with_variables.html'); $wrapper = $('.js-ci-variable-list-section'); variableList = new VariableList({ @@ -107,6 +116,10 @@ describe('VariableList', () => { variableList.init(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should disable all key inputs', () => { expect($wrapper.find('.js-ci-variable-input-key:not([disabled])').length).toBe(3); diff --git a/spec/frontend/ci_variable_list/ci_variable_list/native_form_variable_list_spec.js b/spec/frontend/ci_variable_list/ci_variable_list/native_form_variable_list_spec.js index eee1362440d..57f666e29d6 100644 --- a/spec/frontend/ci_variable_list/ci_variable_list/native_form_variable_list_spec.js +++ b/spec/frontend/ci_variable_list/ci_variable_list/native_form_variable_list_spec.js @@ -1,11 +1,12 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list'; describe('NativeFormVariableList', () => { let $wrapper; beforeEach(() => { - loadFixtures('pipeline_schedules/edit.html'); + loadHTMLFixture('pipeline_schedules/edit.html'); $wrapper = $('.js-ci-variable-list-section'); setupNativeFormVariableList({ @@ -14,6 +15,10 @@ describe('NativeFormVariableList', () => { }); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('onFormSubmit', () => { it('should clear out the `name` attribute on the inputs for the last empty row on form submission (avoid BE validation)', () => { const $row = $wrapper.find('.js-row'); diff --git a/spec/frontend/clusters/clusters_bundle_spec.js b/spec/frontend/clusters/clusters_bundle_spec.js index 2a0610b1b0a..b5345ea8915 100644 --- a/spec/frontend/clusters/clusters_bundle_spec.js +++ b/spec/frontend/clusters/clusters_bundle_spec.js @@ -1,5 +1,5 @@ import MockAdapter from 'axios-mock-adapter'; -import { loadHTMLFixture } from 'helpers/fixtures'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; import { setTestTimeout } from 'helpers/timeout'; import Clusters from '~/clusters/clusters_bundle'; @@ -27,19 +27,17 @@ describe('Clusters', () => { beforeEach(() => { loadHTMLFixture('clusters/show_cluster.html'); - }); - beforeEach(() => { mockGetClusterStatusRequest(); - }); - beforeEach(() => { cluster = new Clusters(); }); afterEach(() => { cluster.destroy(); mock.restore(); + + resetHTMLFixture(); }); describe('class constructor', () => { diff --git a/spec/frontend/clusters/gke_cluster_namespace/gke_cluster_namespace_spec.js b/spec/frontend/clusters/gke_cluster_namespace/gke_cluster_namespace_spec.js index 7d171d0ad35..eeb876a608f 100644 --- a/spec/frontend/clusters/gke_cluster_namespace/gke_cluster_namespace_spec.js +++ b/spec/frontend/clusters/gke_cluster_namespace/gke_cluster_namespace_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initGkeNamespace from '~/clusters/gke_cluster_namespace'; describe('GKE cluster namespace', () => { @@ -10,7 +11,7 @@ describe('GKE cluster namespace', () => { let glManaged; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <input class="js-gl-managed" type="checkbox" value="1" checked /> <div class="js-namespace"> <input type="text" /> @@ -27,6 +28,10 @@ describe('GKE cluster namespace', () => { initGkeNamespace(); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('GKE cluster namespace toggles', () => { it('initially displays the GitLab-managed label and input', () => { expect(isHidden(glManaged)).toEqual(false); diff --git a/spec/frontend/code_navigation/components/app_spec.js b/spec/frontend/code_navigation/components/app_spec.js index f2f97092c5a..b85047dc816 100644 --- a/spec/frontend/code_navigation/components/app_spec.js +++ b/spec/frontend/code_navigation/components/app_spec.js @@ -1,6 +1,8 @@ import { shallowMount } from '@vue/test-utils'; import Vue from 'vue'; import Vuex from 'vuex'; + +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import App from '~/code_navigation/components/app.vue'; import Popover from '~/code_navigation/components/popover.vue'; import createState from '~/code_navigation/store/state'; @@ -75,12 +77,14 @@ describe('Code navigation app component', () => { }); it('calls showDefinition when clicking blob viewer', () => { - setFixtures('<div class="blob-viewer"></div>'); + setHTMLFixture('<div class="blob-viewer"></div>'); factory(); document.querySelector('.blob-viewer').click(); expect(showDefinition).toHaveBeenCalled(); + + resetHTMLFixture(); }); }); diff --git a/spec/frontend/code_navigation/store/actions_spec.js b/spec/frontend/code_navigation/store/actions_spec.js index c26416aca94..c47a9e697b6 100644 --- a/spec/frontend/code_navigation/store/actions_spec.js +++ b/spec/frontend/code_navigation/store/actions_spec.js @@ -1,4 +1,5 @@ import MockAdapter from 'axios-mock-adapter'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import testAction from 'helpers/vuex_action_helper'; import actions from '~/code_navigation/store/actions'; import { setCurrentHoverElement, addInteractionClass } from '~/code_navigation/utils'; @@ -174,12 +175,16 @@ describe('Code navigation actions', () => { let target; beforeEach(() => { - setFixtures( + setHTMLFixture( '<div data-path="index.js"><div class="line"><div class="js-test"></div></div></div>', ); target = document.querySelector('.js-test'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('returns early when no data exists', () => { return testAction(actions.showDefinition, { target }, {}, [], []); }); diff --git a/spec/frontend/code_navigation/utils/index_spec.js b/spec/frontend/code_navigation/utils/index_spec.js index 682c8bce8c5..b8448709f0b 100644 --- a/spec/frontend/code_navigation/utils/index_spec.js +++ b/spec/frontend/code_navigation/utils/index_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { cachedData, getCurrentHoverElement, @@ -35,11 +36,15 @@ describe('setCurrentHoverElement', () => { describe('addInteractionClass', () => { beforeEach(() => { - setFixtures( + setHTMLFixture( '<div data-path="index.js"><div class="blob-content"><div id="LC1" class="line"><span>console</span><span>.</span><span>log</span></div><div id="LC2" class="line"><span>function</span></div></div></div>', ); }); + afterEach(() => { + resetHTMLFixture(); + }); + it.each` line | char | index ${0} | ${0} | ${0} @@ -59,7 +64,7 @@ describe('addInteractionClass', () => { describe('wrapTextNodes', () => { beforeEach(() => { - setFixtures( + setHTMLFixture( '<div data-path="index.js"><div class="blob-content"><div id="LC1" class="line"> Text </div></div></div>', ); }); diff --git a/spec/frontend/commits_spec.js b/spec/frontend/commits_spec.js index a049a6997f0..db1516ed4ec 100644 --- a/spec/frontend/commits_spec.js +++ b/spec/frontend/commits_spec.js @@ -1,6 +1,7 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; import 'vendor/jquery.endless-scroll'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import CommitsList from '~/commits'; import axios from '~/lib/utils/axios_utils'; import Pager from '~/pager'; @@ -9,7 +10,7 @@ describe('Commits List', () => { let commitsList; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <form class="commits-search-form" action="/h5bp/html5-boilerplate/commits/main"> <input id="commits-search"> </form> @@ -19,6 +20,10 @@ describe('Commits List', () => { commitsList = new CommitsList(25); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should be defined', () => { expect(CommitsList).toBeDefined(); }); diff --git a/spec/frontend/commons/nav/user_merge_requests_spec.js b/spec/frontend/commons/nav/user_merge_requests_spec.js index 8f974051232..f660cc8e9de 100644 --- a/spec/frontend/commons/nav/user_merge_requests_spec.js +++ b/spec/frontend/commons/nav/user_merge_requests_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import * as UserApi from '~/api/user_api'; import { openUserCountsBroadcast, @@ -24,11 +25,15 @@ describe('User Merge Requests', () => { newBroadcastChannelMock = jest.fn().mockImplementation(() => channelMock); global.BroadcastChannel = newBroadcastChannelMock; - setFixtures( + setHTMLFixture( `<div><div class="${MR_COUNT_CLASS}">0</div><div class="js-assigned-mr-count"></div><div class="js-reviewer-mr-count"></div></div>`, ); }); + afterEach(() => { + resetHTMLFixture(); + }); + const findMRCountText = () => document.body.querySelector(`.${MR_COUNT_CLASS}`).textContent; describe('refreshUserMergeRequestCounts', () => { diff --git a/spec/frontend/create_item_dropdown_spec.js b/spec/frontend/create_item_dropdown_spec.js index 143ccb9b930..aea4bc6017d 100644 --- a/spec/frontend/create_item_dropdown_spec.js +++ b/spec/frontend/create_item_dropdown_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import CreateItemDropdown from '~/create_item_dropdown'; const DROPDOWN_ITEM_DATA = [ @@ -41,12 +42,13 @@ describe('CreateItemDropdown', () => { } beforeEach(() => { - loadFixtures('static/create_item_dropdown.html'); + loadHTMLFixture('static/create_item_dropdown.html'); $wrapperEl = $('.js-create-item-dropdown-fixture-root'); }); afterEach(() => { $wrapperEl.remove(); + resetHTMLFixture(); }); describe('items', () => { diff --git a/spec/frontend/deprecated_jquery_dropdown_spec.js b/spec/frontend/deprecated_jquery_dropdown_spec.js index bec91fe5fc5..b18d53b317d 100644 --- a/spec/frontend/deprecated_jquery_dropdown_spec.js +++ b/spec/frontend/deprecated_jquery_dropdown_spec.js @@ -2,6 +2,7 @@ import $ from 'jquery'; import mockProjects from 'test_fixtures_static/projects.json'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; import '~/lib/utils/common_utils'; import { visitUrl } from '~/lib/utils/url_utility'; @@ -64,7 +65,7 @@ describe('deprecatedJQueryDropdown', () => { } beforeEach(() => { - loadFixtures('static/deprecated_jquery_dropdown.html'); + loadHTMLFixture('static/deprecated_jquery_dropdown.html'); test.dropdownContainerElement = $('.dropdown.inline'); test.$dropdownMenuElement = $('.dropdown-menu', test.dropdownContainerElement); test.projectsData = JSON.parse(JSON.stringify(mockProjects)); @@ -73,6 +74,8 @@ describe('deprecatedJQueryDropdown', () => { afterEach(() => { $('body').off('keydown'); test.dropdownContainerElement.off('keyup'); + + resetHTMLFixture(); }); it('should open on click', () => { diff --git a/spec/frontend/dropzone_input_spec.js b/spec/frontend/dropzone_input_spec.js index 11414e8890d..a633de9ef56 100644 --- a/spec/frontend/dropzone_input_spec.js +++ b/spec/frontend/dropzone_input_spec.js @@ -1,6 +1,7 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; import mock from 'xhr-mock'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import waitForPromises from 'helpers/wait_for_promises'; import { TEST_HOST } from 'spec/test_constants'; import PasteMarkdownTable from '~/behaviors/markdown/paste_markdown_table'; @@ -45,7 +46,7 @@ describe('dropzone_input', () => { }; beforeEach(() => { - loadFixtures('issues/new-issue.html'); + loadHTMLFixture('issues/new-issue.html'); form = $('#new_issue'); form.data('uploads-path', TEST_UPLOAD_PATH); @@ -54,6 +55,8 @@ describe('dropzone_input', () => { afterEach(() => { form = null; + + resetHTMLFixture(); }); it('pastes Markdown tables', () => { diff --git a/spec/frontend/editor/source_editor_ci_schema_ext_spec.js b/spec/frontend/editor/source_editor_ci_schema_ext_spec.js index 2f6d277ca75..9a14e1a55eb 100644 --- a/spec/frontend/editor/source_editor_ci_schema_ext_spec.js +++ b/spec/frontend/editor/source_editor_ci_schema_ext_spec.js @@ -1,4 +1,5 @@ import { languages } from 'monaco-editor'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { TEST_HOST } from 'helpers/test_constants'; import { CiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext'; import ciSchemaPath from '~/editor/schema/ci.json'; @@ -19,7 +20,7 @@ describe('~/editor/editor_ci_config_ext', () => { let originalGitlabUrl; const createMockEditor = ({ blobPath = defaultBlobPath } = {}) => { - setFixtures('<div id="editor"></div>'); + setHTMLFixture('<div id="editor"></div>'); editorEl = document.getElementById('editor'); editor = new SourceEditor(); instance = editor.createInstance({ @@ -45,7 +46,9 @@ describe('~/editor/editor_ci_config_ext', () => { afterEach(() => { instance.dispose(); + editorEl.remove(); + resetHTMLFixture(); }); describe('registerCiSchema', () => { diff --git a/spec/frontend/editor/source_editor_extension_base_spec.js b/spec/frontend/editor/source_editor_extension_base_spec.js index 6606557fd1f..eab39ccaba1 100644 --- a/spec/frontend/editor/source_editor_extension_base_spec.js +++ b/spec/frontend/editor/source_editor_extension_base_spec.js @@ -1,4 +1,5 @@ import { Range } from 'monaco-editor'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame'; import setWindowLocation from 'helpers/set_window_location_helper'; import { @@ -39,12 +40,13 @@ describe('The basis for an Source Editor extension', () => { }; beforeEach(() => { - setFixtures(generateLines()); + setHTMLFixture(generateLines()); event = generateEventMock(); }); afterEach(() => { jest.clearAllMocks(); + resetHTMLFixture(); }); describe('onUse callback', () => { @@ -253,7 +255,7 @@ describe('The basis for an Source Editor extension', () => { }); it('does not create a link if the event is triggered on a wrong node', () => { - setFixtures('<div class="wrong-class">3</div>'); + setHTMLFixture('<div class="wrong-class">3</div>'); SourceEditorExtension.createAnchor = jest.fn(); const wrongEvent = generateEventMock({ el: document.querySelector('.wrong-class') }); diff --git a/spec/frontend/editor/source_editor_markdown_ext_spec.js b/spec/frontend/editor/source_editor_markdown_ext_spec.js index eecd23bff6e..3e8c287df2f 100644 --- a/spec/frontend/editor/source_editor_markdown_ext_spec.js +++ b/spec/frontend/editor/source_editor_markdown_ext_spec.js @@ -1,5 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import { Range, Position } from 'monaco-editor'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { EditorMarkdownExtension } from '~/editor/extensions/source_editor_markdown_ext'; import SourceEditor from '~/editor/source_editor'; import axios from '~/lib/utils/axios_utils'; @@ -27,7 +28,7 @@ describe('Markdown Extension for Source Editor', () => { beforeEach(() => { mockAxios = new MockAdapter(axios); - setFixtures('<div id="editor" data-editor-loading></div>'); + setHTMLFixture('<div id="editor" data-editor-loading></div>'); editorEl = document.getElementById('editor'); editor = new SourceEditor(); instance = editor.createInstance({ @@ -42,6 +43,8 @@ describe('Markdown Extension for Source Editor', () => { instance.dispose(); editorEl.remove(); mockAxios.restore(); + + resetHTMLFixture(); }); describe('getSelectedText', () => { diff --git a/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js b/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js index c8d016e10ac..f239dbcd665 100644 --- a/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js +++ b/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js @@ -1,5 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import { editor as monacoEditor } from 'monaco-editor'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import waitForPromises from 'helpers/wait_for_promises'; import { EXTENSION_MARKDOWN_PREVIEW_PANEL_CLASS, @@ -41,7 +42,7 @@ describe('Markdown Live Preview Extension for Source Editor', () => { beforeEach(() => { mockAxios = new MockAdapter(axios); - setFixtures('<div id="editor" data-editor-loading></div>'); + setHTMLFixture('<div id="editor" data-editor-loading></div>'); editorEl = document.getElementById('editor'); editor = new SourceEditor(); instance = editor.createInstance({ @@ -60,6 +61,7 @@ describe('Markdown Live Preview Extension for Source Editor', () => { instance.dispose(); editorEl.remove(); mockAxios.restore(); + resetHTMLFixture(); }); it('sets up the preview on the instance', () => { diff --git a/spec/frontend/editor/source_editor_spec.js b/spec/frontend/editor/source_editor_spec.js index 049cab3a83b..b3d914e6755 100644 --- a/spec/frontend/editor/source_editor_spec.js +++ b/spec/frontend/editor/source_editor_spec.js @@ -1,4 +1,5 @@ import { editor as monacoEditor, languages as monacoLanguages } from 'monaco-editor'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { SOURCE_EDITOR_INSTANCE_ERROR_NO_EL, URI_PREFIX, @@ -33,7 +34,7 @@ describe('Base editor', () => { const blobGlobalId = 'snippet_777'; beforeEach(() => { - setFixtures('<div id="editor" data-editor-loading></div>'); + setHTMLFixture('<div id="editor" data-editor-loading></div>'); editorEl = document.getElementById('editor'); defaultArguments = { el: editorEl, blobPath, blobContent, blobGlobalId }; editor = new SourceEditor(); @@ -45,6 +46,8 @@ describe('Base editor', () => { monacoEditor.getModels().forEach((model) => { model.dispose(); }); + + resetHTMLFixture(); }); const uriFilePath = joinPaths('/', URI_PREFIX, blobGlobalId, blobPath); @@ -244,7 +247,7 @@ describe('Base editor', () => { const readOnlyIndex = '78'; // readOnly option has the internal index of 78 in the editor's options beforeEach(() => { - setFixtures('<div id="editor1"></div><div id="editor2"></div>'); + setHTMLFixture('<div id="editor1"></div><div id="editor2"></div>'); editorEl1 = document.getElementById('editor1'); editorEl2 = document.getElementById('editor2'); inst1Args = { @@ -262,6 +265,7 @@ describe('Base editor', () => { afterEach(() => { editor.dispose(); + resetHTMLFixture(); }); it('can initialize several instances of the same editor', () => { diff --git a/spec/frontend/editor/source_editor_yaml_ext_spec.js b/spec/frontend/editor/source_editor_yaml_ext_spec.js index b603b0e3a98..14ec7f8b93f 100644 --- a/spec/frontend/editor/source_editor_yaml_ext_spec.js +++ b/spec/frontend/editor/source_editor_yaml_ext_spec.js @@ -1,4 +1,5 @@ import { Document } from 'yaml'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import SourceEditor from '~/editor/source_editor'; import { YamlEditorExtension } from '~/editor/extensions/source_editor_yaml_ext'; import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base'; @@ -8,7 +9,7 @@ let baseExtension; let yamlExtension; const getEditorInstance = (editorInstanceOptions = {}) => { - setFixtures('<div id="editor"></div>'); + setHTMLFixture('<div id="editor"></div>'); return new SourceEditor().createInstance({ el: document.getElementById('editor'), blobPath: '.gitlab-ci.yml', @@ -18,7 +19,7 @@ const getEditorInstance = (editorInstanceOptions = {}) => { }; const getEditorInstanceWithExtension = (extensionOptions = {}, editorInstanceOptions = {}) => { - setFixtures('<div id="editor"></div>'); + setHTMLFixture('<div id="editor"></div>'); const instance = getEditorInstance(editorInstanceOptions); [baseExtension, yamlExtension] = instance.use([ { definition: SourceEditorExtension }, @@ -35,6 +36,10 @@ const getEditorInstanceWithExtension = (extensionOptions = {}, editorInstanceOpt }; describe('YamlCreatorExtension', () => { + afterEach(() => { + resetHTMLFixture(); + }); + describe('constructor', () => { it('saves setupOptions options on the extension, but does not expose those to instance', () => { const highlightPath = 'foo'; diff --git a/spec/frontend/editor/utils_spec.js b/spec/frontend/editor/utils_spec.js index 97d3e9e081d..e561cad1086 100644 --- a/spec/frontend/editor/utils_spec.js +++ b/spec/frontend/editor/utils_spec.js @@ -1,4 +1,5 @@ import { editor as monacoEditor } from 'monaco-editor'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import * as utils from '~/editor/utils'; import { DEFAULT_THEME } from '~/ide/lib/themes'; @@ -14,10 +15,14 @@ describe('Source Editor utils', () => { describe('clearDomElement', () => { beforeEach(() => { - setFixtures('<div id="foo"><div id="bar">Foo</div></div>'); + setHTMLFixture('<div id="foo"><div id="bar">Foo</div></div>'); el = document.getElementById('foo'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('removes all child nodes from an element', () => { expect(el.children.length).toBe(1); utils.clearDomElement(el); @@ -68,10 +73,14 @@ describe('Source Editor utils', () => { beforeEach(() => { jest.spyOn(monacoEditor, 'colorizeElement').mockImplementation(); jest.spyOn(monacoEditor, 'setTheme').mockImplementation(); - setFixtures('<pre id="foo"></pre>'); + setHTMLFixture('<pre id="foo"></pre>'); el = document.getElementById('foo'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('colorizes the element and applies the preference theme', () => { expect(monacoEditor.colorizeElement).not.toHaveBeenCalled(); expect(monacoEditor.setTheme).not.toHaveBeenCalled(); diff --git a/spec/frontend/filterable_list_spec.js b/spec/frontend/filterable_list_spec.js index 3fd5d198e3a..e7197ac6dbf 100644 --- a/spec/frontend/filterable_list_spec.js +++ b/spec/frontend/filterable_list_spec.js @@ -1,4 +1,4 @@ -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import FilterableList from '~/filterable_list'; describe('FilterableList', () => { @@ -20,6 +20,10 @@ describe('FilterableList', () => { List = new FilterableList(form, filter, holder); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('processes input parameters', () => { expect(List.filterForm).toEqual(form); expect(List.listFilterElement).toEqual(filter); diff --git a/spec/frontend/filtered_search/dropdown_user_spec.js b/spec/frontend/filtered_search/dropdown_user_spec.js index ee0eef6a1b6..26f12673f68 100644 --- a/spec/frontend/filtered_search/dropdown_user_spec.js +++ b/spec/frontend/filtered_search/dropdown_user_spec.js @@ -1,3 +1,4 @@ +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import DropdownUser from '~/filtered_search/dropdown_user'; import DropdownUtils from '~/filtered_search/dropdown_utils'; import FilteredSearchTokenizer from '~/filtered_search/filtered_search_tokenizer'; @@ -80,7 +81,7 @@ describe('Dropdown User', () => { let authorFilterDropdownElement; beforeEach(() => { - loadFixtures(fixtureTemplate); + loadHTMLFixture(fixtureTemplate); authorFilterDropdownElement = document.querySelector('#js-dropdown-author'); const dummyInput = document.createElement('div'); dropdown = new DropdownUser({ @@ -89,6 +90,10 @@ describe('Dropdown User', () => { }); }); + afterEach(() => { + resetHTMLFixture(); + }); + const findCurrentUserElement = () => authorFilterDropdownElement.querySelector('.js-current-user'); diff --git a/spec/frontend/filtered_search/dropdown_utils_spec.js b/spec/frontend/filtered_search/dropdown_utils_spec.js index 4c1e79eba42..2030b45b44c 100644 --- a/spec/frontend/filtered_search/dropdown_utils_spec.js +++ b/spec/frontend/filtered_search/dropdown_utils_spec.js @@ -1,3 +1,4 @@ +import { loadHTMLFixture, setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import FilteredSearchSpecHelper from 'helpers/filtered_search_spec_helper'; import DropdownUtils from '~/filtered_search/dropdown_utils'; import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dropdown_manager'; @@ -43,13 +44,17 @@ describe('Dropdown Utils', () => { }; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <input type="text" id="test" /> `); input = document.getElementById('test'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should filter without symbol', () => { input.value = 'roo'; @@ -142,7 +147,7 @@ describe('Dropdown Utils', () => { let allowedKeys; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <ul class="tokens-container"> <li class="input-token"> <input class="filtered-search" type="text" id="test" /> @@ -350,7 +355,7 @@ describe('Dropdown Utils', () => { let authorToken; beforeEach(() => { - loadFixtures(issuableListFixture); + loadHTMLFixture(issuableListFixture); authorToken = FilteredSearchSpecHelper.createFilterVisualToken('author', '=', '@user'); const searchTermToken = FilteredSearchSpecHelper.createSearchVisualToken('search term'); diff --git a/spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js b/spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js index e9ee69ca163..dff6d11a320 100644 --- a/spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js +++ b/spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js @@ -1,5 +1,6 @@ import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dropdown_manager'; describe('Filtered Search Dropdown Manager', () => { @@ -20,7 +21,7 @@ describe('Filtered Search Dropdown Manager', () => { } beforeEach(() => { - setFixtures(` + setHTMLFixture(` <ul class="tokens-container"> <li class="input-token"> <input class="filtered-search"> @@ -29,6 +30,10 @@ describe('Filtered Search Dropdown Manager', () => { `); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('input has no existing value', () => { it('should add just tokenName', () => { FilteredSearchDropdownManager.addWordToInput({ tokenName: 'milestone' }); diff --git a/spec/frontend/filtered_search/filtered_search_manager_spec.js b/spec/frontend/filtered_search/filtered_search_manager_spec.js index 911a507af4c..5e68725c03e 100644 --- a/spec/frontend/filtered_search/filtered_search_manager_spec.js +++ b/spec/frontend/filtered_search/filtered_search_manager_spec.js @@ -1,5 +1,5 @@ import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager'; - +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import FilteredSearchSpecHelper from 'helpers/filtered_search_spec_helper'; import DropdownUtils from '~/filtered_search/dropdown_utils'; import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dropdown_manager'; @@ -64,7 +64,7 @@ describe('Filtered Search Manager', () => { } beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div class="filtered-search-box"> <form> <ul class="tokens-container list-unstyled"> @@ -80,6 +80,10 @@ describe('Filtered Search Manager', () => { jest.spyOn(FilteredSearchDropdownManager.prototype, 'setDropdown').mockImplementation(); }); + afterEach(() => { + resetHTMLFixture(); + }); + const initializeManager = ({ useDefaultState } = {}) => { jest.spyOn(FilteredSearchManager.prototype, 'loadSearchParamsFromURL').mockImplementation(); jest.spyOn(FilteredSearchManager.prototype, 'tokenChange').mockImplementation(); diff --git a/spec/frontend/filtered_search/filtered_search_visual_tokens_spec.js b/spec/frontend/filtered_search/filtered_search_visual_tokens_spec.js index c4e125e96da..0e5c94edd05 100644 --- a/spec/frontend/filtered_search/filtered_search_visual_tokens_spec.js +++ b/spec/frontend/filtered_search/filtered_search_visual_tokens_spec.js @@ -1,5 +1,6 @@ import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import FilteredSearchSpecHelper from 'helpers/filtered_search_spec_helper'; import waitForPromises from 'helpers/wait_for_promises'; import FilteredSearchVisualTokens from '~/filtered_search/filtered_search_visual_tokens'; @@ -24,7 +25,7 @@ describe('Filtered Search Visual Tokens', () => { mock = new MockAdapter(axios); mock.onGet().reply(200); - setFixtures(` + setHTMLFixture(` <ul class="tokens-container"> ${FilteredSearchSpecHelper.createInputHTML()} </ul> @@ -35,6 +36,10 @@ describe('Filtered Search Visual Tokens', () => { bugLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '=', '~bug'); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('getLastVisualTokenBeforeInput', () => { it('returns when there are no visual tokens', () => { const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); @@ -241,7 +246,7 @@ describe('Filtered Search Visual Tokens', () => { let tokenElement; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div class="test-area"> ${subject.createVisualTokenElementHTML('custom-token')} </div> diff --git a/spec/frontend/filtered_search/visual_token_value_spec.js b/spec/frontend/filtered_search/visual_token_value_spec.js index bf526a8d371..e52ffa7bd9f 100644 --- a/spec/frontend/filtered_search/visual_token_value_spec.js +++ b/spec/frontend/filtered_search/visual_token_value_spec.js @@ -1,5 +1,6 @@ import { escape } from 'lodash'; import labelData from 'test_fixtures/labels/project_labels.json'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import FilteredSearchSpecHelper from 'helpers/filtered_search_spec_helper'; import { TEST_HOST } from 'helpers/test_constants'; import DropdownUtils from '~/filtered_search/dropdown_utils'; @@ -28,7 +29,7 @@ describe('Filtered Search Visual Tokens', () => { let bugLabelToken; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <ul class="tokens-container"> ${FilteredSearchSpecHelper.createInputHTML()} </ul> @@ -39,6 +40,10 @@ describe('Filtered Search Visual Tokens', () => { bugLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '=', '~bug'); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('updateUserTokenAppearance', () => { let usersCacheSpy; diff --git a/spec/frontend/flash_spec.js b/spec/frontend/flash_spec.js index 942e2c330fa..6cd32ff6b40 100644 --- a/spec/frontend/flash_spec.js +++ b/spec/frontend/flash_spec.js @@ -1,5 +1,5 @@ import * as Sentry from '@sentry/browser'; -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import createFlash, { hideFlash, addDismissFlashClickListener, @@ -93,7 +93,7 @@ describe('Flash', () => { if (alert) { alert.$destroy(); } - document.querySelector('.flash-container')?.remove(); + resetHTMLFixture(); }); it('adds alert element into the document by default', () => { @@ -330,7 +330,7 @@ describe('Flash', () => { }); afterEach(() => { - document.querySelector('.js-content-wrapper').remove(); + resetHTMLFixture(); }); it('adds flash alert element into the document by default', () => { diff --git a/spec/frontend/gfm_auto_complete_spec.js b/spec/frontend/gfm_auto_complete_spec.js index 1ab3286fe4c..aa98b2774ea 100644 --- a/spec/frontend/gfm_auto_complete_spec.js +++ b/spec/frontend/gfm_auto_complete_spec.js @@ -2,6 +2,7 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; import labelsFixture from 'test_fixtures/autocomplete_sources/labels.json'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import GfmAutoComplete, { membersBeforeSave, highlighter } from 'ee_else_ce/gfm_auto_complete'; import { initEmojiMock, clearEmojiMock } from 'helpers/emoji'; import '~/lib/utils/jquery_at_who'; @@ -722,7 +723,7 @@ describe('GfmAutoComplete', () => { let $textarea; beforeEach(() => { - setFixtures('<textarea></textarea>'); + setHTMLFixture('<textarea></textarea>'); autocomplete = new GfmAutoComplete(dataSources); $textarea = $('textarea'); autocomplete.setup($textarea, { labels: true }); @@ -730,6 +731,7 @@ describe('GfmAutoComplete', () => { afterEach(() => { autocomplete.destroy(); + resetHTMLFixture(); }); const triggerDropdown = (text) => { diff --git a/spec/frontend/gl_field_errors_spec.js b/spec/frontend/gl_field_errors_spec.js index ada3b34e6b1..92d04927ee5 100644 --- a/spec/frontend/gl_field_errors_spec.js +++ b/spec/frontend/gl_field_errors_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import GlFieldErrors from '~/gl_field_errors'; describe('GL Style Field Errors', () => { @@ -9,13 +10,17 @@ describe('GL Style Field Errors', () => { }); beforeEach(() => { - loadFixtures('static/gl_field_errors.html'); + loadHTMLFixture('static/gl_field_errors.html'); const $form = $('form.gl-show-field-errors'); testContext.$form = $form; testContext.fieldErrors = new GlFieldErrors($form); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should select the correct input elements', () => { expect(testContext.$form).toBeDefined(); expect(testContext.$form.length).toBe(1); diff --git a/spec/frontend/google_tag_manager/index_spec.js b/spec/frontend/google_tag_manager/index_spec.js index de4a57a7319..6412fe8bb33 100644 --- a/spec/frontend/google_tag_manager/index_spec.js +++ b/spec/frontend/google_tag_manager/index_spec.js @@ -14,7 +14,7 @@ import { trackTransaction, trackAddToCartUsageTab, } from '~/google_tag_manager'; -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { logError } from '~/lib/logger'; jest.mock('~/lib/logger'); @@ -216,6 +216,10 @@ describe('~/google_tag_manager/index', () => { subject(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it.each(expectedEvents)('when %p', ({ selector, trigger, expectation }) => { expect(spy).not.toHaveBeenCalled(); @@ -443,6 +447,8 @@ describe('~/google_tag_manager/index', () => { expect(spy).not.toHaveBeenCalled(); expect(logError).not.toHaveBeenCalled(); + + resetHTMLFixture(); }); }); @@ -468,6 +474,8 @@ describe('~/google_tag_manager/index', () => { 'Unexpected error while pushing to dataLayer', pushError, ); + + resetHTMLFixture(); }); }); }); diff --git a/spec/frontend/gpg_badges_spec.js b/spec/frontend/gpg_badges_spec.js index 0bb50fc3e6f..0a1596b492d 100644 --- a/spec/frontend/gpg_badges_spec.js +++ b/spec/frontend/gpg_badges_spec.js @@ -1,4 +1,5 @@ import MockAdapter from 'axios-mock-adapter'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { TEST_HOST } from 'spec/test_constants'; import GpgBadges from '~/gpg_badges'; import axios from '~/lib/utils/axios_utils'; @@ -18,7 +19,7 @@ describe('GpgBadges', () => { const dummyUrl = `${TEST_HOST}/dummy/signatures`; const setForm = ({ utf8 = '✓', search = '' } = {}) => { - setFixtures(` + setHTMLFixture(` <form class="commits-search-form js-signature-container" data-signatures-path="${dummyUrl}" action="${dummyUrl}" method="get"> @@ -38,24 +39,27 @@ describe('GpgBadges', () => { afterEach(() => { mock.restore(); + resetHTMLFixture(); }); it('does not make a request if there is no container element', async () => { - setFixtures(''); + setHTMLFixture(''); jest.spyOn(axios, 'get').mockImplementation(() => {}); await GpgBadges.fetch(); expect(axios.get).not.toHaveBeenCalled(); + resetHTMLFixture(); }); it('throws an error if the endpoint is missing', async () => { - setFixtures('<div class="js-signature-container"></div>'); + setHTMLFixture('<div class="js-signature-container"></div>'); jest.spyOn(axios, 'get').mockImplementation(() => {}); await expect(GpgBadges.fetch()).rejects.toEqual( new Error('Missing commit signatures endpoint!'), ); expect(axios.get).not.toHaveBeenCalled(); + resetHTMLFixture(); }); it('fetches commit signatures', async () => { diff --git a/spec/frontend/header_spec.js b/spec/frontend/header_spec.js index 937bc9aa478..19849fba63c 100644 --- a/spec/frontend/header_spec.js +++ b/spec/frontend/header_spec.js @@ -1,6 +1,7 @@ import $ from 'jquery'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import initTodoToggle, { initNavUserDropdownTracking } from '~/header'; +import { loadHTMLFixture, setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; describe('Header', () => { describe('Todos notification', () => { @@ -17,7 +18,11 @@ describe('Header', () => { beforeEach(() => { initTodoToggle(); - loadFixtures(fixtureTemplate); + loadHTMLFixture(fixtureTemplate); + }); + + afterEach(() => { + resetHTMLFixture(); }); it('should update todos-count after receiving the todo:toggle event', () => { @@ -57,7 +62,7 @@ describe('Header', () => { let trackingSpy; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <li class="js-nav-user-dropdown"> <a class="js-buy-pipeline-minutes-link" data-track-action="click_buy_ci_minutes" data-track-label="free" data-track-property="user_dropdown">Buy Pipeline minutes</a> </li>`); @@ -70,6 +75,7 @@ describe('Header', () => { afterEach(() => { unmockTracking(); + resetHTMLFixture(); }); it('sends a tracking event when the dropdown is opened and contains Buy Pipeline minutes link', () => { diff --git a/spec/frontend/helpers/startup_css_helper_spec.js b/spec/frontend/helpers/startup_css_helper_spec.js index 703bdbd342f..2236b5aa261 100644 --- a/spec/frontend/helpers/startup_css_helper_spec.js +++ b/spec/frontend/helpers/startup_css_helper_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { waitForCSSLoaded } from '~/helpers/startup_css_helper'; describe('waitForCSSLoaded', () => { @@ -41,17 +42,19 @@ describe('waitForCSSLoaded', () => { describe('with startup css enabled', () => { it('should dispatch CSSLoaded when the assets are cached or already loaded', async () => { - setFixtures(` + setHTMLFixture(` <link href="one.css" data-startupcss="loaded"> <link href="two.css" data-startupcss="loaded"> `); await waitForCSSLoaded(mockedCallback); expect(mockedCallback).toHaveBeenCalledTimes(1); + + resetHTMLFixture(); }); it('should wait to call CssLoaded until the assets are loaded', async () => { - setFixtures(` + setHTMLFixture(` <link href="one.css" data-startupcss="loading"> <link href="two.css" data-startupcss="loading"> `); @@ -63,6 +66,8 @@ describe('waitForCSSLoaded', () => { await events; expect(mockedCallback).toHaveBeenCalledTimes(1); + + resetHTMLFixture(); }); }); }); diff --git a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js index e66de6bb0b0..ace266aec5e 100644 --- a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js @@ -1,4 +1,5 @@ import Vue, { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import createComponent from 'helpers/vue_mount_component_helper'; import CommitMessageField from '~/ide/components/commit_sidebar/message_field.vue'; @@ -7,7 +8,7 @@ describe('IDE commit message field', () => { let vm; beforeEach(() => { - setFixtures('<div id="app"></div>'); + setHTMLFixture('<div id="app"></div>'); vm = createComponent( Component, @@ -21,6 +22,8 @@ describe('IDE commit message field', () => { afterEach(() => { vm.$destroy(); + + resetHTMLFixture(); }); it('adds is-focused class on focus', async () => { diff --git a/spec/frontend/image_diff/image_diff_spec.js b/spec/frontend/image_diff/image_diff_spec.js index 710aa7108a8..f8faa8d78c2 100644 --- a/spec/frontend/image_diff/image_diff_spec.js +++ b/spec/frontend/image_diff/image_diff_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { TEST_HOST } from 'helpers/test_constants'; import imageDiffHelper from '~/image_diff/helpers/index'; import ImageDiff from '~/image_diff/image_diff'; @@ -9,7 +10,7 @@ describe('ImageDiff', () => { let imageDiff; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div id="element"> <div class="diff-file"> <div class="js-image-frame"> @@ -35,6 +36,10 @@ describe('ImageDiff', () => { element = document.getElementById('element'); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('constructor', () => { beforeEach(() => { imageDiff = new ImageDiff(element, { diff --git a/spec/frontend/image_diff/init_discussion_tab_spec.js b/spec/frontend/image_diff/init_discussion_tab_spec.js index f6f05037c95..3b427f0d54d 100644 --- a/spec/frontend/image_diff/init_discussion_tab_spec.js +++ b/spec/frontend/image_diff/init_discussion_tab_spec.js @@ -1,9 +1,10 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initImageDiffHelper from '~/image_diff/helpers/init_image_diff'; import initDiscussionTab from '~/image_diff/init_discussion_tab'; describe('initDiscussionTab', () => { beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div class="timeline-content"> <div class="diff-file js-image-file"></div> <div class="diff-file js-image-file"></div> @@ -11,6 +12,10 @@ describe('initDiscussionTab', () => { `); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should pass canCreateNote as false to initImageDiff', () => { jest .spyOn(initImageDiffHelper, 'initImageDiff') diff --git a/spec/frontend/image_diff/replaced_image_diff_spec.js b/spec/frontend/image_diff/replaced_image_diff_spec.js index 2b401fc46bf..d789e964e4c 100644 --- a/spec/frontend/image_diff/replaced_image_diff_spec.js +++ b/spec/frontend/image_diff/replaced_image_diff_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { TEST_HOST } from 'helpers/test_constants'; import imageDiffHelper from '~/image_diff/helpers/index'; import ImageDiff from '~/image_diff/image_diff'; @@ -9,7 +10,7 @@ describe('ReplacedImageDiff', () => { let replacedImageDiff; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div id="element"> <div class="two-up"> <div class="js-image-frame"> @@ -36,6 +37,10 @@ describe('ReplacedImageDiff', () => { element = document.getElementById('element'); }); + afterEach(() => { + resetHTMLFixture(); + }); + function setupImageFrameEls() { replacedImageDiff.imageFrameEls = []; replacedImageDiff.imageFrameEls[viewTypes.TWO_UP] = element.querySelector( diff --git a/spec/frontend/issuable/issuable_form_spec.js b/spec/frontend/issuable/issuable_form_spec.js index 99ed18cf5bd..a1583076b41 100644 --- a/spec/frontend/issuable/issuable_form_spec.js +++ b/spec/frontend/issuable/issuable_form_spec.js @@ -1,5 +1,5 @@ import $ from 'jquery'; - +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import IssuableForm from '~/issuable/issuable_form'; import setWindowLocation from 'helpers/set_window_location_helper'; @@ -11,7 +11,7 @@ describe('IssuableForm', () => { }; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <form> <input name="[title]" /> </form> @@ -19,6 +19,10 @@ describe('IssuableForm', () => { createIssuable($('form')); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('initAutosave', () => { it('creates autosave with the searchTerm included', () => { setWindowLocation('https://gitlab.test/foo?bar=true'); @@ -28,7 +32,7 @@ describe('IssuableForm', () => { }); it("creates autosave fields without the searchTerm if it's an issue new form", () => { - setFixtures(` + setHTMLFixture(` <form data-new-issue-path="/issues/new"> <input name="[title]" /> </form> diff --git a/spec/frontend/issues/issue_spec.js b/spec/frontend/issues/issue_spec.js index b4f6118ec20..089ea8dbbad 100644 --- a/spec/frontend/issues/issue_spec.js +++ b/spec/frontend/issues/issue_spec.js @@ -1,5 +1,6 @@ import { getByText } from '@testing-library/dom'; import MockAdapter from 'axios-mock-adapter'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants'; import Issue from '~/issues/issue'; import axios from '~/lib/utils/axios_utils'; @@ -38,9 +39,9 @@ describe('Issue', () => { `('$desc', ({ isIssueInitiallyOpen, expectedCounterText }) => { beforeEach(() => { if (isIssueInitiallyOpen) { - loadFixtures('issues/open-issue.html'); + loadHTMLFixture('issues/open-issue.html'); } else { - loadFixtures('issues/closed-issue.html'); + loadHTMLFixture('issues/closed-issue.html'); } testContext.issueCounter = getIssueCounter(); @@ -50,6 +51,10 @@ describe('Issue', () => { testContext.issueCounter.textContent = '1,001'; }); + afterEach(() => { + resetHTMLFixture(); + }); + it(`has the proper visible status box when ${isIssueInitiallyOpen ? 'open' : 'closed'}`, () => { if (isIssueInitiallyOpen) { expect(testContext.statusBoxClosed).toHaveClass('hidden'); diff --git a/spec/frontend/issues/show/components/app_spec.js b/spec/frontend/issues/show/components/app_spec.js index 8a6dadee056..54ac7b21d0e 100644 --- a/spec/frontend/issues/show/components/app_spec.js +++ b/spec/frontend/issues/show/components/app_spec.js @@ -1,6 +1,7 @@ import { GlIntersectionObserver } from '@gitlab/ui'; import MockAdapter from 'axios-mock-adapter'; import { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import '~/behaviors/markdown/render_gfm'; @@ -70,7 +71,7 @@ describe('Issuable output', () => { }; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div> <title>Title</title> <div class="detail-page-description content-block"> @@ -105,6 +106,7 @@ describe('Issuable output', () => { realtimeRequestCount = 0; wrapper.vm.poll.stop(); wrapper.destroy(); + resetHTMLFixture(); }); it('should render a title/description/edited and update title/description/edited on update', () => { diff --git a/spec/frontend/issues/show/components/title_spec.js b/spec/frontend/issues/show/components/title_spec.js index 29b5353ef1c..7560b733ae6 100644 --- a/spec/frontend/issues/show/components/title_spec.js +++ b/spec/frontend/issues/show/components/title_spec.js @@ -1,4 +1,5 @@ import Vue, { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import titleComponent from '~/issues/show/components/title.vue'; import eventHub from '~/issues/show/event_hub'; import Store from '~/issues/show/stores'; @@ -6,7 +7,7 @@ import Store from '~/issues/show/stores'; describe('Title component', () => { let vm; beforeEach(() => { - setFixtures(`<title />`); + setHTMLFixture(`<title />`); const Component = Vue.extend(titleComponent); const store = new Store({ @@ -25,6 +26,10 @@ describe('Title component', () => { }).$mount(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('renders title HTML', () => { expect(vm.$el.querySelector('.title').innerHTML.trim()).toBe('Testing <img>'); }); diff --git a/spec/frontend/lib/utils/dom_utils_spec.js b/spec/frontend/lib/utils/dom_utils_spec.js index 766772cb521..88dac449527 100644 --- a/spec/frontend/lib/utils/dom_utils_spec.js +++ b/spec/frontend/lib/utils/dom_utils_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { addClassIfElementExists, canScrollUp, @@ -24,10 +25,14 @@ describe('DOM Utils', () => { let parentElement; beforeEach(() => { - setFixtures(fixture); + setHTMLFixture(fixture); parentElement = document.querySelector('.parent'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('adds class if element exists', () => { const childElement = parentElement.querySelector('.child'); @@ -127,10 +132,14 @@ describe('DOM Utils', () => { let element; beforeEach(() => { - setFixtures('<div data-foo-bar data-baz data-qux="">'); + setHTMLFixture('<div data-foo-bar data-baz data-qux="">'); element = document.querySelector('[data-foo-bar]'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('throws if not given an element', () => { expect(() => parseBooleanDataAttributes(null, ['baz'])).toThrow(); }); diff --git a/spec/frontend/lib/utils/file_upload_spec.js b/spec/frontend/lib/utils/file_upload_spec.js index ff11107ea60..f63af2fe0a4 100644 --- a/spec/frontend/lib/utils/file_upload_spec.js +++ b/spec/frontend/lib/utils/file_upload_spec.js @@ -1,8 +1,9 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import fileUpload, { getFilename, validateImageName } from '~/lib/utils/file_upload'; describe('File upload', () => { beforeEach(() => { - setFixtures(` + setHTMLFixture(` <form> <button class="js-button" type="button">Click me!</button> <input type="text" class="js-input" /> @@ -11,6 +12,10 @@ describe('File upload', () => { `); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('when there is a matching button and input', () => { beforeEach(() => { fileUpload('.js-button', '.js-input'); diff --git a/spec/frontend/lib/utils/navigation_utility_spec.js b/spec/frontend/lib/utils/navigation_utility_spec.js index 6a880a0f354..632a8904578 100644 --- a/spec/frontend/lib/utils/navigation_utility_spec.js +++ b/spec/frontend/lib/utils/navigation_utility_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import findAndFollowLink from '~/lib/utils/navigation_utility'; import * as navigationUtils from '~/lib/utils/navigation_utility'; import { visitUrl } from '~/lib/utils/url_utility'; @@ -8,11 +9,13 @@ describe('findAndFollowLink', () => { it('visits a link when the selector exists', () => { const href = '/some/path'; - setFixtures(`<a class="my-shortcut" href="${href}">link</a>`); + setHTMLFixture(`<a class="my-shortcut" href="${href}">link</a>`); findAndFollowLink('.my-shortcut'); expect(visitUrl).toHaveBeenCalledWith(href); + + resetHTMLFixture(); }); it('does not throw an exception when the selector does not exist', () => { diff --git a/spec/frontend/lib/utils/resize_observer_spec.js b/spec/frontend/lib/utils/resize_observer_spec.js index 6560562f204..c88ba73ebc6 100644 --- a/spec/frontend/lib/utils/resize_observer_spec.js +++ b/spec/frontend/lib/utils/resize_observer_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { contentTop } from '~/lib/utils/common_utils'; import { scrollToTargetOnResize } from '~/lib/utils/resize_observer'; @@ -19,7 +20,7 @@ describe('ResizeObserver Utility', () => { jest.spyOn(document.documentElement, 'scrollTo'); - setFixtures(`<div id="content-body"><div id="note_1234">note to scroll to</div></div>`); + setHTMLFixture(`<div id="content-body"><div id="note_1234">note to scroll to</div></div>`); const target = document.querySelector('#note_1234'); @@ -28,6 +29,7 @@ describe('ResizeObserver Utility', () => { afterEach(() => { contentTop.mockReset(); + resetHTMLFixture(); }); describe('Observer behavior', () => { diff --git a/spec/frontend/listbox/index_spec.js b/spec/frontend/listbox/index_spec.js index 45659a0e523..07c6cca535a 100644 --- a/spec/frontend/listbox/index_spec.js +++ b/spec/frontend/listbox/index_spec.js @@ -3,7 +3,7 @@ import { getAllByRole, getByRole } from '@testing-library/dom'; import { GlDropdown } from '@gitlab/ui'; import { createWrapper } from '@vue/test-utils'; import { initListbox, parseAttributes } from '~/listbox'; -import { getFixture, setHTMLFixture } from 'helpers/fixtures'; +import { getFixture, setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; jest.mock('~/lib/utils/url_utility'); @@ -63,6 +63,10 @@ describe('initListbox', () => { await nextTick(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('returns an instance', () => { expect(instance).not.toBe(null); }); diff --git a/spec/frontend/merge_request_spec.js b/spec/frontend/merge_request_spec.js index 9229b353685..bcf64204c7a 100644 --- a/spec/frontend/merge_request_spec.js +++ b/spec/frontend/merge_request_spec.js @@ -1,5 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { TEST_HOST } from 'spec/test_constants'; import waitForPromises from 'helpers/wait_for_promises'; import axios from '~/lib/utils/axios_utils'; @@ -11,7 +12,7 @@ describe('MergeRequest', () => { let mock; beforeEach(() => { - loadFixtures('merge_requests/merge_request_with_task_list.html'); + loadHTMLFixture('merge_requests/merge_request_with_task_list.html'); jest.spyOn(axios, 'patch'); mock = new MockAdapter(axios); @@ -26,6 +27,7 @@ describe('MergeRequest', () => { afterEach(() => { mock.restore(); + resetHTMLFixture(); }); it('modifies the Markdown field', async () => { @@ -103,7 +105,7 @@ describe('MergeRequest', () => { describe('hideCloseButton', () => { describe('merge request of current_user', () => { beforeEach(() => { - loadFixtures('merge_requests/merge_request_of_current_user.html'); + loadHTMLFixture('merge_requests/merge_request_of_current_user.html'); test.el = document.querySelector('.js-issuable-actions'); MergeRequest.hideCloseButton(); }); diff --git a/spec/frontend/merge_request_tabs_spec.js b/spec/frontend/merge_request_tabs_spec.js index 5c24a070342..ccbc61ea658 100644 --- a/spec/frontend/merge_request_tabs_spec.js +++ b/spec/frontend/merge_request_tabs_spec.js @@ -1,5 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initMrPage from 'helpers/init_vue_mr_page_helper'; import axios from '~/lib/utils/axios_utils'; import MergeRequestTabs from '~/merge_request_tabs'; @@ -79,7 +80,7 @@ describe('MergeRequestTabs', () => { let tabUrl; beforeEach(() => { - loadFixtures('merge_requests/merge_request_with_task_list.html'); + loadHTMLFixture('merge_requests/merge_request_with_task_list.html'); tabUrl = $('.commits-tab a').attr('href'); @@ -97,6 +98,10 @@ describe('MergeRequestTabs', () => { }; }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('meta click', () => { let metakeyEvent; diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js index 7bd062b81f1..1f9eb03b5d4 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js @@ -65,6 +65,7 @@ describe('Dashboard Panel', () => { }, store, mocks, + provide: { glFeatures: { monitorLogging: true } }, ...options, }); }; @@ -379,6 +380,21 @@ describe('Dashboard Panel', () => { expect(findViewLogsLink().attributes('href')).toMatch(mockLogsHref); }); + describe(':monitor_logging feature flag', () => { + it.each` + flagState | logsState | expected + ${true} | ${'shows'} | ${true} + ${false} | ${'hides'} | ${false} + `('$logsState logs when flag state is $flagState', async ({ flagState, expected }) => { + createWrapper({}, { provide: { glFeatures: { monitorLogging: flagState } } }); + state.logsPath = mockLogsPath; + state.timeRange = mockTimeRange; + await nextTick(); + + expect(findViewLogsLink().exists()).toBe(expected); + }); + }); + it('it is overridden when a datazoom event is received', async () => { state.logsPath = mockLogsPath; state.timeRange = mockTimeRange; @@ -488,15 +504,7 @@ describe('Dashboard Panel', () => { store.registerModule(mockNamespace, monitoringDashboard); store.state.embedGroup.modules.push(mockNamespace); - wrapper = shallowMount(DashboardPanel, { - propsData: { - graphData, - settingsPath: dashboardProps.settingsPath, - namespace: mockNamespace, - }, - store, - mocks, - }); + createWrapper({ namespace: mockNamespace }); }); it('handles namespaced time range and logs path state', async () => { diff --git a/spec/frontend/new_branch_spec.js b/spec/frontend/new_branch_spec.js index 66b28a8c0dc..e4f4b3fa5b5 100644 --- a/spec/frontend/new_branch_spec.js +++ b/spec/frontend/new_branch_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import NewBranchForm from '~/new_branch_form'; describe('Branch', () => { @@ -18,11 +19,15 @@ describe('Branch', () => { } beforeEach(() => { - loadFixtures('branches/new_branch.html'); + loadHTMLFixture('branches/new_branch.html'); $('form').on('submit', (e) => e.preventDefault()); testContext.form = new NewBranchForm($('.js-create-branch-form'), []); }); + afterEach(() => { + resetHTMLFixture(); + }); + it("can't start with a dot", () => { fillNameWith('.foo'); expectToHaveError("can't start with '.'"); diff --git a/spec/frontend/notes/components/discussion_counter_spec.js b/spec/frontend/notes/components/discussion_counter_spec.js index a856d002d2e..b83e3b1b715 100644 --- a/spec/frontend/notes/components/discussion_counter_spec.js +++ b/spec/frontend/notes/components/discussion_counter_spec.js @@ -45,7 +45,7 @@ describe('DiscussionCounter component', () => { describe('has no discussions', () => { it('does not render', () => { - wrapper = shallowMount(DiscussionCounter, { store }); + wrapper = shallowMount(DiscussionCounter, { store, propsData: { blocksMerge: true } }); expect(wrapper.find({ ref: 'discussionCounter' }).exists()).toBe(false); }); @@ -55,7 +55,7 @@ describe('DiscussionCounter component', () => { it('does not render', () => { store.commit(types.ADD_OR_UPDATE_DISCUSSIONS, [{ ...discussionMock, resolvable: false }]); store.dispatch('updateResolvableDiscussionsCounts'); - wrapper = shallowMount(DiscussionCounter, { store }); + wrapper = shallowMount(DiscussionCounter, { store, propsData: { blocksMerge: true } }); expect(wrapper.find({ ref: 'discussionCounter' }).exists()).toBe(false); }); @@ -75,20 +75,33 @@ describe('DiscussionCounter component', () => { it('renders', () => { updateStore(); - wrapper = shallowMount(DiscussionCounter, { store }); + wrapper = shallowMount(DiscussionCounter, { store, propsData: { blocksMerge: true } }); expect(wrapper.find({ ref: 'discussionCounter' }).exists()).toBe(true); }); it.each` - title | resolved | isActive | groupLength - ${'not allResolved'} | ${false} | ${false} | ${3} - ${'allResolved'} | ${true} | ${true} | ${1} - `('renders correctly if $title', ({ resolved, isActive, groupLength }) => { + blocksMerge | color + ${true} | ${'gl-bg-orange-50'} + ${false} | ${'gl-bg-gray-50'} + `( + 'changes background color to $color if blocksMerge is $blocksMerge', + ({ blocksMerge, color }) => { + updateStore(); + wrapper = shallowMount(DiscussionCounter, { store, propsData: { blocksMerge } }); + + expect(wrapper.find('[data-testid="discussions-counter-text"]').classes()).toContain(color); + }, + ); + + it.each` + title | resolved | groupLength + ${'not allResolved'} | ${false} | ${4} + ${'allResolved'} | ${true} | ${1} + `('renders correctly if $title', ({ resolved, groupLength }) => { updateStore({ resolvable: true, resolved }); - wrapper = shallowMount(DiscussionCounter, { store }); + wrapper = shallowMount(DiscussionCounter, { store, propsData: { blocksMerge: true } }); - expect(wrapper.find(`.is-active`).exists()).toBe(isActive); expect(wrapper.findAll(GlButton)).toHaveLength(groupLength); }); }); @@ -99,7 +112,7 @@ describe('DiscussionCounter component', () => { const discussion = { ...discussionMock, expanded }; store.commit(types.ADD_OR_UPDATE_DISCUSSIONS, [discussion]); store.dispatch('updateResolvableDiscussionsCounts'); - wrapper = shallowMount(DiscussionCounter, { store }); + wrapper = shallowMount(DiscussionCounter, { store, propsData: { blocksMerge: true } }); toggleAllButton = wrapper.find('.toggle-all-discussions-btn'); }; @@ -117,26 +130,26 @@ describe('DiscussionCounter component', () => { updateStoreWithExpanded(true); expect(wrapper.vm.allExpanded).toBe(true); - expect(toggleAllButton.props('icon')).toBe('angle-up'); + expect(toggleAllButton.props('icon')).toBe('collapse'); toggleAllButton.vm.$emit('click'); await nextTick(); expect(wrapper.vm.allExpanded).toBe(false); - expect(toggleAllButton.props('icon')).toBe('angle-down'); + expect(toggleAllButton.props('icon')).toBe('expand'); }); it('expands all discussions if collapsed', async () => { updateStoreWithExpanded(false); expect(wrapper.vm.allExpanded).toBe(false); - expect(toggleAllButton.props('icon')).toBe('angle-down'); + expect(toggleAllButton.props('icon')).toBe('expand'); toggleAllButton.vm.$emit('click'); await nextTick(); expect(wrapper.vm.allExpanded).toBe(true); - expect(toggleAllButton.props('icon')).toBe('angle-up'); + expect(toggleAllButton.props('icon')).toBe('collapse'); }); }); }); diff --git a/spec/frontend/notes/components/notes_app_spec.js b/spec/frontend/notes/components/notes_app_spec.js index e227af88d3f..413ee815906 100644 --- a/spec/frontend/notes/components/notes_app_spec.js +++ b/spec/frontend/notes/components/notes_app_spec.js @@ -2,6 +2,7 @@ import { mount, shallowMount } from '@vue/test-utils'; import AxiosMockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; import { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import setWindowLocation from 'helpers/set_window_location_helper'; import { setTestTimeout } from 'helpers/timeout'; import waitForPromises from 'helpers/wait_for_promises'; @@ -92,13 +93,17 @@ describe('note_app', () => { describe('set data', () => { beforeEach(() => { - setFixtures('<div class="js-discussions-count"></div>'); + setHTMLFixture('<div class="js-discussions-count"></div>'); axiosMock.onAny().reply(200, []); wrapper = mountComponent(); return waitForDiscussionsRequest(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should set notes data', () => { expect(store.state.notesData).toEqual(mockData.notesDataMock); }); @@ -122,13 +127,17 @@ describe('note_app', () => { describe('render', () => { beforeEach(() => { - setFixtures('<div class="js-discussions-count"></div>'); + setHTMLFixture('<div class="js-discussions-count"></div>'); axiosMock.onAny().reply(mockData.getIndividualNoteResponse); wrapper = mountComponent(); return waitForDiscussionsRequest(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should render list of notes', () => { const note = mockData.INDIVIDUAL_NOTE_RESPONSE_MAP.GET[ @@ -160,7 +169,7 @@ describe('note_app', () => { describe('render with comments disabled', () => { beforeEach(() => { - setFixtures('<div class="js-discussions-count"></div>'); + setHTMLFixture('<div class="js-discussions-count"></div>'); axiosMock.onAny().reply(mockData.getIndividualNoteResponse); store.state.commentsDisabled = true; @@ -168,6 +177,10 @@ describe('note_app', () => { return waitForDiscussionsRequest(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should not render form when commenting is disabled', () => { expect(wrapper.find('.js-main-target-form').exists()).toBe(false); }); @@ -179,7 +192,7 @@ describe('note_app', () => { describe('timeline view', () => { beforeEach(() => { - setFixtures('<div class="js-discussions-count"></div>'); + setHTMLFixture('<div class="js-discussions-count"></div>'); axiosMock.onAny().reply(mockData.getIndividualNoteResponse); store.state.commentsDisabled = false; @@ -189,6 +202,10 @@ describe('note_app', () => { return waitForDiscussionsRequest(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should not render comments form', () => { expect(wrapper.find('.js-main-target-form').exists()).toBe(false); }); @@ -196,12 +213,15 @@ describe('note_app', () => { describe('while fetching data', () => { beforeEach(() => { - setFixtures('<div class="js-discussions-count"></div>'); + setHTMLFixture('<div class="js-discussions-count"></div>'); axiosMock.onAny().reply(200, []); wrapper = mountComponent(); }); - afterEach(() => waitForDiscussionsRequest()); + afterEach(() => { + waitForDiscussionsRequest(); + resetHTMLFixture(); + }); it('renders skeleton notes', () => { expect(wrapper.find('.animation-container').exists()).toBe(true); diff --git a/spec/frontend/notes/deprecated_notes_spec.js b/spec/frontend/notes/deprecated_notes_spec.js index 7193475c96a..40b124b9029 100644 --- a/spec/frontend/notes/deprecated_notes_spec.js +++ b/spec/frontend/notes/deprecated_notes_spec.js @@ -3,6 +3,7 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; import '~/behaviors/markdown/render_gfm'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { createSpyObj } from 'helpers/jest_helpers'; import { TEST_HOST } from 'helpers/test_constants'; import waitForPromises from 'helpers/wait_for_promises'; @@ -33,7 +34,7 @@ gl.utils.disableButtonIfEmptyField = () => {}; // eslint-disable-next-line jest/no-disabled-tests describe.skip('Old Notes (~/deprecated_notes.js)', () => { beforeEach(() => { - loadFixtures(fixture); + loadHTMLFixture(fixture); // Re-declare this here so that test_setup.js#beforeEach() doesn't // overwrite it. @@ -50,12 +51,14 @@ describe.skip('Old Notes (~/deprecated_notes.js)', () => { setTestTimeoutOnce(4000); }); - afterEach(() => { + afterEach(async () => { // The Notes component sets a polling interval. Clear it after every run. // Make sure to use jest.runOnlyPendingTimers() instead of runAllTimers(). jest.clearAllTimers(); - return axios.waitForAll().finally(() => mockAxios.restore()); + await axios.waitForAll().finally(() => mockAxios.restore()); + + resetHTMLFixture(); }); it('loads the Notes class into the DOM', () => { @@ -629,7 +632,7 @@ describe.skip('Old Notes (~/deprecated_notes.js)', () => { let $notesContainer; beforeEach(() => { - loadFixtures('commit/show.html'); + loadHTMLFixture('commit/show.html'); mockAxios.onPost(NOTES_POST_PATH).reply(200, note); new Notes('', []); diff --git a/spec/frontend/notes/stores/actions_spec.js b/spec/frontend/notes/stores/actions_spec.js index 75e7756cd6b..75a53c61ee6 100644 --- a/spec/frontend/notes/stores/actions_spec.js +++ b/spec/frontend/notes/stores/actions_spec.js @@ -1,4 +1,5 @@ import AxiosMockAdapter from 'axios-mock-adapter'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import testAction from 'helpers/vuex_action_helper'; import { TEST_HOST } from 'spec/test_constants'; import Api from '~/api'; @@ -51,7 +52,7 @@ describe('Actions Notes Store', () => { axiosMock = new AxiosMockAdapter(axios); // This is necessary as we query Close issue button at the top of issue page when clicking bottom button - setFixtures( + setHTMLFixture( '<div class="detail-page-header-actions"><button class="btn-close btn-grouped"></button></div>', ); }); @@ -59,6 +60,7 @@ describe('Actions Notes Store', () => { afterEach(() => { resetStore(store); axiosMock.restore(); + resetHTMLFixture(); }); describe('setNotesData', () => { diff --git a/spec/frontend/oauth_remember_me_spec.js b/spec/frontend/oauth_remember_me_spec.js index 3187cbf6547..1fa0e0aa8f6 100644 --- a/spec/frontend/oauth_remember_me_spec.js +++ b/spec/frontend/oauth_remember_me_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import OAuthRememberMe from '~/pages/sessions/new/oauth_remember_me'; describe('OAuthRememberMe', () => { @@ -7,11 +8,15 @@ describe('OAuthRememberMe', () => { }; beforeEach(() => { - loadFixtures('static/oauth_remember_me.html'); + loadHTMLFixture('static/oauth_remember_me.html'); new OAuthRememberMe({ container: $('#oauth-container') }).bindEvents(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('adds the "remember_me" query parameter to all OAuth login buttons', () => { $('#oauth-container #remember_me').click(); diff --git a/spec/frontend/pager_spec.js b/spec/frontend/pager_spec.js index 9df69124d66..dfb3e87a342 100644 --- a/spec/frontend/pager_spec.js +++ b/spec/frontend/pager_spec.js @@ -1,5 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { TEST_HOST } from 'helpers/test_constants'; import waitForPromises from 'helpers/wait_for_promises'; import axios from '~/lib/utils/axios_utils'; @@ -26,12 +27,14 @@ describe('pager', () => { const originalHref = window.location.href; beforeEach(() => { - setFixtures('<div class="content_list"></div><div class="loading"></div>'); + setHTMLFixture('<div class="content_list"></div><div class="loading"></div>'); jest.spyOn($.fn, 'endlessScroll').mockImplementation(); }); afterEach(() => { window.history.replaceState({}, null, originalHref); + + resetHTMLFixture(); }); it('should get initial offset from query parameter', () => { @@ -57,7 +60,7 @@ describe('pager', () => { } beforeEach(() => { - setFixtures( + setHTMLFixture( '<div class="content_list" data-href="/some_list"></div><div class="loading"></div>', ); jest.spyOn(axios, 'get'); @@ -65,6 +68,10 @@ describe('pager', () => { Pager.init(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('shows loader while loading next page', async () => { mockSuccess(); @@ -135,7 +142,11 @@ describe('pager', () => { const href = `${TEST_HOST}/some_list.json`; beforeEach(() => { - setFixtures(`<div class="content_list" data-href="${href}"></div>`); + setHTMLFixture(`<div class="content_list" data-href="${href}"></div>`); + }); + + afterEach(() => { + resetHTMLFixture(); }); it('should use data-href attribute', () => { @@ -154,7 +165,11 @@ describe('pager', () => { describe('no data-href attribute attribute provided from list element', () => { beforeEach(() => { - setFixtures(`<div class="content_list"></div>`); + setHTMLFixture(`<div class="content_list"></div>`); + }); + + afterEach(() => { + resetHTMLFixture(); }); it('should use current url', () => { @@ -190,7 +205,7 @@ describe('pager', () => { describe('when `container` is visible', () => { it('makes API request', () => { - setFixtures( + setHTMLFixture( `<div id="js-pager"><div class="content_list" data-href="${href}"></div></div>`, ); @@ -199,12 +214,14 @@ describe('pager', () => { endlessScrollCallback(); expect(axios.get).toHaveBeenCalledWith(href, expect.any(Object)); + + resetHTMLFixture(); }); }); describe('when `container` is not visible', () => { it('does not make API request', () => { - setFixtures( + setHTMLFixture( `<div id="js-pager" style="display: none;"><div class="content_list" data-href="${href}"></div></div>`, ); @@ -213,6 +230,8 @@ describe('pager', () => { endlessScrollCallback(); expect(axios.get).not.toHaveBeenCalled(); + + resetHTMLFixture(); }); }); }); diff --git a/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js b/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js index 71c9da238b4..6edfe9641b9 100644 --- a/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js +++ b/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import '~/lib/utils/text_utility'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import AbuseReports from '~/pages/admin/abuse_reports/abuse_reports'; describe('Abuse Reports', () => { @@ -15,11 +15,15 @@ describe('Abuse Reports', () => { $messages.filter((index, element) => element.innerText.indexOf(searchText) > -1).first(); beforeEach(() => { - loadFixtures(FIXTURE); + loadHTMLFixture(FIXTURE); new AbuseReports(); // eslint-disable-line no-new $messages = $('.abuse-reports .message'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should truncate long messages', () => { const $longMessage = findMessage('LONG MESSAGE'); diff --git a/spec/frontend/pages/admin/application_settings/account_and_limits_spec.js b/spec/frontend/pages/admin/application_settings/account_and_limits_spec.js index 3a4f93d4464..542eb2f3ab8 100644 --- a/spec/frontend/pages/admin/application_settings/account_and_limits_spec.js +++ b/spec/frontend/pages/admin/application_settings/account_and_limits_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initUserInternalRegexPlaceholder, { PLACEHOLDER_USER_EXTERNAL_DEFAULT_FALSE, PLACEHOLDER_USER_EXTERNAL_DEFAULT_TRUE, @@ -10,12 +11,16 @@ describe('AccountAndLimits', () => { let $userInternalRegex; beforeEach(() => { - loadFixtures(FIXTURE); + loadHTMLFixture(FIXTURE); initUserInternalRegexPlaceholder(); $userDefaultExternal = $('#application_setting_user_default_external'); $userInternalRegex = document.querySelector('#application_setting_user_default_internal_regex'); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('Changing of userInternalRegex when userDefaultExternal', () => { it('is unchecked', () => { expect($userDefaultExternal.prop('checked')).toBeFalsy(); diff --git a/spec/frontend/pages/admin/application_settings/metrics_and_profiling/usage_statistics_spec.js b/spec/frontend/pages/admin/application_settings/metrics_and_profiling/usage_statistics_spec.js index 4140b985682..3a52c243867 100644 --- a/spec/frontend/pages/admin/application_settings/metrics_and_profiling/usage_statistics_spec.js +++ b/spec/frontend/pages/admin/application_settings/metrics_and_profiling/usage_statistics_spec.js @@ -2,6 +2,7 @@ import initSetHelperText, { HELPER_TEXT_SERVICE_PING_DISABLED, HELPER_TEXT_SERVICE_PING_ENABLED, } from '~/pages/admin/application_settings/metrics_and_profiling/usage_statistics'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; describe('UsageStatistics', () => { const FIXTURE = 'application_settings/usage.html'; @@ -11,7 +12,7 @@ describe('UsageStatistics', () => { let servicePingFeaturesHelperText; beforeEach(() => { - loadFixtures(FIXTURE); + loadHTMLFixture(FIXTURE); initSetHelperText(); servicePingCheckBox = document.getElementById('application_setting_usage_ping_enabled'); servicePingFeaturesCheckBox = document.getElementById( @@ -21,6 +22,10 @@ describe('UsageStatistics', () => { servicePingFeaturesHelperText = document.getElementById('service_ping_features_helper_text'); }); + afterEach(() => { + resetHTMLFixture(); + }); + const expectEnabledservicePingFeaturesCheckBox = () => { expect(servicePingFeaturesCheckBox.classList.contains('gl-cursor-not-allowed')).toBe(false); expect(servicePingFeaturesHelperText.textContent).toEqual(HELPER_TEXT_SERVICE_PING_ENABLED); diff --git a/spec/frontend/pages/admin/projects/components/namespace_select_spec.js b/spec/frontend/pages/admin/projects/components/namespace_select_spec.js index f10b202f4d7..909349569a8 100644 --- a/spec/frontend/pages/admin/projects/components/namespace_select_spec.js +++ b/spec/frontend/pages/admin/projects/components/namespace_select_spec.js @@ -1,5 +1,6 @@ import { mount } from '@vue/test-utils'; import { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import Api from '~/api'; import NamespaceSelect from '~/pages/admin/projects/components/namespace_select.vue'; @@ -26,7 +27,7 @@ describe('Dropdown select component', () => { }; beforeEach(() => { - setFixtures('<div class="test-container"></div>'); + setHTMLFixture('<div class="test-container"></div>'); jest.spyOn(Api, 'namespaces').mockImplementation((_, callback) => callback([ @@ -36,6 +37,10 @@ describe('Dropdown select component', () => { ); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('creates a hidden input if fieldName is provided', () => { mountDropdown({ fieldName: 'namespace-input' }); diff --git a/spec/frontend/pages/dashboard/todos/index/todos_spec.js b/spec/frontend/pages/dashboard/todos/index/todos_spec.js index ae53afa7fba..3a9b59f291c 100644 --- a/spec/frontend/pages/dashboard/todos/index/todos_spec.js +++ b/spec/frontend/pages/dashboard/todos/index/todos_spec.js @@ -1,5 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import waitForPromises from 'helpers/wait_for_promises'; import '~/lib/utils/common_utils'; import axios from '~/lib/utils/axios_utils'; @@ -19,7 +20,7 @@ describe('Todos', () => { let mock; beforeEach(() => { - loadFixtures('todos/todos.html'); + loadHTMLFixture('todos/todos.html'); todoItem = document.querySelector('.todos-list .todo'); mock = new MockAdapter(axios); @@ -27,6 +28,10 @@ describe('Todos', () => { }); afterEach(() => { + resetHTMLFixture(); + }); + + afterEach(() => { mock.restore(); }); diff --git a/spec/frontend/pages/projects/merge_requests/edit/check_form_state_spec.js b/spec/frontend/pages/projects/merge_requests/edit/check_form_state_spec.js index ea49111760b..5c186441817 100644 --- a/spec/frontend/pages/projects/merge_requests/edit/check_form_state_spec.js +++ b/spec/frontend/pages/projects/merge_requests/edit/check_form_state_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'jest/__helpers__/fixtures'; import initCheckFormState from '~/pages/projects/merge_requests/edit/check_form_state'; describe('Check form state', () => { @@ -7,7 +8,7 @@ describe('Check form state', () => { let setDialogContent; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <form class="merge-request-form"> <input type="text" name="test" id="form-input"/> </form>`); @@ -22,6 +23,8 @@ describe('Check form state', () => { afterEach(() => { beforeUnloadEvent.preventDefault.mockRestore(); setDialogContent.mockRestore(); + + resetHTMLFixture(); }); it('shows confirmation dialog when there are unsaved changes', () => { diff --git a/spec/frontend/pages/projects/pages_domains/form_spec.js b/spec/frontend/pages/projects/pages_domains/form_spec.js index 55336596f30..e437121acd2 100644 --- a/spec/frontend/pages/projects/pages_domains/form_spec.js +++ b/spec/frontend/pages/projects/pages_domains/form_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initForm from '~/pages/projects/pages_domains/form'; const ENABLED_UNLESS_AUTO_SSL_CLASS = 'js-enabled-unless-auto-ssl'; @@ -17,7 +18,7 @@ describe('Page domains form', () => { const findUnlessAutoSsl = () => document.querySelector(`.${SHOW_UNLESS_AUTO_SSL_CLASS}`); const create = () => { - setFixtures(` + setHTMLFixture(` <form> <span class="${SSL_TOGGLE_CLASS}" @@ -31,6 +32,10 @@ describe('Page domains form', () => { `); }; + afterEach(() => { + resetHTMLFixture(); + }); + it('instantiates the toggle', () => { create(); initForm(); diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js index b700c255e8c..42eeff89bf4 100644 --- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js +++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import TimezoneDropdown, { formatUtcOffset, formatTimezone, @@ -25,13 +26,17 @@ describe('Timezone Dropdown', () => { describe('Initialize', () => { describe('with dropdown already loaded', () => { beforeEach(() => { - loadFixtures('pipeline_schedules/edit.html'); + loadHTMLFixture('pipeline_schedules/edit.html'); $wrapper = $('.dropdown'); $inputEl = $('#schedule_cron_timezone'); $inputEl.val(''); $dropdownEl = $('.js-timezone-dropdown'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('can take an $inputEl in the constructor', () => { initTimezoneDropdown(); @@ -86,7 +91,7 @@ describe('Timezone Dropdown', () => { describe('without dropdown loaded', () => { beforeEach(() => { - loadFixtures('pipeline_schedules/edit.html'); + loadHTMLFixture('pipeline_schedules/edit.html'); $wrapper = $('.dropdown'); $inputEl = $('#schedule_cron_timezone'); $dropdownEl = $('.js-timezone-dropdown'); diff --git a/spec/frontend/pages/search/show/refresh_counts_spec.js b/spec/frontend/pages/search/show/refresh_counts_spec.js index 81c9bf74308..6f14f0c70bd 100644 --- a/spec/frontend/pages/search/show/refresh_counts_spec.js +++ b/spec/frontend/pages/search/show/refresh_counts_spec.js @@ -1,4 +1,5 @@ import MockAdapter from 'axios-mock-adapter'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { TEST_HOST } from 'helpers/test_constants'; import axios from '~/lib/utils/axios_utils'; import refreshCounts from '~/pages/search/show/refresh_counts'; @@ -18,7 +19,11 @@ describe('pages/search/show/refresh_counts', () => { beforeEach(() => { mock = new MockAdapter(axios); - setFixtures(fixture); + setHTMLFixture(fixture); + }); + + afterEach(() => { + resetHTMLFixture(); }); afterEach(() => { diff --git a/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js b/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js index a29db961452..4c4a0fbea11 100644 --- a/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js +++ b/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import preserveUrlFragment from '~/pages/sessions/new/preserve_url_fragment'; describe('preserve_url_fragment', () => { @@ -7,7 +8,11 @@ describe('preserve_url_fragment', () => { }; beforeEach(() => { - loadFixtures('sessions/new.html'); + loadHTMLFixture('sessions/new.html'); + }); + + afterEach(() => { + resetHTMLFixture(); }); it('adds the url fragment to the login form actions', () => { diff --git a/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js b/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js index 601fcfedbe0..f736ce46f9b 100644 --- a/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js +++ b/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js @@ -1,3 +1,4 @@ +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { useLocalStorageSpy } from 'helpers/local_storage_helper'; import AccessorUtilities from '~/lib/utils/accessor'; import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer'; @@ -19,11 +20,15 @@ describe('SigninTabsMemoizer', () => { } beforeEach(() => { - loadFixtures(fixtureTemplate); + loadHTMLFixture(fixtureTemplate); jest.spyOn(AccessorUtilities, 'canUseLocalStorage').mockReturnValue(true); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('does nothing if no tab was previously selected', () => { createMemoizer(); diff --git a/spec/frontend/performance_bar/index_spec.js b/spec/frontend/performance_bar/index_spec.js index 91cb46002be..6c1cbfa70a1 100644 --- a/spec/frontend/performance_bar/index_spec.js +++ b/spec/frontend/performance_bar/index_spec.js @@ -1,4 +1,5 @@ import MockAdapter from 'axios-mock-adapter'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import axios from '~/lib/utils/axios_utils'; import '~/performance_bar/components/performance_bar_app.vue'; import performanceBar from '~/performance_bar'; @@ -11,7 +12,7 @@ describe('performance bar wrapper', () => { let vm; beforeEach(() => { - setFixtures('<div id="js-peek"></div>'); + setHTMLFixture('<div id="js-peek"></div>'); const peekWrapper = document.getElementById('js-peek'); performance.getEntriesByType = jest.fn().mockReturnValue([]); @@ -49,6 +50,7 @@ describe('performance bar wrapper', () => { vm.$destroy(); document.getElementById('js-peek').remove(); mock.restore(); + resetHTMLFixture(); }); describe('addRequest', () => { diff --git a/spec/frontend/pipelines/components/pipeline_tabs_spec.js b/spec/frontend/pipelines/components/pipeline_tabs_spec.js index b0203db70de..89002ee47a8 100644 --- a/spec/frontend/pipelines/components/pipeline_tabs_spec.js +++ b/spec/frontend/pipelines/components/pipeline_tabs_spec.js @@ -33,9 +33,7 @@ describe('The Pipeline Tabs', () => { ...defaultProvide, }, stubs: { - Dag: { template: '<div id="dag"/>' }, JobsApp: { template: '<div class="jobs" />' }, - PipelineGraph: { template: '<div id="graph" />' }, TestReports: { template: '<div id="tests" />' }, }, }), diff --git a/spec/frontend/pipelines/graph_shared/links_inner_spec.js b/spec/frontend/pipelines/graph_shared/links_inner_spec.js index be422fac92c..2c6d126e12c 100644 --- a/spec/frontend/pipelines/graph_shared/links_inner_spec.js +++ b/spec/frontend/pipelines/graph_shared/links_inner_spec.js @@ -1,5 +1,5 @@ import { shallowMount } from '@vue/test-utils'; -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import LinksInner from '~/pipelines/components/graph_shared/links_inner.vue'; import { parseData } from '~/pipelines/components/parsing_utils'; import { createJobsHash } from '~/pipelines/utils'; @@ -42,7 +42,7 @@ describe('Links Inner component', () => { // We create fixture so that each job has an empty div that represent // the JobPill in the DOM. Each `JobPill` would have different coordinates, // so we increment their coordinates on each iteration to simulate different positions. - const setFixtures = ({ stages }) => { + const setHTMLFixtureLocal = ({ stages }) => { const jobs = createJobsHash(stages); const arrayOfJobs = Object.keys(jobs); @@ -82,6 +82,7 @@ describe('Links Inner component', () => { afterEach(() => { jest.restoreAllMocks(); wrapper.destroy(); + resetHTMLFixture(); }); describe('basic SVG creation', () => { @@ -124,7 +125,7 @@ describe('Links Inner component', () => { describe('with one need', () => { beforeEach(() => { - setFixtures(pipelineData); + setHTMLFixtureLocal(pipelineData); createComponent({ pipelineData: pipelineData.stages }); }); @@ -143,7 +144,7 @@ describe('Links Inner component', () => { describe('with a parallel need', () => { beforeEach(() => { - setFixtures(parallelNeedData); + setHTMLFixtureLocal(parallelNeedData); createComponent({ pipelineData: parallelNeedData.stages }); }); @@ -162,7 +163,7 @@ describe('Links Inner component', () => { describe('with same stage needs', () => { beforeEach(() => { - setFixtures(sameStageNeeds); + setHTMLFixtureLocal(sameStageNeeds); createComponent({ pipelineData: sameStageNeeds.stages }); }); @@ -181,7 +182,7 @@ describe('Links Inner component', () => { describe('with a large number of needs', () => { beforeEach(() => { - setFixtures(largePipelineData); + setHTMLFixtureLocal(largePipelineData); createComponent({ pipelineData: largePipelineData.stages }); }); @@ -200,7 +201,7 @@ describe('Links Inner component', () => { describe('interactions', () => { beforeEach(() => { - setFixtures(largePipelineData); + setHTMLFixtureLocal(largePipelineData); createComponent({ pipelineData: largePipelineData.stages }); }); diff --git a/spec/frontend/project_select_combo_button_spec.js b/spec/frontend/project_select_combo_button_spec.js index 1f762d359ea..b8d5a1a61f3 100644 --- a/spec/frontend/project_select_combo_button_spec.js +++ b/spec/frontend/project_select_combo_button_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import ProjectSelectComboButton from '~/project_select_combo_button'; const fixturePath = 'static/project_select_combo_button.html'; @@ -31,12 +32,16 @@ describe('Project Select Combo Button', () => { relativePath: 'issues/new', }; - loadFixtures(fixturePath); + loadHTMLFixture(fixturePath); testContext.newItemBtn = document.querySelector('.js-new-project-item-link'); testContext.projectSelectInput = document.querySelector('.project-item-select'); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('on page load when localStorage is empty', () => { beforeEach(() => { testContext.comboButton = new ProjectSelectComboButton(testContext.projectSelectInput); diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js index 4e567ab030e..d11090cba8a 100644 --- a/spec/frontend/projects/commits/components/author_select_spec.js +++ b/spec/frontend/projects/commits/components/author_select_spec.js @@ -2,6 +2,7 @@ import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem import { shallowMount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import * as urlUtility from '~/lib/utils/url_utility'; import AuthorSelect from '~/projects/commits/components/author_select.vue'; import { createStore } from '~/projects/commits/store'; @@ -30,7 +31,7 @@ describe('Author Select', () => { let wrapper; const createComponent = () => { - setFixtures(` + setHTMLFixture(` <div class="js-project-commits-show"> <input id="commits-search" type="text" /> <div id="commits-list"></div> @@ -54,6 +55,7 @@ describe('Author Select', () => { afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); const findDropdownContainer = () => wrapper.find({ ref: 'dropdownContainer' }); diff --git a/spec/frontend/projects/new/components/deployment_target_select_spec.js b/spec/frontend/projects/new/components/deployment_target_select_spec.js index 1c443879dc3..f3b22d4a1b9 100644 --- a/spec/frontend/projects/new/components/deployment_target_select_spec.js +++ b/spec/frontend/projects/new/components/deployment_target_select_spec.js @@ -1,6 +1,7 @@ import { GlFormGroup, GlFormSelect, GlFormText, GlLink, GlSprintf } from '@gitlab/ui'; import { nextTick } from 'vue'; import { shallowMount } from '@vue/test-utils'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { mockTracking } from 'helpers/tracking_helper'; import DeploymentTargetSelect from '~/projects/new/components/deployment_target_select.vue'; import { @@ -32,7 +33,7 @@ describe('Deployment target select', () => { }; const createForm = () => { - setFixtures(` + setHTMLFixture(` <form id="${NEW_PROJECT_FORM}"> </form> `); @@ -47,6 +48,7 @@ describe('Deployment target select', () => { afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); it('renders the correct label', () => { diff --git a/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js b/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js index 31ddbc80ae4..42259a5c392 100644 --- a/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js +++ b/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js @@ -1,5 +1,6 @@ import { GlPopover, GlFormInputGroup } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import NewProjectPushTipPopover from '~/projects/new/components/new_project_push_tip_popover.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; @@ -31,12 +32,13 @@ describe('New project push tip popover', () => { }; beforeEach(() => { - setFixtures(`<a id="${targetId}"></a>`); + setHTMLFixture(`<a id="${targetId}"></a>`); buildWrapper(); }); afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); it('renders popover that targets the specified target', () => { diff --git a/spec/frontend/projects/project_import_gitlab_project_spec.js b/spec/frontend/projects/project_import_gitlab_project_spec.js index aaf8a81f626..76621ba9c06 100644 --- a/spec/frontend/projects/project_import_gitlab_project_spec.js +++ b/spec/frontend/projects/project_import_gitlab_project_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import projectImportGitlab from '~/projects/project_import_gitlab_project'; describe('Import Gitlab project', () => { @@ -7,7 +8,7 @@ describe('Import Gitlab project', () => { const setTestFixtures = (url) => { window.history.pushState({}, null, url); - setFixtures(` + setHTMLFixture(` <input class="js-path-name" /> <input class="js-project-name" /> `); @@ -21,6 +22,7 @@ describe('Import Gitlab project', () => { afterEach(() => { window.history.pushState({}, null, ''); + resetHTMLFixture(); }); describe('project name', () => { diff --git a/spec/frontend/projects/project_new_spec.js b/spec/frontend/projects/project_new_spec.js index d2936cb9efe..fe325343da8 100644 --- a/spec/frontend/projects/project_new_spec.js +++ b/spec/frontend/projects/project_new_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { TEST_HOST } from 'helpers/test_constants'; import projectNew from '~/projects/project_new'; @@ -8,7 +9,7 @@ describe('New Project', () => { let $projectName; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div class='toggle-import-form'> <div class='import-url-data'> <div class="form-group"> @@ -33,6 +34,10 @@ describe('New Project', () => { $projectName = $('#project_name'); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('deriveProjectPathFromUrl', () => { const dummyImportUrl = `${TEST_HOST}/dummy/import/url.git`; diff --git a/spec/frontend/projects/projects_filterable_list_spec.js b/spec/frontend/projects/projects_filterable_list_spec.js index a41e8b7bc09..f217efa411e 100644 --- a/spec/frontend/projects/projects_filterable_list_spec.js +++ b/spec/frontend/projects/projects_filterable_list_spec.js @@ -1,4 +1,4 @@ -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import ProjectsFilterableList from '~/projects/projects_filterable_list'; describe('ProjectsFilterableList', () => { @@ -20,6 +20,10 @@ describe('ProjectsFilterableList', () => { List = new ProjectsFilterableList(form, filter, holder); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('getFilterEndpoint', () => { it('updates converts getPagePath for projects', () => { jest.spyOn(List, 'getPagePath').mockReturnValue('blah/projects?'); diff --git a/spec/frontend/projects/settings/access_dropdown_spec.js b/spec/frontend/projects/settings/access_dropdown_spec.js index 236968a3736..65b01172e7e 100644 --- a/spec/frontend/projects/settings/access_dropdown_spec.js +++ b/spec/frontend/projects/settings/access_dropdown_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import AccessDropdown from '~/projects/settings/access_dropdown'; import { LEVEL_TYPES } from '~/projects/settings/constants'; @@ -7,7 +8,7 @@ describe('AccessDropdown', () => { let dropdown; beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div id="dummy-dropdown"> <span class="dropdown-toggle-text"></span> </div> @@ -28,6 +29,10 @@ describe('AccessDropdown', () => { dropdown = new AccessDropdown(options); }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('toggleLabel', () => { let $dropdownToggleText; const dummyItems = [ diff --git a/spec/frontend/prometheus_metrics/custom_metrics_spec.js b/spec/frontend/prometheus_metrics/custom_metrics_spec.js index 20593351ee5..473327bf5e1 100644 --- a/spec/frontend/prometheus_metrics/custom_metrics_spec.js +++ b/spec/frontend/prometheus_metrics/custom_metrics_spec.js @@ -1,4 +1,5 @@ import MockAdapter from 'axios-mock-adapter'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import axios from '~/lib/utils/axios_utils'; import PANEL_STATE from '~/prometheus_metrics/constants'; import CustomMetrics from '~/prometheus_metrics/custom_metrics'; @@ -15,11 +16,12 @@ describe('PrometheusMetrics', () => { mock.onGet(customMetricsEndpoint).reply(200, { metrics, }); - loadFixtures(FIXTURE); + loadHTMLFixture(FIXTURE); }); afterEach(() => { mock.restore(); + resetHTMLFixture(); }); describe('Custom Metrics', () => { diff --git a/spec/frontend/prometheus_metrics/prometheus_metrics_spec.js b/spec/frontend/prometheus_metrics/prometheus_metrics_spec.js index ee74e28ba23..1151c0b3769 100644 --- a/spec/frontend/prometheus_metrics/prometheus_metrics_spec.js +++ b/spec/frontend/prometheus_metrics/prometheus_metrics_spec.js @@ -1,4 +1,5 @@ import MockAdapter from 'axios-mock-adapter'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import waitForPromises from 'helpers/wait_for_promises'; import axios from '~/lib/utils/axios_utils'; import PANEL_STATE from '~/prometheus_metrics/constants'; @@ -9,7 +10,7 @@ describe('PrometheusMetrics', () => { const FIXTURE = 'services/prometheus/prometheus_service.html'; beforeEach(() => { - loadFixtures(FIXTURE); + loadHTMLFixture(FIXTURE); }); describe('constructor', () => { @@ -19,6 +20,10 @@ describe('PrometheusMetrics', () => { prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should initialize wrapper element refs on class object', () => { expect(prometheusMetrics.$wrapper).toBeDefined(); expect(prometheusMetrics.$monitoredMetricsPanel).toBeDefined(); diff --git a/spec/frontend/protected_branches/protected_branch_create_spec.js b/spec/frontend/protected_branches/protected_branch_create_spec.js index b3de2d5e031..4b634c52b01 100644 --- a/spec/frontend/protected_branches/protected_branch_create_spec.js +++ b/spec/frontend/protected_branches/protected_branch_create_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import ProtectedBranchCreate from '~/protected_branches/protected_branch_create'; const FORCE_PUSH_TOGGLE_TESTID = 'force-push-toggle'; @@ -21,7 +22,7 @@ describe('ProtectedBranchCreate', () => { codeOwnerToggleChecked = false, hasLicense = true, } = {}) => { - setFixtures(` + setHTMLFixture(` <form class="js-new-protected-branch"> <span class="js-force-push-toggle" @@ -40,6 +41,10 @@ describe('ProtectedBranchCreate', () => { return new ProtectedBranchCreate({ hasLicense }); }; + afterEach(() => { + resetHTMLFixture(); + }); + describe('when license supports code owner approvals', () => { it('instantiates the code owner toggle', () => { create(); diff --git a/spec/frontend/protected_branches/protected_branch_edit_spec.js b/spec/frontend/protected_branches/protected_branch_edit_spec.js index 959ca6ecde2..d842e00d850 100644 --- a/spec/frontend/protected_branches/protected_branch_edit_spec.js +++ b/spec/frontend/protected_branches/protected_branch_edit_spec.js @@ -1,5 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { TEST_HOST } from 'helpers/test_constants'; import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; @@ -33,7 +34,7 @@ describe('ProtectedBranchEdit', () => { codeOwnerToggleChecked = false, hasLicense = true, } = {}) => { - setFixtures(`<div id="wrap" data-url="${TEST_URL}"> + setHTMLFixture(`<div id="wrap" data-url="${TEST_URL}"> <span class="js-force-push-toggle" data-label="Toggle allowed to force push" @@ -51,6 +52,7 @@ describe('ProtectedBranchEdit', () => { afterEach(() => { mock.restore(); + resetHTMLFixture(); }); describe('when license supports code owner approvals', () => { @@ -76,7 +78,11 @@ describe('ProtectedBranchEdit', () => { describe('when toggles are not available in the DOM on page load', () => { beforeEach(() => { create({ hasLicense: true }); - setFixtures(''); + setHTMLFixture(''); + }); + + afterEach(() => { + resetHTMLFixture(); }); it('does not instantiate the force push toggle', () => { diff --git a/spec/frontend/read_more_spec.js b/spec/frontend/read_more_spec.js index 16f0d7fb075..80d7c941660 100644 --- a/spec/frontend/read_more_spec.js +++ b/spec/frontend/read_more_spec.js @@ -1,10 +1,15 @@ +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initReadMore from '~/read_more'; describe('Read more click-to-expand functionality', () => { const fixtureName = 'projects/overview.html'; beforeEach(() => { - loadFixtures(fixtureName); + loadHTMLFixture(fixtureName); + }); + + afterEach(() => { + resetHTMLFixture(); }); describe('expands target element', () => { diff --git a/spec/frontend/right_sidebar_spec.js b/spec/frontend/right_sidebar_spec.js index d1f861669a0..5847842f5a6 100644 --- a/spec/frontend/right_sidebar_spec.js +++ b/spec/frontend/right_sidebar_spec.js @@ -1,6 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; -import '~/commons/bootstrap'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import axios from '~/lib/utils/axios_utils'; import Sidebar from '~/right_sidebar'; @@ -30,7 +30,7 @@ describe('RightSidebar', () => { let mock; beforeEach(() => { - loadFixtures(fixtureName); + loadHTMLFixture(fixtureName); mock = new MockAdapter(axios); new Sidebar(); // eslint-disable-line no-new $aside = $('.right-sidebar'); @@ -44,6 +44,8 @@ describe('RightSidebar', () => { afterEach(() => { mock.restore(); + + resetHTMLFixture(); }); it('should expand/collapse the sidebar when arrow is clicked', () => { diff --git a/spec/frontend/search/highlight_blob_search_result_spec.js b/spec/frontend/search/highlight_blob_search_result_spec.js index 9fa3bfc1f9a..15cff436076 100644 --- a/spec/frontend/search/highlight_blob_search_result_spec.js +++ b/spec/frontend/search/highlight_blob_search_result_spec.js @@ -1,10 +1,15 @@ import setHighlightClass from '~/search/highlight_blob_search_result'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; const fixture = 'search/blob_search_result.html'; const searchKeyword = 'Send'; // spec/frontend/fixtures/search.rb#79 describe('search/highlight_blob_search_result', () => { - beforeEach(() => loadFixtures(fixture)); + beforeEach(() => loadHTMLFixture(fixture)); + + afterEach(() => { + resetHTMLFixture(); + }); it('highlights lines with search term occurrence', () => { setHighlightClass(searchKeyword); diff --git a/spec/frontend/search_autocomplete_spec.js b/spec/frontend/search_autocomplete_spec.js index 190f2803324..4639552b4d3 100644 --- a/spec/frontend/search_autocomplete_spec.js +++ b/spec/frontend/search_autocomplete_spec.js @@ -1,5 +1,6 @@ import AxiosMockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import axios from '~/lib/utils/axios_utils'; import initSearchAutocomplete from '~/search_autocomplete'; @@ -104,7 +105,7 @@ describe('Search autocomplete dropdown', () => { }; beforeEach(() => { - loadFixtures('static/search_autocomplete.html'); + loadHTMLFixture('static/search_autocomplete.html'); window.gon = {}; window.gon.current_user_id = userId; @@ -118,6 +119,8 @@ describe('Search autocomplete dropdown', () => { // Undo what we did to the shared <body> removeBodyAttributes(); window.gon = {}; + + resetHTMLFixture(); }); it('should show Dashboard specific dropdown menu', () => { diff --git a/spec/frontend/settings_panels_spec.js b/spec/frontend/settings_panels_spec.js index 3a62cd703ab..d59e1a20b27 100644 --- a/spec/frontend/settings_panels_spec.js +++ b/spec/frontend/settings_panels_spec.js @@ -1,9 +1,14 @@ import $ from 'jquery'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import initSettingsPanels, { isExpanded } from '~/settings_panels'; describe('Settings Panels', () => { beforeEach(() => { - loadFixtures('groups/edit.html'); + loadHTMLFixture('groups/edit.html'); + }); + + afterEach(() => { + resetHTMLFixture(); }); describe('initSettingsPane', () => { diff --git a/spec/frontend/shortcuts_spec.js b/spec/frontend/shortcuts_spec.js index 8b9a11056f2..e859d435f48 100644 --- a/spec/frontend/shortcuts_spec.js +++ b/spec/frontend/shortcuts_spec.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import { flatten } from 'lodash'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import Shortcuts from '~/behaviors/shortcuts/shortcuts'; const mockMousetrap = { @@ -21,7 +22,7 @@ describe('Shortcuts', () => { }); beforeEach(() => { - loadFixtures(fixtureName); + loadHTMLFixture(fixtureName); jest.spyOn(document.querySelector('.js-new-note-form .js-md-preview-button'), 'focus'); jest.spyOn(document.querySelector('.edit-note .js-md-preview-button'), 'focus'); @@ -30,6 +31,10 @@ describe('Shortcuts', () => { new Shortcuts(); // eslint-disable-line no-new }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('toggleMarkdownPreview', () => { it('focuses preview button in form', () => { Shortcuts.toggleMarkdownPreview( diff --git a/spec/frontend/single_file_diff_spec.js b/spec/frontend/single_file_diff_spec.js index 8718152655f..6f42ec47458 100644 --- a/spec/frontend/single_file_diff_spec.js +++ b/spec/frontend/single_file_diff_spec.js @@ -1,6 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import axios from '~/lib/utils/axios_utils'; import SingleFileDiff from '~/single_file_diff'; @@ -15,6 +15,7 @@ describe('SingleFileDiff', () => { afterEach(() => { mock.restore(); + resetHTMLFixture(); }); it('loads diff via axios exactly once for collapsed diffs', async () => { diff --git a/spec/frontend/smart_interval_spec.js b/spec/frontend/smart_interval_spec.js index 1a2fd7ff8f1..5dda097ae6a 100644 --- a/spec/frontend/smart_interval_spec.js +++ b/spec/frontend/smart_interval_spec.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import { assignIn } from 'lodash'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import waitForPromises from 'helpers/wait_for_promises'; import SmartInterval from '~/smart_interval'; @@ -116,11 +117,15 @@ describe('SmartInterval', () => { describe('DOM Events', () => { beforeEach(() => { // This ensures DOM and DOM events are initialized for these specs. - setFixtures('<div></div>'); + setHTMLFixture('<div></div>'); interval = createDefaultSmartInterval(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should pause when page is not visible', () => { jest.runOnlyPendingTimers(); diff --git a/spec/frontend/snippet/collapsible_input_spec.js b/spec/frontend/snippet/collapsible_input_spec.js index 3f14a9cd1a1..56e64d136c2 100644 --- a/spec/frontend/snippet/collapsible_input_spec.js +++ b/spec/frontend/snippet/collapsible_input_spec.js @@ -1,4 +1,4 @@ -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import setupCollapsibleInputs from '~/snippet/collapsible_input'; describe('~/snippet/collapsible_input', () => { @@ -38,6 +38,10 @@ describe('~/snippet/collapsible_input', () => { setupCollapsibleInputs(); }); + afterEach(() => { + resetHTMLFixture(); + }); + const findInput = (el) => el.querySelector('textarea,input'); const findCollapsed = (el) => el.querySelector('.js-collapsed'); const findExpanded = (el) => el.querySelector('.js-expanded'); diff --git a/spec/frontend/syntax_highlight_spec.js b/spec/frontend/syntax_highlight_spec.js index 8ad4f8d5c70..1be6c213350 100644 --- a/spec/frontend/syntax_highlight_spec.js +++ b/spec/frontend/syntax_highlight_spec.js @@ -1,6 +1,6 @@ /* eslint-disable no-return-assign */ - import $ from 'jquery'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import syntaxHighlight from '~/syntax_highlight'; describe('Syntax Highlighter', () => { @@ -20,7 +20,11 @@ describe('Syntax Highlighter', () => { `('highlight using $desc syntax', ({ fn }) => { describe('on a js-syntax-highlight element', () => { beforeEach(() => { - setFixtures('<div class="js-syntax-highlight"></div>'); + setHTMLFixture('<div class="js-syntax-highlight"></div>'); + }); + + afterEach(() => { + resetHTMLFixture(); }); it('applies syntax highlighting', () => { @@ -33,11 +37,15 @@ describe('Syntax Highlighter', () => { describe('on a parent element', () => { beforeEach(() => { - setFixtures( + setHTMLFixture( '<div class="parent">\n <div class="js-syntax-highlight"></div>\n <div class="foo"></div>\n <div class="js-syntax-highlight"></div>\n</div>', ); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('applies highlighting to all applicable children', () => { stubUserColorScheme('monokai'); syntaxHighlight(fn('.parent')); @@ -49,7 +57,7 @@ describe('Syntax Highlighter', () => { }); it('prevents an infinite loop when no matches exist', () => { - setFixtures('<div></div>'); + setHTMLFixture('<div></div>'); const highlight = () => syntaxHighlight(fn('div')); expect(highlight).not.toThrow(); diff --git a/spec/frontend/tabs/index_spec.js b/spec/frontend/tabs/index_spec.js index 98617b404ff..67e3d707adb 100644 --- a/spec/frontend/tabs/index_spec.js +++ b/spec/frontend/tabs/index_spec.js @@ -1,6 +1,6 @@ import { GlTabsBehavior, TAB_SHOWN_EVENT } from '~/tabs'; import { ACTIVE_PANEL_CLASS, ACTIVE_TAB_CLASSES } from '~/tabs/constants'; -import { getFixture, setHTMLFixture } from 'helpers/fixtures'; +import { getFixture, setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; const tabsFixture = getFixture('tabs/tabs.html'); @@ -93,6 +93,8 @@ describe('GlTabsBehavior', () => { describe('when given an element', () => { afterEach(() => { glTabs.destroy(); + + resetHTMLFixture(); }); beforeEach(() => { @@ -250,6 +252,10 @@ describe('GlTabsBehavior', () => { glTabs = new GlTabsBehavior(tabsEl); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('connects the panels to their tabs correctly', () => { findTab('bar').click(); diff --git a/spec/frontend/task_list_spec.js b/spec/frontend/task_list_spec.js index fbdb73ae6de..e79c516a694 100644 --- a/spec/frontend/task_list_spec.js +++ b/spec/frontend/task_list_spec.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import axios from '~/lib/utils/axios_utils'; import TaskList from '~/task_list'; @@ -14,7 +15,7 @@ describe('TaskList', () => { const createTaskList = () => new TaskList(taskListOptions); beforeEach(() => { - setFixtures(` + setHTMLFixture(` <div class="task-list"> <div class="js-task-list-container"> <ul data-sourcepos="5:1-5:11" class="task-list" dir="auto"> @@ -37,6 +38,10 @@ describe('TaskList', () => { taskList = createTaskList(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should call init when the class constructed', () => { jest.spyOn(TaskList.prototype, 'init'); jest.spyOn(TaskList.prototype, 'disable').mockImplementation(() => {}); diff --git a/spec/frontend/user_popovers_spec.js b/spec/frontend/user_popovers_spec.js index 4edd526100a..fa598716645 100644 --- a/spec/frontend/user_popovers_spec.js +++ b/spec/frontend/user_popovers_spec.js @@ -1,5 +1,5 @@ import { within } from '@testing-library/dom'; - +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import UsersCache from '~/lib/utils/users_cache'; import initUserPopovers from '~/user_popovers'; import waitForPromises from 'helpers/wait_for_promises'; @@ -43,7 +43,7 @@ describe('User Popovers', () => { }; beforeEach(() => { - loadFixtures(fixtureTemplate); + loadHTMLFixture(fixtureTemplate); const usersCacheSpy = () => Promise.resolve(dummyUser); jest.spyOn(UsersCache, 'retrieveById').mockImplementation((userId) => usersCacheSpy(userId)); @@ -57,6 +57,10 @@ describe('User Popovers', () => { popovers = initUserPopovers(document.querySelectorAll(selector)); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('initializes a popover for each user link with a user id', () => { const linksWithUsers = findFixtureLinks(); diff --git a/spec/frontend/vue_alerts_spec.js b/spec/frontend/vue_alerts_spec.js index 1952eea4a01..de2faa09438 100644 --- a/spec/frontend/vue_alerts_spec.js +++ b/spec/frontend/vue_alerts_spec.js @@ -1,5 +1,5 @@ import { nextTick } from 'vue'; -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { TEST_HOST } from 'helpers/test_constants'; import initVueAlerts from '~/vue_alerts'; @@ -40,6 +40,10 @@ describe('VueAlerts', () => { ); }); + afterEach(() => { + resetHTMLFixture(); + }); + const findJsHooks = () => document.querySelectorAll('.js-vue-alert'); const findAlerts = () => document.querySelectorAll('.gl-alert'); const findAlertDismiss = (alert) => alert.querySelector('.gl-dismiss-btn'); diff --git a/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js b/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js index 59653a0ec13..e3d8bfd22ca 100644 --- a/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js +++ b/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js @@ -6,12 +6,16 @@ import { folder } from './mock_data'; describe('Deploy Board Instance', () => { let wrapper; - const createComponent = (props = {}) => + const createComponent = (props = {}, provide) => shallowMount(DeployBoardInstance, { propsData: { status: 'succeeded', ...props, }, + provide: { + glFeatures: { monitorLogging: true }, + ...provide, + }, }); describe('as a non-canary deployment', () => { @@ -95,4 +99,23 @@ describe('Deploy Board Instance', () => { expect(wrapper.attributes('title')).toEqual(''); }); }); + + describe(':monitor_logging feature flag', () => { + afterEach(() => { + wrapper.destroy(); + }); + + it.each` + flagState | logsState | expected + ${true} | ${'shows'} | ${'/root/review-app/-/logs?environment_name=foo&pod_name=tanuki-1'} + ${false} | ${'hides'} | ${undefined} + `('$logsState log link when flag state is $flagState', async ({ flagState, expected }) => { + wrapper = createComponent( + { logsPath: folder.logs_path, podName: 'tanuki-1' }, + { glFeatures: { monitorLogging: flagState } }, + ); + + expect(wrapper.attributes('href')).toEqual(expected); + }); + }); }); diff --git a/spec/frontend/vue_shared/components/file_finder/index_spec.js b/spec/frontend/vue_shared/components/file_finder/index_spec.js index 8f05108d460..5cf891a2e52 100644 --- a/spec/frontend/vue_shared/components/file_finder/index_spec.js +++ b/spec/frontend/vue_shared/components/file_finder/index_spec.js @@ -1,5 +1,6 @@ import Mousetrap from 'mousetrap'; import Vue, { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { file } from 'jest/ide/helpers'; import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; import FindFileComponent from '~/vue_shared/components/file_finder/index.vue'; @@ -22,7 +23,11 @@ describe('File finder item spec', () => { } beforeEach(() => { - setFixtures('<div id="app"></div>'); + setHTMLFixture('<div id="app"></div>'); + }); + + afterEach(() => { + resetHTMLFixture(); }); afterEach(() => { @@ -293,7 +298,7 @@ describe('File finder item spec', () => { }); it('stops callback in monaco editor', () => { - setFixtures('<div class="inputarea"></div>'); + setHTMLFixture('<div class="inputarea"></div>'); expect( Mousetrap.prototype.stopCallback(null, document.querySelector('.inputarea'), 't'), diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js index 3ceed670d77..9c29f304c71 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js @@ -153,7 +153,11 @@ describe('DropdownContentsCreateView', () => { }); it('enables a Create button', () => { - expect(findCreateButton().props('disabled')).toBe(false); + expect(findCreateButton().props()).toMatchObject({ + disabled: false, + category: 'primary', + variant: 'confirm', + }); }); it('renders a loader spinner after Create button click', async () => { diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js index 20298e95107..a54f3450633 100644 --- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js +++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js @@ -1,4 +1,5 @@ import { GlSkeletonLoader, GlIcon } from '@gitlab/ui'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import { AVAILABILITY_STATUS } from '~/set_status_modal/utils'; import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue'; @@ -36,12 +37,13 @@ describe('User Popover Component', () => { let wrapper; beforeEach(() => { - loadFixtures(fixtureTemplate); + loadHTMLFixture(fixtureTemplate); gon.features = {}; }); afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); const findUserStatus = () => wrapper.findByTestId('user-popover-status'); diff --git a/spec/frontend/vue_shared/directives/autofocusonshow_spec.js b/spec/frontend/vue_shared/directives/autofocusonshow_spec.js index 59ce9f086c3..d052c99ec0e 100644 --- a/spec/frontend/vue_shared/directives/autofocusonshow_spec.js +++ b/spec/frontend/vue_shared/directives/autofocusonshow_spec.js @@ -1,3 +1,4 @@ +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; /** @@ -10,10 +11,14 @@ describe('AutofocusOnShow directive', () => { let el; beforeEach(() => { - setFixtures('<div id="container" style="display: none;"><input id="inputel"/></div>'); + setHTMLFixture('<div id="container" style="display: none;"><input id="inputel"/></div>'); el = document.querySelector('#inputel'); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('should bind IntersectionObserver on input element', () => { jest.spyOn(el, 'focus').mockImplementation(() => {}); diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js index 7dfeced571a..a25f92c9cf2 100644 --- a/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js +++ b/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import IssuableBulkEditSidebar from '~/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar.vue'; const createComponent = ({ expanded = true } = {}) => @@ -22,12 +23,13 @@ describe('IssuableBulkEditSidebar', () => { let wrapper; beforeEach(() => { - setFixtures('<div class="layout-page right-sidebar-collapsed"></div>'); + setHTMLFixture('<div class="layout-page right-sidebar-collapsed"></div>'); wrapper = createComponent(); }); afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); describe('watch', () => { diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js index 02579e8b3c4..544db891a13 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js @@ -1,6 +1,6 @@ import { GlIcon, GlAvatarLabeled } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; - +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import IssuableHeader from '~/vue_shared/issuable/show/components/issuable_header.vue'; import { mockIssuableShowProps, mockIssuable } from '../mock_data'; @@ -34,6 +34,7 @@ describe('IssuableHeader', () => { afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); describe('computed', () => { @@ -47,7 +48,7 @@ describe('IssuableHeader', () => { describe('handleRightSidebarToggleClick', () => { beforeEach(() => { - setFixtures('<button class="js-toggle-right-sidebar-button">Collapse sidebar</button>'); + setHTMLFixture('<button class="js-toggle-right-sidebar-button">Collapse sidebar</button>'); }); it('dispatches `click` event on sidebar toggle button', () => { diff --git a/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js b/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js index 47bf3c8ed83..5b4d8718bbc 100644 --- a/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js +++ b/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js @@ -1,6 +1,7 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import Cookies from 'js-cookie'; import { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import IssuableSidebarRoot from '~/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue'; @@ -9,7 +10,7 @@ import { USER_COLLAPSED_GUTTER_COOKIE } from '~/vue_shared/issuable/sidebar/cons const MOCK_LAYOUT_PAGE_CLASS = 'layout-page'; const createComponent = () => { - setFixtures(`<div class="${MOCK_LAYOUT_PAGE_CLASS}"></div>`); + setHTMLFixture(`<div class="${MOCK_LAYOUT_PAGE_CLASS}"></div>`); return shallowMountExtended(IssuableSidebarRoot, { slots: { @@ -38,6 +39,7 @@ describe('IssuableSidebarRoot', () => { afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); describe('when sidebar is expanded', () => { diff --git a/spec/frontend/whats_new/utils/notification_spec.js b/spec/frontend/whats_new/utils/notification_spec.js index ef61462a3c5..dac02ee07bd 100644 --- a/spec/frontend/whats_new/utils/notification_spec.js +++ b/spec/frontend/whats_new/utils/notification_spec.js @@ -1,3 +1,4 @@ +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { useLocalStorageSpy } from 'helpers/local_storage_helper'; import { setNotification, getVersionDigest } from '~/whats_new/utils/notification'; @@ -11,12 +12,13 @@ describe('~/whats_new/utils/notification', () => { const getAppEl = () => wrapper.querySelector('.app'); beforeEach(() => { - loadFixtures('static/whats_new_notification.html'); + loadHTMLFixture('static/whats_new_notification.html'); wrapper = document.querySelector('.whats-new-notification-fixture-root'); }); afterEach(() => { wrapper.remove(); + resetHTMLFixture(); }); describe('setNotification', () => { diff --git a/spec/frontend/wikis_spec.js b/spec/frontend/wikis_spec.js index c4e914bcf34..d8748c65da7 100644 --- a/spec/frontend/wikis_spec.js +++ b/spec/frontend/wikis_spec.js @@ -1,5 +1,5 @@ import { escape } from 'lodash'; -import { setHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import Wikis from '~/pages/shared/wikis/wikis'; import Tracking from '~/tracking'; @@ -21,6 +21,10 @@ describe('Wikis', () => { Wikis.trackPageView(); }); + afterEach(() => { + resetHTMLFixture(); + }); + it('sends the tracking event and context', () => { expect(Tracking.event).toHaveBeenCalledWith(trackingPage, 'view_wiki_page', { label: 'view_wiki_page', diff --git a/spec/frontend/zen_mode_spec.js b/spec/frontend/zen_mode_spec.js index 13f221fd9d9..a88910b2613 100644 --- a/spec/frontend/zen_mode_spec.js +++ b/spec/frontend/zen_mode_spec.js @@ -3,6 +3,7 @@ import MockAdapter from 'axios-mock-adapter'; import Dropzone from 'dropzone'; import $ from 'jquery'; import Mousetrap from 'mousetrap'; +import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import GLForm from '~/gl_form'; import * as utils from '~/lib/utils/common_utils'; import ZenMode from '~/zen_mode'; @@ -33,7 +34,7 @@ describe('ZenMode', () => { mock = new MockAdapter(axios); mock.onGet().reply(200); - loadFixtures(fixtureName); + loadHTMLFixture(fixtureName); const form = $('.js-new-note-form'); new GLForm(form); // eslint-disable-line no-new @@ -47,6 +48,10 @@ describe('ZenMode', () => { zen.scroll_position = 456; }); + afterEach(() => { + resetHTMLFixture(); + }); + describe('enabling dropzone', () => { beforeEach(() => { enterZen(); |