Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Added unit test for Embed Code Generator - AdminX (#18445)

Browse source 
no issue

Add unit tests for `generateEmbedCode` utility function. The tests
verify the HTML output for various options and parameters that affect
the appearance and behaviour of the generated embed script's output.
This commit is contained in:
Ronald Langeveld 2023-10-04 08:43:02 +07:00 committed by GitHub
parent f9edbc22f0
commit f9478f5489
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 71 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
apps/admin-x-settings/test/unit/utils/generateEmbedCode.test.ts Normal file
View file

@ -0,0 +1,71 @@
import * as assert from 'assert/strict';
import {GenerateCodeOptions, generateCode} from '../../../src/utils/generateEmbedCode';
describe('generateCode', function () {
let genOptions: GenerateCodeOptions;
beforeEach(function () {
genOptions = {
preview: false,
config: {
blogUrl: 'https://example.com',
signupForm: {
url: 'https://example.com',
version: 'v3'
}
},
settings: {
accentColor: '#000000'
},
labels: [],
backgroundColor: '#000000',
layout: 'minimal',
i18nEnabled: false
};
});
it('generates a basic embed script', function () {
assert.equal(generateCode(genOptions), '<div style="min-height: 58px;max-width: 440px;margin: 0 auto;width: 100%"><script src="https://example.com" data-button-color="#000000" data-button-text-color="#FFFFFF" data-site="https://example.com" async></script></div>');
});
it('generates a basic embed script with i18n', function () {
genOptions.i18nEnabled = true;
genOptions.settings.locale = 'af';
assert.equal(generateCode(genOptions), '<div style="min-height: 58px;max-width: 440px;margin: 0 auto;width: 100%"><script src="https://example.com" data-button-color="#000000" data-button-text-color="#FFFFFF" data-site="https://example.com" data-locale="af" async></script></div>');
});
it('generates a basic embed script with labels', function () {
genOptions.labels = [{name: 'label1'}, {name: 'label2'}];
assert.equal(generateCode(genOptions), '<div style="min-height: 58px;max-width: 440px;margin: 0 auto;width: 100%"><script src="https://example.com" data-label-1="label1" data-label-2="label2" data-button-color="#000000" data-button-text-color="#FFFFFF" data-site="https://example.com" async></script></div>');
});
it('generated an embed with an icon', function () {
genOptions.settings.icon = 'https://example.com/content/images/size/w256h256/2023/09/snoopy.png';
genOptions.layout = 'all-in-one';
assert.equal(generateCode(genOptions), '<div style="height: 40vmin;min-height: 360px"><script src="https://example.com" data-background-color="#000000" data-text-color="#FFFFFF" data-button-color="#000000" data-button-text-color="#FFFFFF" data-title="" data-description="" data-icon="https://example.com/content/images/size/w192h192/size/w256h256/2023/09/snoopy.png" data-site="https://example.com" async></script></div>');
});
it('renders a full preview', function () {
genOptions.preview = true;
genOptions.layout = 'all-in-one';
assert.equal(generateCode(genOptions), '<div style="height: 100vh"><script src="https://example.com" data-background-color="#000000" data-text-color="#FFFFFF" data-button-color="#000000" data-button-text-color="#FFFFFF" data-title="" data-description="" data-site="https://example.com" async></script></div>');
});
it('renders a preview with a minimal layout', function () {
genOptions.preview = true;
genOptions.layout = 'minimal';
assert.equal(generateCode(genOptions), '<div style="min-height: 58px; max-width: 440px;width: 100%;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);"><script src="https://example.com" data-button-color="#000000" data-button-text-color="#FFFFFF" data-site="https://example.com" async></script></div>');
});
it('generates text color based on background color - light background, black text', function () {
genOptions.backgroundColor = '#ffffff';
genOptions.layout = 'all-in-one';
assert.equal(generateCode(genOptions), '<div style="height: 40vmin;min-height: 360px"><script src="https://example.com" data-background-color="#ffffff" data-text-color="#000000" data-button-color="#000000" data-button-text-color="#FFFFFF" data-title="" data-description="" data-site="https://example.com" async></script></div>');
});
it('generates text color based on background color - black background, light text', function () {
genOptions.backgroundColor = '#000000';
genOptions.layout = 'all-in-one';
assert.equal(generateCode(genOptions), '<div style="height: 40vmin;min-height: 360px"><script src="https://example.com" data-background-color="#000000" data-text-color="#FFFFFF" data-button-color="#000000" data-button-text-color="#FFFFFF" data-title="" data-description="" data-site="https://example.com" async></script></div>');
});
});