Skip to content

G
gitlab-ce
Commit 7ff33777 authored by Mike Greiling's avatar Mike Greiling
Browse files
Options

Merge branch '221086-clean-up-awards-handler-spec' into 'master' 

Resolve "Flaky test in spec/frontend/awards_handler_spec.js"

Closes #221086

See merge request gitlab-org/gitlab!36754
parents 791dda51 6fc54299
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 171 deletions
app/assets/javascripts/awards_handler.js
View file @ 7ff33777
......@@ -13,11 +13,6 @@ import * as Emoji from '~/emoji';
const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
const requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.setTimeout;
const FROM_SENTENCE_REGEX = /(?:, and | and |, )/; // For separating lists produced by ruby's Array#toSentence
......
spec/frontend/awards_handler_spec.js
View file @ 7ff33777
......@@ -3,64 +3,51 @@ import Cookies from 'js-cookie';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import loadAwardsHandler from '~/awards_handler';
import '~/lib/utils/common_utils';
import waitForPromises from './helpers/wait_for_promises';
import { setTestTimeout } from './helpers/timeout';
import { EMOJI_VERSION } from '~/emoji';
import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame';
window.gl = window.gl || {};
window.gon = window.gon || {};
let openAndWaitForEmojiMenu;
let mock;
let awardsHandler = null;
const urlRoot = gon.relative_url_root;
const lazyAssert = (done, assertFn) => {
jest.runOnlyPendingTimers();
waitForPromises()
.then(() => {
assertFn();
done();
})
.catch(e => {
throw e;
});
};
describe('AwardsHandler', () => {
useFakeRequestAnimationFrame();
const emojiData = getJSONFixture('emojis/emojis.json');
preloadFixtures('snippets/show.html');
beforeEach(done => {
const openAndWaitForEmojiMenu = (sel = '.js-add-award') => {
$(sel)
.eq(0)
.click();
jest.advanceTimersByTime(200);
const $menu = $('.emoji-menu');
return new Promise(resolve => {
$menu.one('build-emoji-menu-finish', () => {
resolve();
});
});
};
beforeEach(async () => {
// These tests have had some timeout issues
// https://gitlab.com/gitlab-org/gitlab/-/issues/221086
setTestTimeout(6000);
mock = new MockAdapter(axios);
mock.onGet(`/-/emojis/${EMOJI_VERSION}/emojis.json`).reply(200, emojiData);
loadFixtures('snippets/show.html');
loadAwardsHandler(true)
.then(obj => {
awardsHandler = obj;
jest.spyOn(awardsHandler, 'postEmoji').mockImplementation((button, url, emoji, cb) => cb());
done();
})
.catch(done.fail);
let isEmojiMenuBuilt = false;
openAndWaitForEmojiMenu = () => {
return new Promise(resolve => {
if (isEmojiMenuBuilt) {
resolve();
} else {
$('.js-add-award')
.eq(0)
.click();
const $menu = $('.emoji-menu');
$menu.one('build-emoji-menu-finish', () => {
isEmojiMenuBuilt = true;
resolve();
});
}
});
};
awardsHandler = await loadAwardsHandler(true);
jest.spyOn(awardsHandler, 'postEmoji').mockImplementation((button, url, emoji, cb) => cb());
});
afterEach(() => {
......@@ -76,55 +63,45 @@ describe('AwardsHandler', () => {
});
describe('::showEmojiMenu', () => {
it('should show emoji menu when Add emoji button clicked', done => {
$('.js-add-award')
.eq(0)
.click();
lazyAssert(done, () => {
const $emojiMenu = $('.emoji-menu');
it('should show emoji menu when Add emoji button clicked', async () => {
await openAndWaitForEmojiMenu();
expect($emojiMenu.length).toBe(1);
expect($emojiMenu.hasClass('is-visible')).toBe(true);
expect($emojiMenu.find('.js-emoji-menu-search').length).toBe(1);
expect($('.js-awards-block.current').length).toBe(1);
});
const $emojiMenu = $('.emoji-menu');
expect($emojiMenu.length).toBe(1);
expect($emojiMenu.hasClass('is-visible')).toBe(true);
expect($emojiMenu.find('.js-emoji-menu-search').length).toBe(1);
expect($('.js-awards-block.current').length).toBe(1);
});
it('should also show emoji menu for the smiley icon in notes', done => {
$('.js-add-award.note-action-button').click();
lazyAssert(done, () => {
const $emojiMenu = $('.emoji-menu');
it('should also show emoji menu for the smiley icon in notes', async () => {
await openAndWaitForEmojiMenu('.js-add-award.note-action-button');
expect($emojiMenu.length).toBe(1);
});
const $emojiMenu = $('.emoji-menu');
expect($emojiMenu.length).toBe(1);
});
it('should remove emoji menu when body is clicked', done => {
$('.js-add-award')
.eq(0)
.click();
lazyAssert(done, () => {
const $emojiMenu = $('.emoji-menu');
$('body').click();
it('should remove emoji menu when body is clicked', async () => {
await openAndWaitForEmojiMenu();
expect($emojiMenu.length).toBe(1);
expect($emojiMenu.hasClass('is-visible')).toBe(false);
expect($('.js-awards-block.current').length).toBe(0);
});
const $emojiMenu = $('.emoji-menu');
$('body').click();
expect($emojiMenu.length).toBe(1);
expect($emojiMenu.hasClass('is-visible')).toBe(false);
expect($('.js-awards-block.current').length).toBe(0);
});
it('should not remove emoji menu when search is clicked', done => {
$('.js-add-award')
.eq(0)
.click();
lazyAssert(done, () => {
const $emojiMenu = $('.emoji-menu');
$('.emoji-search').click();
it('should not remove emoji menu when search is clicked', async () => {
await openAndWaitForEmojiMenu();
expect($emojiMenu.length).toBe(1);
expect($emojiMenu.hasClass('is-visible')).toBe(true);
expect($('.js-awards-block.current').length).toBe(1);
});
const $emojiMenu = $('.emoji-menu');
$('.emoji-search').click();
expect($emojiMenu.length).toBe(1);
expect($emojiMenu.hasClass('is-visible')).toBe(true);
expect($('.js-awards-block.current').length).toBe(1);
});
});
......@@ -272,48 +249,39 @@ describe('AwardsHandler', () => {
});
describe('::searchEmojis', () => {
it('should filter the emoji', done => {
openAndWaitForEmojiMenu()
.then(() => {
expect($('[data-name=angel]').is(':visible')).toBe(true);
expect($('[data-name=anger]').is(':visible')).toBe(true);
awardsHandler.searchEmojis('ali');
expect($('[data-name=angel]').is(':visible')).toBe(false);
expect($('[data-name=anger]').is(':visible')).toBe(false);
expect($('[data-name=alien]').is(':visible')).toBe(true);
expect($('.js-emoji-menu-search').val()).toBe('ali');
})
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
it('should filter the emoji', async () => {
await openAndWaitForEmojiMenu();
expect($('[data-name=angel]').is(':visible')).toBe(true);
expect($('[data-name=anger]').is(':visible')).toBe(true);
awardsHandler.searchEmojis('ali');
expect($('[data-name=angel]').is(':visible')).toBe(false);
expect($('[data-name=anger]').is(':visible')).toBe(false);
expect($('[data-name=alien]').is(':visible')).toBe(true);
expect($('.js-emoji-menu-search').val()).toBe('ali');
});
it('should clear the search when searching for nothing', done => {
openAndWaitForEmojiMenu()
.then(() => {
awardsHandler.searchEmojis('ali');
expect($('[data-name=angel]').is(':visible')).toBe(false);
expect($('[data-name=anger]').is(':visible')).toBe(false);
expect($('[data-name=alien]').is(':visible')).toBe(true);
awardsHandler.searchEmojis('');
expect($('[data-name=angel]').is(':visible')).toBe(true);
expect($('[data-name=anger]').is(':visible')).toBe(true);
expect($('[data-name=alien]').is(':visible')).toBe(true);
expect($('.js-emoji-menu-search').val()).toBe('');
})
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
it('should clear the search when searching for nothing', async () => {
await openAndWaitForEmojiMenu();
awardsHandler.searchEmojis('ali');
expect($('[data-name=angel]').is(':visible')).toBe(false);
expect($('[data-name=anger]').is(':visible')).toBe(false);
expect($('[data-name=alien]').is(':visible')).toBe(true);
awardsHandler.searchEmojis('');
expect($('[data-name=angel]').is(':visible')).toBe(true);
expect($('[data-name=anger]').is(':visible')).toBe(true);
expect($('[data-name=alien]').is(':visible')).toBe(true);
expect($('.js-emoji-menu-search').val()).toBe('');
});
});
describe('emoji menu', () => {
const emojiSelector = '[data-name="sunglasses"]';
const openEmojiMenuAndAddEmoji = () => {
return openAndWaitForEmojiMenu().then(() => {
const $menu = $('.emoji-menu');
......@@ -329,32 +297,23 @@ describe('AwardsHandler', () => {
});
};
it('should add selected emoji to awards block', done => {
openEmojiMenuAndAddEmoji()
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
it('should add selected emoji to awards block', async () => {
await openEmojiMenuAndAddEmoji();
});
it('should remove already selected emoji', done => {
openEmojiMenuAndAddEmoji()
.then(() => {
$('.js-add-award')
.eq(0)
.click();
const $block = $('.js-awards-block');
const $emoji = $('.emoji-menu').find(
`.emoji-menu-list:not(.frequent-emojis) ${emojiSelector}`,
);
$emoji.click();
expect($block.find(emojiSelector).length).toBe(0);
})
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
it('should remove already selected emoji', async () => {
await openEmojiMenuAndAddEmoji();
$('.js-add-award')
.eq(0)
.click();
const $block = $('.js-awards-block');
const $emoji = $('.emoji-menu').find(
`.emoji-menu-list:not(.frequent-emojis) ${emojiSelector}`,
);
$emoji.click();
expect($block.find(emojiSelector).length).toBe(0);
});
});
......@@ -364,37 +323,27 @@ describe('AwardsHandler', () => {
Cookies.set('frequently_used_emojis', '');
});
it('shouldn\'t have any "Frequently used" heading if no frequently used emojis', done => {
return openAndWaitForEmojiMenu()
.then(() => {
const emojiMenu = document.querySelector('.emoji-menu');
Array.prototype.forEach.call(emojiMenu.querySelectorAll('.emoji-menu-title'), title => {
expect(title.textContent.trim().toLowerCase()).not.toBe('frequently used');
});
})
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
it('shouldn\'t have any "Frequently used" heading if no frequently used emojis', async () => {
await openAndWaitForEmojiMenu();
const emojiMenu = document.querySelector('.emoji-menu');
Array.prototype.forEach.call(emojiMenu.querySelectorAll('.emoji-menu-title'), title => {
expect(title.textContent.trim().toLowerCase()).not.toBe('frequently used');
});
});
it('should have any frequently used section when there are frequently used emojis', done => {
it('should have any frequently used section when there are frequently used emojis', async () => {
awardsHandler.addEmojiToFrequentlyUsedList('8ball');
return openAndWaitForEmojiMenu()
.then(() => {
const emojiMenu = document.querySelector('.emoji-menu');
const hasFrequentlyUsedHeading = Array.prototype.some.call(
emojiMenu.querySelectorAll('.emoji-menu-title'),
title => title.textContent.trim().toLowerCase() === 'frequently used',
);
expect(hasFrequentlyUsedHeading).toBe(true);
})
.then(done)
.catch(err => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
await openAndWaitForEmojiMenu();
const emojiMenu = document.querySelector('.emoji-menu');
const hasFrequentlyUsedHeading = Array.prototype.some.call(
emojiMenu.querySelectorAll('.emoji-menu-title'),
title => title.textContent.trim().toLowerCase() === 'frequently used',
);
expect(hasFrequentlyUsedHeading).toBe(true);
});
it('should disregard invalid frequently used emoji that are being attempted to be added', () => {
......
spec/frontend/helpers/fake_request_animation_frame.js 0 → 100644
View file @ 7ff33777
// eslint-disable-next-line import/prefer-default-export
export const useFakeRequestAnimationFrame = () => {
let orig;
beforeEach(() => {
orig = global.requestAnimationFrame;
global.requestAnimationFrame = cb => cb();
});
afterEach(() => {
global.requestAnimationFrame = orig;
});
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7