Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@patternslib/patternslib

Package Overview
Dependencies
Maintainers
7
Versions
158
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@patternslib/patternslib - npm Package Compare versions

Comparing version 7.4.0 to 7.5.0

12

package.json
{
"name": "@patternslib/patternslib",
"version": "7.4.0",
"version": "7.5.0",
"title": "Markup patterns to drive behaviour.",

@@ -48,3 +48,3 @@ "description": "Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming language. Accessibility, SEO and well structured HTML are core values of Patterns.",

"@release-it/conventional-changelog": "^4.2.2",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/jest-dom": "^5.16.3",
"babel-loader": "^8.2.4",

@@ -54,3 +54,3 @@ "copy-webpack-plugin": "^10.2.4",

"css-loader": "^6.7.1",
"eslint": "^8.11.0",
"eslint": "^8.12.0",
"eslint-config-prettier": "^8.5.0",

@@ -65,6 +65,6 @@ "expose-loader": "^3.0.0",

"jest-watch-typeahead": "^1.0.0",
"prettier": "^2.6.0",
"prettier": "^2.6.1",
"regenerator-runtime": "^0.13.9",
"release-it": "^14.13.1",
"sass": "^1.49.9",
"release-it": "^14.14.0",
"sass": "^1.49.10",
"sass-loader": "^12.6.0",

@@ -71,0 +71,0 @@ "style-loader": "^3.3.0",

34

src/pat/inject/inject.js

@@ -276,6 +276,10 @@ import "../../core/jquery-ext"; // for :scrollable for autoLoading-visible

_confirm = true;
} else if (cfg.confirm === "form-data") {
if (cfg.target != "none") _confirm = this.elementIsDirty(cfg.$target);
} else if (cfg.confirm === "class") {
if (cfg.target != "none") _confirm = cfg.$target.hasClass("is-dirty");
} else if (
cfg.confirm === "form-data" &&
cfg.target &&
cfg.target !== "none"
) {
_confirm = this.elementIsDirty(cfg.$target);
} else if (cfg.confirm === "class" && cfg.target && cfg.target !== "none") {
_confirm = cfg.$target.hasClass("is-dirty");
}

@@ -604,3 +608,3 @@ if (_confirm) {

const perform_inject = () => {
if (cfg.target != "none")
if (cfg.target !== "none")
cfg.$target.each((idx2, target) => {

@@ -656,3 +660,3 @@ this._performInjection(

const error_page_url = document
.querySelector(`meta[name^=pat-inject-status-${status}]`)
?.querySelector(`meta[name^=pat-inject-status-${status}]`)
?.getAttribute("content", false);

@@ -726,12 +730,14 @@ error_page_fragment = error_page_url?.split("#")[1];

$el.data("pat-inject-triggered", true);
// possibility for spinners on targets
cfgs.filter((cfg) => cfg?.loadingClass).forEach((cfg) => {
if (cfg.target != "none") {
for (const cfg of cfgs) {
// Add a execute class on the pat-inject element.
if (cfg?.executingClass) {
$el[0].classList.add(cfg.executingClass);
}
// Add a loading class to the target.
// Can be used for loading-spinners.
if (cfg?.loadingClass && cfg?.target !== "none") {
cfg.$target.addClass(cfg.loadingClass);
}
});
// Put the execute class on the elem that has pat inject on it
cfgs.filter((cfg) => cfg?.executingClass).forEach((cfg) =>
$el.addClass(cfg.executingClass)
);
}

@@ -738,0 +744,0 @@ $el.on(

77

src/pat/inject/inject.test.js

@@ -56,3 +56,3 @@ import pattern from "./inject";

it("has a default value of 'injecting' and gets added to the target while content is still loading", async function () {
jest.spyOn($, "ajax").mockImplementation(() => deferred);
const spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
var $a = $('<a class="pat-inject" href="test.html#someid">link</a>');

@@ -77,6 +77,8 @@ var $div = $('<div id="someid" />');

expect(callback).toHaveBeenCalled();
spy_ajax.mockRestore();
});
it("can be set to another string value which then gets added to the target while content is still loading'", async function () {
jest.spyOn($, "ajax").mockImplementation(() => deferred);
const spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
var $a = $(

@@ -99,6 +101,8 @@ '<a class="pat-inject" data-pat-inject="loading-class: other-class;" href="test.html#someid">link</a>'

expect($div.hasClass("other-class")).toBeFalsy();
spy_ajax.mockRestore();
});
it("can be set to an empty string value so that nothing gets added to the target while content is still loading'", function () {
jest.spyOn($, "ajax");
const spy_ajax = jest.spyOn($, "ajax");
var $a = $(

@@ -114,2 +118,4 @@ '<a class="pat-inject" data-pat-inject="loading-class: ;" href="test.html#someid">link</a>'

expect($div[0].className).toBe("");
spy_ajax.mockRestore();
});

@@ -123,3 +129,3 @@ });

$("#lab").empty().append($a).append($div);
jest.spyOn(pattern, "onTrigger");
const spy_onTrigger = jest.spyOn(pattern, "onTrigger");
var spy_confirm = jest

@@ -141,2 +147,5 @@ .spyOn(window, "confirm")

expect(spy_confirm).toHaveBeenCalled();
spy_onTrigger.mockRestore();
spy_confirm.mockRestore();
});

@@ -164,2 +173,5 @@

expect(spy_onTrigger).toHaveBeenCalled();
spy_onTrigger.mockRestore();
spy_confirm.mockRestore();
});

@@ -187,2 +199,5 @@

expect(spy_confirm).toHaveBeenCalled();
spy_onTrigger.mockRestore();
spy_confirm.mockRestore();
});

@@ -216,2 +231,5 @@

expect(spy_onTrigger).toHaveBeenCalled();
spy_onTrigger.mockRestore();
spy_confirm.mockRestore();
});

@@ -226,4 +244,4 @@

$("#lab").empty().append($a).append($div);
jest.spyOn(pattern, "onTrigger");
var spy_confirm = jest
const spy_onTrigger = jest.spyOn(pattern, "onTrigger");
const spy_confirm = jest
.spyOn(window, "confirm")

@@ -241,2 +259,5 @@ .mockImplementation(() => false);

expect(spy_confirm).toHaveBeenCalledWith("Hello world");
spy_onTrigger.mockRestore();
spy_confirm.mockRestore();
});

@@ -274,2 +295,4 @@ });

expect(spy_rebaseURL).not.toHaveBeenCalled();
spy_rebaseURL.mockRestore();
});

@@ -515,3 +538,3 @@

it("The pat-inject-success get triggered after successful injection", async function () {
jest.spyOn($, "ajax").mockImplementation(() => deferred);
const spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
document.body.innerHTML = `

@@ -528,2 +551,4 @@ <a class="pat-inject" href="test.html">link</a>

expect(callback).toHaveBeenCalled();
spy_ajax.mockRestore();
});

@@ -533,3 +558,5 @@

it("gets triggered after injection has finished'", async function () {
jest.spyOn($, "ajax").mockImplementation(() => deferred);
const spy_ajax = jest
.spyOn($, "ajax")
.mockImplementation(() => deferred);
var $a = $('<a class="pat-inject" href="test.html#someid">link</a>');

@@ -547,2 +574,4 @@ var $div = $('<div id="someid" />');

expect(callback).toHaveBeenCalled();
spy_ajax.mockRestore();
});

@@ -553,5 +582,6 @@ });

var $a, $div;
let spy_ajax;
beforeEach(function () {
jest.spyOn($, "ajax").mockImplementation(() => deferred);
spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
$a = $('<a class="pat-inject" href="test.html#someid">link</a>');

@@ -562,2 +592,6 @@ $div = $('<div id="someid" />');

afterEach(function () {
spy_ajax.mockRestore();
});
it("fetches url on click", function () {

@@ -612,3 +646,5 @@ pattern.init($a);

$.ajax.mockRestore();
jest.spyOn($, "ajax").mockImplementation(() => deferred);
const spy_ajax2 = jest
.spyOn($, "ajax")
.mockImplementation(() => deferred);

@@ -621,2 +657,4 @@ $a.trigger("click");

expect($div.html()).toBe("new replacement");
spy_ajax2.mockRestore();
});

@@ -731,5 +769,6 @@

var $form, $div;
let spy_ajax;
beforeEach(function () {
jest.spyOn($, "ajax").mockImplementation(() => deferred);
spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
$form = $('<form class="pat-inject" action="test.html#someid" />');

@@ -740,2 +779,6 @@ $div = $('<div id="someid" />');

afterEach(function () {
spy_ajax.mockRestore();
});
it("trigger injection on submit", async function () {

@@ -1065,5 +1108,6 @@ pattern.init($form);

let $a;
let spy_ajax;
beforeEach(() => {
jest.spyOn($, "ajax").mockImplementation(() => deferred);
spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
document.body.innerhtml = `

@@ -1081,2 +1125,3 @@ <div id="lab">

document.body.innerHTML = "";
spy_ajax.mockRestore();
});

@@ -1364,3 +1409,3 @@

jest.spyOn($, "ajax").mockImplementation(() => deferred);
const spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
answer("<html><body>OK</body></html>");

@@ -1410,6 +1455,8 @@

expect(el.textContent).toBe("NOT");
spy_ajax.mockRestore();
});
it("Test trigger: autoload-visible, default delay time", async () => {
jest.spyOn($, "ajax").mockImplementation(() => deferred);
const spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
answer("<html><body>OK</body></html>");

@@ -1441,2 +1488,4 @@

expect(el.textContent).toBe("OK");
spy_ajax.mockRestore();
});

@@ -1443,0 +1492,0 @@ });

23

src/pat/tooltip/tooltip.js

@@ -44,6 +44,2 @@ import "regenerator-runtime/runtime"; // needed for ``await`` support

tippy: null,
ajax_state: {
isFetching: false,
canFetch: true,
},

@@ -259,3 +255,3 @@ active_class: "tooltip-active-hover",

if (this.options.source === "ajax") {
await this._getContent();
await this.get_content();
}

@@ -316,21 +312,11 @@

this.tippy.setContent(document.createElement("progress"));
this.ajax_state.canFetch = true;
}
},
async _getContent() {
if (this.ajax_state.isFetching || !this.ajax_state.canFetch) {
return undefined;
}
const { url, selector } = this.get_url_parts(
this.options.url || this.el.getAttribute("href")
);
async get_content(url = this.options.url) {
let selector;
({ url, selector } = this.get_url_parts(url || this.el.getAttribute("href")));
let content;
if (url) {
// Tooltip from remote page.
this.ajax_state = {
isFetching: true,
canFetch: false,
};
const handler = this._ajaxDataTypeHandlers[this.options.ajaxDataType];

@@ -345,3 +331,2 @@ try {

}
this.ajax_state.isFetching = false;
} else if (selector) {

@@ -348,0 +333,0 @@ // Tooltip content from current DOM tree.

335

src/pat/tooltip/tooltip.test.js

@@ -66,4 +66,4 @@ import $ from "jquery";

describe("A tooltip", () => {
it("always gets the ``tooltip-container`` class set", async () => {
describe("1 - A tooltip", () => {
it("1.1 - always gets the ``tooltip-container`` class set", async () => {
const $el = testutils.createTooltip({

@@ -84,4 +84,4 @@ data: "trigger: click",

describe(`if the 'class' parameter exists`, () => {
it("will assign a class to the tooltip container", async () => {
describe('1.2 - if the "class" parameter exists', () => {
it("1.2.1 - will assign a class to the tooltip container", async () => {
const $el = testutils.createTooltip({

@@ -115,5 +115,7 @@ data: "source: title; trigger: hover; class: wasabi",

expect(expected).toBe(title);
spy_show.mockRestore();
});
it("and only to the corresponding container", async () => {
it("1.2.2 - and only to the corresponding container", async () => {
const $el1 = testutils.createTooltip({

@@ -151,3 +153,3 @@ data: "source: title; trigger: click; class: wasabi",

it("with multiple values, all will be applied.", async () => {
it("1.2.3 - with multiple values, all will be applied.", async () => {
const $el = testutils.createTooltip({

@@ -169,4 +171,4 @@ data: "source: title; trigger: click; class: wasabi kohlrabi",

describe(`if the 'delay' parameter exists`, () => {
it("will wait accordingly before showing the tooltip", async () => {
describe('1.3 - if the "delay" parameter exists', () => {
it("1.3.1 - will wait accordingly before showing the tooltip", async () => {
testutils.createTooltip({

@@ -199,2 +201,5 @@ data: "delay: 500; trigger: hover",

expect(duration / 500).toBeCloseTo(1, 1);
spy_show.mockRestore();
spy_trigger.mockRestore();
});

@@ -204,5 +209,5 @@ });

describe("Tooltip closing behavior", () => {
describe("with the default `closing: auto`", () => {
it("with `trigger: click` it will only close when clicking outside the tooltip element", async () => {
describe("2 - Tooltip closing behavior", () => {
describe("2.1 - with the default `closing: auto`", () => {
it("2.1.1 - with `trigger: click` it will only close when clicking outside the tooltip element", async () => {
const $el = testutils.createTooltip({

@@ -235,5 +240,8 @@ data: "trigger: click; closing: auto",

expect(spy_hide).toHaveBeenCalled();
spy_show.mockRestore();
spy_hide.mockRestore();
});
it("with `trigger: hover` it will close when hovering outside the tooltip element", async () => {
it("2.1.2 - with `trigger: hover` it will close when hovering outside the tooltip element", async () => {
const $el = testutils.createTooltip({

@@ -250,5 +258,5 @@ data: "trigger: hover; closing: auto",

// Shortcut any checks for mouse positions and just hide.
jest.spyOn(instance.tippy, "hideWithInteractivity").mockImplementation(
instance.tippy.hide
);
const spy_inter = jest
.spyOn(instance.tippy, "hideWithInteractivity")
.mockImplementation(instance.tippy.hide);

@@ -263,7 +271,11 @@ testutils.mouseenter($el);

expect(spy_hide).toHaveBeenCalled();
spy_show.mockRestore();
spy_hide.mockRestore();
spy_inter.mockRestore();
});
});
describe("with `closing: sticky`", () => {
it("with `trigger: click` there is no change in the closing behavior", async () => {
describe("2.2 - with `closing: sticky`", () => {
it("2.2.1 - with `trigger: click` there is no change in the closing behavior", async () => {
const $el = testutils.createTooltip({

@@ -296,5 +308,8 @@ data: "trigger: click; closing: sticky",

expect(spy_hide).toHaveBeenCalled();
spy_show.mockRestore();
spy_hide.mockRestore();
});
it("with `trigger: hover` the tooltip is only closed when clicking outside", async () => {
it("2.2.2 - with `trigger: hover` the tooltip is only closed when clicking outside", async () => {
const $el = testutils.createTooltip({

@@ -322,7 +337,10 @@ data: "trigger: hover; closing: sticky",

expect(spy_hide).toHaveBeenCalled();
spy_show.mockRestore();
spy_hide.mockRestore();
});
});
describe("with `closing: close-button`", () => {
it("with `trigger: click` the tooltip is only closed when clicking the close button", async () => {
describe("2.3 - with `closing: close-button`", () => {
it("2.3.1 - with `trigger: click` the tooltip is only closed when clicking the close button", async () => {
const $el = testutils.createTooltip({

@@ -361,5 +379,8 @@ data: "trigger: click; closing: close-button",

expect(spy_hide).toHaveBeenCalled();
spy_show.mockRestore();
spy_hide.mockRestore();
});
it("with `trigger: hover` the tooltip is only closed when clicking outside", async () => {
it("2.3.2 - with `trigger: hover` the tooltip is only closed when clicking outside", async () => {
const $el = testutils.createTooltip({

@@ -392,5 +413,8 @@ data: "trigger: hover; closing: close-button",

expect(spy_hide).toHaveBeenCalled();
spy_show.mockRestore();
spy_hide.mockRestore();
});
it("a close-panel doesn't prevent a form submit.", async () => {
it("2.3.3 - a close-panel doesn't prevent a form submit.", async () => {
document.body.innerHTML = `

@@ -432,4 +456,4 @@ <a class="pat-tooltip" href="#form" data-pat-tooltip="source: ajax">open form</a>

describe(`multiple tooltips...`, () => {
it("...no problem", async () => {
describe("3 - multiple tooltips...", () => {
it("3.1 - ...no problem", async () => {
const $el1 = testutils.createTooltip({

@@ -481,7 +505,10 @@ data: "source: title; trigger: click",

);
spy_show1.mockRestore();
spy_show2.mockRestore();
});
});
describe(`if the 'position-list' parameter exists`, () => {
it(`'lt' will place the tooltip as 'right-start'`, async () => {
describe(`4 - if the 'position-list' parameter exists`, () => {
it(`4.1 - 'lt' will place the tooltip as 'right-start'`, async () => {
const $el = testutils.createTooltip({

@@ -499,3 +526,3 @@ data: "position-list: lt",

});
it(`'lb' will place the tooltip as 'right-end'`, async () => {
it(`4.2 - 'lb' will place the tooltip as 'right-end'`, async () => {
const $el = testutils.createTooltip({

@@ -513,3 +540,3 @@ data: "position-list: lb",

});
it(`'lm' will place the tooltip as 'right'`, async () => {
it(`4.3 - 'lm' will place the tooltip as 'right'`, async () => {
const $el = testutils.createTooltip({

@@ -527,3 +554,3 @@ data: "position-list: lm",

});
it(`'bl' will place the tooltip as 'top-start'`, async () => {
it(`4.4 - 'bl' will place the tooltip as 'top-start'`, async () => {
const $el = testutils.createTooltip({

@@ -541,3 +568,3 @@ data: "position-list: bl",

});
it(`'br' will place the tooltip as 'top-end'`, async () => {
it(`4.5 - 'br' will place the tooltip as 'top-end'`, async () => {
const $el = testutils.createTooltip({

@@ -555,3 +582,3 @@ data: "position-list: br",

});
it(`'bm' will place the tooltip as 'top'`, async () => {
it(`4.6 - 'bm' will place the tooltip as 'top'`, async () => {
const $el = testutils.createTooltip({

@@ -569,4 +596,4 @@ data: "position-list: bm",

});
describe(`and 'position-policy' is 'force'`, () => {
it(`'tl;force' will place the tooltip as 'bottom-start'`, async () => {
describe(`4.7 - and 'position-policy' is 'force'`, () => {
it(`4.7.1 - 'tl;force' will place the tooltip as 'bottom-start'`, async () => {
const $el = testutils.createTooltip({

@@ -584,3 +611,3 @@ data: "position-list: tl; position-policy: force",

});
it(`'tr;force' will place the tooltip as 'bottom-end'`, async () => {
it(`4.7.2 - 'tr;force' will place the tooltip as 'bottom-end'`, async () => {
const $el = testutils.createTooltip({

@@ -598,3 +625,3 @@ data: "position-list: tr; position-policy: force",

});
it(`'tm;force' will place the tooltip as 'bottom'`, async () => {
it(`4.7.3 - 'tm;force' will place the tooltip as 'bottom'`, async () => {
const $el = testutils.createTooltip({

@@ -612,3 +639,3 @@ data: "position-list: tm; position-policy: force",

});
it(`'rt;force' will place the tooltip as 'left-start'`, async () => {
it(`4.7.4 - 'rt;force' will place the tooltip as 'left-start'`, async () => {
const $el = testutils.createTooltip({

@@ -626,3 +653,3 @@ data: "position-list: rt; position-policy: force",

});
it(`'rb;force' will place the tooltip as 'left-end'`, async () => {
it(`4.7.5 - 'rb;force' will place the tooltip as 'left-end'`, async () => {
const $el = testutils.createTooltip({

@@ -640,3 +667,3 @@ data: "position-list: rb; position-policy: force",

});
it(`'rm;force' will place the tooltip as 'left'`, async () => {
it(`4.7.6 - 'rm;force' will place the tooltip as 'left'`, async () => {
const $el = testutils.createTooltip({

@@ -657,5 +684,5 @@ data: "position-list: rm; position-policy: force",

describe(`and ...`, () => {
describe(`the 'mark-inactive' paramater`, () => {
it("when true, toggles the active/inactive class on the trigger", async () => {
describe(`5 - and ...`, () => {
describe(`5.1 - the 'mark-inactive' paramater`, () => {
it("5.1.1 - when true, toggles the active/inactive class on the trigger", async () => {
const $el = testutils.createTooltip({

@@ -697,4 +724,7 @@ data: "mark-inactive: true",

expect(el.classList.contains("tooltip-inactive")).toBeTruthy();
spy_show.mockRestore();
spy_hide.mockRestore();
});
it("when false, the trigger does not get the active/inactive class", async () => {
it("5.1.2 - when false, the trigger does not get the active/inactive class", async () => {
const $el = testutils.createTooltip({

@@ -736,4 +766,7 @@ data: "mark-inactive: false",

expect(el.classList.contains("tooltip-inactive")).toBeFalsy();
spy_show.mockRestore();
spy_hide.mockRestore();
});
it("when true and trigger is hover, toggles a different active class on the trigger", async () => {
it("5.1.3 - when true and trigger is hover, toggles a different active class on the trigger", async () => {
const $el = testutils.createTooltip({

@@ -761,7 +794,9 @@ data: "mark-inactive: true; trigger: hover",

expect(el.classList.contains("tooltip-inactive")).toBeFalsy();
spy_show.mockRestore();
});
});
describe(`if the 'trigger' parameter is 'hover'`, () => {
describe(`if the 'source' parameter is 'title'`, () => {
it(`will show the contents of the 'title' attribute`, async () => {
describe(`5.2 - if the 'trigger' parameter is 'hover'`, () => {
describe(`5.2.1 - if the 'source' parameter is 'title'`, () => {
it(`5.2.1.1 - will show the contents of the 'title' attribute`, async () => {
const $el = testutils.createTooltip({

@@ -792,4 +827,6 @@ data: "source: title; trigger: hover",

).toBe(title);
spy_show.mockRestore();
});
it("will hide the tooltip on mouseleave", async () => {
it("5.2.1.2 - will hide the tooltip on mouseleave", async () => {
const $el = testutils.createTooltip({

@@ -805,6 +842,5 @@ data: "source: title; trigger: hover",

// Shortcut any checks for mouse positions and just hide.
jest.spyOn(
instance.tippy,
"hideWithInteractivity"
).mockImplementation(instance.tippy.hide);
const spy_inter = jest
.spyOn(instance.tippy, "hideWithInteractivity")
.mockImplementation(instance.tippy.hide);

@@ -820,6 +856,9 @@ testutils.mouseenter($el);

expect(document.querySelectorAll(".tippy-box").length).toEqual(0);
spy_hide.mockRestore();
spy_inter.mockRestore();
});
});
describe(`if the 'source' parameter is 'content'`, () => {
it("it will show the content of the link", async () => {
describe(`5.2.2 - if the 'source' parameter is 'content'`, () => {
it("5.2.2.1 - it will show the content of the link", async () => {
const content = "Local content";

@@ -843,7 +882,9 @@ const $el = testutils.createTooltip({

);
spy_show.mockRestore();
});
});
});
describe("if the 'trigger' parameter is 'none'", () => {
it("does not open or close via click or mousehover", async () => {
describe("5.3 - if the 'trigger' parameter is 'none'", () => {
it("5.3.1 - does not open or close via click or mousehover", async () => {
const el = document.createElement("div");

@@ -886,3 +927,3 @@ el.setAttribute("title", "hello.");

it("does opens / closes via the API", async () => {
it("5.3.2 - does opens / closes via the API", async () => {
const el = document.createElement("div");

@@ -909,4 +950,4 @@ el.setAttribute("title", "hello.");

});
describe(`if the 'target' parameter is 'body'`, () => {
it("will append the .tippy-box to the document.body", async () => {
describe(`5.4 - if the 'target' parameter is 'body'`, () => {
it("5.4.1 - will append the .tippy-box to the document.body", async () => {
const $el = testutils.createTooltip({

@@ -927,4 +968,4 @@ data: "target: body",

});
describe(`if the 'target' parameter is 'parent'`, () => {
it(`will append the .tippy-box to the reference element's parent node`, async () => {
describe(`5.5 - if the 'target' parameter is 'parent'`, () => {
it(`5.5.1 - will append the .tippy-box to the reference element's parent node`, async () => {
const $el = testutils.createTooltip({

@@ -945,4 +986,4 @@ data: "target: parent",

});
describe(`if the 'target' parameter is a selector`, () => {
it("will append the .tippy-box to the selected element", async () => {
describe(`5.6 - if the 'target' parameter is a selector`, () => {
it("5.6.1 - will append the .tippy-box to the selected element", async () => {
const $el = testutils.createTooltip({

@@ -976,4 +1017,4 @@ data: "target: #child3",

describe("test the different `source` parameters", () => {
it("source: title will use the title attribute", async () => {
describe("6 - test the different `source` parameters", () => {
it("6.1 - source: title will use the title attribute", async () => {
const $el = testutils.createTooltip({

@@ -997,3 +1038,3 @@ data: "source: title; trigger: click",

it("source: content use the content of the link", async () => {
it("6.2 - source: content use the content of the link", async () => {
const content = "Local content";

@@ -1013,3 +1054,3 @@ const $el = testutils.createTooltip({

it("source: ajax and an external url will fetch its contents via ajax", async () => {
it("6.3 - source: ajax and an external url will fetch its contents via ajax", async () => {
global.fetch = jest

@@ -1028,3 +1069,3 @@ .fn()

const spy_content = jest.spyOn(instance, "_getContent");
const spy_content = jest.spyOn(instance, "get_content");
const spy_show = jest.spyOn(instance.tippy.props, "onShow");

@@ -1042,7 +1083,9 @@

global.fetch.mockClear();
spy_content.mockRestore();
spy_show.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
it("source: ajax with a local selector will not use ajax but get the contents from the current DOM", async () => {
it("6.4 - source: ajax with a local selector will not use ajax but get the contents from the current DOM", async () => {
global.fetch = jest

@@ -1061,3 +1104,3 @@ .fn()

const spy_content = jest.spyOn(instance, "_getContent");
const spy_content = jest.spyOn(instance, "get_content");
const spy_show = jest.spyOn(instance.tippy.props, "onShow");

@@ -1075,7 +1118,9 @@

global.fetch.mockClear();
spy_content.mockRestore();
spy_show.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
it("source: ajax loading via the url parameter.", async () => {
it("6.5 - source: ajax loading via the url parameter.", async () => {
global.fetch = jest

@@ -1104,3 +1149,3 @@ .fn()

const spy_content = jest.spyOn(instance, "_getContent");
const spy_content = jest.spyOn(instance, "get_content");
const spy_show = jest.spyOn(instance.tippy.props, "onShow");

@@ -1118,7 +1163,9 @@

global.fetch.mockClear();
spy_content.mockRestore();
spy_show.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
it("source: ajax loading from current DOM via the url parameter and a fragment specifier.", async () => {
it("6.6 - source: ajax loading from current DOM via the url parameter and a fragment specifier.", async () => {
global.fetch = jest

@@ -1148,3 +1195,3 @@ .fn()

const spy_content = jest.spyOn(instance, "_getContent");
const spy_content = jest.spyOn(instance, "get_content");
const spy_show = jest.spyOn(instance.tippy.props, "onShow");

@@ -1162,9 +1209,57 @@

global.fetch.mockClear();
spy_content.mockRestore();
spy_show.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
it("6.7 - source: updating the content with ``get_content``.", async () => {
global.fetch = jest
.fn()
.mockImplementation(
mockFetch("External content fetched via an HTTP request.")
);
const $el = testutils.createTooltip({
data: "source: ajax",
href: "http://test.com",
});
const instance = new pattern($el);
await utils.timeout(1);
const spy_content = jest.spyOn(instance, "get_content");
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
testutils.click($el);
await utils.timeout(1); // wait a tick for async fetch
expect(global.fetch).toHaveBeenCalled();
expect(spy_content).toHaveBeenCalled();
expect(spy_show).toHaveBeenCalled();
expect(document.querySelector(".tippy-box .tippy-content").textContent).toBe(
"External content fetched via an HTTP request."
);
global.fetch.mockRestore();
delete global.fetch;
global.fetch = jest.fn().mockImplementation(mockFetch("Update!"));
instance.get_content("https://ok.com");
await utils.timeout(1); // wait a tick for async fetch
expect(global.fetch).toHaveBeenCalled();
expect(spy_content).toHaveBeenCalled();
expect(spy_show).toHaveBeenCalled();
expect(document.querySelector(".tippy-box .tippy-content").textContent).toBe(
"Update!"
);
spy_content.mockRestore();
spy_show.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
});
describe(`if the 'source' parameter is 'ajax'`, () => {
it("multiple clicks only fetches once AND the default click action is prevented", async () => {
describe(`7 - if the 'source' parameter is 'ajax'`, () => {
it("7.1 - multiple clicks only fetches once AND the default click action is prevented", async () => {
global.fetch = jest.fn().mockImplementation(mockFetch());

@@ -1183,8 +1278,8 @@

jest.spyOn(click, "preventDefault").mockImplementation(() =>
call_order.push("preventDefault")
);
jest.spyOn(instance, "_getContent").mockImplementation(() =>
call_order.push("_getContent")
);
const spy_prevent = jest
.spyOn(click, "preventDefault")
.mockImplementation(() => call_order.push("preventDefault"));
const spy_get_content = jest
.spyOn(instance, "get_content")
.mockImplementation(() => call_order.push("get_content"));

@@ -1198,10 +1293,12 @@ $el[0].dispatchEvent(click);

expect(call_order.filter(it => it === "_getContent").length).toEqual(1); // prettier-ignore
expect(call_order.filter(it => it === "get_content").length).toEqual(1); // prettier-ignore
expect(call_order.filter(it => it === "preventDefault").length).toEqual(3); // prettier-ignore
global.fetch.mockClear();
spy_prevent.mockRestore();
spy_get_content.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
it("will fetch a section via ajax", async () => {
it("7.2 - will fetch a section via ajax", async () => {
global.fetch = jest.fn().mockImplementation(

@@ -1221,3 +1318,3 @@ mockFetch(`

const spy_ajax = jest.spyOn(instance, "_getContent");
const spy_ajax = jest.spyOn(instance, "get_content");
const spy_show = jest.spyOn(instance.tippy.props, "onShow");

@@ -1234,7 +1331,9 @@

global.fetch.mockClear();
spy_ajax.mockRestore();
spy_show.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
it("will handle markdown content", async () => {
it("7.3 - will handle markdown content", async () => {
global.fetch = jest.fn().mockImplementation(mockFetch("## hello."));

@@ -1249,3 +1348,3 @@

const spy_ajax = jest.spyOn(instance, "_getContent");
const spy_ajax = jest.spyOn(instance, "get_content");
const spy_show = jest.spyOn(instance.tippy.props, "onShow");

@@ -1262,7 +1361,9 @@

global.fetch.mockClear();
spy_ajax.mockRestore();
spy_show.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
it("will extract a section from markdown", async () => {
it("7.4 - will extract a section from markdown", async () => {
global.fetch = jest.fn().mockImplementation(

@@ -1287,3 +1388,3 @@ mockFetch(`

const spy_ajax = jest.spyOn(instance, "_getContent");
const spy_ajax = jest.spyOn(instance, "get_content");
const spy_show = jest.spyOn(instance.tippy.props, "onShow");

@@ -1304,8 +1405,10 @@

global.fetch.mockClear();
spy_ajax.mockRestore();
spy_show.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
describe("will not fetch again until tooltip is hidden", () => {
it("with click", async () => {
describe("7.5 - will not fetch again until tooltip is hidden", () => {
it("7.5.1 - with click", async () => {
global.fetch = jest

@@ -1324,3 +1427,3 @@ .fn()

const spy_ajax = jest.spyOn(instance, "_getContent");
const spy_ajax = jest.spyOn(instance, "get_content");
const spy_fetch = jest.spyOn(window, "fetch");

@@ -1349,7 +1452,10 @@ const spy_show = jest.spyOn(instance.tippy.props, "onShow");

global.fetch.mockClear();
spy_show.mockRestore();
spy_ajax.mockRestore();
spy_fetch.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
it("with hover", async () => {
it("7.5.2 - with hover", async () => {
global.fetch = jest

@@ -1368,3 +1474,3 @@ .fn()

const spy_ajax = jest.spyOn(instance, "_getContent");
const spy_ajax = jest.spyOn(instance, "get_content");
const spy_fetch = jest.spyOn(window, "fetch");

@@ -1393,3 +1499,6 @@ const spy_show = jest.spyOn(instance.tippy.props, "onShow");

global.fetch.mockClear();
spy_show.mockRestore();
spy_ajax.mockRestore();
spy_fetch.mockRestore();
global.fetch.mockRestore();
delete global.fetch;

@@ -1400,4 +1509,4 @@ });

describe("patterns-injected events", () => {
it("it throws the ``patterns-injected`` event", async () => {
describe("8 - patterns-injected events", () => {
it("8.1 - it throws the ``patterns-injected`` event", async () => {
global.fetch = jest.fn().mockImplementation(mockFetch("External content"));

@@ -1423,7 +1532,7 @@

global.fetch.mockClear();
global.fetch.mockRestore();
delete global.fetch;
});
it.skip("triggers event handlers in other patterns", async () => {
it.skip("8.2 - triggers event handlers in other patterns", async () => {
// TODO: fix tests

@@ -1461,7 +1570,9 @@ global.fetch = jest

global.fetch.mockClear();
spy_handler1.mockRestore();
spy_handler2.mockRestore();
global.fetch.mockRestore();
delete global.fetch;
});
it("only scans the tooltip content once", async () => {
it("8.3 - only scans the tooltip content once", async () => {
const $el = testutils.createTooltip({

@@ -1481,7 +1592,9 @@ data: "source: content; trigger: click",

expect(spy_scan).toHaveBeenCalledTimes(1);
spy_scan.mockRestore();
});
});
describe("URL splitting", () => {
it("it extracts the correct parts from any url", async () => {
describe("9 - URL splitting", () => {
it("9.1 - it extracts the correct parts from any url", async () => {
const $el = testutils.createTooltip({});

@@ -1488,0 +1601,0 @@ const instance = new pattern($el);

CHANGES.md

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc