1+ /* eslint-disable */
2+ /**
3+ * @jest -environment jsdom
4+ */
5+ import mutations from "../../../src/store/mutations" ;
6+ import actions from "../../../src/store/actions" ;
7+ import * as types from "../../../src/store/types" ;
8+ import { mount , createLocalVue , shallowMount } from "@vue/test-utils" ;
9+ import * as All from "quasar" ;
10+ import { iterate } from "localforage" ;
11+ const { Quasar, date } = All ;
12+
13+ /**
14+ * @description : Testing mutations and actions related to the Drag and Drop functionality of html elements
15+ * in the HTMLQueue and the CreateMenuHTMLQueue components.
16+ * `actions:` `setIdDrag', `setIdDrop`, `setSelectedIdDrag`, `setSelectedIdDrop`,
17+ * `dragDropSortHtmlElements`, `dragDropSortSelectedHtmlElements`
18+ * `mutations: SET_ID_DRAG, SET_ID_DROP, SET_SELECTED_ID_DRAG, SET_SELECTED_ID_DROP,
19+ * DRAG_DROP_SORT_HTML_ELEMENTS, DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS
20+ */
21+ let aHtmlList = [ {
22+ text : 'div' ,
23+ children :[ ] ,
24+ id :Date . now ( ) + 1
25+ } ,
26+ {
27+ children :[ ] ,
28+ text :'img' ,
29+ id :Date . now ( ) + 2
30+ } ,
31+ {
32+ children :[ ] ,
33+ text : 'paragraph' ,
34+ id :Date . now ( ) + 3
35+ } ]
36+
37+ let hardA = {
38+ componentName : "a" ,
39+ htmlList : [ ...aHtmlList ] ,
40+ children : [ ] ,
41+ parent : { } ,
42+ isActive : false ,
43+ idDrag : '' ,
44+ idDrop : ''
45+ }
46+
47+ const newState = {
48+ componentMap : {
49+ App : {
50+ componentName : 'App' ,
51+ children : [ 'HomeView' ] ,
52+ htmlList : [ ]
53+ } ,
54+ HomeView : {
55+ componentName : 'HomeView' ,
56+ children : [ 'a' ] ,
57+ children : [ ] ,
58+ htmlList : [ ]
59+ } ,
60+ a : hardA
61+ } ,
62+ routes : {
63+ HomeView : [ hardA ] ,
64+ NewView : [ ]
65+ } ,
66+ componentNameInputValue : '' ,
67+ activeRoute : 'HomeView' ,
68+ activeComponent : '' ,
69+ activeHTML : '' ,
70+ activeLayer : {
71+ id :'' ,
72+ lineage :[ ]
73+ } ,
74+ selectedIdDrag : '' ,
75+ selectedIdDrop : '' ,
76+ selectedElementList : [ ] ,
77+ }
78+
79+ describe ( "Tests for html elements drag-and-drop functionality" , ( ) => {
80+
81+ describe ( "Test drag and drop functionality in active components" , ( ) => {
82+ let state ;
83+ beforeEach ( ( ) => {
84+ state = newState ;
85+ state . activeComponent = 'a' ;
86+ hardA . htmlList = aHtmlList ;
87+ state . componentMap . a = hardA ;
88+ } ) ;
89+
90+ afterEach ( ( ) => {
91+ state = newState ;
92+ state . activeComponent = 'a' ;
93+ hardA . htmlList = aHtmlList ;
94+ state . componentMap . a = hardA ;
95+ } ) ;
96+ it ( "identify the id of the html element being dragged" , ( ) => {
97+ mutations [ types . SET_ID_DRAG ] ( state , hardA . htmlList [ 0 ] . id ) ;
98+ expect ( state . componentMap [ hardA . componentName ] . idDrag ) . toBe ( hardA . htmlList [ 0 ] . id ) ;
99+ } ) ;
100+
101+ it ( "identify the id of the html element the dragged html element is dropped over" , ( ) => {
102+ mutations [ types . SET_ID_DROP ] ( state , hardA . htmlList [ 2 ] . id ) ;
103+ expect ( state . componentMap [ hardA . componentName ] . idDrop ) . toBe ( hardA . htmlList [ 2 ] . id ) ;
104+ } ) ;
105+
106+ it ( "dropped html element is moved to location it was dropped" , ( ) => {
107+ mutations [ types . SET_ID_DRAG ] ( state , hardA . htmlList [ 0 ] . id ) ;
108+ mutations [ types . SET_ID_DROP ] ( state , hardA . htmlList [ 2 ] . id ) ;
109+ mutations [ types . DRAG_DROP_SORT_HTML_ELEMENTS ] ( state ) ;
110+ expect ( state . componentMap [ hardA . componentName ] . htmlList [ 2 ] . text ) . toBe ( 'div' ) ;
111+ } )
112+
113+ it ( "remainder html elements are still in order" , ( ) => {
114+ mutations [ types . SET_ID_DRAG ] ( state , hardA . htmlList [ 0 ] . id ) ;
115+ mutations [ types . SET_ID_DROP ] ( state , hardA . htmlList [ 2 ] . id ) ;
116+ mutations [ types . DRAG_DROP_SORT_HTML_ELEMENTS ] ( state ) ;
117+ expect ( state . componentMap [ hardA . componentName ] . htmlList [ 0 ] . text ) . toBe ( 'img' ) ;
118+ expect ( state . componentMap [ hardA . componentName ] . htmlList [ 1 ] . text ) . toBe ( 'paragraph' ) ;
119+ expect ( state . componentMap [ hardA . componentName ] . htmlList [ 2 ] . text ) . toBe ( 'div' ) ;
120+ } )
121+
122+ it ( "idDrag and idDrop is reset to '' " , ( ) => {
123+ mutations [ types . SET_ID_DRAG ] ( state , hardA . htmlList [ 0 ] . id ) ;
124+ mutations [ types . SET_ID_DROP ] ( state , hardA . htmlList [ 2 ] . id ) ;
125+ mutations [ types . DRAG_DROP_SORT_HTML_ELEMENTS ] ( state ) ;
126+ expect ( state . componentMap [ hardA . componentName ] . idDrag ) . toBe ( '' ) ;
127+ expect ( state . componentMap [ hardA . componentName ] . idDrop ) . toBe ( '' ) ;
128+ } )
129+
130+ } ) ;
131+
132+ describe ( "Test drag and drop functionality in the CreateMenu" , ( ) => {
133+ let state ;
134+ beforeEach ( ( ) => {
135+ state = newState ;
136+ state . selectedElementList = [
137+ {
138+ text : 'div' ,
139+ children :[ ] ,
140+ id :Date . now ( ) + 1
141+ } ,
142+ {
143+ children :[ ] ,
144+ text :'img' ,
145+ id :Date . now ( ) + 2
146+ } ,
147+ {
148+ children :[ ] ,
149+ text : 'paragraph' ,
150+ id :Date . now ( ) + 3
151+ } ] ;
152+ } ) ;
153+
154+ afterEach ( ( ) => {
155+ state = newState ;
156+ state . selectedElementList = [
157+ {
158+ text : 'div' ,
159+ children :[ ] ,
160+ id :Date . now ( ) + 1
161+ } ,
162+ {
163+ children :[ ] ,
164+ text :'img' ,
165+ id :Date . now ( ) + 2
166+ } ,
167+ {
168+ children :[ ] ,
169+ text : 'paragraph' ,
170+ id :Date . now ( ) + 3
171+ } ] ;
172+ } ) ;
173+ it ( "identify the id of the html element being dragged" , ( ) => {
174+ mutations [ types . SET_SELECTED_ID_DRAG ] ( state , state . selectedElementList [ 0 ] . id ) ;
175+ expect ( state . selectedIdDrag ) . toBe ( state . selectedElementList [ 0 ] . id ) ;
176+
177+ } ) ;
178+
179+ it ( "identify the id of the html element the dragged html element is dropped over" , ( ) => {
180+ mutations [ types . SET_SELECTED_ID_DROP ] ( state , state . selectedElementList [ 2 ] . id ) ;
181+ expect ( state . selectedIdDrop ) . toBe ( state . selectedElementList [ 2 ] . id ) ;
182+ } ) ;
183+
184+ it ( "dropped html element is moved to location it was dropped" , ( ) => {
185+ mutations [ types . SET_SELECTED_ID_DRAG ] ( state , state . selectedElementList [ 0 ] . id ) ;
186+ mutations [ types . SET_SELECTED_ID_DROP ] ( state , state . selectedElementList [ 2 ] . id ) ;
187+ mutations [ types . DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS ] ( state ) ;
188+ expect ( state . selectedElementList [ 2 ] . text ) . toBe ( 'div' ) ;
189+ } )
190+
191+ it ( "remainder html elements are still in order" , ( ) => {
192+ mutations [ types . SET_SELECTED_ID_DRAG ] ( state , state . selectedElementList [ 0 ] . id ) ;
193+ mutations [ types . SET_SELECTED_ID_DROP ] ( state , state . selectedElementList [ 2 ] . id ) ;
194+ mutations [ types . DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS ] ( state ) ;
195+ expect ( state . selectedElementList [ 0 ] . text ) . toBe ( 'img' ) ;
196+ expect ( state . selectedElementList [ 1 ] . text ) . toBe ( 'paragraph' ) ;
197+ expect ( state . selectedElementList [ 2 ] . text ) . toBe ( 'div' ) ;
198+ } )
199+
200+ it ( "selectedIdDDrag and selectedIdDrop is reset to '' " , ( ) => {
201+ mutations [ types . SET_SELECTED_ID_DRAG ] ( state , state . selectedElementList [ 0 ] . id ) ;
202+ mutations [ types . SET_SELECTED_ID_DROP ] ( state , state . selectedElementList [ 2 ] . id ) ;
203+ mutations [ types . DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS ] ( state ) ;
204+ expect ( state . selectedIdDrag ) . toBe ( '' ) ;
205+ expect ( state . selectedIdDrop ) . toBe ( '' ) ;
206+ } )
207+ } ) ;
208+
209+ } )
0 commit comments