fix (test issue): modify what asked in review, convert js tests to ty…

…pescript

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@editorjs/embed",
- "version": "2.7.3",
+ "version": "2.7.4",
  "keywords": [
  "codex editor",
  "embed",
@@ -25,7 +25,7 @@
  "scripts": {
  "dev": "vite",
  "build": "vite build",
- "test": "mocha -r @babel/register -r ignore-styles --recursive ./test",
+ "test": "mocha --require ts-node/register --require ignore-styles --recursive './test/**/*.ts'",
  "lint": "eslint src/ --ext .js",
  "lint:errors": "eslint src/ --ext .js --quiet",
  "lint:fix": "eslint src/ --ext .js --fix"
@@ -39,7 +39,9 @@
  "@babel/plugin-transform-runtime": "^7.23.2",
  "@babel/preset-env": "^7.23.2",
  "@babel/register": "^7.22.15",
+ "@types/chai": "^4.3.16",
  "@types/debounce": "^1.2.4",
+ "@types/mocha": "^10.0.6",
  "@types/node": "^20.14.2",
  "chai": "^4.2.0",
  "debounce": "^1.2.0",

src/index.ts

@@ -1,12 +1,13 @@
 import SERVICES from './services';
 import './index.css';
 import { debounce } from 'debounce';
+import { ServiceConfig, ServicesConfigType } from './types/types';
 import { API , PatternPasteEventDetail } from '@editorjs/editorjs';
 
 /**
  * @description Embed Tool data
  */
-interface EmbedData {
+export interface EmbedData {
  /** Service name */
  service: string;
  /** Source URL of embedded content */
@@ -21,30 +22,12 @@ interface EmbedData {
  caption?: string;
 }
 
-/**
- * @description Service configuration object
- */
-interface Service {
- /** Pattern of source URLs */
- regex: RegExp;
- /** URL scheme to embedded page. Use '<%= remote_id %>' to define a place to insert resource id */
- embedUrl: string;
- /** Iframe which contains embedded content */
- html: string;
- /** Function to get resource id from RegExp groups */
- id?: (ids: string[]) => string;
- /** Embedded content width */
- width?: number;
- /** Embedded content height */
- height?: number;
-}
-
 /**
  * @description Embed tool configuration object
  */
 interface EmbedConfig {
  /** Additional services provided by user */
- services?: { [key: string]: Service | boolean };
+ services?: ServicesConfigType;
 }
 
 /**
@@ -99,7 +82,7 @@ export default class Embed {
  /** Read-only mode flag */
  private readOnly: boolean;
  /** Static property with available services */
- static services: { [key: string]: Service };
+ static services: { [key: string]: ServiceConfig };
  /** Static property with patterns for paste handling configuration */
  static patterns: { [key: string]: RegExp };
  /**
@@ -302,9 +285,9 @@ export default class Embed {
  .filter(([key, value]) => {
  return typeof value === 'object';
  })
- .filter(([key, service]) => Embed.checkServiceConfig(service as Service))
+ .filter(([key, service]) => Embed.checkServiceConfig(service as ServiceConfig))
  .map(([key, service]) => {
- const { regex, embedUrl, html, height, width, id } = service as Service;
+ const { regex, embedUrl, html, height, width, id } = service as ServiceConfig;
 
  return [key, {
  regex,
@@ -313,7 +296,7 @@ export default class Embed {
  height,
  width,
  id,
- } ] as [string, Service];
+ } ] as [string, ServiceConfig];
  });
 
  if (enabledServices.length) {
@@ -322,9 +305,9 @@ export default class Embed {
 
  entries = entries.concat(userServices);
 
- Embed.services = entries.reduce<{ [key: string]: Service }>((result, [key, service]) => {
+ Embed.services = entries.reduce<{ [key: string]: ServiceConfig }>((result, [key, service]) => {
  if (!(key in result)) {
- result[key] = service as Service;
+ result[key] = service as ServiceConfig;
 
  return result;
  }
@@ -336,7 +319,9 @@ export default class Embed {
 
  Embed.patterns = entries
  .reduce<{ [key: string]: RegExp }>((result, [key, item]) => {
- result[key] = item.regex as RegExp;
+ if (item && typeof item !== 'boolean') {
+ result[key] = (item as ServiceConfig).regex as RegExp;
+ }
 
  return result;
  }, {});
@@ -348,7 +333,7 @@ export default class Embed {
  * @param {Service} config - configuration of embed block element
  * @returns {boolean}
  */
- static checkServiceConfig(config: Service): boolean {
+ static checkServiceConfig(config: ServiceConfig): boolean {
  const { regex, embedUrl, html, height, width, id } = config;
 
  let isValid = Boolean(regex && regex instanceof RegExp) &&

src/services.ts

@@ -1,14 +1,7 @@
 /* eslint-disable no-useless-escape */
-interface Service {
- regex: RegExp;
- embedUrl: string;
- html: string;
- id?: (ids: string[]) => string;
- width?: number;
- height?: number;
-}
+import { ServiceConfig, ServicesConfigType } from './types/types';
 
-const SERVICES: { [key: string]: Service } = {
+const SERVICES: ServicesConfigType = {
  vimeo: {
  regex: /(?:http[s]?:\/\/)?(?:www.)?(?:player.)?vimeo\.co(?:.+\/([^\/]\d+)(?:#t=[\d]+)?s?$)/,
  embedUrl: 'https://player.vimeo.com/video/<%= remote_id %>?title=0&byline=0',

src/types/types.ts

@@ -0,0 +1,23 @@
+
+/**
+ * @description Service configuration object
+ */
+export interface ServiceConfig {
+ /** Pattern of source URLs */
+ regex: RegExp;
+ /** URL scheme to embedded page. Use '<%= remote_id %>' to define a place to insert resource id */
+ embedUrl: string;
+ /** Iframe which contains embedded content */
+ html: string;
+ /** Function to get resource id from RegExp groups */
+ id?: (ids: string[]) => string;
+ /** Embedded content width */
+ width?: number;
+ /** Embedded content height */
+ height?: number;
+}
+
+/**
+ * @description Type for services configuration
+ */
+export type ServicesConfigType = { [key: string]: ServiceConfig | boolean };

test/services.js → test/services.ts

@@ -1,12 +1,13 @@
 import { expect } from 'chai';
 
-import EmbedTool from '../src/index';
+import EmbedTool, { EmbedData } from '../src/index';
+import { API } from '@editorjs/editorjs';
 
-EmbedTool.prepare({});
+EmbedTool.prepare({config: {}});
 const { patterns } = EmbedTool.pasteConfig;
-const embed = new EmbedTool({ data: {} });
+const embed = new EmbedTool({data: {} as EmbedData, api: {} as API, readOnly: false});
 
-const composePasteEventMock = (type, service, url) => ({
+const composePasteEventMock = (type: string, service: string, url: string) => ({
  type,
  detail: {
  key: service,
@@ -348,7 +349,7 @@ describe('Services Regexps', () => {
  return pattern.test(url);
  });
 
- expect(foundService[0]).to.be.equal(name);
+ expect(foundService![0]).to.be.equal(name);
  });
  });
 

yarn.lock

@@ -1374,6 +1374,11 @@
  resolved "https://registry.yarnpkg.com/@types/argparse/-/argparse-1.0.38.tgz#a81fd8606d481f873a3800c6ebae4f1d768a56a9"
  integrity sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==
 
+"@types/chai@^4.3.16":
+ version "4.3.16"
+ resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.16.tgz#b1572967f0b8b60bf3f87fe1d854a5604ea70c82"
+ integrity sha512-PatH4iOdyh3MyWtmHVFXLWCCIhUbopaltqddG9BzB+gMIzee2MJrvd+jouii9Z3wzQJruGWAm7WOMjgfG8hQlQ==
+
 "@types/debounce@^1.2.4":
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.4.tgz#cb7e85d9ad5ababfac2f27183e8ac8b576b2abb3"
@@ -1394,6 +1399,11 @@
  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/mocha@^10.0.6":
+ version "10.0.6"
+ resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.6.tgz#818551d39113081048bdddbef96701b4e8bb9d1b"
+ integrity sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg==
+
 "@types/node@^20.14.2":
  version "20.14.2"
  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.2.tgz#a5f4d2bcb4b6a87bffcaa717718c5a0f208f4a18"