diff options
32 files changed, 233 insertions, 170 deletions
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js index 187fab084fd..e0b73f13d36 100644 --- a/app/assets/javascripts/blob/viewer/index.js +++ b/app/assets/javascripts/blob/viewer/index.js @@ -1,4 +1,6 @@ /* global Flash */ +import { handleLocationHash } from '../../lib/utils/common_utils'; + export default class BlobViewer { constructor() { BlobViewer.initAuxiliaryViewer(); @@ -114,7 +116,7 @@ export default class BlobViewer { $(viewer).renderGFM(); this.$fileHolder.trigger('highlight:line'); - gl.utils.handleLocationHash(); + handleLocationHash(); this.toggleCopyButtonState(); }) diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js index 43928e602d6..ea82958e80d 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js +++ b/app/assets/javascripts/boards/stores/boards_store.js @@ -2,6 +2,7 @@ /* global List */ import _ from 'underscore'; import Cookies from 'js-cookie'; +import { getUrlParamsArray } from '../../lib/utils/common_utils'; window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {}; @@ -21,7 +22,7 @@ gl.issueBoards.BoardsStore = { }, create () { this.state.lists = []; - this.filter.path = gl.utils.getUrlParamsArray().join('&'); + this.filter.path = getUrlParamsArray().join('&'); this.detail = { issue: {} }; }, addList (listObj, defaultAvatar) { diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js index ae1a23132a7..286a758b8a9 100644 --- a/app/assets/javascripts/build.js +++ b/app/assets/javascripts/build.js @@ -3,6 +3,7 @@ consistent-return, prefer-rest-params */ import _ from 'underscore'; import bp from './breakpoints'; import { bytesToKiB } from './lib/utils/number_utils'; +import { setCiStatusFavicon } from './lib/utils/common_utils'; window.Build = (function () { Build.timeout = null; @@ -169,7 +170,7 @@ window.Build = (function () { data: this.state, }) .done((log) => { - gl.utils.setCiStatusFavicon(`${this.pageUrl}/status.json`); + setCiStatusFavicon(`${this.pageUrl}/status.json`); if (log.state) { this.state = log.state; diff --git a/app/assets/javascripts/copy_as_gfm.js b/app/assets/javascripts/copy_as_gfm.js index 13ba4a57293..e3e2c798570 100644 --- a/app/assets/javascripts/copy_as_gfm.js +++ b/app/assets/javascripts/copy_as_gfm.js @@ -1,6 +1,6 @@ /* eslint-disable class-methods-use-this, object-shorthand, no-unused-vars, no-use-before-define, no-new, max-len, no-restricted-syntax, guard-for-in, no-continue */ import _ from 'underscore'; -import './lib/utils/common_utils'; +import { insertText, getSelectedFragment, nodeMatchesSelector } from './lib/utils/common_utils'; import { placeholderImage } from './lazy_loader'; const gfmRules = { @@ -295,7 +295,7 @@ class CopyAsGFM { const clipboardData = e.originalEvent.clipboardData; if (!clipboardData) return; - const documentFragment = window.gl.utils.getSelectedFragment(); + const documentFragment = getSelectedFragment(); if (!documentFragment) return; const el = transformer(documentFragment.cloneNode(true)); @@ -412,7 +412,7 @@ class CopyAsGFM { for (const selector in rules) { const func = rules[selector]; - if (!window.gl.utils.nodeMatchesSelector(node, selector)) continue; + if (!nodeMatchesSelector(node, selector)) continue; let result; if (func.length === 2) { diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index ca2de53fe44..31214818496 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -77,7 +77,7 @@ import initProjectVisibilitySelector from './project_visibility'; import GpgBadges from './gpg_badges'; import UserFeatureHelper from './helpers/user_feature_helper'; import initChangesDropdown from './init_changes_dropdown'; -import { ajaxGet } from './lib/utils/common_utils'; +import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils'; (function() { var Dispatcher; @@ -101,7 +101,7 @@ import { ajaxGet } from './lib/utils/common_utils'; $('.js-gfm-input:not(.js-vue-textarea)').each((i, el) => { const gfm = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources); - const enableGFM = gl.utils.convertPermissionToBoolean(el.dataset.supportsAutocomplete); + const enableGFM = convertPermissionToBoolean(el.dataset.supportsAutocomplete); gfm.setup($(el), { emojis: true, members: enableGFM, diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue index f54d573db6e..14fde1afb16 100644 --- a/app/assets/javascripts/environments/components/environment.vue +++ b/app/assets/javascripts/environments/components/environment.vue @@ -6,7 +6,7 @@ import environmentTable from './environments_table.vue'; import EnvironmentsStore from '../stores/environments_store'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import tablePagination from '../../vue_shared/components/table_pagination.vue'; -import '../../lib/utils/common_utils'; +import { convertPermissionToBoolean, getParameterByName, setParamInURL } from '../../lib/utils/common_utils'; import eventHub from '../event_hub'; import Poll from '../../lib/utils/poll'; import environmentsMixin from '../mixins/environments_mixin'; @@ -51,19 +51,19 @@ export default { computed: { scope() { - return gl.utils.getParameterByName('scope'); + return getParameterByName('scope'); }, canReadEnvironmentParsed() { - return gl.utils.convertPermissionToBoolean(this.canReadEnvironment); + return convertPermissionToBoolean(this.canReadEnvironment); }, canCreateDeploymentParsed() { - return gl.utils.convertPermissionToBoolean(this.canCreateDeployment); + return convertPermissionToBoolean(this.canCreateDeployment); }, canCreateEnvironmentParsed() { - return gl.utils.convertPermissionToBoolean(this.canCreateEnvironment); + return convertPermissionToBoolean(this.canCreateEnvironment); }, }, @@ -72,8 +72,8 @@ export default { * Toggles loading property. */ created() { - const scope = gl.utils.getParameterByName('scope') || this.visibility; - const page = gl.utils.getParameterByName('page') || this.pageNumber; + const scope = getParameterByName('scope') || this.visibility; + const page = getParameterByName('page') || this.pageNumber; this.service = new EnvironmentsService(this.endpoint); @@ -126,15 +126,15 @@ export default { * @return {String} */ changePage(pageNumber) { - const param = gl.utils.setParamInURL('page', pageNumber); + const param = setParamInURL('page', pageNumber); gl.utils.visitUrl(param); return param; }, fetchEnvironments() { - const scope = gl.utils.getParameterByName('scope') || this.visibility; - const page = gl.utils.getParameterByName('page') || this.pageNumber; + const scope = getParameterByName('scope') || this.visibility; + const page = getParameterByName('page') || this.pageNumber; this.isLoading = true; diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue index 925503a01c4..35891240239 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.vue +++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue @@ -9,7 +9,7 @@ import tablePagination from '../../vue_shared/components/table_pagination.vue'; import Poll from '../../lib/utils/poll'; import eventHub from '../event_hub'; import environmentsMixin from '../mixins/environments_mixin'; -import '../../lib/utils/common_utils'; +import { convertPermissionToBoolean, getParameterByName, setParamInURL } from '../../lib/utils/common_utils'; export default { components: { @@ -47,15 +47,15 @@ export default { computed: { scope() { - return gl.utils.getParameterByName('scope'); + return getParameterByName('scope'); }, canReadEnvironmentParsed() { - return gl.utils.convertPermissionToBoolean(this.canReadEnvironment); + return convertPermissionToBoolean(this.canReadEnvironment); }, canCreateDeploymentParsed() { - return gl.utils.convertPermissionToBoolean(this.canCreateDeployment); + return convertPermissionToBoolean(this.canCreateDeployment); }, /** @@ -82,8 +82,8 @@ export default { * Toggles loading property. */ created() { - const scope = gl.utils.getParameterByName('scope') || this.visibility; - const page = gl.utils.getParameterByName('page') || this.pageNumber; + const scope = getParameterByName('scope') || this.visibility; + const page = getParameterByName('page') || this.pageNumber; this.service = new EnvironmentsService(this.endpoint); @@ -125,15 +125,15 @@ export default { * @param {Number} pageNumber desired page to go to. */ changePage(pageNumber) { - const param = gl.utils.setParamInURL('page', pageNumber); + const param = setParamInURL('page', pageNumber); gl.utils.visitUrl(param); return param; }, fetchEnvironments() { - const scope = gl.utils.getParameterByName('scope') || this.visibility; - const page = gl.utils.getParameterByName('page') || this.pageNumber; + const scope = getParameterByName('scope') || this.visibility; + const page = getParameterByName('page') || this.pageNumber; this.isLoading = true; diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js index 038c149be2d..aff8227c38c 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js +++ b/app/assets/javascripts/environments/stores/environments_store.js @@ -1,4 +1,4 @@ -import '~/lib/utils/common_utils'; +import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; /** * Environments Store. * @@ -66,8 +66,8 @@ export default class EnvironmentsStore { } setPagination(pagination = {}) { - const normalizedHeaders = gl.utils.normalizeHeaders(pagination); - const paginationInformation = gl.utils.parseIntPagination(normalizedHeaders); + const normalizedHeaders = normalizeHeaders(pagination); + const paginationInformation = parseIntPagination(normalizedHeaders); this.state.paginationInformation = paginationInformation; return paginationInformation; diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue index 36a04d4202f..d17a43b048a 100644 --- a/app/assets/javascripts/groups/components/groups.vue +++ b/app/assets/javascripts/groups/components/groups.vue @@ -1,6 +1,7 @@ <script> import tablePagination from '~/vue_shared/components/table_pagination.vue'; import eventHub from '../event_hub'; +import { getParameterByName } from '../../lib/utils/common_utils'; export default { props: { @@ -18,8 +19,8 @@ export default { }, methods: { change(page) { - const filterGroupsParam = gl.utils.getParameterByName('filter_groups'); - const sortParam = gl.utils.getParameterByName('sort'); + const filterGroupsParam = getParameterByName('filter_groups'); + const sortParam = getParameterByName('sort'); eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam); }, }, diff --git a/app/assets/javascripts/groups/groups_filterable_list.js b/app/assets/javascripts/groups/groups_filterable_list.js index 439a931ddad..83b102764ba 100644 --- a/app/assets/javascripts/groups/groups_filterable_list.js +++ b/app/assets/javascripts/groups/groups_filterable_list.js @@ -1,5 +1,6 @@ import FilterableList from '~/filterable_list'; import eventHub from './event_hub'; +import { getParameterByName } from '../lib/utils/common_utils'; export default class GroupFilterableList extends FilterableList { constructor({ form, filter, holder, filterEndpoint, pagePath }) { @@ -54,7 +55,7 @@ export default class GroupFilterableList extends FilterableList { e.preventDefault(); const queryData = {}; - const sortParam = gl.utils.getParameterByName('sort', e.currentTarget.href); + const sortParam = getParameterByName('sort', e.currentTarget.href); if (sortParam) { queryData.sort = sortParam; diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js index 00e1bd94c9c..9ad8e5c6052 100644 --- a/app/assets/javascripts/groups/index.js +++ b/app/assets/javascripts/groups/index.js @@ -8,6 +8,7 @@ import GroupItem from './components/group_item.vue'; import GroupsStore from './stores/groups_store'; import GroupsService from './services/groups_service'; import eventHub from './event_hub'; +import { getParameterByName } from '../lib/utils/common_utils'; document.addEventListener('DOMContentLoaded', () => { const el = document.getElementById('dashboard-group-app'); @@ -58,17 +59,17 @@ document.addEventListener('DOMContentLoaded', () => { this.isLoading = true; } - pageParam = gl.utils.getParameterByName('page'); + pageParam = getParameterByName('page'); if (pageParam) { page = pageParam; } - filterGroupsParam = gl.utils.getParameterByName('filter_groups'); + filterGroupsParam = getParameterByName('filter_groups'); if (filterGroupsParam) { filterGroups = filterGroupsParam; } - sortParam = gl.utils.getParameterByName('sort'); + sortParam = getParameterByName('sort'); if (sortParam) { sort = sortParam; } diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js index 6eab6083e8f..f59ec677603 100644 --- a/app/assets/javascripts/groups/stores/groups_store.js +++ b/app/assets/javascripts/groups/stores/groups_store.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import { parseIntPagination, normalizeHeaders } from '../../lib/utils/common_utils'; export default class GroupsStore { constructor() { @@ -30,8 +31,8 @@ export default class GroupsStore { let paginationInfo; if (Object.keys(pagination).length) { - const normalizedHeaders = gl.utils.normalizeHeaders(pagination); - paginationInfo = gl.utils.parseIntPagination(normalizedHeaders); + const normalizedHeaders = normalizeHeaders(pagination); + paginationInfo = parseIntPagination(normalizedHeaders); } else { paginationInfo = pagination; } diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js index 4d629bc6326..90ca70289ab 100644 --- a/app/assets/javascripts/groups_select.js +++ b/app/assets/javascripts/groups_select.js @@ -4,6 +4,7 @@ prefer-rest-params, prefer-spread, no-unused-vars, prefer-template, promise/catch-or-return */ import Api from './api'; +import { normalizeCRLFHeaders } from './lib/utils/common_utils'; var slice = [].slice; @@ -30,7 +31,7 @@ window.GroupsSelect = (function() { $.ajax(params).then((data, status, xhr) => { const results = data || []; - const headers = gl.utils.normalizeCRLFHeaders(xhr.getAllResponseHeaders()); + const headers = normalizeCRLFHeaders(xhr.getAllResponseHeaders()); const currentPage = parseInt(headers['X-PAGE'], 10) || 0; const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0; const more = currentPage < totalPages; diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 87b3b0bc8a4..76e436ceab5 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -1,4 +1,5 @@ -/* eslint-disable no-param-reassing */ +window.gl = window.gl || {}; +window.gl.utils = window.gl.utils || {}; export const getPagePath = (index = 0) => $('body').data('page').split(':')[index]; window.gl.utils.getPagePath = getPagePath; @@ -48,7 +49,7 @@ export const ajaxPost = (url, data) => $.ajax({ window.gl.utils.ajaxPost = ajaxPost; // TODO: This function seems not to be used anywhere -window.gl.utils.extractLast = term => this.split(term).pop(); +// window.gl.utils.extractLast = term => this.split(term).pop(); export const rstrip = function rstrip(val) { if (val) { @@ -145,10 +146,11 @@ window.gl.utils.parseUrlPathname = parseUrlPathname; // We can trust that each param has one & since values containing & will be encoded // Remove the first character of search as it is always ? -window.gl.utils.getUrlParamsArray = () => window.location.search.slice(1).split('&').map((param) => { +export const getUrlParamsArray = () => window.location.search.slice(1).split('&').map((param) => { const split = param.split('='); return [decodeURI(split[0]), split[1]].join('='); }); +window.gl.utils.getUrlParamsArray = getUrlParamsArray; export const isMetaKey = e => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey; window.gl.utils.isMetaKey = isMetaKey; @@ -178,8 +180,8 @@ window.gl.utils.scrollToElement = scrollToElement; */ export const getParameterByName = (name, urlToParse) => { const url = urlToParse || window.location.href; - name = name.replace(/[[\]]/g, '\\$&'); - const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); + const parsedName = name.replace(/[[\]]/g, '\\$&'); + const regex = new RegExp(`[?&]${parsedName}(=([^&#]*)|&|#|$)`); const results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; @@ -200,6 +202,7 @@ export const getSelectedFragment = () => { }; window.gl.utils.getSelectedFragment = getSelectedFragment; +// TODO: Update this name, there is a gl.text.insertText function. export const insertText = (target, text) => { // Firefox doesn't support `document.execCommand('insertText', false, text)` on textareas const selectionStart = target.selectionStart; @@ -212,7 +215,9 @@ export const insertText = (target, text) => { const insertedText = text instanceof Function ? text(textBefore, textAfter) : text; const newText = textBefore + insertedText + textAfter; + // eslint-disable-next-line no-param-reassign target.value = newText; + // eslint-disable-next-line no-param-reassign target.selectionStart = target.selectionEnd = selectionStart + insertedText.length; // Trigger autosave @@ -242,6 +247,7 @@ export const nodeMatchesSelector = (node, selector) => { let parentNode = node.parentNode; if (!parentNode) { parentNode = document.createElement('div'); + // eslint-disable-next-line no-param-reassign node = node.cloneNode(true); parentNode.appendChild(node); } @@ -264,7 +270,6 @@ export const normalizeHeaders = (headers) => { return upperCaseHeaders; }; -window.gl.utils.normalizeHeaders = normalizeHeaders; /** this will take in the getAllResponseHeaders result and normalize them @@ -281,7 +286,6 @@ export const normalizeCRLFHeaders = (headers) => { return normalizeHeaders(headersObject); }; -window.gl.utils.normalizeCRLFHeaders = normalizeCRLFHeaders; /** * Parses pagination object string values into numbers. @@ -297,7 +301,6 @@ export const parseIntPagination = paginationInformation => ({ nextPage: parseInt(paginationInformation['X-NEXT-PAGE'], 10), previousPage: parseInt(paginationInformation['X-PREV-PAGE'], 10), }); -window.gl.utils.parseIntPagination = parseIntPagination; /** * Updates the search parameter of a URL given the parameter and value provided. @@ -320,6 +323,7 @@ export const setParamInURL = (param, value) => { .split('&') .reduce((acc, element) => { const val = element.split('='); + // eslint-disable-next-line no-param-reassign acc[val[0]] = decodeURIComponent(val[1]); return acc; }, {}); @@ -337,7 +341,6 @@ export const setParamInURL = (param, value) => { return search; }; -window.gl.utils.setParamInURL = setParamInURL; /** * Converts permission provided as strings to booleans. @@ -346,7 +349,6 @@ window.gl.utils.setParamInURL = setParamInURL; * @returns {Boolean} */ export const convertPermissionToBoolean = permission => permission === 'true'; -window.gl.utils.convertPermissionToBoolean = convertPermissionToBoolean; /** * Back Off exponential algorithm @@ -400,7 +402,6 @@ export const backOff = (fn, timeout = 60000) => { fn(next, stop); }); }; -window.gl.utils.backOff = backOff; export const setFavicon = (faviconPath) => { const faviconEl = document.getElementById('favicon'); @@ -408,7 +409,6 @@ export const setFavicon = (faviconPath) => { faviconEl.setAttribute('href', faviconPath); } }; -window.gl.utils.setFavicon = setFavicon; export const resetFavicon = () => { const faviconEl = document.getElementById('favicon'); @@ -417,7 +417,6 @@ export const resetFavicon = () => { faviconEl.setAttribute('href', originalFavicon); } }; -window.gl.utils.resetFavicon = resetFavicon; export const setCiStatusFavicon = (pageUrl) => { $.ajax({ @@ -425,14 +424,13 @@ export const setCiStatusFavicon = (pageUrl) => { dataType: 'json', success: (data) => { if (data && data.favicon) { - gl.utils.setFavicon(data.favicon); + setFavicon(data.favicon); } else { - gl.utils.resetFavicon(); + resetFavicon(); } }, error: () => { - gl.utils.resetFavicon(); + resetFavicon(); }, }); }; -window.gl.utils.setCiStatusFavicon = setCiStatusFavicon; diff --git a/app/assets/javascripts/lib/utils/poll.js b/app/assets/javascripts/lib/utils/poll.js index 97666e13ebe..1485e900945 100644 --- a/app/assets/javascripts/lib/utils/poll.js +++ b/app/assets/javascripts/lib/utils/poll.js @@ -1,4 +1,5 @@ import httpStatusCodes from './http_status'; +import { normalizeHeaders } from './common_utils'; /** * Polling utility for handling realtime updates. @@ -57,7 +58,7 @@ export default class Poll { } checkConditions(response) { - const headers = gl.utils.normalizeHeaders(response.headers); + const headers = normalizeHeaders(response.headers); const pollInterval = parseInt(headers[this.intervalHeader], 10); if (pollInterval > 0 && response.status === httpStatusCodes.OK && this.canPoll) { diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 0bc31a56684..d99839fadb4 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -41,7 +41,7 @@ import './commit/image_file'; // lib/utils import './lib/utils/animate'; import './lib/utils/bootstrap_linked_tabs'; -import './lib/utils/common_utils'; +import { handleLocationHash } from './lib/utils/common_utils'; import './lib/utils/datetime_utility'; import './lib/utils/pretty_time'; import './lib/utils/text_utility'; @@ -162,10 +162,10 @@ document.addEventListener('beforeunload', function () { $('[data-toggle="popover"]').popover('destroy'); }); -window.addEventListener('hashchange', gl.utils.handleLocationHash); +window.addEventListener('hashchange', handleLocationHash); window.addEventListener('load', function onLoad() { window.removeEventListener('load', onLoad, false); - gl.utils.handleLocationHash(); + handleLocationHash(); }, false); gl.lazyLoader = new LazyLoader({ @@ -191,7 +191,7 @@ $(function () { $body.on('click', 'a[href^="#"]', function() { var href = this.getAttribute('href'); if (href.substr(1) === gl.utils.getLocationHash()) { - setTimeout(gl.utils.handleLocationHash, 1); + setTimeout(handleLocationHash, 1); } }); diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index efcda7c38fb..f71a59aaa84 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -7,7 +7,11 @@ import './flash'; import BlobForkSuggestion from './blob/blob_fork_suggestion'; import initChangesDropdown from './init_changes_dropdown'; import bp from './breakpoints'; -import parseUrlPathname from './lib/utils/common_utils'; +import { + parseUrlPathname, + handleLocationHash, + isMetaClick, +} from './lib/utils/common_utils'; /* eslint-disable max-len */ // MergeRequestTabs @@ -115,7 +119,7 @@ import parseUrlPathname from './lib/utils/common_utils'; } clickTab(e) { - if (e.currentTarget && gl.utils.isMetaClick(e)) { + if (e.currentTarget && isMetaClick(e)) { const targetLink = e.currentTarget.getAttribute('href'); e.stopImmediatePropagation(); e.preventDefault(); @@ -310,7 +314,7 @@ import parseUrlPathname from './lib/utils/common_utils'; forceShow: true, }); anchor[0].scrollIntoView(); - window.gl.utils.handleLocationHash(); + handleLocationHash(); // We have multiple elements on the page with `#note_xxx` // (discussion and diff tabs) and `:target` only applies to the first anchor.addClass('target'); diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index a87fe7fa9d3..f39ea643da4 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -8,7 +8,7 @@ import EmptyState from './empty_state.vue'; import MonitoringStore from '../stores/monitoring_store'; import eventHub from '../event_hub'; - import { backOff } from '../../lib/utils/common_utils'; + import { backOff, convertPermissionToBoolean } from '../../lib/utils/common_utils'; export default { @@ -19,7 +19,7 @@ return { store, state: 'gettingStarted', - hasMetrics: gl.utils.convertPermissionToBoolean(metricsData.hasMetrics), + hasMetrics: convertPermissionToBoolean(metricsData.hasMetrics), documentationPath: metricsData.documentationPath, settingsPath: metricsData.settingsPath, endpoint: metricsData.additionalMetrics, diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 7146ecb0b3e..93aa29454a0 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -23,7 +23,7 @@ import loadAwardsHandler from './awards_handler'; import './autosave'; import './dropzone_input'; import TaskList from './task_list'; -import { ajaxPost, isInViewport, getPagePath } from './lib/utils/common_utils'; +import { ajaxPost, isInViewport, getPagePath, scrollToElement, isMetaKey } from './lib/utils/common_utils'; window.autosize = autosize; window.Dropzone = Dropzone; @@ -176,7 +176,7 @@ export default class Notes { keydownNoteText(e) { var $textarea, discussionNoteForm, editNote, myLastNote, myLastNoteEditBtn, newText, originalText; - if (gl.utils.isMetaKey(e)) { + if (isMetaKey(e)) { return; } @@ -1482,7 +1482,7 @@ export default class Notes { * * 1) Get Form metadata * 2) Update note element with new content - * 3) Perform network request to submit the updated note using `gl.utils.ajaxPost` + * 3) Perform network request to submit the updated note using `ajaxPost` * a) If request is successfully completed * 1. Show submitted Note element * b) If request failed diff --git a/app/assets/javascripts/pager.js b/app/assets/javascripts/pager.js index 01110420cca..e3fc1e2fc2f 100644 --- a/app/assets/javascripts/pager.js +++ b/app/assets/javascripts/pager.js @@ -1,4 +1,4 @@ -import '~/lib/utils/common_utils'; +import { getParameterByName } from '~/lib/utils/common_utils'; import '~/lib/utils/url_utility'; (() => { @@ -9,7 +9,7 @@ import '~/lib/utils/url_utility'; init(limit = 0, preload = false, disable = false, prepareData = $.noop, callback = $.noop) { this.url = $('.content_list').data('href') || gl.utils.removeParams(['limit', 'offset']); this.limit = limit; - this.offset = parseInt(gl.utils.getParameterByName('offset'), 10) || this.limit; + this.offset = parseInt(getParameterByName('offset'), 10) || this.limit; this.disable = disable; this.prepareData = prepareData; this.callback = callback; diff --git a/app/assets/javascripts/pipeline_schedules/setup_pipeline_variable_list.js b/app/assets/javascripts/pipeline_schedules/setup_pipeline_variable_list.js index 644efd10509..9e0e5cacb11 100644 --- a/app/assets/javascripts/pipeline_schedules/setup_pipeline_variable_list.js +++ b/app/assets/javascripts/pipeline_schedules/setup_pipeline_variable_list.js @@ -1,3 +1,5 @@ +import { convertPermissionToBoolean } from '../lib/utils/common_utils'; + function insertRow($row) { const $rowClone = $row.clone(); $rowClone.removeAttr('data-is-persisted'); @@ -6,7 +8,7 @@ function insertRow($row) { } function removeRow($row) { - const isPersisted = gl.utils.convertPermissionToBoolean($row.attr('data-is-persisted')); + const isPersisted = convertPermissionToBoolean($row.attr('data-is-persisted')); if (isPersisted) { $row.hide(); diff --git a/app/assets/javascripts/pipelines.js b/app/assets/javascripts/pipelines.js index 26a36ad54d1..07abe714367 100644 --- a/app/assets/javascripts/pipelines.js +++ b/app/assets/javascripts/pipelines.js @@ -1,4 +1,5 @@ import LinkedTabs from './lib/utils/bootstrap_linked_tabs'; +import { setCiStatusFavicon } from './lib/utils/common_utils'; export default class Pipelines { constructor(options = {}) { @@ -8,7 +9,7 @@ export default class Pipelines { } if (options.pipelineStatusUrl) { - gl.utils.setCiStatusFavicon(options.pipelineStatusUrl); + setCiStatusFavicon(options.pipelineStatusUrl); } } } diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue index 5e6d6b2fbdc..4c53e2541fc 100644 --- a/app/assets/javascripts/pipelines/components/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines.vue @@ -4,6 +4,7 @@ import tablePagination from '../../vue_shared/components/table_pagination.vue'; import navigationTabs from './navigation_tabs.vue'; import navigationControls from './nav_controls.vue'; + import { convertPermissionToBoolean, getParameterByName, setParamInURL } from '../../lib/utils/common_utils'; export default { props: { @@ -44,10 +45,10 @@ }, computed: { canCreatePipelineParsed() { - return gl.utils.convertPermissionToBoolean(this.canCreatePipeline); + return convertPermissionToBoolean(this.canCreatePipeline); }, scope() { - const scope = gl.utils.getParameterByName('scope'); + const scope = getParameterByName('scope'); return scope === null ? 'all' : scope; }, @@ -105,10 +106,10 @@ }; }, pageParameter() { - return gl.utils.getParameterByName('page') || this.pagenum; + return getParameterByName('page') || this.pagenum; }, scopeParameter() { - return gl.utils.getParameterByName('scope') || this.apiScope; + return getParameterByName('scope') || this.apiScope; }, }, created() { @@ -122,7 +123,7 @@ * @param {Number} pageNumber desired page to go to. */ change(pageNumber) { - const param = gl.utils.setParamInURL('page', pageNumber); + const param = setParamInURL('page', pageNumber); gl.utils.visitUrl(param); return param; diff --git a/app/assets/javascripts/pipelines/stores/pipelines_store.js b/app/assets/javascripts/pipelines/stores/pipelines_store.js index ffefe0192f2..651251d2623 100644 --- a/app/assets/javascripts/pipelines/stores/pipelines_store.js +++ b/app/assets/javascripts/pipelines/stores/pipelines_store.js @@ -1,3 +1,5 @@ +import { parseIntPagination, normalizeHeaders } from '../../lib/utils/common_utils'; + export default class PipelinesStore { constructor() { this.state = {}; @@ -19,8 +21,8 @@ export default class PipelinesStore { let paginationInfo; if (Object.keys(pagination).length) { - const normalizedHeaders = gl.utils.normalizeHeaders(pagination); - paginationInfo = gl.utils.parseIntPagination(normalizedHeaders); + const normalizedHeaders = normalizeHeaders(pagination); + paginationInfo = parseIntPagination(normalizedHeaders); } else { paginationInfo = pagination; } diff --git a/app/assets/javascripts/todos.js b/app/assets/javascripts/todos.js index a606852c22c..3dc0c3f8d43 100644 --- a/app/assets/javascripts/todos.js +++ b/app/assets/javascripts/todos.js @@ -1,6 +1,7 @@ /* eslint-disable class-methods-use-this, no-unneeded-ternary, quote-props */ import UsersSelect from './users_select'; +import { isMetaClick } from './lib/utils/common_utils'; export default class Todos { constructor() { @@ -141,7 +142,7 @@ export default class Todos { return; } - if (gl.utils.isMetaClick(e)) { + if (isMetaClick(e)) { const windowTarget = '_blank'; const selected = e.target; e.stopPropagation(); diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js index 0042c48816f..fa4411e716b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js @@ -31,6 +31,7 @@ import { SquashBeforeMerge, notify, } from './dependencies'; +import { setFavicon } from '../lib/utils/common_utils'; export default { el: '#js-vue-mr-widget', @@ -86,7 +87,7 @@ export default { .then((res) => { this.handleNotification(res); this.mr.setData(res); - this.setFavicon(); + this.setFaviconHelper(); if (cb) { cb.call(null, res); @@ -115,9 +116,9 @@ export default { immediateExecution: true, }); }, - setFavicon() { + setFaviconHelper() { if (this.mr.ciStatusFaviconPath) { - gl.utils.setFavicon(this.mr.ciStatusFaviconPath); + setFavicon(this.mr.ciStatusFaviconPath); } }, fetchDeployments() { @@ -193,7 +194,7 @@ export default { }); }, handleMounted() { - this.setFavicon(); + this.setFaviconHelper(); this.initDeploymentsPolling(); }, }, diff --git a/changelogs/unreleased/37220-es-modules.yml b/changelogs/unreleased/37220-es-modules.yml new file mode 100644 index 00000000000..de81fa9e74d --- /dev/null +++ b/changelogs/unreleased/37220-es-modules.yml @@ -0,0 +1,5 @@ +--- +title: Exports common_utils utility functions as modules +merge_request: +author: +type: other diff --git a/spec/javascripts/environments/folder/environments_folder_view_spec.js b/spec/javascripts/environments/folder/environments_folder_view_spec.js index fdaea5c0b0c..09916629bd1 100644 --- a/spec/javascripts/environments/folder/environments_folder_view_spec.js +++ b/spec/javascripts/environments/folder/environments_folder_view_spec.js @@ -14,6 +14,10 @@ describe('Environments Folder View', () => { window.history.pushState({}, null, 'environments/folders/build'); }); + afterEach(() => { + window.history.pushState({}, null, ''); + }); + let component; describe('successfull request', () => { diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js index 097de24f6ea..fd5b7d4e5da 100644 --- a/spec/javascripts/lib/utils/common_utils_spec.js +++ b/spec/javascripts/lib/utils/common_utils_spec.js @@ -18,26 +18,22 @@ describe('common_utils', () => { }); describe('parseUrlPathname', () => { - beforeEach(() => { - spyOn(gl.utils, 'parseUrl').and.callFake(url => ({ - pathname: url, - })); - }); it('returns an absolute url when given an absolute url', () => { expect(commonUtils.parseUrlPathname('/some/absolute/url')).toEqual('/some/absolute/url'); }); + it('returns an absolute url when given a relative url', () => { expect(commonUtils.parseUrlPathname('some/relative/url')).toEqual('/some/relative/url'); }); }); - describe('gl.utils.getUrlParamsArray', () => { + describe('getUrlParamsArray', () => { it('should return params array', () => { - expect(gl.utils.getUrlParamsArray() instanceof Array).toBe(true); + expect(commonUtils.getUrlParamsArray() instanceof Array).toBe(true); }); it('should remove the question mark from the search params', () => { - const paramsArray = gl.utils.getUrlParamsArray(); + const paramsArray = commonUtils.getUrlParamsArray(); expect(paramsArray[0][0] !== '?').toBe(true); }); @@ -45,7 +41,7 @@ describe('common_utils', () => { history.pushState('', '', '?label_name%5B%5D=test'); expect( - gl.utils.getUrlParamsArray()[0], + commonUtils.getUrlParamsArray()[0], ).toBe('label_name[]=test'); history.pushState('', '', '?'); @@ -90,7 +86,7 @@ describe('common_utils', () => { }); }); - describe('gl.utils.setParamInURL', () => { + describe('setParamInURL', () => { afterEach(() => { window.history.pushState({}, null, ''); }); @@ -98,40 +94,40 @@ describe('common_utils', () => { it('should return the parameter', () => { window.history.replaceState({}, null, ''); - expect(gl.utils.setParamInURL('page', 156)).toBe('?page=156'); - expect(gl.utils.setParamInURL('page', '156')).toBe('?page=156'); + expect(commonUtils.setParamInURL('page', 156)).toBe('?page=156'); + expect(commonUtils.setParamInURL('page', '156')).toBe('?page=156'); }); it('should update the existing parameter when its a number', () => { window.history.pushState({}, null, '?page=15'); - expect(gl.utils.setParamInURL('page', 16)).toBe('?page=16'); - expect(gl.utils.setParamInURL('page', '16')).toBe('?page=16'); - expect(gl.utils.setParamInURL('page', true)).toBe('?page=true'); + expect(commonUtils.setParamInURL('page', 16)).toBe('?page=16'); + expect(commonUtils.setParamInURL('page', '16')).toBe('?page=16'); + expect(commonUtils.setParamInURL('page', true)).toBe('?page=true'); }); it('should update the existing parameter when its a string', () => { window.history.pushState({}, null, '?scope=all'); - expect(gl.utils.setParamInURL('scope', 'finished')).toBe('?scope=finished'); + expect(commonUtils.setParamInURL('scope', 'finished')).toBe('?scope=finished'); }); it('should update the existing parameter when more than one parameter exists', () => { window.history.pushState({}, null, '?scope=all&page=15'); - expect(gl.utils.setParamInURL('scope', 'finished')).toBe('?scope=finished&page=15'); + expect(commonUtils.setParamInURL('scope', 'finished')).toBe('?scope=finished&page=15'); }); it('should add a new parameter to the end of the existing ones', () => { window.history.pushState({}, null, '?scope=all'); - expect(gl.utils.setParamInURL('page', 16)).toBe('?scope=all&page=16'); - expect(gl.utils.setParamInURL('page', '16')).toBe('?scope=all&page=16'); - expect(gl.utils.setParamInURL('page', true)).toBe('?scope=all&page=true'); + expect(commonUtils.setParamInURL('page', 16)).toBe('?scope=all&page=16'); + expect(commonUtils.setParamInURL('page', '16')).toBe('?scope=all&page=16'); + expect(commonUtils.setParamInURL('page', true)).toBe('?scope=all&page=true'); }); }); - describe('gl.utils.getParameterByName', () => { + describe('getParameterByName', () => { beforeEach(() => { window.history.pushState({}, null, '?scope=all&p=2'); }); @@ -141,33 +137,33 @@ describe('common_utils', () => { }); it('should return valid parameter', () => { - const value = gl.utils.getParameterByName('scope'); - expect(gl.utils.getParameterByName('p')).toEqual('2'); + const value = commonUtils.getParameterByName('scope'); + expect(commonUtils.getParameterByName('p')).toEqual('2'); expect(value).toBe('all'); }); it('should return invalid parameter', () => { - const value = gl.utils.getParameterByName('fakeParameter'); + const value = commonUtils.getParameterByName('fakeParameter'); expect(value).toBe(null); }); it('should return valid paramentes if URL is provided', () => { - let value = gl.utils.getParameterByName('foo', 'http://cocteau.twins/?foo=bar'); + let value = commonUtils.getParameterByName('foo', 'http://cocteau.twins/?foo=bar'); expect(value).toBe('bar'); - value = gl.utils.getParameterByName('manan', 'http://cocteau.twins/?foo=bar&manan=canchu'); + value = commonUtils.getParameterByName('manan', 'http://cocteau.twins/?foo=bar&manan=canchu'); expect(value).toBe('canchu'); }); }); - describe('gl.utils.normalizedHeaders', () => { + describe('normalizedHeaders', () => { it('should upperCase all the header keys to keep them consistent', () => { const apiHeaders = { 'X-Something-Workhorse': { workhorse: 'ok' }, 'x-something-nginx': { nginx: 'ok' }, }; - const normalized = gl.utils.normalizeHeaders(apiHeaders); + const normalized = commonUtils.normalizeHeaders(apiHeaders); const WORKHORSE = 'X-SOMETHING-WORKHORSE'; const NGINX = 'X-SOMETHING-NGINX'; @@ -177,14 +173,11 @@ describe('common_utils', () => { }); }); - describe('gl.utils.normalizeCRLFHeaders', () => { + describe('normalizeCRLFHeaders', () => { beforeEach(function () { this.CLRFHeaders = 'a-header: a-value\nAnother-Header: ANOTHER-VALUE\nLaSt-HeAdEr: last-VALUE'; - spyOn(String.prototype, 'split').and.callThrough(); - spyOn(gl.utils, 'normalizeHeaders').and.callThrough(); - - this.normalizeCRLFHeaders = gl.utils.normalizeCRLFHeaders(this.CLRFHeaders); + this.normalizeCRLFHeaders = commonUtils.normalizeCRLFHeaders(this.CLRFHeaders); }); it('should split by newline', function () { @@ -195,10 +188,6 @@ describe('common_utils', () => { expect(String.prototype.split.calls.allArgs().filter(args => args[0] === ': ').length).toBe(3); }); - it('should call gl.utils.normalizeHeaders with a parsed headers object', function () { - expect(gl.utils.normalizeHeaders).toHaveBeenCalledWith(jasmine.any(Object)); - }); - it('should return a normalized headers object', function () { expect(this.normalizeCRLFHeaders).toEqual({ 'A-HEADER': 'a-value', @@ -208,7 +197,7 @@ describe('common_utils', () => { }); }); - describe('gl.utils.parseIntPagination', () => { + describe('parseIntPagination', () => { it('should parse to integers all string values and return pagination object', () => { const pagination = { 'X-PER-PAGE': 10, @@ -228,11 +217,11 @@ describe('common_utils', () => { previousPage: 1, }; - expect(gl.utils.parseIntPagination(pagination)).toEqual(expectedPagination); + expect(commonUtils.parseIntPagination(pagination)).toEqual(expectedPagination); }); }); - describe('gl.utils.isMetaClick', () => { + describe('isMetaClick', () => { it('should identify meta click on Windows/Linux', () => { const e = { metaKey: false, @@ -240,7 +229,7 @@ describe('common_utils', () => { which: 1, }; - expect(gl.utils.isMetaClick(e)).toBe(true); + expect(commonUtils.isMetaClick(e)).toBe(true); }); it('should identify meta click on macOS', () => { @@ -250,7 +239,7 @@ describe('common_utils', () => { which: 1, }; - expect(gl.utils.isMetaClick(e)).toBe(true); + expect(commonUtils.isMetaClick(e)).toBe(true); }); it('should identify as meta click on middle-click or Mouse-wheel click', () => { @@ -260,7 +249,14 @@ describe('common_utils', () => { which: 2, }; - expect(gl.utils.isMetaClick(e)).toBe(true); + expect(commonUtils.isMetaClick(e)).toBe(true); + }); + }); + + describe('convertPermissionToBoolean', () => { + it('should convert a boolean in a string to a boolean', () => { + expect(commonUtils.convertPermissionToBoolean('true')).toEqual(true); + expect(commonUtils.convertPermissionToBoolean('false')).toEqual(false); }); }); @@ -333,53 +329,76 @@ describe('common_utils', () => { }); }); - describe('gl.utils.setFavicon', () => { + describe('setFavicon', () => { + beforeEach(() => { + const favicon = document.createElement('link'); + favicon.setAttribute('id', 'favicon'); + favicon.setAttribute('href', 'default/favicon'); + document.body.appendChild(favicon); + }); + + afterEach(() => { + document.body.removeChild(document.getElementById('favicon')); + }); it('should set page favicon to provided favicon', () => { const faviconPath = '//custom_favicon'; - const fakeLink = { - setAttribute() {}, - }; + commonUtils.setFavicon(faviconPath); - spyOn(window.document, 'getElementById').and.callFake(() => fakeLink); - spyOn(fakeLink, 'setAttribute').and.callFake((attr, val) => { - expect(attr).toEqual('href'); - expect(val.indexOf(faviconPath) > -1).toBe(true); - }); - gl.utils.setFavicon(faviconPath); + expect(document.getElementById('favicon').getAttribute('href')).toEqual(faviconPath); }); }); - describe('gl.utils.resetFavicon', () => { + describe('resetFavicon', () => { + beforeEach(() => { + const favicon = document.createElement('link'); + favicon.setAttribute('id', 'favicon'); + favicon.setAttribute('href', 'default/favicon'); + document.body.appendChild(favicon); + }); + + afterEach(() => { + document.body.removeChild(document.getElementById('favicon')); + }); + it('should reset page favicon to tanuki', () => { - const fakeLink = { - setAttribute() {}, - }; + commonUtils.resetFavicon(); + expect(document.getElementById('favicon').getAttribute('href')).toEqual('default/favicon'); + }); + }); + + describe('setCiStatusFavicon', () => { + const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1/status.json`; + + beforeEach(() => { + const favicon = document.createElement('link'); + favicon.setAttribute('id', 'favicon'); + document.body.appendChild(favicon); + }); - spyOn(window.document, 'getElementById').and.callFake(() => fakeLink); - spyOn(fakeLink, 'setAttribute').and.callFake((attr, val) => { - expect(attr).toEqual('href'); - expect(val).toMatch(/favicon/); + afterEach(() => { + document.body.removeChild(document.getElementById('favicon')); + }); + + it('should reset favicon in case of error', () => { + const favicon = document.getElementById('favicon'); + spyOn($, 'ajax').and.callFake(function (options) { + options.error(); + expect(favicon.getAttribute('href')).toEqual('null'); }); - gl.utils.resetFavicon(); + + commonUtils.setCiStatusFavicon(BUILD_URL); }); - }); - describe('gl.utils.setCiStatusFavicon', () => { it('should set page favicon to CI status favicon based on provided status', () => { - const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1/status.json`; const FAVICON_PATH = '//icon_status_success'; - const spySetFavicon = spyOn(gl.utils, 'setFavicon').and.stub(); - const spyResetFavicon = spyOn(gl.utils, 'resetFavicon').and.stub(); + const favicon = document.getElementById('favicon'); + spyOn($, 'ajax').and.callFake(function (options) { options.success({ favicon: FAVICON_PATH }); - expect(spySetFavicon).toHaveBeenCalledWith(FAVICON_PATH); - options.success(); - expect(spyResetFavicon).toHaveBeenCalled(); - options.error(); - expect(spyResetFavicon).toHaveBeenCalled(); + expect(favicon.getAttribute('href')).toEqual(FAVICON_PATH); }); - gl.utils.setCiStatusFavicon(BUILD_URL); + commonUtils.setCiStatusFavicon(BUILD_URL); }); }); diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js index 8830a2d29e5..eadab738376 100644 --- a/spec/javascripts/merge_request_tabs_spec.js +++ b/spec/javascripts/merge_request_tabs_spec.js @@ -78,8 +78,9 @@ import 'vendor/jquery.scrollTo'; }); describe('meta click', () => { + let metakeyEvent; beforeEach(function () { - spyOn(gl.utils, 'isMetaClick').and.returnValue(true); + metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true }); }); it('opens page when commits link is clicked', function () { @@ -89,7 +90,7 @@ import 'vendor/jquery.scrollTo'; }); this.class.bindEvents(); - document.querySelector('.merge-request-tabs .commits-tab a').click(); + $('.merge-request-tabs .commits-tab a').trigger(metakeyEvent); }); it('opens page when commits badge is clicked', function () { @@ -99,7 +100,7 @@ import 'vendor/jquery.scrollTo'; }); this.class.bindEvents(); - document.querySelector('.merge-request-tabs .commits-tab a .badge').click(); + $('.merge-request-tabs .commits-tab a .badge').trigger(metakeyEvent); }); }); diff --git a/spec/javascripts/todos_spec.js b/spec/javascripts/todos_spec.js index fd492159081..207ad2d6f97 100644 --- a/spec/javascripts/todos_spec.js +++ b/spec/javascripts/todos_spec.js @@ -26,9 +26,10 @@ describe('Todos', () => { describe('meta click', () => { let visitUrlSpy; + let metakeyEvent; beforeEach(() => { - spyOn(gl.utils, 'isMetaClick').and.returnValue(true); + metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true }); visitUrlSpy = spyOn(gl.utils, 'visitUrl').and.callFake(() => {}); }); @@ -41,7 +42,7 @@ describe('Todos', () => { done(); }); - todoItem.click(); + $('.todos-list .todo').trigger(metakeyEvent); expect(visitUrlSpy).not.toHaveBeenCalled(); }); diff --git a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js index 669ee248bf1..baa40516d28 100644 --- a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js +++ b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js @@ -232,29 +232,42 @@ describe('mrWidgetOptions', () => { describe('handleMounted', () => { it('should call required methods to do the initial kick-off', () => { spyOn(vm, 'initDeploymentsPolling'); - spyOn(vm, 'setFavicon'); + spyOn(vm, 'setFaviconHelper'); vm.handleMounted(); - expect(vm.setFavicon).toHaveBeenCalled(); + expect(vm.setFaviconHelper).toHaveBeenCalled(); expect(vm.initDeploymentsPolling).toHaveBeenCalled(); }); }); describe('setFavicon', () => { + let faviconElement; + + beforeEach(() => { + const favicon = document.createElement('link'); + favicon.setAttribute('id', 'favicon'); + favicon.setAttribute('href', 'default/favicon'); + document.body.appendChild(favicon); + + faviconElement = document.body.getElementById('favicon'); + }); + + afterEach(() => { + document.body.removeChild(document.getElementById('favicon')); + }); + it('should call setFavicon method', () => { - spyOn(gl.utils, 'setFavicon'); vm.setFavicon(); - expect(gl.utils.setFavicon).toHaveBeenCalledWith(vm.mr.ciStatusFaviconPath); + expect(faviconElement.getAttribute('href')).toEqual(vm.mr.ciStatusFaviconPath); }); it('should not call setFavicon when there is no ciStatusFaviconPath', () => { - spyOn(gl.utils, 'setFavicon'); vm.mr.ciStatusFaviconPath = null; - vm.setFavicon(); + vm.setFaviconHelper(); - expect(gl.utils.setFavicon).not.toHaveBeenCalled(); + expect(faviconElement.getAttribute('href')).toEqual(null); }); }); |