Run prettier on 31 files - 2 of 73

Part of our prettier migration; changing the arrow-parens style.

.prettierignore

@@ -10,39 +10,6 @@ doc/api/graphql/reference/gitlab_schema.graphql
 *.scss
 *.md
 
-## stoic-swirles
-app/assets/javascripts/repository/log_tree.js
-app/assets/javascripts/repository/utils/dom.js
-app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
-app/assets/javascripts/user_lists/store/utils.js
-app/assets/javascripts/vue_shared/components/alert_details_table.vue
-app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue
-app/assets/javascripts/vue_shared/constants.js
-ee/app/assets/javascripts/analytics/cycle_analytics/utils.js
-ee/app/assets/javascripts/analytics/repository_analytics/components/select_projects_dropdown.vue
-ee/app/assets/javascripts/boards/stores/getters.js
-ee/app/assets/javascripts/dependencies/store/modules/list/getters.js
-ee/app/assets/javascripts/epic/store/getters.js
-ee/app/assets/javascripts/insights/components/insights_page.vue
-ee/app/assets/javascripts/pages/trial_registrations/new/username_suggester.js
-ee/app/assets/javascripts/related_items_tree/store/mutations.js
-ee/app/assets/javascripts/security_dashboard/components/project_vulnerabilities.vue
-ee/spec/frontend/analytics/shared/components/groups_dropdown_filter_spec.js
-ee/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
-ee/spec/frontend/approvals/components/approvers_list_spec.js
-ee/spec/frontend/approvals/components/rule_controls_spec.js
-ee/spec/frontend/audit_events/components/audit_events_filter_spec.js
-ee/spec/frontend/dependencies/components/dependencies_table_spec.js
-ee/spec/frontend/geo_node_form/components/geo_node_form_capacities_spec.js
-ee/spec/frontend/security_configuration/dast_profiles/graphql/cache_utils_spec.js
-ee/spec/frontend/security_configuration/dast_site_profiles_form/components/dast_site_profile_form_spec.js
-ee/spec/frontend/security_configuration/dast_site_validation/components/dast_site_validation_modal_spec.js
-ee/spec/frontend/security_dashboard/components/vulnerability_list_spec.js
-ee/spec/frontend/sidebar/components/status/status_spec.js
-ee/spec/frontend/storage_counter/components/projects_table_spec.js
-ee/spec/frontend/vulnerabilities/footer_spec.js
-spec/frontend/blob/balsamiq/balsamiq_viewer_spec.js
-
 ## objective-swirles
 spec/frontend/boards/components/sidebar/board_sidebar_labels_select_spec.js
 spec/frontend/clusters/stores/clusters_store_spec.js

app/assets/javascripts/repository/log_tree.js

@@ -9,7 +9,9 @@ const fetchpromises = {};
 const resolvers = {};
 
 export function resolveCommit(commits, path, { resolve, entry }) {
-  const commit = commits.find(c => c.filePath === `${path}/${entry.name}` && c.type === entry.type);
+  const commit = commits.find(
+    (c) => c.filePath === `${path}/${entry.name}` && c.type === entry.type,
+  );
 
   if (commit) {
     resolve(commit);
@@ -42,7 +44,7 @@ export function fetchLogsTree(client, path, offset, resolver = null) {
     .then(({ data: newData, headers }) => {
       const headerLogsOffset = headers['more-logs-offset'];
       const sourceData = client.readQuery({ query: commitsQuery });
-      const data = produce(sourceData, draftState => {
+      const data = produce(sourceData, (draftState) => {
         draftState.commits.push(...normalizeData(newData, path));
       });
       client.writeQuery({
@@ -50,7 +52,7 @@ export function fetchLogsTree(client, path, offset, resolver = null) {
         data,
       });
 
-      resolvers[path].forEach(r => resolveCommit(data.commits, path, r));
+      resolvers[path].forEach((r) => resolveCommit(data.commits, path, r));
 
       delete fetchpromises[path];
 

app/assets/javascripts/repository/utils/dom.js

 import { joinPaths } from '~/lib/utils/url_utility';
 
 export const updateElementsVisibility = (selector, isVisible) => {
-  document.querySelectorAll(selector).forEach(elem => elem.classList.toggle('hidden', !isVisible));
+  document
+    .querySelectorAll(selector)
+    .forEach((elem) => elem.classList.toggle('hidden', !isVisible));
 };
 
 export const updateFormAction = (selector, basePath, path) => {

app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue

@@ -50,9 +50,13 @@ export default {
       $(this.$el).trigger('hidden.gl.dropdown');
     },
     getUpdateVariables(dropdownLabels) {
-      const currentLabelIds = this.selectedLabels.map(label => label.id);
-      const userAddedLabelIds = dropdownLabels.filter(label => label.set).map(label => label.id);
-      const userRemovedLabelIds = dropdownLabels.filter(label => !label.set).map(label => label.id);
+      const currentLabelIds = this.selectedLabels.map((label) => label.id);
+      const userAddedLabelIds = dropdownLabels
+        .filter((label) => label.set)
+        .map((label) => label.id);
+      const userRemovedLabelIds = dropdownLabels
+        .filter((label) => !label.set)
+        .map((label) => label.id);
 
       const labelIds = difference(union(currentLabelIds, userAddedLabelIds), userRemovedLabelIds);
 
@@ -116,7 +120,7 @@ export default {
           }
 
           const issuableType = camelCase(this.issuableType);
-          this.selectedLabels = data[mutationName]?.[issuableType]?.labels?.nodes?.map(label => ({
+          this.selectedLabels = data[mutationName]?.[issuableType]?.labels?.nodes?.map((label) => ({
             ...label,
             id: getIdFromGraphQLId(label.id),
           }));

app/assets/javascripts/user_lists/store/utils.js

-export const parseUserIds = userIds => userIds.split(/\s*,\s*/g);
+export const parseUserIds = (userIds) => userIds.split(/\s*,\s*/g);
 
-export const stringifyUserIds = userIds => userIds.join(',');
+export const stringifyUserIds = (userIds) => userIds.join(',');
 
-export const getErrorMessages = error => [].concat(error?.response?.data?.message ?? error.message);
+export const getErrorMessages = (error) =>
+  [].concat(error?.response?.data?.message ?? error.message);

app/assets/javascripts/vue_shared/components/alert_details_table.vue

@@ -49,7 +49,8 @@ export default {
       label: s__('AlertManagement|Key'),
       thClass,
       tdClass,
-      formatter: string => capitalizeFirstCharacter(convertToSentenceCase(splitCamelCase(string))),
+      formatter: (string) =>
+        capitalizeFirstCharacter(convertToSentenceCase(splitCamelCase(string))),
     },
     {
       key: 'value',

app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue

@@ -62,7 +62,9 @@ export default {
       return files.every(this.isFileValid);
     },
     isValidDragDataType({ dataTransfer }) {
-      return Boolean(dataTransfer && dataTransfer.types.some(t => t === VALID_DATA_TRANSFER_TYPE));
+      return Boolean(
+        dataTransfer && dataTransfer.types.some((t) => t === VALID_DATA_TRANSFER_TYPE),
+      );
     },
     ondrop({ dataTransfer = {} }) {
       this.dragCounter = 0;

app/assets/javascripts/vue_shared/constants.js

@@ -54,5 +54,6 @@ export const timeRanges = [
   },
 ];
 
-export const defaultTimeRange = timeRanges.find(tr => tr.default);
-export const getTimeWindow = timeWindowName => timeRanges.find(tr => tr.name === timeWindowName);
+export const defaultTimeRange = timeRanges.find((tr) => tr.default);
+export const getTimeWindow = (timeWindowName) =>
+  timeRanges.find((tr) => tr.name === timeWindowName);

ee/app/assets/javascripts/analytics/cycle_analytics/utils.js

@@ -28,11 +28,12 @@ export const removeFlash = (type = 'alert') => {
 export const toggleSelectedLabel = ({ selectedLabelIds = [], value = null }) => {
   if (!value) return selectedLabelIds;
   return selectedLabelIds.includes(value)
-    ? selectedLabelIds.filter(v => v !== value)
+    ? selectedLabelIds.filter((v) => v !== value)
     : [...selectedLabelIds, value];
 };
 
-export const isStartEvent = ev => Boolean(ev) && Boolean(ev.canBeStartEvent) && ev.canBeStartEvent;
+export const isStartEvent = (ev) =>
+  Boolean(ev) && Boolean(ev.canBeStartEvent) && ev.canBeStartEvent;
 
 export const eventToOption = (obj = null) => {
   if (!obj || (!obj.text && !obj.identifier)) return null;
@@ -55,7 +56,7 @@ export const isLabelEvent = (labelEvents = [], ev = null) =>
   Boolean(ev) && labelEvents.length && labelEvents.includes(ev);
 
 export const getLabelEventsIdentifiers = (events = []) =>
-  events.filter(ev => ev.type && ev.type === EVENT_TYPE_LABEL).map(i => i.identifier);
+  events.filter((ev) => ev.type && ev.type === EVENT_TYPE_LABEL).map((i) => i.identifier);
 
 /**
  * Checks if the specified stage is in memory or persisted to storage based on the id
@@ -101,7 +102,7 @@ export const transformRawStages = (stages = []) =>
 
 export const transformRawTasksByTypeData = (data = []) => {
   if (!data.length) return [];
-  return data.map(d => convertObjectPropsToCamelCase(d, { deep: true }));
+  return data.map((d) => convertObjectPropsToCamelCase(d, { deep: true }));
 };
 
 /**
@@ -137,10 +138,10 @@ export const transformRawTasksByTypeData = (data = []) => {
  * @param {Array} data - The duration data for selected stages
  * @returns {Array} An array with each item being an object containing the duration_in_seconds and finished_at values for an event
  */
-export const flattenDurationChartData = data =>
+export const flattenDurationChartData = (data) =>
   data
-    .map(stage =>
-      stage.data.map(event => {
+    .map((stage) =>
+      stage.data.map((event) => {
         const date = new Date(event.finished_at);
         return {
           ...event,
@@ -202,7 +203,7 @@ export const getDurationChartData = (data, startDate, endDate) => {
     currentDate = dayAfter(currentDate)
   ) {
     const currentISODate = dateFormat(newDate(currentDate), dateFormats.isoDate);
-    const valuesForDay = flattenedData.filter(object => object.finished_at === currentISODate);
+    const valuesForDay = flattenedData.filter((object) => object.finished_at === currentISODate);
     const summedData = valuesForDay.reduce((total, value) => total + value.duration_in_seconds, 0);
     const summedDataInDays = secondsToDays(summedData);
 
@@ -212,7 +213,7 @@ export const getDurationChartData = (data, startDate, endDate) => {
   return eventData;
 };
 
-export const orderByDate = (a, b, dateFmt = datetime => new Date(datetime).getTime()) =>
+export const orderByDate = (a, b, dateFmt = (datetime) => new Date(datetime).getTime()) =>
   dateFmt(a) - dateFmt(b);
 
 /**
@@ -224,7 +225,7 @@ export const orderByDate = (a, b, dateFmt = datetime => new Date(datetime).getTi
 export const flattenTaskByTypeSeries = (series = {}) =>
   Object.entries(series)
     .sort((a, b) => orderByDate(a[0], b[0]))
-    .map(dataSet => dataSet[1]);
+    .map((dataSet) => dataSet[1]);
 
 /**
  * @typedef {Object} RawTasksByTypeData
@@ -325,7 +326,7 @@ export const flashErrorIfStatusNotOk = ({ error, message }) => {
  * @param {Object} Response - Axios ajax response
  * @returns {Object} Returns the axios ajax response
  */
-export const checkForDataError = response => {
+export const checkForDataError = (response) => {
   const { data, status } = response;
   if (data?.error) {
     throw buildDataError({ status, error: data.error });
@@ -333,7 +334,7 @@ export const checkForDataError = response => {
   return response;
 };
 
-export const throwIfUserForbidden = error => {
+export const throwIfUserForbidden = (error) => {
   if (error?.response?.status === httpStatus.FORBIDDEN) {
     throw error;
   }
@@ -352,7 +353,7 @@ export const isStageNameExistsError = ({ status, errors }) =>
  * @returns {Array} An array of stages formatted with data required for the path navigation
  */
 export const transformStagesForPathNavigation = ({ stages, medians, selectedStage }) => {
-  const formattedStages = stages.map(stage => {
+  const formattedStages = stages.map((stage) => {
     const { days } = parseSeconds(medians[stage.id], {
       daysPerWeek: 7,
       hoursPerDay: 24,

ee/app/assets/javascripts/analytics/repository_analytics/components/select_projects_dropdown.vue

@@ -41,7 +41,7 @@ export default {
       },
       update(data) {
         return (
-          data.group?.projects?.nodes?.map(project => ({
+          data.group?.projects?.nodes?.map((project) => ({
             ...project,
             parsedId: getIdFromGraphQLId(project.id),
             isSelected: false,
@@ -66,7 +66,7 @@ export default {
   },
   computed: {
     filteredProjects() {
-      return this.groupProjects.filter(project =>
+      return this.groupProjects.filter((project) =>
         project.name.toLowerCase().includes(this.projectSearchTerm.toLowerCase()),
       );
     },
@@ -80,19 +80,21 @@ export default {
       return __('Select projects');
     },
     selectedProjectIds() {
-      return this.groupProjects.filter(project => project.isSelected).map(project => project.id);
+      return this.groupProjects
+        .filter((project) => project.isSelected)
+        .map((project) => project.id);
     },
   },
   methods: {
     clickDropdownProject(id) {
-      const index = this.groupProjects.map(project => project.id).indexOf(id);
+      const index = this.groupProjects.map((project) => project.id).indexOf(id);
       this.groupProjects[index].isSelected = !this.groupProjects[index].isSelected;
       this.selectAllProjects = false;
       this.$emit('select-project', this.groupProjects[index]);
     },
     clickSelectAllProjects() {
       this.selectAllProjects = true;
-      this.groupProjects = this.groupProjects.map(project => ({
+      this.groupProjects = this.groupProjects.map((project) => ({
         ...project,
         isSelected: false,
       }));
@@ -109,7 +111,7 @@ export default {
             after: this.projectsPageInfo.endCursor,
           },
           updateQuery(previousResult, { fetchMoreResult }) {
-            const results = produce(fetchMoreResult, draftData => {
+            const results = produce(fetchMoreResult, (draftData) => {
               // eslint-disable-next-line no-param-reassign
               draftData.group.projects.nodes = [
                 ...previousResult.group.projects.nodes,

ee/app/assets/javascripts/boards/stores/getters.js

@@ -3,22 +3,24 @@ import gettersCE from '~/boards/stores/getters';
 export default {
   ...gettersCE,
 
-  isSwimlanesOn: state => {
+  isSwimlanesOn: (state) => {
     return Boolean(gon?.features?.swimlanes && state.isShowingEpicsSwimlanes);
   },
   getIssuesByEpic: (state, getters) => (listId, epicId) => {
-    return getters.getIssuesByList(listId).filter(issue => issue.epic && issue.epic.id === epicId);
+    return getters
+      .getIssuesByList(listId)
+      .filter((issue) => issue.epic && issue.epic.id === epicId);
   },
 
-  getUnassignedIssues: (state, getters) => listId => {
-    return getters.getIssuesByList(listId).filter(i => Boolean(i.epic) === false);
+  getUnassignedIssues: (state, getters) => (listId) => {
+    return getters.getIssuesByList(listId).filter((i) => Boolean(i.epic) === false);
   },
 
-  getEpicById: state => epicId => {
-    return state.epics.find(epic => epic.id === epicId);
+  getEpicById: (state) => (epicId) => {
+    return state.epics.find((epic) => epic.id === epicId);
   },
 
-  shouldUseGraphQL: state => {
+  shouldUseGraphQL: (state) => {
     return state.isShowingEpicsSwimlanes || gon?.features?.graphqlBoardLists;
   },
 };

ee/app/assets/javascripts/dependencies/store/modules/list/getters.js

@@ -4,9 +4,10 @@ import { getTimeago } from '~/lib/utils/datetime_utility';
 export const generatedAtTimeAgo = ({ reportInfo: { generatedAt } }) =>
   generatedAt ? getTimeago().format(generatedAt) : '';
 
-export const isJobNotSetUp = state => state.reportInfo.status === REPORT_STATUS.jobNotSetUp;
-export const isJobFailed = state => state.reportInfo.status === REPORT_STATUS.jobFailed;
-export const isIncomplete = state => state.reportInfo.status === REPORT_STATUS.incomplete;
-export const hasNoDependencies = state => state.reportInfo.status === REPORT_STATUS.noDependencies;
+export const isJobNotSetUp = (state) => state.reportInfo.status === REPORT_STATUS.jobNotSetUp;
+export const isJobFailed = (state) => state.reportInfo.status === REPORT_STATUS.jobFailed;
+export const isIncomplete = (state) => state.reportInfo.status === REPORT_STATUS.incomplete;
+export const hasNoDependencies = (state) =>
+  state.reportInfo.status === REPORT_STATUS.noDependencies;
 
 export const downloadEndpoint = ({ endpoint }) => endpoint;

ee/app/assets/javascripts/epic/store/getters.js

@@ -4,24 +4,25 @@ import epicUtils from '../utils/epic_utils';
 
 import { statusType } from '../constants';
 
-export const isEpicOpen = state => state.state === statusType.open;
+export const isEpicOpen = (state) => state.state === statusType.open;
 
 export const isUserSignedIn = () => Boolean(gon.current_user_id);
 
-export const startDateTime = state => (state.startDate ? parsePikadayDate(state.startDate) : null);
+export const startDateTime = (state) =>
+  state.startDate ? parsePikadayDate(state.startDate) : null;
 
-export const startDateTimeFixed = state =>
+export const startDateTimeFixed = (state) =>
   state.startDateFixed ? parsePikadayDate(state.startDateFixed) : null;
 
-export const startDateTimeFromMilestones = state =>
+export const startDateTimeFromMilestones = (state) =>
   state.startDateFromMilestones ? parsePikadayDate(state.startDateFromMilestones) : null;
 
-export const dueDateTime = state => (state.dueDate ? parsePikadayDate(state.dueDate) : null);
+export const dueDateTime = (state) => (state.dueDate ? parsePikadayDate(state.dueDate) : null);
 
-export const dueDateTimeFixed = state =>
+export const dueDateTimeFixed = (state) =>
   state.dueDateFixed ? parsePikadayDate(state.dueDateFixed) : null;
 
-export const dueDateTimeFromMilestones = state =>
+export const dueDateTimeFromMilestones = (state) =>
   state.dueDateFromMilestones ? parsePikadayDate(state.dueDateFromMilestones) : null;
 
 export const startDateForCollapsedSidebar = (state, getters) =>
@@ -55,4 +56,4 @@ export const isDateInvalid = (state, getters) => {
   );
 };
 
-export const ancestors = state => (state.ancestors ? [...state.ancestors].reverse() : []);
+export const ancestors = (state) => (state.ancestors ? [...state.ancestors].reverse() : []);

ee/app/assets/javascripts/insights/components/insights_page.vue

@@ -35,7 +35,7 @@ export default {
       return this.pageConfig.charts;
     },
     chartKeys() {
-      return this.charts.map(chart => chart.title);
+      return this.charts.map((chart) => chart.title);
     },
     hasChartsConfigured() {
       return !isUndefined(this.charts) && this.charts.length > 0;
@@ -55,7 +55,9 @@ export default {
       if (this.hasChartsConfigured) {
         this.initChartData(this.chartKeys);
 
-        this.charts.forEach(chart => this.fetchChartData({ endpoint: this.queryEndpoint, chart }));
+        this.charts.forEach((chart) =>
+          this.fetchChartData({ endpoint: this.queryEndpoint, chart }),
+        );
       }
     },
   },

ee/app/assets/javascripts/pages/trial_registrations/new/username_suggester.js

@@ -29,7 +29,9 @@ export default class UsernameSuggester {
       throw new Error('The API path was not specified.');
     }
 
-    this.sourceElements = sourceElementsIds.map(id => document.getElementById(id)).filter(Boolean);
+    this.sourceElements = sourceElementsIds
+      .map((id) => document.getElementById(id))
+      .filter(Boolean);
     this.isLoading = false;
     this.debouncedSuggestWrapper = debounce(
       this.suggestUsername.bind(this),
@@ -42,7 +44,7 @@ export default class UsernameSuggester {
   }
 
   bindEvents() {
-    this.sourceElements.forEach(sourceElement => {
+    this.sourceElements.forEach((sourceElement) => {
       sourceElement.addEventListener('change', this.debouncedSuggestWrapper);
     });
   }
@@ -76,7 +78,7 @@ export default class UsernameSuggester {
    */
   joinSources() {
     return this.sourceElements
-      .map(el => el.value)
+      .map((el) => el.value)
       .filter(Boolean)
       .join('_');
   }
@@ -84,7 +86,7 @@ export default class UsernameSuggester {
   cleanup() {
     window.removeEventListener('beforeunload', this.cleanupWrapper);
 
-    this.sourceElements.forEach(sourceElement =>
+    this.sourceElements.forEach((sourceElement) =>
       sourceElement.removeEventListener('change', this.debouncedSuggestWrapper),
     );
   }

ee/app/assets/javascripts/related_items_tree/store/mutations.js

@@ -49,7 +49,7 @@ export default {
   },
 
   [types.SET_ITEM_CHILDREN_FLAGS](state, { children }) {
-    children.forEach(item => {
+    children.forEach((item) => {
       Vue.set(state.childrenFlags, item.reference, {
         itemExpanded: false,
         itemChildrenFetchInProgress: false,
@@ -166,7 +166,9 @@ export default {
   },
 
   [types.ADD_PENDING_REFERENCES](state, references) {
-    const nonDuplicateReferences = references.filter(ref => !state.pendingReferences.includes(ref));
+    const nonDuplicateReferences = references.filter(
+      (ref) => !state.pendingReferences.includes(ref),
+    );
     state.pendingReferences.push(...nonDuplicateReferences);
   },
 

ee/app/assets/javascripts/security_dashboard/components/project_vulnerabilities.vue

@@ -70,7 +70,8 @@ export default {
       },
       update({ project = {} }) {
         const { available = [], enabled = [], pipelineRun = [] } = project?.securityScanners || {};
-        const translateScannerName = scannerName => this.$options.i18n[scannerName] || scannerName;
+        const translateScannerName = (scannerName) =>
+          this.$options.i18n[scannerName] || scannerName;
 
         return {
           available: available.map(translateScannerName),
@@ -97,7 +98,7 @@ export default {
         this.$apollo.queries.vulnerabilities.fetchMore({
           variables: { after: this.pageInfo.endCursor },
           updateQuery: (previousResult, { fetchMoreResult }) => {
-            const results = produce(fetchMoreResult, draftData => {
+            const results = produce(fetchMoreResult, (draftData) => {
               // eslint-disable-next-line no-param-reassign
               draftData.project.vulnerabilities.nodes = [
                 ...previousResult.project.vulnerabilities.nodes,

ee/spec/frontend/analytics/shared/components/groups_dropdown_filter_spec.js

@@ -47,9 +47,9 @@ describe('GroupsDropdownFilter component', () => {
   const findDropdownItems = () =>
     findDropdown()
       .findAll(GlDropdownItem)
-      .filter(w => w.text() !== 'No matching results');
+      .filter((w) => w.text() !== 'No matching results');
 
-  const findDropdownAtIndex = index => findDropdownItems().at(index);
+  const findDropdownAtIndex = (index) => findDropdownItems().at(index);
   const findDropdownButton = () => findDropdown().find('.dropdown-toggle');
   const findDropdownButtonAvatar = () => findDropdown().find('.gl-avatar');
 
@@ -58,7 +58,8 @@ describe('GroupsDropdownFilter component', () => {
     expect(dropdown.find('div.gl-avatar-identicon').exists()).toBe(hasIdenticon);
   };
 
-  const selectDropdownAtIndex = index => findDropdownAtIndex(index).find('button').trigger('click');
+  const selectDropdownAtIndex = (index) =>
+    findDropdownAtIndex(index).find('button').trigger('click');
 
   describe('when passed a defaultGroup as prop', () => {
     beforeEach(() => {

ee/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js

@@ -59,22 +59,23 @@ describe('ProjectsDropdownFilter component', () => {
   const findDropdownItems = () =>
     findDropdown()
       .findAll(GlDropdownItem)
-      .filter(w => w.text() !== 'No matching results');
+      .filter((w) => w.text() !== 'No matching results');
 
-  const findDropdownAtIndex = index => findDropdownItems().at(index);
+  const findDropdownAtIndex = (index) => findDropdownItems().at(index);
 
   const findDropdownButton = () => findDropdown().find('.dropdown-toggle');
   const findDropdownButtonAvatar = () => findDropdown().find('.gl-avatar');
-  const findDropdownButtonAvatarAtIndex = index => findDropdownAtIndex(index).find('img.gl-avatar');
-  const findDropdownButtonIdentIconAtIndex = index =>
+  const findDropdownButtonAvatarAtIndex = (index) =>
+    findDropdownAtIndex(index).find('img.gl-avatar');
+  const findDropdownButtonIdentIconAtIndex = (index) =>
     findDropdownAtIndex(index).find('div.gl-avatar-identicon');
 
-  const findDropdownNameAtIndex = index =>
+  const findDropdownNameAtIndex = (index) =>
     findDropdownAtIndex(index).find('[data-testid="project-name"');
-  const findDropdownFullPathAtIndex = index =>
+  const findDropdownFullPathAtIndex = (index) =>
     findDropdownAtIndex(index).find('[data-testid="project-full-path"]');
 
-  const selectDropdownItemAtIndex = index =>
+  const selectDropdownItemAtIndex = (index) =>
     findDropdownAtIndex(index).find('button').trigger('click');
 
   describe('queryParams are applied when fetching data', () => {

ee/spec/frontend/approvals/components/approvers_list_spec.js

@@ -50,7 +50,9 @@ describe('ApproversList', () => {
     it('renders items', () => {
       factory();
 
-      const items = wrapper.findAll(ApproversListItem).wrappers.map(item => item.props('approver'));
+      const items = wrapper
+        .findAll(ApproversListItem)
+        .wrappers.map((item) => item.props('approver'));
 
       expect(items).toEqual(TEST_APPROVERS);
     });

ee/spec/frontend/approvals/components/rule_controls_spec.js

@@ -10,7 +10,7 @@ localVue.use(Vuex);
 
 const TEST_RULE = { id: 10 };
 
-const findButtonLabel = button => button.attributes('aria-label') || button.text();
+const findButtonLabel = (button) => button.attributes('aria-label') || button.text();
 const hasLabel = (button, label) => findButtonLabel(button) === label;
 
 describe('EE Approvals RuleControls', () => {
@@ -28,14 +28,17 @@ describe('EE Approvals RuleControls', () => {
     });
   };
   const findButtons = () => wrapper.findAll(GlButton);
-  const findButton = label => findButtons().filter(button => hasLabel(button, label)).wrappers[0];
+  const findButton = (label) =>
+    findButtons().filter((button) => hasLabel(button, label)).wrappers[0];
   const findEditButton = () => findButton('Edit');
   const findRemoveButton = () => findButton('Remove');
 
   beforeEach(() => {
     store = createStoreOptions(MREditModule());
     ({ actions } = store.modules.approvals);
-    ['requestEditRule', 'requestDeleteRule'].forEach(actionName => jest.spyOn(actions, actionName));
+    ['requestEditRule', 'requestDeleteRule'].forEach((actionName) =>
+      jest.spyOn(actions, actionName),
+    );
   });
 
   afterEach(() => {

ee/spec/frontend/audit_events/components/audit_events_filter_spec.js

@@ -10,7 +10,8 @@ describe('AuditEventsFilter', () => {
   const value = [{ type: 'project', value: { data: 1, operator: '=' } }];
   const findFilteredSearch = () => wrapper.find(GlFilteredSearch);
   const getAvailableTokens = () => findFilteredSearch().props('availableTokens');
-  const getAvailableTokenProps = type => getAvailableTokens().find(token => token.type === type);
+  const getAvailableTokenProps = (type) =>
+    getAvailableTokens().find((token) => token.type === type);
 
   const initComponent = (props = {}) => {
     wrapper = shallowMount(AuditEventsFilter, {

ee/spec/frontend/dependencies/components/dependencies_table_spec.js

@@ -25,7 +25,7 @@ describe('DependenciesTable component', () => {
   const findTableRows = () => wrapper.findAll('tbody > tr');
   const findRowToggleButtons = () => wrapper.findAll(GlButton);
   const findDependencyVulnerabilities = () => wrapper.find(DependencyVulnerabilities);
-  const normalizeWhitespace = string => string.replace(/\s+/g, ' ');
+  const normalizeWhitespace = (string) => string.replace(/\s+/g, ' ');
 
   const expectDependencyRow = (rowWrapper, dependency) => {
     const [
@@ -97,7 +97,7 @@ describe('DependenciesTable component', () => {
       const expectedLabels = DependenciesTable.fields.map(({ label }) => label);
       const headerCells = wrapper.findAll('thead th').wrappers;
 
-      expect(headerCells.map(cell => cell.text())).toEqual(expectedLabels);
+      expect(headerCells.map((cell) => cell.text())).toEqual(expectedLabels);
     });
 
     it('does not render any rows', () => {
@@ -189,7 +189,9 @@ describe('DependenciesTable component', () => {
       let rowIndexWithVulnerabilities;
 
       beforeEach(() => {
-        rowIndexWithVulnerabilities = dependencies.findIndex(dep => dep.vulnerabilities.length > 0);
+        rowIndexWithVulnerabilities = dependencies.findIndex(
+          (dep) => dep.vulnerabilities.length > 0,
+        );
       });
 
       it('can be displayed by clicking on the toggle button', () => {

ee/spec/frontend/geo_node_form/components/geo_node_form_capacities_spec.js

@@ -61,7 +61,7 @@ describe('GeoNodeFormCapacities', () => {
   const findGeoNodeFormReverificationIntervalField = () =>
     wrapper.find('#node-reverification-interval-field');
   const findErrorMessage = () => wrapper.find('.invalid-feedback');
-  const findFieldLabel = id => wrapper.vm.formGroups.find(el => el.id === id).label;
+  const findFieldLabel = (id) => wrapper.vm.formGroups.find((el) => el.id === id).label;
 
   describe('template', () => {
     describe.each`
@@ -276,11 +276,15 @@ describe('GeoNodeFormCapacities', () => {
         });
 
         it('contains conditional form groups for primary', () => {
-          expect(wrapper.vm.visibleFormGroups.some(g => g.conditional === 'primary')).toBeTruthy();
+          expect(
+            wrapper.vm.visibleFormGroups.some((g) => g.conditional === 'primary'),
+          ).toBeTruthy();
         });
 
         it('does not contain conditional form groups for secondary', () => {
-          expect(wrapper.vm.visibleFormGroups.some(g => g.conditional === 'secondary')).toBeFalsy();
+          expect(
+            wrapper.vm.visibleFormGroups.some((g) => g.conditional === 'secondary'),
+          ).toBeFalsy();
         });
       });
 
@@ -291,12 +295,12 @@ describe('GeoNodeFormCapacities', () => {
 
         it('contains conditional form groups for secondary', () => {
           expect(
-            wrapper.vm.visibleFormGroups.some(g => g.conditional === 'secondary'),
+            wrapper.vm.visibleFormGroups.some((g) => g.conditional === 'secondary'),
           ).toBeTruthy();
         });
 
         it('does not contain conditional form groups for primary', () => {
-          expect(wrapper.vm.visibleFormGroups.some(g => g.conditional === 'primary')).toBeFalsy();
+          expect(wrapper.vm.visibleFormGroups.some((g) => g.conditional === 'primary')).toBeFalsy();
         });
       });
     });

ee/spec/frontend/security_configuration/dast_profiles/graphql/cache_utils_spec.js

@@ -9,7 +9,9 @@ import { siteProfiles } from '../mocks/mock_data';
 
 describe('EE - DastProfiles GraphQL CacheUtils', () => {
   describe('appendToPreviousResult', () => {
-    it.each(['siteProfiles', 'scannerProfiles'])('appends new results to previous', profileType => {
+    it.each(['siteProfiles', 'scannerProfiles'])(
+      'appends new results to previous',
+      (profileType) => {
         const previousResult = { project: { [profileType]: { edges: ['foo'] } } };
         const fetchMoreResult = { project: { [profileType]: { edges: ['bar'] } } };
 
@@ -17,11 +19,14 @@ describe('EE - DastProfiles GraphQL CacheUtils', () => {
         const result = appendToPreviousResult(profileType)(previousResult, { fetchMoreResult });
 
         expect(result).toEqual(expected);
-    });
+      },
+    );
   });
 
   describe('removeProfile', () => {
-    it.each(['foo', 'bar'])('removes the profile with the given id from the cache', profileType => {
+    it.each(['foo', 'bar'])(
+      'removes the profile with the given id from the cache',
+      (profileType) => {
         const mockQueryBody = { query: 'foo', variables: { foo: 'bar' } };
         const mockProfiles = [{ id: 0 }, { id: 1 }];
         const mockData = {
@@ -53,7 +58,8 @@ describe('EE - DastProfiles GraphQL CacheUtils', () => {
             },
           },
         });
-    });
+      },
+    );
   });
 
   describe('dastProfilesDeleteResponse', () => {

ee/spec/frontend/security_configuration/dast_site_profiles_form/components/dast_site_profile_form_spec.js

@@ -43,7 +43,7 @@ describe('DastSiteProfileForm', () => {
   const withinComponent = () => within(wrapper.element);
 
   const findForm = () => wrapper.find(GlForm);
-  const findByTestId = testId => wrapper.find(`[data-testid="${testId}"]`);
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
   const findProfileNameInput = () => findByTestId('profile-name-input');
   const findTargetUrlInput = () => findByTestId('target-url-input');
   const findAuthSection = () => wrapper.find(DastSiteAuthSection);
@@ -60,7 +60,7 @@ describe('DastSiteProfileForm', () => {
     field.trigger('blur');
   };
 
-  const mockClientFactory = handlers => {
+  const mockClientFactory = (handlers) => {
     const mockClient = createMockClient();
 
     requestHandlers = {
@@ -81,7 +81,7 @@ describe('DastSiteProfileForm', () => {
     return mockClient;
   };
 
-  const respondWith = handlers => {
+  const respondWith = (handlers) => {
     apolloProvider.defaultClient = mockClientFactory(handlers);
   };
 
@@ -130,11 +130,14 @@ describe('DastSiteProfileForm', () => {
       createFullComponent();
     });
 
-    it.each(['asd', 'example.com'])('is marked as invalid provided an invalid URL', async value => {
+    it.each(['asd', 'example.com'])(
+      'is marked as invalid provided an invalid URL',
+      async (value) => {
         await setFieldValue(findTargetUrlInput(), value);
 
         expect(wrapper.text()).toContain(errorMessage);
-    });
+      },
+    );
 
     it('is marked as valid provided a valid URL', async () => {
       await setFieldValue(findTargetUrlInput(), targetUrl);
@@ -259,7 +262,7 @@ describe('DastSiteProfileForm', () => {
           const alert = findAlert();
 
           expect(alert.exists()).toBe(true);
-          errors.forEach(error => {
+          errors.forEach((error) => {
             expect(alert.text()).toContain(error);
           });
         });

ee/spec/frontend/security_configuration/dast_site_validation/components/dast_site_validation_modal_spec.js

@@ -71,16 +71,16 @@ describe('DastSiteValidationModal', () => {
   const createFullComponent = componentFactory(mount);
 
   const withinComponent = () => within(wrapper.find(GlModal).element);
-  const findByTestId = id => wrapper.find(`[data-testid="${id}"`);
+  const findByTestId = (id) => wrapper.find(`[data-testid="${id}"`);
   const findDownloadButton = () => findByTestId('download-dast-text-file-validation-button');
   const findValidationPathPrefix = () => findByTestId('dast-site-validation-path-prefix');
   const findValidationPathInput = () => findByTestId('dast-site-validation-path-input');
   const findValidateButton = () => findByTestId('validate-dast-site-button');
-  const findRadioInputForValidationMethod = validationMethod =>
+  const findRadioInputForValidationMethod = (validationMethod) =>
     withinComponent().queryByRole('radio', {
       name: new RegExp(`${validationMethod} validation`, 'i'),
     });
-  const enableValidationMethod = validationMethod =>
+  const enableValidationMethod = (validationMethod) =>
     createWrapper(findRadioInputForValidationMethod(validationMethod)).trigger('click');
 
   afterEach(() => {
@@ -155,9 +155,12 @@ describe('DastSiteValidationModal', () => {
         expect(downloadButton).not.toBeNull();
       });
 
-      it.each(validationMethods)('renders a radio input for "%s" validation', validationMethod => {
+      it.each(validationMethods)(
+        'renders a radio input for "%s" validation',
+        (validationMethod) => {
           expect(findRadioInputForValidationMethod(validationMethod)).not.toBe(null);
-      });
+        },
+      );
 
       it('renders an input group with the target URL prepended', () => {
         const inputGroup = withinComponent().getByRole('group', {
@@ -179,7 +182,7 @@ describe('DastSiteValidationModal', () => {
   });
 
   describe('validation methods', () => {
-    describe.each(validationMethods)('common behaviour', validationMethod => {
+    describe.each(validationMethods)('common behaviour', (validationMethod) => {
       const expectedFileName = `GitLab-DAST-Site-Validation-${token}.txt`;
 
       describe.each`
@@ -260,7 +263,7 @@ describe('DastSiteValidationModal', () => {
       it.each([
         /step 2 - add following http header to your site/i,
         /step 3 - confirm header location and validate/i,
-      ])('shows the correct descriptions', descriptionText => {
+      ])('shows the correct descriptions', (descriptionText) => {
         expect(withinComponent().getByText(descriptionText)).not.toBe(null);
       });
 
@@ -284,7 +287,7 @@ describe('DastSiteValidationModal', () => {
     });
   });
 
-  describe.each(validationMethods)('"%s" validation submission', validationMethod => {
+  describe.each(validationMethods)('"%s" validation submission', (validationMethod) => {
     beforeEach(async () => {
       createFullComponent();
       await waitForPromises();

ee/spec/frontend/security_dashboard/components/vulnerability_list_spec.js

@@ -43,20 +43,20 @@ describe('Vulnerability list component', () => {
 
   const findTable = () => wrapper.find(GlTable);
   const findSortableColumn = () => wrapper.find('[aria-sort="descending"]');
-  const findCell = label => wrapper.find(`.js-${label}`);
+  const findCell = (label) => wrapper.find(`.js-${label}`);
   const findRows = () => wrapper.findAll('tbody tr');
   const findRow = (index = 0) => findRows().at(index);
-  const findRowById = id => wrapper.find(`tbody tr[data-pk="${id}"`);
-  const findAutoFixBulbInRow = row => row.find('[data-testid="vulnerability-solutions-bulb"]');
+  const findRowById = (id) => wrapper.find(`tbody tr[data-pk="${id}"`);
+  const findAutoFixBulbInRow = (row) => row.find('[data-testid="vulnerability-solutions-bulb"]');
   const findIssuesBadge = (index = 0) => wrapper.findAll(IssuesBadge).at(index);
   const findRemediatedBadge = () => wrapper.find(RemediatedBadge);
   const findSecurityScannerAlert = () => wrapper.find(SecurityScannerAlert);
   const findDismissalButton = () => findSecurityScannerAlert().find('button[aria-label="Dismiss"]');
   const findSelectionSummary = () => wrapper.find(SelectionSummary);
-  const findRowVulnerabilityCommentIcon = row => findRow(row).find(VulnerabilityCommentIcon);
-  const findDataCell = label => wrapper.find(`[data-testid="${label}"]`);
-  const findDataCells = label => wrapper.findAll(`[data-testid="${label}"]`);
-  const findLocationTextWrapper = cell => cell.find(GlTruncate);
+  const findRowVulnerabilityCommentIcon = (row) => findRow(row).find(VulnerabilityCommentIcon);
+  const findDataCell = (label) => wrapper.find(`[data-testid="${label}"]`);
+  const findDataCells = (label) => wrapper.findAll(`[data-testid="${label}"]`);
+  const findLocationTextWrapper = (cell) => cell.find(GlTruncate);
   const findFiltersProducedNoResults = () => wrapper.find(FiltersProducedNoResults);
   const findDashboardHasNoVulnerabilities = () => wrapper.find(DashboardHasNoVulnerabilities);
   const findVendorNames = () => wrapper.find(`[data-testid="vulnerability-vendor"]`);
@@ -350,7 +350,7 @@ describe('Vulnerability list component', () => {
 
     beforeEach(() => {
       newVulnerabilities = generateVulnerabilities();
-      newVulnerabilities = newVulnerabilities.map(v => ({
+      newVulnerabilities = newVulnerabilities.map((v) => ({
         ...v,
         scanner: { vendor: 'GitLab' },
       }));
@@ -372,7 +372,7 @@ describe('Vulnerability list component', () => {
 
     beforeEach(() => {
       newVulnerabilities = generateVulnerabilities();
-      newVulnerabilities = newVulnerabilities.map(v => ({ ...v, scanner: { vendor: '' } }));
+      newVulnerabilities = newVulnerabilities.map((v) => ({ ...v, scanner: { vendor: '' } }));
       wrapper = createWrapper({
         props: {
           vulnerabilities: newVulnerabilities,
@@ -460,14 +460,14 @@ describe('Vulnerability list component', () => {
       ${['DISMISSED']}
       ${[]}
       ${['DETECTED', 'DISMISSED']}
-    `('should only show vulnerabilities that match filter $state', state => {
+    `('should only show vulnerabilities that match filter $state', (state) => {
       wrapper = createWrapper({ props: { vulnerabilities, filters: { state } } });
-      const filteredVulnerabilities = vulnerabilities.filter(x =>
+      const filteredVulnerabilities = vulnerabilities.filter((x) =>
         state.length ? state.includes(x.state) : true,
       );
       expect(findRows().length).toBe(filteredVulnerabilities.length);
 
-      filteredVulnerabilities.forEach(vulnerability => {
+      filteredVulnerabilities.forEach((vulnerability) => {
         expect(findRowById(vulnerability.id).exists()).toBe(true);
       });
     });
@@ -576,7 +576,8 @@ describe('Vulnerability list component', () => {
   });
 
   describe('row click', () => {
-    const findRowCheckbox = index => findRow(index).find('[data-testid="vulnerability-checkbox"]');
+    const findRowCheckbox = (index) =>
+      findRow(index).find('[data-testid="vulnerability-checkbox"]');
 
     beforeEach(() => {
       wrapper = createWrapper({ props: { vulnerabilities } });
@@ -585,15 +586,15 @@ describe('Vulnerability list component', () => {
     it('will select and deselect vulnerabilities', async () => {
       const rowCount = vulnerabilities.length;
       const rowsToClick = [0, 1, 2];
-      const clickRows = () => rowsToClick.forEach(row => findRow(row).trigger('click'));
-      const expectRowCheckboxesToBe = condition => {
+      const clickRows = () => rowsToClick.forEach((row) => findRow(row).trigger('click'));
+      const expectRowCheckboxesToBe = (condition) => {
         for (let i = 0; i < rowCount; i += 1)
           expect(findRowCheckbox(i).element.checked).toBe(condition(i));
       };
 
       clickRows();
       await wrapper.vm.$nextTick();
-      expectRowCheckboxesToBe(i => rowsToClick.includes(i));
+      expectRowCheckboxesToBe((i) => rowsToClick.includes(i));
 
       clickRows();
       await wrapper.vm.$nextTick();

ee/spec/frontend/sidebar/components/status/status_spec.js

@@ -4,23 +4,23 @@ import Status from 'ee/sidebar/components/status/status.vue';
 import { healthStatus, healthStatusTextMap } from 'ee/sidebar/constants';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
-const getStatusText = wrapper => wrapper.find('.value .text-plain').text();
+const getStatusText = (wrapper) => wrapper.find('.value .text-plain').text();
 
-const getStatusTitleText = wrapper => wrapper.find('[data-testid="statusTitle"]').text();
+const getStatusTitleText = (wrapper) => wrapper.find('[data-testid="statusTitle"]').text();
 
-const getStatusTooltipValue = wrapper =>
+const getStatusTooltipValue = (wrapper) =>
   getBinding(wrapper.find({ ref: 'status' }).element, 'gl-tooltip').value;
 
-const getEditButtonTooltipValue = wrapper =>
+const getEditButtonTooltipValue = (wrapper) =>
   getBinding(wrapper.find('[data-testid="editButtonTooltip"]').element, 'gl-tooltip').value;
 
-const getEditButton = wrapper => wrapper.find({ ref: 'editButton' });
+const getEditButton = (wrapper) => wrapper.find({ ref: 'editButton' });
 
-const getDropdownClasses = wrapper => wrapper.find('[data-testid="dropdownWrapper"]').classes();
+const getDropdownClasses = (wrapper) => wrapper.find('[data-testid="dropdownWrapper"]').classes();
 
-const getDropdownElement = wrapper => wrapper.find(GlDropdown);
+const getDropdownElement = (wrapper) => wrapper.find(GlDropdown);
 
-const getRemoveStatusItem = wrapper => wrapper.find(GlDropdownItem);
+const getRemoveStatusItem = (wrapper) => wrapper.find(GlDropdownItem);
 
 describe('Status', () => {
   let wrapper;
@@ -157,7 +157,9 @@ describe('Status', () => {
       });
     });
 
-    describe.each(Object.values(healthStatus))(`when "%s" is provided for status`, statusValue => {
+    describe.each(Object.values(healthStatus))(
+      `when "%s" is provided for status`,
+      (statusValue) => {
         beforeEach(() => {
           const props = {
             status: statusValue,
@@ -175,7 +177,8 @@ describe('Status', () => {
             `Health status: ${healthStatusTextMap[statusValue]}`,
           );
         });
-    });
+      },
+    );
   });
 
   describe('status dropdown', () => {
@@ -243,7 +246,7 @@ describe('Status', () => {
     });
 
     describe('dropdown', () => {
-      const getIterableArray = arr => {
+      const getIterableArray = (arr) => {
         return arr.map((value, index) => [value, index]);
       };
 

ee/spec/frontend/storage_counter/components/projects_table_spec.js

@@ -52,7 +52,9 @@ describe('Usage Quotas project table component', () => {
     });
 
     it('renders excess storage rows with error state', () => {
-      const rowsWithError = findTableRowsWithExcessStorage().filter(r => r.classes('gl-bg-red-50'));
+      const rowsWithError = findTableRowsWithExcessStorage().filter((r) =>
+        r.classes('gl-bg-red-50'),
+      );
       expect(rowsWithError).toHaveLength(1);
     });
   });

ee/spec/frontend/vulnerabilities/footer_spec.js

@@ -283,7 +283,9 @@ describe('Vulnerability Footer', () => {
     const statusDescription = () => wrapper.find(StatusDescription);
     const vulnerabilityStates = Object.keys(VULNERABILITY_STATES);
 
-    it.each(vulnerabilityStates)(`shows detection note when vulnerability state is '%s'`, state => {
+    it.each(vulnerabilityStates)(
+      `shows detection note when vulnerability state is '%s'`,
+      (state) => {
         createWrapper({ state });
 
         expect(detectionNote().exists()).toBe(true);
@@ -291,6 +293,7 @@ describe('Vulnerability Footer', () => {
           state: 'detected',
           pipeline: vulnerability.pipeline,
         });
-    });
+      },
+    );
   });
 });

spec/frontend/blob/balsamiq/balsamiq_viewer_spec.js

@@ -49,7 +49,7 @@ describe('BalsamiqViewer', () => {
       );
     });
 
-    it('should call `renderFile` on request success', done => {
+    it('should call `renderFile` on request success', (done) => {
       jest.spyOn(axios, 'get').mockReturnValue(requestSuccess);
       jest.spyOn(bv, 'renderFile').mockImplementation(() => {});
 
@@ -61,7 +61,7 @@ describe('BalsamiqViewer', () => {
         .catch(done.fail);
     });
 
-    it('should not call `renderFile` on request failure', done => {
+    it('should not call `renderFile` on request failure', (done) => {
       jest.spyOn(axios, 'get').mockReturnValue(Promise.reject());
       jest.spyOn(bv, 'renderFile').mockImplementation(() => {});
 
@@ -95,8 +95,8 @@ describe('BalsamiqViewer', () => {
       balsamiqViewer.viewer = viewer;
 
       balsamiqViewer.getPreviews.mockReturnValue(previews);
-      balsamiqViewer.renderPreview.mockImplementation(preview => preview);
-      viewer.appendChild.mockImplementation(containerElement => {
+      balsamiqViewer.renderPreview.mockImplementation((preview) => preview);
+      viewer.appendChild.mockImplementation((containerElement) => {
         container = containerElement;
       });
 
@@ -177,7 +177,9 @@ describe('BalsamiqViewer', () => {
         database,
       };
 
-      jest.spyOn(BalsamiqViewer, 'parsePreview').mockImplementation(preview => preview.toString());
+      jest
+        .spyOn(BalsamiqViewer, 'parsePreview')
+        .mockImplementation((preview) => preview.toString());
       database.exec.mockReturnValue(thumbnails);
 
       getPreviews = BalsamiqViewer.prototype.getPreviews.call(balsamiqViewer);