diff --git a/package.json b/package.json index ad3fa59cf..a9da87b4e 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@babel/cli": "^7.15.7", "@babel/preset-typescript": "^7.16.7", "@types/backbone": "^1.4.15", + "@types/jest": "^28.1.1", "@typescript-eslint/parser": "^5.22.0", "@vuepress/plugin-google-analytics": "^1.8.2", "documentation": "^13.2.5", @@ -76,12 +77,17 @@ ] }, "jest": { + "moduleFileExtensions": [ + "js", + "ts" + ], + "verbose": true, "testURL": "http://localhost/", "modulePaths": [ - "./src" + "/src" ], "testMatch": [ - "/test/specs/**/*.js" + "/test/specs/**/*.(t|j)s" ], "setupFiles": [ "/test/setup.js" diff --git a/src/dom_components/model/ComponentImage.js b/src/dom_components/model/ComponentImage.js index f8d9a5271..090e6554d 100644 --- a/src/dom_components/model/ComponentImage.js +++ b/src/dom_components/model/ComponentImage.js @@ -1,6 +1,6 @@ import { result } from 'underscore'; import Component from './Component'; -import { toLowerCase } from 'utils/mixins'; +import { toLowerCase, buildBase64UrlFromSvg } from 'utils/mixins'; const svgAttrs = 'xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 24 24" style="fill: rgba(0,0,0,0.15); transform: scale(0.75)"'; @@ -35,7 +35,9 @@ export default Component.extend( initialize(o, opt) { Component.prototype.initialize.apply(this, arguments); const { src } = this.get('attributes'); - if (src) this.set('src', src, { silent: 1 }); + if (src && buildBase64UrlFromSvg(this.defaults.src) !== src) { + this.set('src', src, { silent: 1 }); + } }, initToolbar(...args) { @@ -86,14 +88,17 @@ export default Component.extend( let result = src; if (src && src.substr(0, 4) === ' { return result; }; +export const buildBase64UrlFromSvg = (svg: string) => { + if (svg && svg.substr(0, 4) === ' { let componentImage; + let dcomp; + let compOpts; + let em; beforeEach(() => { - componentImage = new ComponentImage(); + em = new Editor({ avoidDefaults: true }); + dcomp = em.get('DomComponents'); + em.get('PageManager').onLoad(); + compOpts = { + em, + componentTypes: dcomp.componentTypes, + domc: dcomp, + }; + componentImage = new ComponentImage({}, compOpts); + }); + + describe('.initialize', () => { + test('when a base 64 default image is provided, it uses the default image', () => { + let imageUrl = buildBase64UrlFromSvg(ComponentImage.getDefaults().src); + let componentImage = new ComponentImage({ attributes: { src: imageUrl } }, { ...compOpts }); + expect(componentImage.get('src')).toEqual(ComponentImage.getDefaults().src); + expect(componentImage.isDefaultSrc()).toBeTruthy(); + }); + + test('when a image url is provided, it uses the image url', () => { + let imageUrl = 'https://mock.com/image.png'; + let componentImage = new ComponentImage({ attributes: { src: imageUrl } }, { ...compOpts }); + expect(componentImage.get('src')).toEqual(imageUrl); + expect(componentImage.isDefaultSrc()).toBeFalsy(); + }); }); test('`src` property is defined after initializing', () => { @@ -17,9 +48,7 @@ describe('ComponentImage', () => { const fakeAttributes = {}; beforeEach(() => { - spyOn(Component.prototype, 'getAttrToHTML').and.returnValue( - fakeAttributes - ); + spyOn(Component.prototype, 'getAttrToHTML').and.returnValue(fakeAttributes); getSrcResultSpy = spyOn(componentImage, 'getSrcResult'); }); diff --git a/test/specs/navigator/view/ItemView.js b/test/specs/navigator/view/ItemView.js index 8f129882f..c6a4cd8b8 100644 --- a/test/specs/navigator/view/ItemView.js +++ b/test/specs/navigator/view/ItemView.js @@ -1,6 +1,6 @@ import ItemView from 'navigator/view/ItemView'; import config from 'navigator/config/config'; -import EditorModel from '../../../../src/editor/model/Editor'; +import EditorModel from 'editor/model/Editor'; describe('ItemView', () => { let itemView, fakeModel, fakeModelStyle; diff --git a/test/specs/utils/Mixins.ts b/test/specs/utils/Mixins.ts new file mode 100644 index 000000000..6e9963225 --- /dev/null +++ b/test/specs/utils/Mixins.ts @@ -0,0 +1,29 @@ +import { buildBase64UrlFromSvg } from 'utils/mixins'; + +describe('.buildBase64UrlFromSvg', () => { + it('returns original when a none svg is provided', () => { + const input = 'something else'; + expect(buildBase64UrlFromSvg(input)).toEqual(input) + }) + + it('returns base64 image when an svg is provided', () => { + const input = ` + + + + `; + + const output = 'data:image/svg+xml;base64,PHN2ZwogICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgIHdpZHRoPSIyNCIKICAgICAgaGVpZ2h0PSIyNCIKICAgICAgdmlld0JveD0iMCAwIDI0IDI0IgogICAgICBmaWxsPSJub25lIgogICAgICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICAgICAgc3Ryb2tlLXdpZHRoPSIyIgogICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgICAgIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgICA+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMSA2IDEgMjIgOCAxOCAxNiAyMiAyMyAxOCAyMyAyIDE2IDYgOCAyIDEgNiIgLz4KICAgICAgPGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjE4IiAvPgogICAgICA8bGluZSB4MT0iMTYiIHkxPSI2IiB4Mj0iMTYiIHkyPSIyMiIgLz4KICAgIDwvc3ZnPg==' + expect(buildBase64UrlFromSvg(input)).toEqual(output) + }) +}); diff --git a/test/specs/utils/Sorter.js b/test/specs/utils/Sorter.js index 5dc92227e..a4735e3c1 100644 --- a/test/specs/utils/Sorter.js +++ b/test/specs/utils/Sorter.js @@ -1,5 +1,5 @@ import Backbone from 'backbone'; -import Sorter from '../../../src/utils/Sorter.js'; +import Sorter from 'utils/Sorter'; import ComponentTextView from 'dom_components/view/ComponentTextView'; import Component from 'dom_components/model/Component'; const $ = Backbone.$; diff --git a/yarn.lock b/yarn.lock index 5e2a1d6b1..74dd44ee7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1283,6 +1283,14 @@ "@types/istanbul-lib-coverage" "*" "@types/istanbul-lib-report" "*" +"@types/jest@^28.1.1": + version "28.1.1" + resolved "https://registry.npmjs.org/@types/jest/-/jest-28.1.1.tgz#8c9ba63702a11f8c386ee211280e8b68cb093cd1" + integrity sha512-C2p7yqleUKtCkVjlOur9BWVA4HgUQmEj/HWCt5WzZ5mLXrWnyIfl0wGuArc+kBXsy0ZZfLp+7dywB4HtSVYGVA== + dependencies: + jest-matcher-utils "^27.0.0" + pretty-format "^27.0.0" + "@types/jquery@*": version "3.5.14" resolved "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.14.tgz" @@ -2191,6 +2199,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: dependencies: color-convert "^2.0.1" +ansi-styles@^5.0.0: + version "5.2.0" + resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b" + integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA== + any-observable@^0.3.0: version "0.3.0" resolved "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz" @@ -4089,6 +4102,11 @@ diff-sequences@^24.9.0: version "24.9.0" resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz" +diff-sequences@^27.5.1: + version "27.5.1" + resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327" + integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ== + diff@^3.5.0: version "3.5.0" resolved "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz" @@ -6535,6 +6553,16 @@ jest-diff@^24.9.0: jest-get-type "^24.9.0" pretty-format "^24.9.0" +jest-diff@^27.5.1: + version "27.5.1" + resolved "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def" + integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw== + dependencies: + chalk "^4.0.0" + diff-sequences "^27.5.1" + jest-get-type "^27.5.1" + pretty-format "^27.5.1" + jest-docblock@^24.3.0: version "24.9.0" resolved "https://registry.npmjs.org/jest-docblock/-/jest-docblock-24.9.0.tgz" @@ -6576,6 +6604,11 @@ jest-get-type@^24.9.0: version "24.9.0" resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz" +jest-get-type@^27.5.1: + version "27.5.1" + resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1" + integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw== + jest-haste-map@^24.9.0: version "24.9.0" resolved "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-24.9.0.tgz" @@ -6631,6 +6664,16 @@ jest-matcher-utils@^24.9.0: jest-get-type "^24.9.0" pretty-format "^24.9.0" +jest-matcher-utils@^27.0.0: + version "27.5.1" + resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab" + integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw== + dependencies: + chalk "^4.0.0" + jest-diff "^27.5.1" + jest-get-type "^27.5.1" + pretty-format "^27.5.1" + jest-message-util@^24.9.0: version "24.9.0" resolved "https://registry.npmjs.org/jest-message-util/-/jest-message-util-24.9.0.tgz" @@ -9119,6 +9162,15 @@ pretty-format@^24.9.0: ansi-styles "^3.2.0" react-is "^16.8.4" +pretty-format@^27.0.0, pretty-format@^27.5.1: + version "27.5.1" + resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e" + integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ== + dependencies: + ansi-regex "^5.0.1" + ansi-styles "^5.0.0" + react-is "^17.0.1" + pretty-time@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz" @@ -9340,6 +9392,11 @@ react-is@^16.8.4: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" +react-is@^17.0.1: + version "17.0.2" + resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" + integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== + read-pkg-up@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz"