KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use isDraggable method in taiko

Best JavaScript code snippet using taiko

spiderSolitaire.spec.js

Source:spiderSolitaire.spec.js

1import { shallowMount, config } from "@vue/test-utils";2import spiderSolitaire from "@/pages/spiderSolitaire.vue";3import utils from "@/common/helpers/utils.js";4import spiderSolitaireService from "@/services/spiderSolitaireService.js";5import Toastr from "@/components/Toastr/Toastr";6import { scoreRuleEnum } from "@/common/enums/scoreRuleEnum";7config.mocks["$utils"] = utils;8config.mocks["$spiderSolitaireService"] = spiderSolitaireService;9config.mocks["$toastr"] = Toastr;10let mockEvent, spyToastr;11describe("spiderSolitaire.vue", () => {12  beforeAll(() => {13    const mockStorage = new Map();14    mockEvent = {15      target: { id: "card-01" },16      dataTransfer: {17        setData: (key, value) => mockStorage.set(key, value),18        getData: (key) => mockStorage.get(key),19      },20    };21    spyOn(mockEvent.dataTransfer, "setData").and.callThrough();22    spyToastr = jest.spyOn(Toastr, "showToastr");23  });24  describe("mounted function", () => {25    it("should fill cards,stacks and dealtCards array when component was mount", () => {26      const expectedCardsCount = 104;27      const expectedStacksCount = 10;28      const expectedDealtCardsCount = 50;29      const wrapper = shallowMount(spiderSolitaire);30      const actualCards = wrapper.vm.cards;31      const actualStacks = wrapper.vm.stacks;32      const actualDealtCards = wrapper.vm.dealtCards;33      expect(actualCards).toHaveLength(expectedCardsCount);34      expect(actualStacks).toHaveLength(expectedStacksCount);35      expect(actualDealtCards).toHaveLength(expectedDealtCardsCount);36    });37  });38  describe("dragStart function", () => {39    it("selected cards should be dragged if they is sequential", () => {40      const movedCard = {41        number: 8,42        isOpen: true,43        isDraggable: true,44      };45      const movedCardStack = [46        {47          number: -1,48          isOpen: false,49          isDraggable: false,50        },51        {52          number: 11,53          isOpen: false,54          isDraggable: false,55        },56        {57          number: 8,58          isOpen: true,59          isDraggable: true,60        },61      ];62      const movedStackIndex = 0;63      const movedCardIndex = 2;64      const wrapper = shallowMount(spiderSolitaire);65      wrapper.vm.dragStart(66        mockEvent,67        movedCard,68        movedCardStack,69        movedStackIndex,70        movedCardIndex71      );72      const actualMovedCard = wrapper.vm.movedCard;73      const actualMovedCardStack = wrapper.vm.movedCardStack;74      const actualMovedStackIndex = wrapper.vm.movedStackIndex;75      const actualMovedCardIndex = wrapper.vm.movedCardIndex;76      expect(actualMovedCard).toEqual(movedCard);77      expect(actualMovedCardStack).toEqual(movedCardStack);78      expect(actualMovedStackIndex).toEqual(movedStackIndex);79      expect(actualMovedCardIndex).toEqual(movedCardIndex);80    });81    it("selected cards shouldn't be dragged if they isn't sequential", async () => {82      const movedCard = {83        number: 8,84        isOpen: true,85        isDraggable: true,86      };87      const movedCardStack = [88        {89          number: 11,90          isOpen: false,91          isDraggable: false,92        },93        {94          number: 8,95          isOpen: true,96          isDraggable: true,97        },98      ];99      const movedStackIndex = 0;100      const movedCardIndex = 0;101      const wrapper = await shallowMount(spiderSolitaire);102      wrapper.vm.dragStart(103        mockEvent,104        movedCard,105        movedCardStack,106        movedStackIndex,107        movedCardIndex108      );109      expect(spyToastr).toHaveBeenCalled();110    });111  });112  describe("dragEnd function", () => {113    it("moved cards should be removed from the current stack", async () => {114      document.body.innerHTML = `115      <div id="card-01" />116    `;117      const stacks = [118        [119          {120            number: -1,121            isOpen: false,122            isDraggable: false,123          },124          {125            number: 7,126            isOpen: false,127            isDraggable: false,128          },129          {130            number: 11,131            isOpen: true,132            isDraggable: true,133          },134          {135            number: 12,136            isOpen: true,137            isDraggable: true,138          },139        ],140        [141          {142            number: -1,143            isOpen: false,144            isDraggable: false,145          },146          {147            number: 3,148            isOpen: true,149            isDraggable: true,150          },151          {152            number: 10,153            isOpen: true,154            isDraggable: true,155          },156        ],157      ];158      const movedCard = stacks[0][2];159      const targetCard = stacks[1][2];160      const movedCardIndex = 2;161      const movedStackIndex = 0;162      const targetStackIndex = 1;163      const expectedMovedStackCount = 2;164      const wrapper = await shallowMount(spiderSolitaire);165      wrapper.setData({166        stacks,167        movedCardIndex,168        movedStackIndex,169        targetStackIndex,170        movedCard,171        targetCard,172      });173      await wrapper.vm.dragEnd(mockEvent);174      const actualStacks = wrapper.vm.stacks;175      expect(actualStacks[movedStackIndex]).toHaveLength(176        expectedMovedStackCount177      );178    });179    it("moved cards should be added to target stack", async () => {180      const stacks = [181        [182          {183            number: -1,184            isOpen: false,185            isDraggable: false,186          },187          {188            number: 7,189            isOpen: false,190            isDraggable: false,191          },192          {193            number: 11,194            isOpen: true,195            isDraggable: true,196          },197          {198            number: 12,199            isOpen: true,200            isDraggable: true,201          },202        ],203        [204          {205            number: -1,206            isOpen: false,207            isDraggable: false,208          },209          {210            number: 3,211            isOpen: true,212            isDraggable: true,213          },214          {215            number: 10,216            isOpen: true,217            isDraggable: true,218          },219        ],220      ];221      const movedCard = stacks[0][2];222      const targetCard = stacks[1][2];223      const movedCardStack = stacks[0];224      const movedCardIndex = 2;225      const movedStackIndex = 0;226      const targetStackIndex = 1;227      const expectedTargetStackCount = 5;228      const wrapper = await shallowMount(spiderSolitaire);229      wrapper.setData({230        stacks,231        movedCardIndex,232        movedStackIndex,233        targetStackIndex,234        movedCard,235        targetCard,236        movedCardStack,237      });238      await wrapper.vm.dragEnd(mockEvent);239      const actualStacks = wrapper.vm.stacks;240      expect(actualStacks[targetStackIndex]).toHaveLength(241        expectedTargetStackCount242      );243    });244    it("should be opened last card in the current stack when moved cards are removed from current stack", async () => {245      const stacks = [246        [247          {248            number: -1,249            isOpen: false,250            isDraggable: false,251          },252          {253            number: 7,254            isOpen: false,255            isDraggable: false,256          },257          {258            number: 11,259            isOpen: true,260            isDraggable: true,261          },262          {263            number: 12,264            isOpen: true,265            isDraggable: true,266          },267        ],268        [269          {270            number: -1,271            isOpen: false,272            isDraggable: false,273          },274          {275            number: 3,276            isOpen: true,277            isDraggable: true,278          },279          {280            number: 10,281            isOpen: true,282            isDraggable: true,283          },284        ],285      ];286      const movedCard = stacks[0][1];287      const targetCard = stacks[1][2];288      const movedCardIndex = 1;289      const movedStackIndex = 0;290      const targetStackIndex = 1;291      const wrapper = await shallowMount(spiderSolitaire);292      wrapper.setData({293        stacks,294        movedCardIndex,295        movedStackIndex,296        targetStackIndex,297        movedCard,298        targetCard,299      });300      await wrapper.vm.dragEnd(mockEvent);301      const actualStack = wrapper.vm.stacks[movedStackIndex];302      const lastCard = actualStack[actualStack.length - 1];303      expect(lastCard.isOpen).toBe(true);304    });305  });306  describe("dragEnter function", () => {307    it("should be filled target stack,card and stackIndex when hovering over the new location of the card", async () => {308      const targetCard = {309        number: 8,310        isOpen: true,311        isDraggable: true,312      };313      const targetCardStack = [314        {315          number: -1,316          isOpen: false,317          isDraggable: false,318        },319        {320          number: 11,321          isOpen: false,322          isDraggable: false,323        },324        {325          number: 8,326          isOpen: true,327          isDraggable: true,328        },329      ];330      const targetStackIndex = 0;331      const targetCardIndex = 2;332      const wrapper = await shallowMount(spiderSolitaire);333      wrapper.vm.dragEnter(334        targetCard,335        targetCardStack,336        targetCardIndex,337        targetStackIndex338      );339      const actualTargetCard = wrapper.vm.targetCard;340      const actualTargetStack = wrapper.vm.targetStack;341      const actualTargetStackIndex = wrapper.vm.targetStackIndex;342      expect(actualTargetCard).toEqual(targetCard);343      expect(actualTargetStack).toEqual(targetCardStack);344      expect(actualTargetStackIndex).toEqual(targetStackIndex);345    });346  });347  describe("isCompleteHand function", () => {348    it("should return true when a hand is completed", () => {349      const stacks = [350        [351          {352            number: -1,353            isOpen: false,354            isDraggable: false,355          },356          {357            number: 8,358            isOpen: false,359            isDraggable: false,360          },361          {362            number: 1,363            isOpen: true,364            isDraggable: false,365          },366          {367            number: 2,368            isOpen: true,369            isDraggable: false,370          },371          {372            number: 3,373            isOpen: true,374            isDraggable: false,375          },376          {377            number: 4,378            isOpen: true,379            isDraggable: false,380          },381          {382            number: 5,383            isOpen: true,384            isDraggable: false,385          },386          {387            number: 6,388            isOpen: true,389            isDraggable: false,390          },391          {392            number: 7,393            isOpen: true,394            isDraggable: false,395          },396          {397            number: 8,398            isOpen: true,399            isDraggable: false,400          },401          {402            number: 9,403            isOpen: true,404            isDraggable: false,405          },406          {407            number: 10,408            isOpen: true,409            isDraggable: false,410          },411          {412            number: 11,413            isOpen: true,414            isDraggable: false,415          },416          {417            number: 12,418            isOpen: true,419            isDraggable: false,420          },421          {422            number: 13,423            isOpen: true,424            isDraggable: false,425          },426        ],427        [428          {429            number: -1,430            isOpen: false,431            isDraggable: false,432          },433          {434            number: 7,435            isOpen: false,436            isDraggable: false,437          },438          {439            number: 8,440            isOpen: true,441            isDraggable: false,442          },443        ],444      ];445      const targetStackIndex = 0;446      const expectedResult = true;447      const wrapper = shallowMount(spiderSolitaire);448      wrapper.setData({ stacks: stacks });449      const actualResult = wrapper.vm.isCompleteHand(targetStackIndex);450      expect(actualResult).toBe(expectedResult);451    });452    it("should be removed the completed cards from the stack and be opened last card when hand is completed", () => {453      const stacks = [454        [455          {456            number: -1,457            isOpen: false,458            isDraggable: false,459          },460          {461            number: 8,462            isOpen: false,463            isDraggable: false,464          },465          {466            number: 1,467            isOpen: true,468            isDraggable: false,469          },470          {471            number: 2,472            isOpen: true,473            isDraggable: false,474          },475          {476            number: 3,477            isOpen: true,478            isDraggable: false,479          },480          {481            number: 4,482            isOpen: true,483            isDraggable: false,484          },485          {486            number: 5,487            isOpen: true,488            isDraggable: false,489          },490          {491            number: 6,492            isOpen: true,493            isDraggable: false,494          },495          {496            number: 7,497            isOpen: true,498            isDraggable: false,499          },500          {501            number: 8,502            isOpen: true,503            isDraggable: false,504          },505          {506            number: 9,507            isOpen: true,508            isDraggable: false,509          },510          {511            number: 10,512            isOpen: true,513            isDraggable: false,514          },515          {516            number: 11,517            isOpen: true,518            isDraggable: false,519          },520          {521            number: 12,522            isOpen: true,523            isDraggable: false,524          },525          {526            number: 13,527            isOpen: true,528            isDraggable: false,529          },530        ],531        [532          {533            number: -1,534            isOpen: false,535            isDraggable: false,536          },537          {538            number: 7,539            isOpen: false,540            isDraggable: false,541          },542          {543            number: 8,544            isOpen: true,545            isDraggable: false,546          },547        ],548      ];549      const targetStackIndex = 0;550      const expectedRemainingCardCount = 2;551      const wrapper = shallowMount(spiderSolitaire);552      wrapper.setData({ stacks: stacks });553      wrapper.vm.isCompleteHand(targetStackIndex);554      const actualStack = wrapper.vm.stacks[targetStackIndex];555      const lastCardInStack = actualStack[actualStack.length - 1];556      expect(actualStack).toHaveLength(expectedRemainingCardCount);557      expect(lastCardInStack.isOpen).toBe(true);558    });559    it("should be filled card holder when hand is completed", () => {560      const stacks = [561        [562          {563            number: -1,564            isOpen: false,565            isDraggable: false,566          },567          {568            number: 8,569            isOpen: false,570            isDraggable: false,571          },572          {573            number: 1,574            isOpen: true,575            isDraggable: false,576          },577          {578            number: 2,579            isOpen: true,580            isDraggable: false,581          },582          {583            number: 3,584            isOpen: true,585            isDraggable: false,586          },587          {588            number: 4,589            isOpen: true,590            isDraggable: false,591          },592          {593            number: 5,594            isOpen: true,595            isDraggable: false,596          },597          {598            number: 6,599            isOpen: true,600            isDraggable: false,601          },602          {603            number: 7,604            isOpen: true,605            isDraggable: false,606          },607          {608            number: 8,609            isOpen: true,610            isDraggable: false,611          },612          {613            number: 9,614            isOpen: true,615            isDraggable: false,616          },617          {618            number: 10,619            isOpen: true,620            isDraggable: false,621          },622          {623            number: 11,624            isOpen: true,625            isDraggable: false,626          },627          {628            number: 12,629            isOpen: true,630            isDraggable: false,631          },632          {633            number: 13,634            isOpen: true,635            isDraggable: false,636          },637        ],638        [639          {640            number: -1,641            isOpen: false,642            isDraggable: false,643          },644          {645            number: 7,646            isOpen: false,647            isDraggable: false,648          },649          {650            number: 8,651            isOpen: true,652            isDraggable: false,653          },654        ],655      ];656      const targetStackIndex = 0;657      const expectedNumberOfFullCardHolder = 1;658      const wrapper = shallowMount(spiderSolitaire);659      wrapper.setData({ stacks: stacks });660      wrapper.vm.isCompleteHand(targetStackIndex);661      const actualNumberOfFullCardHolder = wrapper.vm.numberOfFullCardHolder;662      expect(actualNumberOfFullCardHolder).toBe(expectedNumberOfFullCardHolder);663    });664    it("should be changed score(complete hand point + last card open point) when hand is completed", () => {665      const stacks = [666        [667          {668            number: -1,669            isOpen: false,670            isDraggable: false,671          },672          {673            number: 8,674            isOpen: false,675            isDraggable: false,676          },677          {678            number: 1,679            isOpen: true,680            isDraggable: false,681          },682          {683            number: 2,684            isOpen: true,685            isDraggable: false,686          },687          {688            number: 3,689            isOpen: true,690            isDraggable: false,691          },692          {693            number: 4,694            isOpen: true,695            isDraggable: false,696          },697          {698            number: 5,699            isOpen: true,700            isDraggable: false,701          },702          {703            number: 6,704            isOpen: true,705            isDraggable: false,706          },707          {708            number: 7,709            isOpen: true,710            isDraggable: false,711          },712          {713            number: 8,714            isOpen: true,715            isDraggable: false,716          },717          {718            number: 9,719            isOpen: true,720            isDraggable: false,721          },722          {723            number: 10,724            isOpen: true,725            isDraggable: false,726          },727          {728            number: 11,729            isOpen: true,730            isDraggable: false,731          },732          {733            number: 12,734            isOpen: true,735            isDraggable: false,736          },737          {738            number: 13,739            isOpen: true,740            isDraggable: false,741          },742        ],743        [744          {745            number: -1,746            isOpen: false,747            isDraggable: false,748          },749          {750            number: 7,751            isOpen: false,752            isDraggable: false,753          },754          {755            number: 8,756            isOpen: true,757            isDraggable: false,758          },759        ],760      ];761      const targetStackIndex = 0;762      const expectedScore = 1190;763      const wrapper = shallowMount(spiderSolitaire);764      wrapper.setData({ stacks: stacks });765      wrapper.vm.isCompleteHand(targetStackIndex);766      const actualScore = wrapper.vm.score;767      expect(actualScore).toBe(expectedScore);768    });769  });770  describe("dealCards function", () => {771    it("should display warning message when there is empty stack", () => {772      const stacks = [773        [774          {775            number: -1,776            isOpen: false,777            isDraggable: false,778          },779        ],780        [781          {782            number: -1,783            isOpen: false,784            isDraggable: false,785          },786          {787            number: 7,788            isOpen: false,789            isDraggable: false,790          },791          {792            number: 8,793            isOpen: true,794            isDraggable: false,795          },796        ],797      ];798      const wrapper = shallowMount(spiderSolitaire);799      wrapper.setData({ stacks: stacks });800      wrapper.vm.dealCards();801      expect(spyToastr).toHaveBeenCalled();802    });803    it("should be added new card each stacks and be decreased number of the dealt deck when the cards are dealt", () => {804      const stacks = [805        [806          {807            number: -1,808            isOpen: false,809            isDraggable: false,810          },811          {812            number: 5,813            isOpen: false,814            isDraggable: false,815          },816          {817            number: 9,818            isOpen: true,819            isDraggable: true,820          },821        ],822        [823          {824            number: -1,825            isOpen: false,826            isDraggable: false,827          },828          {829            number: 7,830            isOpen: false,831            isDraggable: false,832          },833        ],834      ];835      const dealtCards = [836        {837          number: 1,838          isOpen: false,839          isDraggable: false,840        },841        {842          number: 4,843          isOpen: false,844          isDraggable: false,845        },846        {847          number: 7,848          isOpen: false,849          isDraggable: false,850        },851      ];852      const expectedNumberOfToDealtDeck = 4;853      const wrapper = shallowMount(spiderSolitaire);854      wrapper.setData({ stacks: stacks, dealtCards: dealtCards });855      wrapper.vm.dealCards();856      const actualStacks = wrapper.vm.stacks;857      const actualNumberOfToDealtDeck = wrapper.vm.numberOfToDealtDeck;858      expect(actualStacks[0]).toHaveLength(4);859      expect(actualStacks[1]).toHaveLength(3);860      expect(actualNumberOfToDealtDeck).toBe(expectedNumberOfToDealtDeck);861    });862  });863  describe("isThereEmptyStack function", () => {864    it("should return true if any stack is empty", () => {865      const stacks = [866        [867          {868            number: -1,869            isOpen: false,870            isDraggable: false,871          },872        ],873        [874          {875            number: -1,876            isOpen: false,877            isDraggable: false,878          },879          {880            number: 7,881            isOpen: false,882            isDraggable: false,883          },884          {885            number: 8,886            isOpen: true,887            isDraggable: false,888          },889        ],890      ];891      const expectedResult = true;892      const wrapper = shallowMount(spiderSolitaire);893      wrapper.setData({ stacks: stacks });894      const actualResult = wrapper.vm.isThereEmptyStack();895      expect(actualResult).toBe(expectedResult);896    });897    it("should return false if all stacks are full", () => {898      const stacks = [899        [900          {901            number: -1,902            isOpen: false,903            isDraggable: false,904          },905          {906            number: 9,907            isOpen: true,908            isDraggable: true,909          },910        ],911        [912          {913            number: -1,914            isOpen: false,915            isDraggable: false,916          },917          {918            number: 7,919            isOpen: false,920            isDraggable: false,921          },922          {923            number: 8,924            isOpen: true,925            isDraggable: false,926          },927        ],928      ];929      const expectedResult = false;930      const wrapper = shallowMount(spiderSolitaire);931      wrapper.setData({ stacks: stacks });932      const actualResult = wrapper.vm.isThereEmptyStack();933      expect(actualResult).toBe(expectedResult);934    });935  });936  describe("openLastCard function", () => {937    it("'isOpen' and 'isdraggable' of the last card should be true when opened last card", () => {938      const stacks = [939        [940          {941            number: -1,942            isOpen: false,943            isDraggable: false,944          },945          {946            number: 9,947            isOpen: true,948            isDraggable: true,949          },950        ],951        [952          {953            number: -1,954            isOpen: false,955            isDraggable: false,956          },957          {958            number: 7,959            isOpen: false,960            isDraggable: false,961          },962          {963            number: 8,964            isOpen: false,965            isDraggable: false,966          },967        ],968      ];969      const stackIndex = 1;970      const wrapper = shallowMount(spiderSolitaire);971      wrapper.setData({ stacks: stacks });972      wrapper.vm.openLastCard(stackIndex);973      const actualStack = wrapper.vm.stacks[stackIndex];974      const lastCardInStack = actualStack[actualStack.length - 1];975      expect(lastCardInStack.isOpen).toBe(true);976      expect(lastCardInStack.isDraggable).toBe(true);977    });978  });979  describe("deleteCardsFromStack function", () => {980    it("should be deleted the relevant card and the cards below it when the card is deleted from the stack", () => {981      const stacks = [982        [983          {984            number: -1,985            isOpen: false,986            isDraggable: false,987          },988          {989            number: 9,990            isOpen: true,991            isDraggable: true,992          },993        ],994        [995          {996            number: -1,997            isOpen: false,998            isDraggable: false,999          },1000          {1001            number: 7,1002            isOpen: false,1003            isDraggable: false,1004          },1005          {1006            number: 8,1007            isOpen: false,1008            isDraggable: false,1009          },1010        ],1011      ];1012      const stackIndex = 1;1013      const cardIndex = 0;1014      const wrapper = shallowMount(spiderSolitaire);1015      wrapper.setData({ stacks: stacks });1016      wrapper.vm.deleteCardsFromStack(stackIndex, cardIndex);1017      const actualStack = wrapper.vm.stacks[stackIndex];1018      expect(actualStack).toHaveLength(0);1019    });1020  });1021  describe("addCardsToStack function", () => {1022    it("should be added given cards in the given stack", () => {1023      const stacks = [1024        [1025          {1026            number: -1,1027            isOpen: false,1028            isDraggable: false,1029          },1030          {1031            number: 9,1032            isOpen: true,1033            isDraggable: true,1034          },1035        ],1036        [1037          {1038            number: -1,1039            isOpen: false,1040            isDraggable: false,1041          },1042          {1043            number: 7,1044            isOpen: false,1045            isDraggable: false,1046          },1047          {1048            number: 8,1049            isOpen: false,1050            isDraggable: false,1051          },1052        ],1053      ];1054      const cards = [1055        {1056          number: 9,1057          isOpen: true,1058          isDraggable: true,1059        },1060        {1061          number: 10,1062          isOpen: true,1063          isDraggable: true,1064        },1065      ];1066      const stackIndex = 1;1067      const expectedStackCount = 5;1068      const wrapper = shallowMount(spiderSolitaire);1069      wrapper.setData({ stacks: stacks });1070      wrapper.vm.addCardsToStack(stackIndex, cards);1071      const actualStack = wrapper.vm.stacks[stackIndex];1072      expect(actualStack).toHaveLength(expectedStackCount);1073    });1074  });1075  describe("fillCardHolder function", () => {1076    it("should be increased number of full card holder", async () => {1077      const expectedNumberOfFullCardHolder = 1;1078      const wrapper = await shallowMount(spiderSolitaire);1079      await wrapper.vm.fillCardHolder();1080      const actualNumberOfFullCardHolder = wrapper.vm.numberOfFullCardHolder;1081      expect(actualNumberOfFullCardHolder).toBe(expectedNumberOfFullCardHolder);1082    });1083    it("the game should be over when the number of full card holder equals to the total number of decks", async () => {1084      const numberOfFullCardHolder = 7;1085      const expectedIsGameOver = true;1086      const wrapper = shallowMount(spiderSolitaire);1087      wrapper.setData({ numberOfFullCardHolder });1088      await wrapper.vm.fillCardHolder();1089      const actualIsGameOver = wrapper.vm.isGameOver;1090      expect(actualIsGameOver).toBe(expectedIsGameOver);1091    });1092  });1093  describe("isMovable function", () => {1094    it("should return true if moved card and target card are sequential", () => {1095      const movedCard = {1096        number: 10,1097        isOpen: true,1098        isDraggable: true,1099      };1100      const targetCard = {1101        number: 9,1102        isOpen: true,1103        isDraggable: true,1104      };1105      const expectedResult = true;1106      const wrapper = shallowMount(spiderSolitaire);1107      wrapper.setData({ movedCard, targetCard });1108      const actualResult = wrapper.vm.isMovable();1109      expect(actualResult).toBe(expectedResult);1110    });1111    it("should return false if moved card and target card aren't sequential", () => {1112      const movedCard = {1113        number: 11,1114        isOpen: true,1115        isDraggable: true,1116      };1117      const targetCard = {1118        number: 9,1119        isOpen: true,1120        isDraggable: true,1121      };1122      const expectedResult = false;1123      const wrapper = shallowMount(spiderSolitaire);1124      wrapper.setData({ movedCard, targetCard });1125      const actualResult = wrapper.vm.isMovable();1126      expect(actualResult).toBe(expectedResult);1127    });1128    it("should return true if target card is empty card holder", () => {1129      const movedCard = {1130        number: 10,1131        isOpen: true,1132        isDraggable: true,1133      };1134      const targetCard = {1135        number: -1,1136        isOpen: true,1137        isDraggable: false,1138      };1139      const targetStack = [1140        {1141          number: -1,1142          isOpen: true,1143          isDraggable: false,1144        },1145      ];1146      const expectedResult = true;1147      const wrapper = shallowMount(spiderSolitaire);1148      wrapper.setData({ movedCard, targetCard, targetStack });1149      const actualResult = wrapper.vm.isMovable();1150      expect(actualResult).toBe(expectedResult);1151    });1152  });1153  describe("gameOver function", () => {1154    it("'isGameOver' data should be true and display congratulatory message", () => {1155      const epectedIsGameOver = true;1156      const wrapper = shallowMount(spiderSolitaire);1157      wrapper.vm.gameOver();1158      const actualIsGameOver = wrapper.vm.isGameOver;1159      expect(actualIsGameOver).toBe(epectedIsGameOver);1160      expect(spyToastr).toHaveBeenCalled();1161    });1162  });1163  describe("calculateScore function", () => {1164    it("should be added 1040 points to score when each time a hand is completed", () => {1165      const rule = scoreRuleEnum.completeHand;1166      const expectedScore = 1040;1167      const wrapper = shallowMount(spiderSolitaire);1168      wrapper.vm.calculateScore(rule);1169      const actualScore = wrapper.vm.score;1170      expect(actualScore).toBe(expectedScore);1171    });1172    it("should be added 150 points when every closed card is opened", () => {1173      const rule = scoreRuleEnum.openCard;1174      const expectedScore = 150;1175      const wrapper = shallowMount(spiderSolitaire);1176      wrapper.vm.calculateScore(rule);1177      const actualScore = wrapper.vm.score;1178      expect(actualScore).toBe(expectedScore);1179    });1180    it("should be calculated total score when game is over", async () => {1181      const rule = scoreRuleEnum.completeHand;1182      const totalTimeSecond = 3;1183      const expectedScore = 15185;1184      const wrapper = await shallowMount(spiderSolitaire);1185      await wrapper.vm.calculateScore(rule);1186      wrapper.setData({ isGameOver: true });1187      await wrapper.vm.setTotalTime(totalTimeSecond);1188      const actualScore = wrapper.vm.score;1189      expect(actualScore).toBe(expectedScore);1190    });1191  });1192  describe("setTotalTime function", () => {1193    it("the total time should be filled with the given time", () => {1194      const totalTimeSecond = 3;1195      const expectedTotalTime = 3;1196      const wrapper = shallowMount(spiderSolitaire);1197      wrapper.vm.setTotalTime(totalTimeSecond);1198      const actualTotalTime = wrapper.vm.totalTime;1199      expect(actualTotalTime).toBe(expectedTotalTime);1200    });1201  });1202  describe("restartGame function", () => {1203    it("page should be relloaded", () => {1204      Object.defineProperty(window, "location", {1205        writable: true,1206        value: { reload: jest.fn() },1207      });1208      const wrapper = shallowMount(spiderSolitaire);1209      wrapper.vm.restartGame();1210      expect(window.location.reload).toHaveBeenCalled();1211    });1212  });1213  describe("calculateHints function", () => {1214    it("Hints should be calculated", () => {1215      const stacks = [1216        [1217          {1218            number: -1,1219            isOpen: false,1220            isDraggable: false,1221          },1222          {1223            number: 5,1224            isOpen: true,1225            isDraggable: true,1226          },1227          {1228            number: 6,1229            isOpen: true,1230            isDraggable: true,1231          },1232        ],1233        [1234          {1235            number: -1,1236            isOpen: false,1237            isDraggable: false,1238          },1239          {1240            number: 5,1241            isOpen: true,1242            isDraggable: true,1243          },1244          {1245            number: 7,1246            isOpen: true,1247            isDraggable: true,1248          },1249        ],1250        [1251          {1252            number: -1,1253            isOpen: false,1254            isDraggable: false,1255          },1256          {1257            number: 7,1258            isOpen: false,1259            isDraggable: false,1260          },1261          {1262            number: 4,1263            isOpen: true,1264            isDraggable: true,1265          },1266        ],1267      ];1268      const expectedHints = [1269        {1270          currentStackIndex: 0,1271          currentCardIndexes: [1, 2],1272          targetStackIndex: 2,1273          targetCardIndex: 2,1274        },1275        {1276          currentStackIndex: 1,1277          currentCardIndexes: [2],1278          targetStackIndex: 0,1279          targetCardIndex: 2,1280        },1281      ];1282      const wrapper = shallowMount(spiderSolitaire);1283      wrapper.setData({ stacks });1284      wrapper.vm.calculateHints();1285      const actualHints = wrapper.vm.hints;1286      expect(actualHints).toEqual(expectedHints);1287    });1288  });1289  describe("getHints function", () => {1290    it("each time a hint is shown, the index of the next hint should be kept", () => {1291      document.body.innerHTML = `1292      <div id="card-01" />1293      <div id="card-02" />1294      <div id="card-12" />1295      <div id="card-22" />1296    `;1297      const stacks = [1298        [1299          {1300            number: -1,1301            isOpen: false,1302            isDraggable: false,1303          },1304          {1305            number: 5,1306            isOpen: true,1307            isDraggable: true,1308          },1309          {1310            number: 6,1311            isOpen: true,1312            isDraggable: true,1313          },1314        ],1315        [1316          {1317            number: -1,1318            isOpen: false,1319            isDraggable: false,1320          },1321          {1322            number: 5,1323            isOpen: true,1324            isDraggable: true,1325          },1326          {1327            number: 7,1328            isOpen: true,1329            isDraggable: true,1330          },1331        ],1332        [1333          {1334            number: -1,1335            isOpen: false,1336            isDraggable: false,1337          },1338          {1339            number: 7,1340            isOpen: false,1341            isDraggable: false,1342          },1343          {1344            number: 4,1345            isOpen: true,1346            isDraggable: true,1347          },1348        ],1349      ];1350      const expectedLastShowedHintIndex = 1;1351      const wrapper = shallowMount(spiderSolitaire);1352      wrapper.setData({ stacks });1353      wrapper.vm.getHints();1354      const actualLastShowedHintIndex = wrapper.vm.lastShowedHintIndex;1355      expect(actualLastShowedHintIndex).toEqual(expectedLastShowedHintIndex);1356    });1357    it("cards shown as hint should be painted", () => {1358      document.body.innerHTML = `1359      <div id="card-01" />1360      <div id="card-02" />1361      <div id="card-12" />1362      <div id="card-22" />1363    `;1364      const stacks = [1365        [1366          {1367            number: -1,1368            isOpen: false,1369            isDraggable: false,1370          },1371          {1372            number: 5,1373            isOpen: true,1374            isDraggable: true,1375          },1376          {1377            number: 6,1378            isOpen: true,1379            isDraggable: true,1380          },1381        ],1382        [1383          {1384            number: -1,1385            isOpen: false,1386            isDraggable: false,1387          },1388          {1389            number: 5,1390            isOpen: true,1391            isDraggable: true,1392          },1393          {1394            number: 7,1395            isOpen: true,1396            isDraggable: true,1397          },1398        ],1399        [1400          {1401            number: -1,1402            isOpen: false,1403            isDraggable: false,1404          },1405          {1406            number: 7,1407            isOpen: false,1408            isDraggable: false,1409          },1410          {1411            number: 4,1412            isOpen: true,1413            isDraggable: true,1414          },1415        ],1416      ];1417      const expectedBorderCss = "1vh solid #874444";1418      const expectedBackgroundColorCss = "rgb(135, 68, 68)";1419      const expectedBorderRadiusCss = "1vw";1420      const wrapper = shallowMount(spiderSolitaire);1421      wrapper.setData({ stacks });1422      wrapper.vm.getHints();1423      const card01 = document.getElementById("card-01");1424      const card02 = document.getElementById("card-02");1425      expect(card01.style.border).toBe(expectedBorderCss);1426      expect(card01.style.backgroundColor).toBe(expectedBackgroundColorCss);1427      expect(card01.style.borderRadius).toBe(expectedBorderRadiusCss);1428      expect(card02.style.border).toBe(expectedBorderCss);1429      expect(card02.style.backgroundColor).toBe(expectedBackgroundColorCss);1430      expect(card02.style.borderRadius).toBe(expectedBorderRadiusCss);1431    });1432    it("After 1.5 seconds, the css properties of the painted card should be reset", () => {1433      jest.useFakeTimers();1434      document.body.innerHTML = `1435      <div id="card-01" />1436      <div id="card-02" />1437      <div id="card-12" />1438      <div id="card-22" />1439    `;1440      const hints = [1441        {1442          currentStackIndex: 0,1443          currentCardIndexes: [1, 2],1444          targetStackIndex: 2,1445          targetCardIndex: 2,1446        },1447        {1448          currentStackIndex: 1,1449          currentCardIndexes: [2],1450          targetStackIndex: 0,1451          targetCardIndex: 2,1452        },1453      ];1454      const wrapper = shallowMount(spiderSolitaire);1455      wrapper.setData({ hints });1456      wrapper.vm.getHints();1457      jest.runTimersToTime(1500);1458      const card01 = document.getElementById("card-01");1459      const card02 = document.getElementById("card-02");1460      expect(card01.style.border).toBe("");1461      expect(card01.style.backgroundColor).toBe("");1462      expect(card01.style.borderRadius).toBe("");1463      expect(card02.style.border).toBe("");1464      expect(card02.style.backgroundColor).toBe("");1465      expect(card02.style.borderRadius).toBe("");1466    });1467    it("After all the hints have been shown, it should be shown all over again.", () => {1468      document.body.innerHTML = `1469      <div id="card-01" />1470      <div id="card-02" />1471      <div id="card-12" />1472      <div id="card-22" />1473    `;1474      const hints = [1475        {1476          currentStackIndex: 0,1477          currentCardIndexes: [1, 2],1478          targetStackIndex: 2,1479          targetCardIndex: 2,1480        },1481        {1482          currentStackIndex: 1,1483          currentCardIndexes: [2],1484          targetStackIndex: 0,1485          targetCardIndex: 2,1486        },1487      ];1488      const lastShowedHintIndex = 2;1489      const expectedLastShowedHintIndex = 1;1490      const wrapper = shallowMount(spiderSolitaire);1491      wrapper.setData({ hints, lastShowedHintIndex });1492      wrapper.vm.getHints();1493      const actualLastShowedHintIndex = wrapper.vm.lastShowedHintIndex;1494      expect(actualLastShowedHintIndex).toEqual(expectedLastShowedHintIndex);1495    });1496    it("When there are no hints, the card to be dealt should be painted.", () => {1497      document.body.innerHTML = `1498      <div id="deck-first" />1499    `;1500      const stacks = [1501        [1502          {1503            number: -1,1504            isOpen: false,1505            isDraggable: false,1506          },1507          {1508            number: 5,1509            isOpen: true,1510            isDraggable: true,1511          },1512          {1513            number: 11,1514            isOpen: true,1515            isDraggable: true,1516          },1517        ],1518        [1519          {1520            number: -1,1521            isOpen: false,1522            isDraggable: false,1523          },1524          {1525            number: 7,1526            isOpen: false,1527            isDraggable: false,1528          },1529          {1530            number: 4,1531            isOpen: true,1532            isDraggable: true,1533          },1534        ],1535      ];1536      const expectedBorderCss = "1vh solid #874444";1537      const expectedBackgroundColorCss = "rgb(135, 68, 68)";1538      const expectedBorderRadiusCss = "1vw";1539      const wrapper = shallowMount(spiderSolitaire);1540      wrapper.setData({ stacks });1541      wrapper.vm.getHints();1542      const deckFirst = document.getElementById("deck-first");1543      expect(deckFirst.style.border).toBe(expectedBorderCss);1544      expect(deckFirst.style.backgroundColor).toBe(expectedBackgroundColorCss);1545      expect(deckFirst.style.borderRadius).toBe(expectedBorderRadiusCss);1546    });1547  });...

mock.js

Source:mock.js

1const resizeLayout = {2  lg: [3    { w: 3, h: 1, x: 0, y: 0, i: 'a', static: true, isDraggable: false, isResizable: false },4    { w: 7, h: 4, x: 3, y: 0, i: 'b', static: true, isDraggable: false, isResizable: false },5    { w: 2, h: 1, x: 10, y: 0, i: 'd', static: true, isDraggable: false, isResizable: false },6    { w: 1, h: 1, x: 0, y: 1, i: 'c', static: false, isDraggable: true, isResizable: false },7    { w: 3, h: 1, x: 0, y: 2, i: 'e', static: false, isDraggable: false, isResizable: true },8  ],9  md: [10    { w: 3, h: 1, x: 0, y: 0, i: 'a', static: false, isDraggable: false, isResizable: true },11    { w: 5, h: 3, x: 3, y: 0, i: 'b', static: true, isDraggable: false, isResizable: false },12    { w: 3, h: 1, x: 0, y: 1, i: 'd', static: false, isDraggable: true, isResizable: true },13    { w: 3, h: 1, x: 0, y: 2, i: 'e', static: false, isDraggable: true, isResizable: true },14    { w: 9, h: 1, x: 1, y: 3, i: 'c', static: false, isDraggable: true, isResizable: true },15  ],16  sm: [17    { i: 'a', x: 0, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },18    { i: 'b', x: 1, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },19    { i: 'c', x: 0, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },20    { i: 'd', x: 1, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },21    { i: 'e', x: 0, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },22  ],23  xs: [24    { i: 'a', x: 0, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },25    { i: 'b', x: 1, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },26    { i: 'c', x: 0, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },27    { i: 'd', x: 1, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },28    { i: 'e', x: 0, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },29  ],30  xxs: [31    { i: 'a', x: 0, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },32    { i: 'b', x: 1, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },33    { i: 'c', x: 0, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },34    { i: 'd', x: 1, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },35    { i: 'e', x: 0, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },36  ],37};38const fixedLayout = {39  lg: [40    {41      w: 1,42      h: 1,43      x: 0,44      y: 0,45      i: 'A',46      static: false,47      isDraggable: false,48      isResizable: false,49    },50    {51      w: 1,52      h: 1,53      x: 1,54      y: 0,55      i: 'D',56      static: false,57      isDraggable: false,58      isResizable: false,59    },60    {61      w: 1,62      h: 1,63      x: 0,64      y: 1,65      i: 'B',66      static: false,67      isDraggable: true,68      isResizable: false,69    },70    {71      w: 1,72      h: 1,73      x: 1,74      y: 1,75      i: 'F',76      static: false,77      isDraggable: false,78      isResizable: false,79    },80    {81      w: 1,82      h: 1,83      x: 0,84      y: 2,85      i: 'C',86      static: false,87      isDraggable: false,88      isResizable: false,89    },90    {91      w: 1,92      h: 1,93      x: 1,94      y: 2,95      i: 'H',96      static: false,97      isDraggable: false,98      isResizable: false,99    },100    {101      w: 1,102      h: 1,103      x: 0,104      y: 3,105      i: 'E',106      static: false,107      isDraggable: false,108      isResizable: false,109    },110    {111      w: 1,112      h: 1,113      x: 0,114      y: 4,115      i: 'G',116      static: false,117      isDraggable: false,118      isResizable: false,119    },120  ],121  md: [122    { i: 'A', x: 0, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },123    { i: 'B', x: 1, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },124    { i: 'C', x: 0, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },125    { i: 'D', x: 1, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },126    { i: 'E', x: 0, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },127    { i: 'F', x: 1, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },128    { i: 'G', x: 0, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },129    { i: 'H', x: 1, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },130  ],131  sm: [132    { i: 'A', x: 0, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },133    { i: 'B', x: 1, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },134    { i: 'C', x: 0, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },135    { i: 'D', x: 1, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },136    { i: 'E', x: 0, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },137    { i: 'F', x: 1, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },138    { i: 'G', x: 0, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },139    { i: 'H', x: 1, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },140  ],141  xs: [142    { i: 'A', x: 0, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },143    { i: 'B', x: 1, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },144    { i: 'C', x: 0, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },145    { i: 'D', x: 1, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },146    { i: 'E', x: 0, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },147    { i: 'F', x: 1, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },148    { i: 'G', x: 0, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },149    { i: 'H', x: 1, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },150  ],151  xxs: [152    { i: 'A', x: 0, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },153    { i: 'B', x: 1, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },154    { i: 'C', x: 0, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },155    { i: 'D', x: 1, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },156    { i: 'E', x: 0, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },157    { i: 'F', x: 1, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },158    { i: 'G', x: 0, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },159    { i: 'H', x: 1, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },160  ],161};162const demoLayout = {163  lg: [164    {165      w: 3,166      h: 1,167      x: 0,168      y: 0,169      i: '1',170      static: true,171      isDraggable: false,172      isResizable: false,173    },174    {175      w: 7,176      h: 4,177      x: 3,178      y: 0,179      i: '2',180      static: true,181      isDraggable: false,182      isResizable: false,183    },184    {185      w: 2,186      h: 1,187      x: 10,188      y: 0,189      i: '4',190      static: true,191      isDraggable: false,192      isResizable: false,193    },194    {195      w: 1,196      h: 1,197      x: 0,198      y: 1,199      i: '3',200      static: false,201      isDraggable: true,202      isResizable: false,203    },204    {205      w: 2,206      h: 1,207      x: 1,208      y: 1,209      i: '6',210      static: false,211      isDraggable: false,212      isResizable: true,213    },214    {215      w: 2,216      h: 3,217      x: 10,218      y: 1,219      i: '8',220      static: false,221      isDraggable: true,222      isResizable: true,223    },224    {225      w: 3,226      h: 1,227      x: 0,228      y: 2,229      i: '5',230      static: false,231      isDraggable: false,232      isResizable: true,233    },234    {235      w: 3,236      h: 1,237      x: 0,238      y: 3,239      i: '7',240      static: false,241      isDraggable: false,242      isResizable: true,243    },244  ],245  md: [246    {247      w: 3,248      h: 1,249      x: 0,250      y: 0,251      i: '1',252      static: false,253      isDraggable: false,254      isResizable: true,255    },256    {257      w: 5,258      h: 3,259      x: 3,260      y: 0,261      i: '2',262      static: true,263      isDraggable: false,264      isResizable: false,265    },266    {267      w: 2,268      h: 2,269      x: 8,270      y: 0,271      i: '6',272      static: false,273      isDraggable: true,274      isResizable: true,275    },276    {277      w: 3,278      h: 1,279      x: 0,280      y: 1,281      i: '4',282      static: false,283      isDraggable: true,284      isResizable: true,285    },286    {287      w: 3,288      h: 1,289      x: 0,290      y: 2,291      i: '5',292      static: false,293      isDraggable: true,294      isResizable: true,295    },296    {297      w: 2,298      h: 1,299      x: 8,300      y: 2,301      i: '7',302      static: false,303      isDraggable: true,304      isResizable: true,305    },306    {307      w: 1,308      h: 1,309      x: 0,310      y: 3,311      i: '8',312      static: false,313      isDraggable: false,314      isResizable: false,315    },316    {317      w: 9,318      h: 1,319      x: 1,320      y: 3,321      i: '3',322      static: false,323      isDraggable: true,324      isResizable: true,325    },326  ],327  sm: [328    { i: '1', x: 0, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },329    { i: '2', x: 1, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },330    { i: '3', x: 0, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },331    { i: '4', x: 1, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },332    { i: '5', x: 0, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },333    { i: '6', x: 1, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },334    { i: '7', x: 0, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },335    { i: '8', x: 1, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },336  ],337  xs: [338    { i: '1', x: 0, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },339    { i: '2', x: 1, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },340    { i: '3', x: 0, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },341    { i: '4', x: 1, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },342    { i: '5', x: 0, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },343    { i: '6', x: 1, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },344    { i: '7', x: 0, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },345    { i: '8', x: 1, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },346  ],347  xxs: [348    { i: '1', x: 0, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },349    { i: '2', x: 1, y: 0, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },350    { i: '3', x: 0, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },351    { i: '4', x: 1, y: 1, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },352    { i: '5', x: 0, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },353    { i: '6', x: 1, y: 2, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },354    { i: '7', x: 0, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },355    { i: '8', x: 1, y: 3, w: 1, h: 1, isDraggable: false, isResizable: false, static: false },356  ],357};...

layout.ts

Source:layout.ts

1import { LayoutGrid } from '../components/Grid';2import { customLayouts } from '../custom/helpers/layout';3import { isResizableGrid, isDraggableGrid} from '../api/config';4export const getStaticHeight = () => {5    const header = document.getElementsByTagName('header')[0];6    const headerHeight = header ? header.clientHeight : 0;7    const headerContainer = document.getElementsByClassName('pg-trading-header-container')[0];8    const headerContainerHeight = headerContainer ? headerContainer.clientHeight : 0;9    return headerHeight + headerContainerHeight;10};11export const gridUnitsToPixels = (gridUnit: number, rowHeight: number, margin: number) => {12    let res = gridUnit * (rowHeight + margin);13    if (gridUnit > 1) {14        res -= margin;15    }16    return res;17};18export const pixelsToGridUnits = (pixels: number, rowHeight: number, margin: number) => {19    let tmp = pixels;20    if (pixels / (rowHeight + margin) > 1) {21        tmp += margin;22    }23    return tmp / (rowHeight + margin);24};25const getLayouts = () => {26    const rowHeight = 14;27    const margin = 6;28    const orderHeight = 20;29    const minOrderBookHeight = 7;30    const minRecentTradesHeight = 7;31    const minTradingChartHeight = 21;32    const minOpenOrdersHeight = 7;33    const minMarketDepthsHeight = 9;34    const minMarketsHeight = 10;35    const staticHeight = getStaticHeight() || 96;36    const isDraggable = isDraggableGrid();37    const isResizable = isResizableGrid();38    const minGridHeight = gridUnitsToPixels(minTradingChartHeight, rowHeight, margin) +39        gridUnitsToPixels(minMarketDepthsHeight, rowHeight, margin) +40        gridUnitsToPixels(minOpenOrdersHeight, rowHeight, margin) + margin * 3;41    const gridHeight = Math.max(minGridHeight, window.innerHeight - staticHeight - margin * 3);42    const currentTradingChartHeight = pixelsToGridUnits(gridHeight - margin * 2 - gridUnitsToPixels(orderHeight, rowHeight, margin), rowHeight, margin);43    const tradingChartHeight = gridHeight >= minGridHeight ?44        currentTradingChartHeight + margin * 0.6 : Math.floor(Math.max(currentTradingChartHeight, minTradingChartHeight));45    const openOrdersHeight = gridHeight >= minGridHeight ?46        pixelsToGridUnits(gridHeight - gridUnitsToPixels(tradingChartHeight, rowHeight, margin) - gridUnitsToPixels(minMarketDepthsHeight, rowHeight, margin), rowHeight, margin) + 1.8 :47        minOpenOrdersHeight;48    const orderBookHeight = gridHeight >= minGridHeight ?49        pixelsToGridUnits(gridHeight - margin, rowHeight, margin) - orderHeight + margin - 3.3 :50        minOrderBookHeight;51    const recentTradesHeight = gridHeight >= minGridHeight ?52        pixelsToGridUnits(gridHeight - margin, rowHeight, margin) - orderHeight + margin - 3.3 :53        minRecentTradesHeight;54        55    const marketsHeight = gridHeight >= minGridHeight ?56        pixelsToGridUnits(gridHeight - margin, rowHeight, margin) - orderHeight + margin - 3.3 :57        minMarketsHeight;58    return {59        lg: [60            { x: 20, y: 21, w: 10, h: orderHeight,           i: '1', minH: orderHeight,           maxH: orderHeight, minW: 4, isDraggable: isDraggable, isResizable: isResizable },61            { x: 0,  y: 0,  w: 14, h: tradingChartHeight,    i: '2', minH: minTradingChartHeight, minW: 5, isDraggable: isDraggable, isResizable: isResizable },62            { x: 20, y: 0,  w: 5,  h: recentTradesHeight,    i: '3', minH: minRecentTradesHeight, minW: 4, isDraggable: isDraggable, isResizable: isResizable },63            { x: 0,  y: 40, w: 14, h: minMarketDepthsHeight, i: '4', minH: minMarketDepthsHeight, minW: 5, isDraggable: isDraggable, isResizable: isResizable },64            { x: 0,  y: 60, w: 14, h: openOrdersHeight,      i: '5', minH: minOpenOrdersHeight,   minW: 5, isDraggable: isDraggable, isResizable: isResizable },65            { x: 14, y: 0,  w: 5,  h: orderBookHeight,       i: '6', minH: minOrderBookHeight,    minW: 4, isDraggable: isDraggable, isResizable: isResizable },66            { x: 20, y: 40, w: 4,  h: marketsHeight,         i: '7', minH: minMarketsHeight,      minW: 4, isDraggable: isDraggable, isResizable: isResizable },67        ],68        md: [69            { x: 16, y: 18, w: 8,  h: orderHeight,           i: '1', minH: orderHeight,           maxH: orderHeight, minW: 4, isDraggable: isDraggable, isResizable: isResizable },70            { x: 0,  y: 0,  w: 16, h: tradingChartHeight,    i: '2', minH: minTradingChartHeight, minW: 5, isDraggable: isDraggable, isResizable: isResizable },71            { x: 0,  y: 60, w: 24, h: recentTradesHeight,    i: '3', minH: minRecentTradesHeight, minW: 4, isDraggable: isDraggable, isResizable: isResizable },72            { x: 0,  y: 40, w: 16, h: minMarketDepthsHeight, i: '4', minH: minMarketDepthsHeight, minW: 5, isDraggable: isDraggable, isResizable: isResizable },73            { x: 0,  y: 60, w: 16, h: openOrdersHeight,      i: '5', minH: minOpenOrdersHeight,   minW: 5, isDraggable: isDraggable, isResizable: isResizable },74            { x: 16, y: 0,  w: 8,  h: orderBookHeight,       i: '6', minH: minOrderBookHeight,    minW: 4, isDraggable: isDraggable, isResizable: isResizable },75            { x: 20, y: 36, w: 8,  h: marketsHeight,         i: '7', minH: minMarketsHeight,      minW: 4, isDraggable: isDraggable, isResizable: isResizable },76        ],77        sm: [78            { x: 0, y: 12,  w: 12, h: 22, i: '1', minH: 22, maxH: 22, minW: 5, isDraggable: false },79            { x: 0, y: 28,  w: 12, h: 30, i: '2', minH: 30, minW: 5, isDraggable: false },80            { x: 0, y: 58,  w: 12, h: 18, i: '3', minH: 12, minW: 3, isDraggable: false },81            { x: 0, y: 94,  w: 12, h: 12, i: '4', minH: 12, minW: 7, isDraggable: false },82            { x: 0, y: 82,  w: 12, h: 20, i: '5', minH: 12, minW: 7, isDraggable: false },83            { x: 0, y: 106, w: 12, h: 20, i: '6', minH: 12, minW: 7, isDraggable: false },84            { x: 0, y: 126, w: 12, h: 20, i: '7', minH: 12, minW: 7, isDraggable: false },85        ],86        ...customLayouts,87    };88};89export const layouts = getLayouts();90export const getLayoutFromLS = (key: string): LayoutGrid | undefined => {91    let obj = {};92    if (localStorage) {93        try {94            obj = JSON.parse(localStorage.getItem('rgl') || '') || {};95        } catch (e) {96            // ignore97        }98    }99    return obj[key];100};101export const saveLayoutToLS = (key: string, value): void => {102    if (localStorage) {103        localStorage.setItem(104            'rgl',105            JSON.stringify({[key]: value}),106        );107    }108};109export const resetLayout = (key: string): void => {110    if (localStorage) {111        localStorage.setItem(112            'rgl',113            JSON.stringify({[key]: layouts}),114        );115    }...

Using AI Code Generation

1const { openBrowser, goto, isDraggable, closeBrowser } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await isDraggable("drag1");6    } catch (e) {7        console.error(e);8    } finally {9        await closeBrowser();10    }11})();12isDraggable(element, options)13isDraggable("drag1", { timeout: 10000 });

Using AI Code Generation

1const { openBrowser, goto, closeBrowser, isDraggable } = require('taiko');2(async () => {3    try {4        await openBrowser();5        let draggable = await isDraggable({id:'drag1'});6        console.log(draggable);7        await closeBrowser();8    } catch (e) {9        console.error(e);10    } finally {11    }12})();

Using AI Code Generation

1const { openBrowser, goto, isDraggable, closeBrowser } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await isDraggable("Drag me");6    } catch (e) {7        console.error(e);8    } finally {9        await closeBrowser();10    }11})();12isEditable()13const { openBrowser, goto, isEditable, closeBrowser } = require('taiko');14(async () => {15    try {16        await openBrowser();17        await isEditable("Enter your name");18    } catch (e) {19        console.error(e);20    } finally {21        await closeBrowser();22    }23})();24isHidden()25const { openBrowser, goto, isHidden, closeBrowser } = require('taiko');26(async () => {27    try {28        await openBrowser();29        await isHidden("Drag me");30    } catch (e) {31        console.error(e);32    } finally {33        await closeBrowser();34    }35})();36isEnabled()37const { openBrowser, goto, isEnabled, closeBrowser } = require('taiko');38(async () => {39    try {40        await openBrowser();41        await isEnabled("Drag me");42    } catch (e) {43        console.error(e);44    } finally {45        await closeBrowser();46    }47})();48isEnabled() API can be used to check whether the given element is enabled or not. The method returns true if the element is enabled otherwise false

Using AI Code Generation

1const { openBrowser, goto, click, closeBrowser, isDraggable } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await click("Drag the W3Schools image into the rectangle.");6        await isDraggable("w3schools");7    } catch (e) {8        console.error(e);9    } finally {10        await closeBrowser();11    }12})();13isEditable(element, options)14const { openBrowser, goto, click, closeBrowser, isEditable } = require('taiko');15(async () => {16    try {17        await openBrowser();18        await click("First name:");19        await isEditable("fname");20    } catch (e) {21        console.error(e);22    } finally {23        await closeBrowser();24    }25})();26isElement(element, options)27const { openBrowser, goto, click, closeBrowser, isElement } = require('taiko');28(async () => {29    try {30        await openBrowser();31        await click("First name:");32        await isElement("fname");33    } catch (e) {34        console.error(e);35    } finally {36        await closeBrowser();37    }38})();

Using AI Code Generation

1const { isDraggable, openBrowser, goto, dragAndDrop, closeBrowser } = require('taiko');2(async () => {3    try {4        await openBrowser({headless:false});5        await switchTo("iframeResult");6        console.log(await isDraggable("drag1"));7        await dragAndDrop("drag1", "div");8        await closeBrowser();9    } catch (e) {10        console.error(e);11    } finally {12    }13})();

Using AI Code Generation

1var { openBrowser, goto, click, isDraggable, closeBrowser } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await click("Try it Yourself »");6        await click("Drag the W3Schools image into the rectangle.");7        await click("Drag the HTML5 logo into the rectangle.");8        let draggable = await isDraggable({ id: "drag1" });9        let notDraggable = await isDraggable({ id: "drag2" });10    } catch (e) {11        console.error(e);12    } finally {13        await closeBrowser();14    }15})();16isDraggable(element, options)17var { openBrowser, goto, click, isDraggable, closeBrowser } = require('taiko');18(async () => {19    try {20        await openBrowser();21        await click("Try it Yourself »");22        await click("Drag the W3Schools image into the rectangle.");23        await click("Drag the HTML5 logo into the rectangle.");24        let draggable = await isDraggable({ id: "drag1" });25    } catch (e) {26        console.error(e);27    } finally {28        await closeBrowser();29    }30})();31var { openBrowser, goto, click, isDraggable, closeBrowser } = require('taiko');32(async () => {33    try {34        await openBrowser();

Using AI Code Generation

1const { openBrowser, goto, click, closeBrowser } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await goto("google.com");6        await click("Gmail");7        await closeBrowser();8    } catch (e) {9        console.error(e);10    } finally {11    }12})();13    at Object.isDraggable (/usr/local/lib/node_modules/taiko/lib/taiko.js:1:12904)14    at ExecutionContext._evaluateInternal (/usr/local/lib/node_modules/taiko/node_modules/puppeteer/lib/ExecutionContext.js:122:19)15    at process._tickCallback (internal/process/next_tick.js:68:7)16await isDraggable(“id=draggable”)

Using AI Code Generation

1const { openBrowser, goto, click, closeBrowser, isDraggable, dragAndDrop } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await click("Get Started");6        await click("Get Start

Using AI Code Generation

1var { isDraggable } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await goto("google.com");6        console.log(await isDraggable("q"));7    } catch (e) {8        console.error(e);9    } finally {10        await closeBrowser();11    }12})();13isEditable(element, [options])14var { isEditable } = require('taiko');15(async () => {16    try {17        await openBrowser();18        await goto("google.com");19        console.log(await isEditable("q"));20    } catch (e) {21        console.error(e);22    } finally {23        await closeBrowser();24    }25})();26isElement(element, [options])27var { isElement } = require('taiko');28(async () => {29    try {30        await openBrowser();31        await goto("google.com");32        console.log(await isElement("q"));33    } catch (e) {34        console.error(e);35    } finally {36        await closeBrowser();37    }38})();39isExisting(element, [options])40var { isExisting } = require('taiko');41(async () => {42    try {43        await openBrowser();44        await goto("google.com");45        console.log(await isExisting("q"));46    } catch (e) {47        console.error(e);48    } finally {49        await closeBrowser();50    }51})();52isHidden(element, [options])53var { isHidden } = require('taiko');54(async () => {55    try {56        await openBrowser();57        await goto("google.com");

Using AI Code Generation

1const { openBrowser, goto, textBox, focus, write, closeBrowser, isDraggable } = require('taiko');2(async () => {3    try {4        await openBrowser();5        await focus(textBox({placeholder: "Search W3Schools"}));6        await write("drag and drop");7        await focus(textBox({placeholder: "Search W3Schools"}));8        await write("drag and drop");9        await isDraggable("drag1");10    } catch (e) {11        console.error(e);12    } finally {13        await closeBrowser();14    }15})();16Version: 0.8.2 (Chromium: 76.0.3803.0) RELEASE

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.