1
- import registry from "../../core/registry " ;
1
+ import events from "../../core/events " ;
2
2
import $ from "jquery" ;
3
3
import Sortable from "./sortable" ;
4
4
5
5
describe ( "pat-sortable" , function ( ) {
6
- beforeEach ( function ( ) {
7
- $ ( "div#lab" ) . remove ( ) ;
8
- $ ( "<div/>" , { id : "lab" } ) . appendTo ( document . body ) ;
9
- } ) ;
10
6
afterEach ( function ( ) {
11
- $ ( "#lab" ) . remove ( ) ;
7
+ document . body . innerHTML = "" ;
12
8
} ) ;
13
9
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 ) ;
28
24
} ) ;
29
25
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" ) ;
46
41
} ) ;
47
42
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" ) ;
82
116
83
117
$ ( "#item3" ) . prependTo ( $ ( "ol" ) ) ; // Simulate dragging it to the top.
84
- var submitCallback = jest . fn ( ) ;
118
+ const submitCallback = jest . fn ( ) ;
85
119
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
+ ) ;
89
127
expect ( submitCallback ) . toHaveBeenCalled ( ) ;
90
128
} ) ;
91
129
92
- it ( "Triggers pat-update on drag end" , function ( ) {
130
+ it ( "4 - Triggers pat-update on drag end" , function ( ) {
93
131
document . body . innerHTML = `
94
132
<ul class="pat-sortable">
95
133
<li>One</li>
@@ -107,7 +145,7 @@ describe("pat-sortable", function () {
107
145
data = d ;
108
146
} ) ;
109
147
110
- $ ( handle ) . trigger ( "dragend" ) ;
148
+ handle . dispatchEvent ( events . dragend_event ( ) ) ;
111
149
112
150
expect ( data . pattern ) . toBe ( "sortable" ) ;
113
151
expect ( data . action ) . toBe ( "changed" ) ;
0 commit comments