Skip to content

G
gitlab-ce
Commit 485f97d7 authored by Tim Zallmann's avatar Tim Zallmann
Browse files
Options

Merge branch 'andr3-startup_css_helper-trigger-anytime' into 'master' 

Simplify StartupCSS JS Helper and fix autosize problems

See merge request gitlab-org/gitlab!42462
parents 3c81964d 04c4f003
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 286 deletions
app/assets/javascripts/behaviors/autosize.js
View file @ 485f97d7
import Autosize from 'autosize';
import { waitForCSSLoaded } from '../helpers/startup_css_helper';
document.addEventListener('DOMContentLoaded', () => {
const autosizeEls = document.querySelectorAll('.js-autosize');
waitForCSSLoaded(() => {
const autosizeEls = document.querySelectorAll('.js-autosize');
Autosize(autosizeEls);
Autosize.update(autosizeEls);
Autosize(autosizeEls);
Autosize.update(autosizeEls);
autosizeEls.forEach(el => el.classList.add('js-autosize-initialized'));
});
});
app/assets/javascripts/helpers/startup_css_helper.js
View file @ 485f97d7
const CSS_LOADED_EVENT = 'CSSLoaded';
const STARTUP_LINK_LOADED_EVENT = 'CSSStartupLinkLoaded';
const getAllStartupLinks = (() => {
let links = null;
return () => {
if (!links) {
links = Array.from(document.querySelectorAll('link[data-startupcss]'));
}
return links;
};
})();
const isStartupLinkLoaded = ({ dataset }) => dataset.startupcss === 'loaded';
const allLinksLoaded = () => getAllStartupLinks().every(isStartupLinkLoaded);
const handleStartupEvents = () => {
if (allLinksLoaded()) {
document.dispatchEvent(new CustomEvent(CSS_LOADED_EVENT));
document.removeEventListener(STARTUP_LINK_LOADED_EVENT, handleStartupEvents);
}
};
/* Wait for.... The methods can be used:
- with a callback (preferred),
waitFor(action)
......@@ -8,61 +30,17 @@
- with await,
await waitFor;
action();
*/
const CSS_LOADED_EVENT = 'CSSLoaded';
const DOM_LOADED_EVENT = 'DOMContentLoaded';
const STARTUP_LINK_LOADED_EVENT = 'CSSStartupLinkLoaded';
const isStartupLinkLoaded = ({ dataset }) => dataset.startupcss === 'loaded';
export const handleLoadedEvents = (action = () => {}) => {
let isCssLoaded = false;
let eventsList = [CSS_LOADED_EVENT, DOM_LOADED_EVENT];
return ({ type } = {}) => {
eventsList = eventsList.filter(e => e !== type);
if (isCssLoaded) {
return;
}
if (!eventsList.length) {
isCssLoaded = true;
-*/
export const waitForCSSLoaded = (action = () => {}) => {
if (!gon.features.startupCss || allLinksLoaded()) {
return new Promise(resolve => {
action();
}
};
};
export const handleStartupEvents = (action = () => {}) => {
if (!gon.features.startupCss) {
return action;
resolve();
});
}
const startupLinks = Array.from(document.querySelectorAll('link[data-startupcss]'));
return () => {
if (startupLinks.every(isStartupLinkLoaded)) {
action();
}
};
};
export const waitForStartupLinks = () => {
let eventListener;
const promise = new Promise(resolve => {
eventListener = handleStartupEvents(resolve);
document.addEventListener(STARTUP_LINK_LOADED_EVENT, eventListener);
}).then(() => {
document.dispatchEvent(new CustomEvent(CSS_LOADED_EVENT));
document.removeEventListener(STARTUP_LINK_LOADED_EVENT, eventListener);
});
document.dispatchEvent(new CustomEvent(STARTUP_LINK_LOADED_EVENT));
return promise;
};
export const waitForCSSLoaded = (action = () => {}) => {
let eventListener;
const promise = new Promise(resolve => {
eventListener = handleLoadedEvents(resolve);
document.addEventListener(DOM_LOADED_EVENT, eventListener, { once: true });
document.addEventListener(CSS_LOADED_EVENT, eventListener, { once: true });
return new Promise(resolve => {
document.addEventListener(CSS_LOADED_EVENT, resolve, { once: true });
document.addEventListener(STARTUP_LINK_LOADED_EVENT, handleStartupEvents);
}).then(action);
waitForStartupLinks();
return promise;
};
app/assets/javascripts/pages/projects/graphs/charts/index.js
View file @ 485f97d7
......@@ -5,149 +5,151 @@ import { __ } from '~/locale';
import CodeCoverage from '../components/code_coverage.vue';
import SeriesDataMixin from './series_data_mixin';
waitForCSSLoaded(() => {
const languagesContainer = document.getElementById('js-languages-chart');
const codeCoverageContainer = document.getElementById('js-code-coverage-chart');
const monthContainer = document.getElementById('js-month-chart');
const weekdayContainer = document.getElementById('js-weekday-chart');
const hourContainer = document.getElementById('js-hour-chart');
const LANGUAGE_CHART_HEIGHT = 300;
const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
if (firstDayOfWeek === 0) {
return weekDays;
}
document.addEventListener('DOMContentLoaded', () => {
waitForCSSLoaded(() => {
const languagesContainer = document.getElementById('js-languages-chart');
const codeCoverageContainer = document.getElementById('js-code-coverage-chart');
const monthContainer = document.getElementById('js-month-chart');
const weekdayContainer = document.getElementById('js-weekday-chart');
const hourContainer = document.getElementById('js-hour-chart');
const LANGUAGE_CHART_HEIGHT = 300;
const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
if (firstDayOfWeek === 0) {
return weekDays;
}
return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
return {
...acc,
[reorderedDayName]: weekDays[reorderedDayName],
};
}, {});
};
return {
...acc,
[reorderedDayName]: weekDays[reorderedDayName],
};
}, {});
};
// eslint-disable-next-line no-new
new Vue({
el: languagesContainer,
components: {
GlColumnChart,
},
data() {
return {
chartData: JSON.parse(languagesContainer.dataset.chartData),
};
},
computed: {
seriesData() {
return { full: this.chartData.map(d => [d.label, d.value]) };
// eslint-disable-next-line no-new
new Vue({
el: languagesContainer,
components: {
GlColumnChart,
},
},
render(h) {
return h(GlColumnChart, {
props: {
data: this.seriesData,
xAxisTitle: __('Used programming language'),
yAxisTitle: __('Percentage'),
xAxisType: 'category',
},
attrs: {
height: LANGUAGE_CHART_HEIGHT,
data() {
return {
chartData: JSON.parse(languagesContainer.dataset.chartData),
};
},
computed: {
seriesData() {
return { full: this.chartData.map(d => [d.label, d.value]) };
},
});
},
});
},
render(h) {
return h(GlColumnChart, {
props: {
data: this.seriesData,
xAxisTitle: __('Used programming language'),
yAxisTitle: __('Percentage'),
xAxisType: 'category',
},
attrs: {
height: LANGUAGE_CHART_HEIGHT,
},
});
},
});
// eslint-disable-next-line no-new
new Vue({
el: codeCoverageContainer,
render(h) {
return h(CodeCoverage, {
props: {
graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint,
},
});
},
});
// eslint-disable-next-line no-new
new Vue({
el: codeCoverageContainer,
render(h) {
return h(CodeCoverage, {
props: {
graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint,
},
});
},
});
// eslint-disable-next-line no-new
new Vue({
el: monthContainer,
components: {
GlColumnChart,
},
mixins: [SeriesDataMixin],
data() {
return {
chartData: JSON.parse(monthContainer.dataset.chartData),
};
},
render(h) {
return h(GlColumnChart, {
props: {
data: this.seriesData,
xAxisTitle: __('Day of month'),
yAxisTitle: __('No. of commits'),
xAxisType: 'category',
},
});
},
});
// eslint-disable-next-line no-new
new Vue({
el: monthContainer,
components: {
GlColumnChart,
},
mixins: [SeriesDataMixin],
data() {
return {
chartData: JSON.parse(monthContainer.dataset.chartData),
};
},
render(h) {
return h(GlColumnChart, {
props: {
data: this.seriesData,
xAxisTitle: __('Day of month'),
yAxisTitle: __('No. of commits'),
xAxisType: 'category',
},
});
},
});
// eslint-disable-next-line no-new
new Vue({
el: weekdayContainer,
components: {
GlColumnChart,
},
data() {
return {
chartData: JSON.parse(weekdayContainer.dataset.chartData),
};
},
computed: {
seriesData() {
const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week);
const data = Object.keys(weekDays).reduce((acc, key) => {
acc.push([key, weekDays[key]]);
return acc;
}, []);
return { full: data };
// eslint-disable-next-line no-new
new Vue({
el: weekdayContainer,
components: {
GlColumnChart,
},
data() {
return {
chartData: JSON.parse(weekdayContainer.dataset.chartData),
};
},
},
render(h) {
return h(GlColumnChart, {
props: {
data: this.seriesData,
xAxisTitle: __('Weekday'),
yAxisTitle: __('No. of commits'),
xAxisType: 'category',
computed: {
seriesData() {
const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week);
const data = Object.keys(weekDays).reduce((acc, key) => {
acc.push([key, weekDays[key]]);
return acc;
}, []);
return { full: data };
},
});
},
});
},
render(h) {
return h(GlColumnChart, {
props: {
data: this.seriesData,
xAxisTitle: __('Weekday'),
yAxisTitle: __('No. of commits'),
xAxisType: 'category',
},
});
},
});
// eslint-disable-next-line no-new
new Vue({
el: hourContainer,
components: {
GlColumnChart,
},
mixins: [SeriesDataMixin],
data() {
return {
chartData: JSON.parse(hourContainer.dataset.chartData),
};
},
render(h) {
return h(GlColumnChart, {
props: {
data: this.seriesData,
xAxisTitle: __('Hour (UTC)'),
yAxisTitle: __('No. of commits'),
xAxisType: 'category',
},
});
},
// eslint-disable-next-line no-new
new Vue({
el: hourContainer,
components: {
GlColumnChart,
},
mixins: [SeriesDataMixin],
data() {
return {
chartData: JSON.parse(hourContainer.dataset.chartData),
};
},
render(h) {
return h(GlColumnChart, {
props: {
data: this.seriesData,
xAxisTitle: __('Hour (UTC)'),
yAxisTitle: __('No. of commits'),
xAxisType: 'category',
},
});
},
});
});
});
changelogs/unreleased/andr3-startup_css_helper-trigger-anytime.yml 0 → 100644
View file @ 485f97d7
---
title: Simplify StartupCSS JS Helper and fix autosize issues under StartupCSS
merge_request: 42462
author:
type: fixed
spec/frontend/behaviors/autosize_spec.js
View file @ 485f97d7
import $ from 'jquery';
import '~/behaviors/autosize';
function load() {
$(document).trigger('load');
document.dispatchEvent(new Event('DOMContentLoaded'));
}
jest.mock('~/helpers/startup_css_helper', () => {
return {
waitForCSSLoaded: jest.fn().mockImplementation(cb => cb.apply()),
};
});
describe('Autosize behavior', () => {
beforeEach(() => {
setFixtures('<textarea class="js-autosize" style="resize: vertical"></textarea>');
setFixtures('<textarea class="js-autosize"></textarea>');
});
it('does not overwrite the resize property', () => {
it('is applied to the textarea', () => {
load();
expect($('textarea')).toHaveCss({
resize: 'vertical',
});
const textarea = document.querySelector('textarea');
expect(textarea.classList).toContain('js-autosize-initialized');
});
});
spec/frontend/helpers/startup_css_helper_spec.js
View file @ 485f97d7
import {
handleLoadedEvents,
waitForCSSLoaded,
} from '../../../app/assets/javascripts/helpers/startup_css_helper';
describe('handleLoadedEvents', () => {
let mock;
beforeEach(() => {
mock = jest.fn();
});
it('should not call the callback on wrong conditions', () => {
const resolverToCall = handleLoadedEvents(mock);
resolverToCall({ type: 'UnrelatedEvent' });
resolverToCall({ type: 'UnrelatedEvent' });
resolverToCall({ type: 'UnrelatedEvent' });
resolverToCall({ type: 'UnrelatedEvent' });
resolverToCall({ type: 'CSSLoaded' });
resolverToCall();
expect(mock).not.toHaveBeenCalled();
});
it('should call the callback when all the events have been triggered', () => {
const resolverToCall = handleLoadedEvents(mock);
resolverToCall();
resolverToCall({ type: 'DOMContentLoaded' });
resolverToCall({ type: 'CSSLoaded' });
resolverToCall();
expect(mock).toHaveBeenCalledTimes(1);
});
});
import { waitForCSSLoaded } from '../../../app/assets/javascripts/helpers/startup_css_helper';
describe('waitForCSSLoaded', () => {
let mock;
let mockedCallback;
beforeEach(() => {
mock = jest.fn();
mockedCallback = jest.fn();
});
describe('with startup css disabled', () => {
beforeEach(() => {
gon.features = {
startupCss: false,
};
describe('Promise-like api', () => {
it('can be used with a callback', async () => {
await waitForCSSLoaded(mockedCallback);
expect(mockedCallback).toHaveBeenCalledTimes(1);
});
it('should call CssLoaded when the conditions are met', async () => {
const docAddListener = jest.spyOn(document, 'addEventListener');
const docRemoveListener = jest.spyOn(document, 'removeEventListener');
const docDispatch = jest.spyOn(document, 'dispatchEvent');
const events = waitForCSSLoaded(mock);
it('can be used as a promise', async () => {
await waitForCSSLoaded().then(mockedCallback);
expect(mockedCallback).toHaveBeenCalledTimes(1);
});
});
expect(docAddListener).toHaveBeenCalledTimes(3);
expect(docDispatch.mock.calls[0][0].type).toBe('CSSStartupLinkLoaded');
describe('with startup css disabled', () => {
gon.features = {
startupCss: false,
};
document.dispatchEvent(new CustomEvent('DOMContentLoaded'));
it('should invoke the action right away', async () => {
const events = waitForCSSLoaded(mockedCallback);
await events;
expect(docDispatch).toHaveBeenCalledTimes(3);
expect(docDispatch.mock.calls[2][0].type).toBe('CSSLoaded');
expect(docRemoveListener).toHaveBeenCalledTimes(1);
expect(mock).toHaveBeenCalledTimes(1);
expect(mockedCallback).toHaveBeenCalledTimes(1);
});
});
describe('with startup css enabled', () => {
let docAddListener;
let docRemoveListener;
let docDispatch;
beforeEach(() => {
docAddListener = jest.spyOn(document, 'addEventListener');
docRemoveListener = jest.spyOn(document, 'removeEventListener');
docDispatch = jest.spyOn(document, 'dispatchEvent');
gon.features = {
startupCss: true,
};
});
gon.features = {
startupCss: true,
};
it('should call CssLoaded if the assets are cached', async () => {
const events = waitForCSSLoaded(mock);
const fixtures = `
it('should dispatch CSSLoaded when the assets are cached or already loaded', async () => {
setFixtures(`
<link href="one.css" data-startupcss="loaded">
<link href="two.css" data-startupcss="loaded">
`;
setFixtures(fixtures);
`);
await waitForCSSLoaded(mockedCallback);
expect(docAddListener).toHaveBeenCalledTimes(3);
expect(docDispatch.mock.calls[0][0].type).toBe('CSSStartupLinkLoaded');
document.dispatchEvent(new CustomEvent('DOMContentLoaded'));
await events;
expect(docDispatch).toHaveBeenCalledTimes(3);
expect(docDispatch.mock.calls[2][0].type).toBe('CSSLoaded');
expect(docRemoveListener).toHaveBeenCalledTimes(1);
expect(mock).toHaveBeenCalledTimes(1);
expect(mockedCallback).toHaveBeenCalledTimes(1);
});
it('should wait to call CssLoaded until the assets are loaded', async () => {
const events = waitForCSSLoaded(mock);
const fixtures = `
setFixtures(`
<link href="one.css" data-startupcss="loading">
<link href="two.css" data-startupcss="loading">
`;
setFixtures(fixtures);
expect(docAddListener).toHaveBeenCalledTimes(3);
expect(docDispatch.mock.calls[0][0].type).toBe('CSSStartupLinkLoaded');
`);
const events = waitForCSSLoaded(mockedCallback);
document
.querySelectorAll('[data-startupcss="loading"]')
.forEach(elem => elem.setAttribute('data-startupcss', 'loaded'));
document.dispatchEvent(new CustomEvent('DOMContentLoaded'));
document.dispatchEvent(new CustomEvent('CSSStartupLinkLoaded'));
await events;
expect(docDispatch).toHaveBeenCalledTimes(4);
expect(docDispatch.mock.calls[3][0].type).toBe('CSSLoaded');
expect(docRemoveListener).toHaveBeenCalledTimes(1);
expect(mock).toHaveBeenCalledTimes(1);
expect(mockedCallback).toHaveBeenCalledTimes(1);
});
});
});
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