Skip to content

Commit bf25dc4

Browse files
thetthet
committed
maint(pat-sortable): Modernize tests.
1 parent 73d7fc7 commit bf25dc4

File tree

2 files changed

+116
-78
lines changed

2 files changed

+116
-78
lines changed

‎src/pat/sortable/sortable.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,9 +143,9 @@ export default Base.extend({
143143
var $handle = $(ev.target),
144144
$dragged = $handle.parent(),
145145
that = this;
146-
if (typeof ev.originalEvent !== "undefined") {
146+
if (ev.originalEvent?.dataTransfer) {
147147
// Firefox seems to need this set to any value
148-
ev.originalEvent.dataTransfer.setData("Text", "");
148+
ev.originalEvent.dataTransfer?.setData("Text", "");
149149
ev.originalEvent.dataTransfer.effectAllowed = ["move"];
150150
if ("setDragImage" in ev.originalEvent.dataTransfer) {
151151
ev.originalEvent.dataTransfer.setDragImage($dragged[0], 0, 0);

‎src/pat/sortable/sortable.test.js

Lines changed: 114 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,133 @@
1-
import registry from "../../core/registry";
1+
import events from "../../core/events";
22
import $ from "jquery";
33
import Sortable from "./sortable";
44

55
describe("pat-sortable", function () {
6-
beforeEach(function () {
7-
$("div#lab").remove();
8-
$("<div/>", { id: "lab" }).appendTo(document.body);
9-
});
106
afterEach(function () {
11-
$("#lab").remove();
7+
document.body.innerHTML = "";
128
});
139

14-
it("adds class on drag start", function () {
15-
var $el = $(
16-
"" +
17-
'<ul class="pat-sortable">' +
18-
"<li>One</li>" +
19-
"<li>Two</li>" +
20-
"<li>Three</li>" +
21-
"</ul>"
22-
).appendTo("#lab");
23-
var sortable = new Sortable($el);
24-
var $dragged = $el.find("li").eq(0);
25-
var $handle = $dragged.children(".sortable-handle");
26-
$handle.trigger("dragstart");
27-
expect($dragged.hasClass(sortable.options.dragClass)).toEqual(true);
10+
it("1 - adds class on drag start", function () {
11+
document.body.innerHTML = `
12+
<ul class="pat-sortable">
13+
<li>One</li>
14+
<li>Two</li>
15+
<li>Three</li>
16+
</ul>
17+
`;
18+
const el = document.querySelector(".pat-sortable");
19+
const sortable = new Sortable(el);
20+
const dragged = el.querySelector("li");
21+
const handle = dragged.querySelector(".sortable-handle");
22+
handle.dispatchEvent(new Event("dragstart"));
23+
expect(dragged.classList.contains(sortable.options.dragClass)).toBe(true);
2824
});
2925

30-
it("adds a sortable handle to sortable elements", function () {
31-
var $lab = $("#lab");
32-
$lab.html(
33-
'<ul class="pat-sortable">' +
34-
" <li>1</li>" +
35-
" <li>2</li>" +
36-
" <li>3</li>" +
37-
" <li>4</li>" +
38-
"</ul>"
39-
);
40-
registry.scan($lab);
41-
var $handles = $("li a.sortable-handle");
42-
expect($handles.length).toBe(4);
43-
if ("draggable" in document.createElement("span")) {
44-
expect($handles.attr("draggable")).toEqual("true");
45-
}
26+
it("2 - adds a sortable handle to sortable elements", function () {
27+
document.body.innerHTML = `
28+
<ul class="pat-sortable">
29+
<li>One</li>
30+
<li>Two</li>
31+
<li>Three</li>
32+
</ul>
33+
`;
34+
const el = document.querySelector(".pat-sortable");
35+
new Sortable(el);
36+
const handles = el.querySelectorAll("li a.sortable-handle");
37+
expect(handles.length).toBe(3);
38+
expect(handles[0].getAttribute("draggable")).toBe("true");
39+
expect(handles[1].getAttribute("draggable")).toBe("true");
40+
expect(handles[2].getAttribute("draggable")).toBe("true");
4641
});
4742

48-
it("submits a form if there is a .sortable-amount input and .sortable-button-(up|down) buttons", function () {
49-
var $lab = $("#lab");
50-
$lab.html(
51-
"<form>" +
52-
' <ol class="pat-sortable" data-pat-sortable="selector: .sortable">' +
53-
' <li class="sortable" id="item1">' +
54-
" Item 1" +
55-
' <span class="button-cluster">' +
56-
' <button class="button sortable-button-up" type="submit" name="up_item_1" value="up" hidden>Up</button>' +
57-
' <button class="button sortable-button-down" type="submit" name="down_item_1" value="down" hidden>down</button>' +
58-
" </span>" +
59-
" </li>" +
60-
' <li class="sortable" id="item2">' +
61-
" Item 2" +
62-
' <span class="button-cluster">' +
63-
' <button class="button sortable-button-up" type="submit" name="up_item_2" value="up">Up</button>' +
64-
' <button class="button sortable-button-down" type="submit" name="down_item_2" value="down">down</button>' +
65-
" </span>" +
66-
" </li>" +
67-
' <li class="sortable" id="item3">' +
68-
" Item 3" +
69-
' <span class="button-cluster">' +
70-
' <button class="button sortable-button-up" type="submit" name="up_item_3" value="up">Up</button>' +
71-
' <button class="button sortable-button-down" type="submit" name="down_item_3" value="down">down</button>' +
72-
" </span>" +
73-
" </li>" +
74-
" </ol>" +
75-
' <input type="hidden" name="amount" class="sortable-amount" value="1"/>' +
76-
"</form>"
77-
);
78-
registry.scan($lab);
79-
var $handles = $("li a.sortable-handle");
80-
expect($handles.length).toBe(3);
81-
var $form = $("form");
43+
it("3 - submits a form if there is a .sortable-amount input and .sortable-button-(up|down) buttons", function () {
44+
document.body.innerHTML = `
45+
<form>
46+
<ol class="pat-sortable"
47+
data-pat-sortable="selector: .sortable"
48+
>
49+
<li class="sortable"
50+
id="item1"
51+
>
52+
Item 1
53+
<span class="button-cluster">
54+
<button class="button sortable-button-up"
55+
hidden
56+
name="up_item_1"
57+
type="submit"
58+
value="up"
59+
>Up</button>
60+
<button class="button sortable-button-down"
61+
hidden
62+
name="down_item_1"
63+
type="submit"
64+
value="down"
65+
>down</button>
66+
</span>
67+
</li>
68+
<li class="sortable"
69+
id="item2"
70+
>
71+
Item 2
72+
<span class="button-cluster">
73+
<button class="button sortable-button-up"
74+
name="up_item_2"
75+
type="submit"
76+
value="up"
77+
>Up</button>
78+
<button class="button sortable-button-down"
79+
name="down_item_2"
80+
type="submit"
81+
value="down"
82+
>down</button>
83+
</span>
84+
</li>
85+
<li class="sortable"
86+
id="item3"
87+
>
88+
Item 3
89+
<span class="button-cluster">
90+
<button class="button sortable-button-up"
91+
name="up_item_3"
92+
type="submit"
93+
value="up"
94+
>Up</button>
95+
<button class="button sortable-button-down"
96+
name="down_item_3"
97+
type="submit"
98+
value="down"
99+
>down</button>
100+
</span>
101+
</li>
102+
</ol>
103+
<input class="sortable-amount"
104+
name="amount"
105+
type="hidden"
106+
value="1"
107+
/>
108+
</form>
109+
`;
110+
const el = document.querySelector(".pat-sortable");
111+
new Sortable(el);
112+
const handles = el.querySelectorAll("li a.sortable-handle");
113+
expect(handles.length).toBe(3);
114+
115+
const form = document.querySelector("form");
82116

83117
$("#item3").prependTo($("ol")); // Simulate dragging it to the top.
84-
var submitCallback = jest.fn();
118+
const submitCallback = jest.fn();
85119
submitCallback.mockReturnValue(false);
86-
$form.submit(submitCallback);
87-
$("#item3 a.sortable-handle").trigger("dragend");
88-
expect($(".sortable-amount").attr("value")).toEqual("2");
120+
$(form).submit(submitCallback);
121+
document
122+
.querySelector("#item3 a.sortable-handle")
123+
.dispatchEvent(events.dragend_event());
124+
expect(document.querySelector(".sortable-amount").getAttribute("value")).toBe(
125+
"2"
126+
);
89127
expect(submitCallback).toHaveBeenCalled();
90128
});
91129

92-
it("Triggers pat-update on drag end", function () {
130+
it("4 - Triggers pat-update on drag end", function () {
93131
document.body.innerHTML = `
94132
<ul class="pat-sortable">
95133
<li>One</li>
@@ -107,7 +145,7 @@ describe("pat-sortable", function () {
107145
data = d;
108146
});
109147

110-
$(handle).trigger("dragend");
148+
handle.dispatchEvent(events.dragend_event());
111149

112150
expect(data.pattern).toBe("sortable");
113151
expect(data.action).toBe("changed");

0 commit comments

Comments
 (0)