[{"data":1,"prerenderedAt":4955},["ShallowReactive",2],{"blog-post-jest-vue-typescript":3},{"id":4,"title":5,"body":6,"created":4946,"description":4947,"extension":4948,"isVisible":230,"meta":4949,"navigation":230,"path":4950,"seo":4951,"stem":4952,"tags":4953,"__hash__":4954},"blog\u002Fblog\u002Fjest-vue-typescript.md","Recipes for unit tests with Jest and Vue.Js",{"type":7,"value":8,"toc":4940},"minimark",[9,13,32,35,38,43,46,140,143,154,158,173,176,737,740,1401,1404,1435,1448,1456,1460,1469,1472,2258,2261,3557,3560,3594,3598,3601,4073,4076,4873,4880,4889,4892,4895,4912,4915,4936],[10,11,12],"p",{},"In this tutorial we are going to create freshly hand-made unit tests using the\nfollowing ingredients:",[14,15,16,20,23,26,29],"ul",{},[17,18,19],"li",{},"Vue3",[17,21,22],{},"eslint",[17,24,25],{},"Jest",[17,27,28],{},"Typescript",[17,30,31],{},"Vuex",[10,33,34],{},"I am writing this guide because it is hard to find good full examples on the\ninternet using all technologies mentioned above together. I will also mention\nall parts where it took me the most time to find a solution.",[10,36,37],{},"I will also use real examples from the code I developed for my own website. I\nomit the styling, since it is not needed for this topic.",[39,40,42],"h2",{"id":41},"eslint-configuration","Eslint configuration",[10,44,45],{},"I am usually using the following rulesets in eslint:",[47,48,53],"pre",{"className":49,"code":50,"language":51,"meta":52,"style":52},"language-javascript shiki shiki-themes github-dark","module.exports = {\n  \"extends\": [\n    \"eslint:recommended\",\n    \"plugin:@typescript-eslint\u002Feslint-recommended\",\n    \"plugin:@typescript-eslint\u002Frecommended\",\n    \"plugin:vue\u002Frecommended\",\n    '@vue\u002Ftypescript'\n  ],\n}\n","javascript","",[54,55,56,79,89,98,106,114,122,128,134],"code",{"__ignoreMap":52},[57,58,61,65,69,72,76],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"sDLfK","module",[57,66,68],{"class":67},"s95oV",".",[57,70,71],{"class":63},"exports",[57,73,75],{"class":74},"snl16"," =",[57,77,78],{"class":67}," {\n",[57,80,82,86],{"class":59,"line":81},2,[57,83,85],{"class":84},"sU2Wk","  \"extends\"",[57,87,88],{"class":67},": [\n",[57,90,92,95],{"class":59,"line":91},3,[57,93,94],{"class":84},"    \"eslint:recommended\"",[57,96,97],{"class":67},",\n",[57,99,101,104],{"class":59,"line":100},4,[57,102,103],{"class":84},"    \"plugin:@typescript-eslint\u002Feslint-recommended\"",[57,105,97],{"class":67},[57,107,109,112],{"class":59,"line":108},5,[57,110,111],{"class":84},"    \"plugin:@typescript-eslint\u002Frecommended\"",[57,113,97],{"class":67},[57,115,117,120],{"class":59,"line":116},6,[57,118,119],{"class":84},"    \"plugin:vue\u002Frecommended\"",[57,121,97],{"class":67},[57,123,125],{"class":59,"line":124},7,[57,126,127],{"class":84},"    '@vue\u002Ftypescript'\n",[57,129,131],{"class":59,"line":130},8,[57,132,133],{"class":67},"  ],\n",[57,135,137],{"class":59,"line":136},9,[57,138,139],{"class":67},"}\n",[10,141,142],{},"I also suggest that everyone to use them from the very beginning especially\nif you are migrating a project into Typescript. The following rules took me\nquite some time to correct in code:",[14,144,145,151],{},[17,146,147],{},[148,149,150],"em",{},"typescript-eslint\u002Fno-explicit-any",[17,152,153],{},"_typescript-eslint\u002Fexplicit-function-return-type",[39,155,157],{"id":156},"recipe-for-stateless-components","Recipe for stateless components",[10,159,160,161,164,165,168,169,172],{},"A ",[148,162,163],{},"stateless"," component is the one that does not include any bindings or states\nfrom Vuex or other resources. Inputs and outputs are only defined as\n",[148,166,167],{},"properties"," and ",[148,170,171],{},"events"," respectively.",[10,174,175],{},"Let's assume we have the following small component:",[47,177,181],{"className":178,"code":179,"language":180,"meta":52,"style":52},"language-typescript shiki shiki-themes github-dark","\u003Cscript lang=\"ts\">\nimport {\n  defineComponent,\n} from 'vue';\n\nexport default defineComponent({\n  name: 'IconBase',\n  props: {\n    width: {\n      type: [ String, Number ],\n      default: '16px',\n    },\n    height: {\n      type: [ String, Number ],\n      default: '16px',\n    },\n    iconColor: {\n      type: String,\n      default: 'default',\n    },\n    iconName: {\n      type: String,\n      default: '',\n    },\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  computed: {\n    iconGroupClasses(): string[] {\n      return [\n        'icon-base__group',\n        `icon-base__group--${this.iconColor}`,\n      ];\n    },\n    rootClasses(): string [] {\n      const classes = [ 'icon-base' ];\n      if (this.inverted) {\n        classes.push('icon-base--inverted');\n      }\n\n      return classes;\n    },\n  },\n})\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003Csvg\n    xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"\n    :width=\"width\"\n    :height=\"height\"\n    viewBox=\"0 0 512 512\"\n    role=\"presentation\"\n    :class=\"rootClasses\"\n  >\n    \u003Cg :class=\"iconGroupClasses\">\n      \u003Cslot \u002F>\n    \u003C\u002Fg>\n  \u003C\u002Fsvg>\n\u003C\u002Ftemplate>\n","typescript",[54,182,183,200,207,212,226,232,247,257,262,267,273,284,290,296,301,310,315,321,327,337,342,348,353,363,368,374,380,390,395,401,407,425,434,442,461,467,472,487,507,521,539,545,550,558,563,568,574,585,595,604,615,626,637,648,659,670,676,695,707,717,728],{"__ignoreMap":52},[57,184,185,188,191,194,197],{"class":59,"line":60},[57,186,187],{"class":74},"\u003C",[57,189,190],{"class":67},"script lang",[57,192,193],{"class":74},"=",[57,195,196],{"class":84},"\"ts\"",[57,198,199],{"class":74},">\n",[57,201,202,205],{"class":59,"line":81},[57,203,204],{"class":74},"import",[57,206,78],{"class":67},[57,208,209],{"class":59,"line":91},[57,210,211],{"class":67},"  defineComponent,\n",[57,213,214,217,220,223],{"class":59,"line":100},[57,215,216],{"class":67},"} ",[57,218,219],{"class":74},"from",[57,221,222],{"class":84}," 'vue'",[57,224,225],{"class":67},";\n",[57,227,228],{"class":59,"line":108},[57,229,231],{"emptyLinePlaceholder":230},true,"\n",[57,233,234,237,240,244],{"class":59,"line":116},[57,235,236],{"class":74},"export",[57,238,239],{"class":74}," default",[57,241,243],{"class":242},"svObZ"," defineComponent",[57,245,246],{"class":67},"({\n",[57,248,249,252,255],{"class":59,"line":124},[57,250,251],{"class":67},"  name: ",[57,253,254],{"class":84},"'IconBase'",[57,256,97],{"class":67},[57,258,259],{"class":59,"line":130},[57,260,261],{"class":67},"  props: {\n",[57,263,264],{"class":59,"line":136},[57,265,266],{"class":67},"    width: {\n",[57,268,270],{"class":59,"line":269},10,[57,271,272],{"class":67},"      type: [ String, Number ],\n",[57,274,276,279,282],{"class":59,"line":275},11,[57,277,278],{"class":67},"      default: ",[57,280,281],{"class":84},"'16px'",[57,283,97],{"class":67},[57,285,287],{"class":59,"line":286},12,[57,288,289],{"class":67},"    },\n",[57,291,293],{"class":59,"line":292},13,[57,294,295],{"class":67},"    height: {\n",[57,297,299],{"class":59,"line":298},14,[57,300,272],{"class":67},[57,302,304,306,308],{"class":59,"line":303},15,[57,305,278],{"class":67},[57,307,281],{"class":84},[57,309,97],{"class":67},[57,311,313],{"class":59,"line":312},16,[57,314,289],{"class":67},[57,316,318],{"class":59,"line":317},17,[57,319,320],{"class":67},"    iconColor: {\n",[57,322,324],{"class":59,"line":323},18,[57,325,326],{"class":67},"      type: String,\n",[57,328,330,332,335],{"class":59,"line":329},19,[57,331,278],{"class":67},[57,333,334],{"class":84},"'default'",[57,336,97],{"class":67},[57,338,340],{"class":59,"line":339},20,[57,341,289],{"class":67},[57,343,345],{"class":59,"line":344},21,[57,346,347],{"class":67},"    iconName: {\n",[57,349,351],{"class":59,"line":350},22,[57,352,326],{"class":67},[57,354,356,358,361],{"class":59,"line":355},23,[57,357,278],{"class":67},[57,359,360],{"class":84},"''",[57,362,97],{"class":67},[57,364,366],{"class":59,"line":365},24,[57,367,289],{"class":67},[57,369,371],{"class":59,"line":370},25,[57,372,373],{"class":67},"    inverted: {\n",[57,375,377],{"class":59,"line":376},26,[57,378,379],{"class":67},"      type: Boolean,\n",[57,381,383,385,388],{"class":59,"line":382},27,[57,384,278],{"class":67},[57,386,387],{"class":63},"false",[57,389,97],{"class":67},[57,391,393],{"class":59,"line":392},28,[57,394,289],{"class":67},[57,396,398],{"class":59,"line":397},29,[57,399,400],{"class":67},"  },\n",[57,402,404],{"class":59,"line":403},30,[57,405,406],{"class":67},"  computed: {\n",[57,408,410,413,416,419,422],{"class":59,"line":409},31,[57,411,412],{"class":242},"    iconGroupClasses",[57,414,415],{"class":67},"()",[57,417,418],{"class":74},":",[57,420,421],{"class":63}," string",[57,423,424],{"class":67},"[] {\n",[57,426,428,431],{"class":59,"line":427},32,[57,429,430],{"class":74},"      return",[57,432,433],{"class":67}," [\n",[57,435,437,440],{"class":59,"line":436},33,[57,438,439],{"class":84},"        'icon-base__group'",[57,441,97],{"class":67},[57,443,445,448,451,453,456,459],{"class":59,"line":444},34,[57,446,447],{"class":84},"        `icon-base__group--${",[57,449,450],{"class":63},"this",[57,452,68],{"class":84},[57,454,455],{"class":67},"iconColor",[57,457,458],{"class":84},"}`",[57,460,97],{"class":67},[57,462,464],{"class":59,"line":463},35,[57,465,466],{"class":67},"      ];\n",[57,468,470],{"class":59,"line":469},36,[57,471,289],{"class":67},[57,473,475,478,480,482,484],{"class":59,"line":474},37,[57,476,477],{"class":242},"    rootClasses",[57,479,415],{"class":67},[57,481,418],{"class":74},[57,483,421],{"class":63},[57,485,486],{"class":67}," [] {\n",[57,488,490,493,496,498,501,504],{"class":59,"line":489},38,[57,491,492],{"class":74},"      const",[57,494,495],{"class":63}," classes",[57,497,75],{"class":74},[57,499,500],{"class":67}," [ ",[57,502,503],{"class":84},"'icon-base'",[57,505,506],{"class":67}," ];\n",[57,508,510,513,516,518],{"class":59,"line":509},39,[57,511,512],{"class":74},"      if",[57,514,515],{"class":67}," (",[57,517,450],{"class":63},[57,519,520],{"class":67},".inverted) {\n",[57,522,524,527,530,533,536],{"class":59,"line":523},40,[57,525,526],{"class":67},"        classes.",[57,528,529],{"class":242},"push",[57,531,532],{"class":67},"(",[57,534,535],{"class":84},"'icon-base--inverted'",[57,537,538],{"class":67},");\n",[57,540,542],{"class":59,"line":541},41,[57,543,544],{"class":67},"      }\n",[57,546,548],{"class":59,"line":547},42,[57,549,231],{"emptyLinePlaceholder":230},[57,551,553,555],{"class":59,"line":552},43,[57,554,430],{"class":74},[57,556,557],{"class":67}," classes;\n",[57,559,561],{"class":59,"line":560},44,[57,562,289],{"class":67},[57,564,566],{"class":59,"line":565},45,[57,567,400],{"class":67},[57,569,571],{"class":59,"line":570},46,[57,572,573],{"class":67},"})\n",[57,575,577,580,583],{"class":59,"line":576},47,[57,578,579],{"class":74},"\u003C\u002F",[57,581,582],{"class":67},"script",[57,584,199],{"class":74},[57,586,588,590,593],{"class":59,"line":587},48,[57,589,187],{"class":67},[57,591,592],{"class":242},"template",[57,594,199],{"class":67},[57,596,598,601],{"class":59,"line":597},49,[57,599,600],{"class":74},"  \u003C",[57,602,603],{"class":67},"svg\n",[57,605,607,610,612],{"class":59,"line":606},50,[57,608,609],{"class":67},"    xmlns",[57,611,193],{"class":74},[57,613,614],{"class":84},"\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"\n",[57,616,618,621,623],{"class":59,"line":617},51,[57,619,620],{"class":67},"    :width",[57,622,193],{"class":74},[57,624,625],{"class":84},"\"width\"\n",[57,627,629,632,634],{"class":59,"line":628},52,[57,630,631],{"class":67},"    :height",[57,633,193],{"class":74},[57,635,636],{"class":84},"\"height\"\n",[57,638,640,643,645],{"class":59,"line":639},53,[57,641,642],{"class":67},"    viewBox",[57,644,193],{"class":74},[57,646,647],{"class":84},"\"0 0 512 512\"\n",[57,649,651,654,656],{"class":59,"line":650},54,[57,652,653],{"class":67},"    role",[57,655,193],{"class":74},[57,657,658],{"class":84},"\"presentation\"\n",[57,660,662,665,667],{"class":59,"line":661},55,[57,663,664],{"class":67},"    :class",[57,666,193],{"class":74},[57,668,669],{"class":84},"\"rootClasses\"\n",[57,671,673],{"class":59,"line":672},56,[57,674,675],{"class":74},"  >\n",[57,677,679,682,685,688,690,693],{"class":59,"line":678},57,[57,680,681],{"class":74},"    \u003C",[57,683,684],{"class":242},"g",[57,686,687],{"class":67}," :class",[57,689,193],{"class":74},[57,691,692],{"class":84},"\"iconGroupClasses\"",[57,694,199],{"class":74},[57,696,698,701,704],{"class":59,"line":697},58,[57,699,700],{"class":74},"      \u003C",[57,702,703],{"class":67},"slot ",[57,705,706],{"class":74},"\u002F>\n",[57,708,710,713,715],{"class":59,"line":709},59,[57,711,712],{"class":74},"    \u003C\u002F",[57,714,684],{"class":67},[57,716,199],{"class":74},[57,718,720,723,726],{"class":59,"line":719},60,[57,721,722],{"class":74},"  \u003C\u002F",[57,724,725],{"class":67},"svg",[57,727,199],{"class":74},[57,729,731,733,735],{"class":59,"line":730},61,[57,732,579],{"class":74},[57,734,592],{"class":67},[57,736,199],{"class":74},[10,738,739],{},"For the component above I created the following unit tests:",[47,741,743],{"className":178,"code":742,"language":180,"meta":52,"style":52},"import {\n  ComponentPublicInstance,\n} from 'vue';\nimport IconBase from '@\u002Fcomponents\u002Ficons\u002FIconBase.vue';\nimport {\n  shallowMount, VueWrapper,\n} from '@vue\u002Ftest-utils';\n\nconst defaultProps = {\n  iconName: 'testName',\n  width: '20px',\n  inverted: false,\n  iconColor: 'default',\n};\n\ndescribe('IconBase', () => {\n  const createWrapper = (props= defaultProps): VueWrapper\u003CComponentPublicInstance> => shallowMount(IconBase, {\n    props,\n  });\n\n  it('loads successfully', () => {\n    const wrapper = createWrapper();\n\n    expect(\n      wrapper.find('.icon-base').exists(),\n    ).toBe(true);\n  });\n\n  it('renders parameter iconName as aria-labelledby', () => {\n    const wrapper = createWrapper();\n\n    expect(\n      wrapper.find('.icon-base').attributes('aria-labelledby'),\n    ).toEqual('testName');\n  });\n\n  it('renders width parameter as icon width', () => {\n    const wrapper = createWrapper();\n\n    expect(\n      wrapper.find('.icon-base').attributes('width'),\n    ).toEqual('20px');\n  });\n\n  it('renders group color as red', () => {\n    const wrapper = createWrapper({\n      ...defaultProps,\n      iconColor: 'red',\n    });\n\n    expect(\n      wrapper.find('.icon-base__group').classes(),\n    ).toEqual([\n      'icon-base__group',\n      'icon-base__group--red',\n    ]);\n  });\n\n  it('inverts icon when invert=true', () => {\n    const wrapper = createWrapper({\n      ...defaultProps,\n      inverted: true,\n    });\n\n    expect(\n      wrapper.find('.icon-base--inverted').exists(),\n    ).toBe(true);\n  });\n});\n",[54,744,745,751,756,766,780,786,791,802,806,818,828,838,847,856,861,865,882,924,929,934,938,954,969,973,981,1003,1018,1022,1026,1041,1053,1057,1063,1086,1099,1103,1107,1122,1134,1138,1144,1165,1177,1181,1185,1200,1212,1220,1230,1235,1239,1245,1263,1272,1279,1286,1291,1295,1299,1314,1326,1332,1342,1347,1352,1359,1377,1390,1395],{"__ignoreMap":52},[57,746,747,749],{"class":59,"line":60},[57,748,204],{"class":74},[57,750,78],{"class":67},[57,752,753],{"class":59,"line":81},[57,754,755],{"class":67},"  ComponentPublicInstance,\n",[57,757,758,760,762,764],{"class":59,"line":91},[57,759,216],{"class":67},[57,761,219],{"class":74},[57,763,222],{"class":84},[57,765,225],{"class":67},[57,767,768,770,773,775,778],{"class":59,"line":100},[57,769,204],{"class":74},[57,771,772],{"class":67}," IconBase ",[57,774,219],{"class":74},[57,776,777],{"class":84}," '@\u002Fcomponents\u002Ficons\u002FIconBase.vue'",[57,779,225],{"class":67},[57,781,782,784],{"class":59,"line":108},[57,783,204],{"class":74},[57,785,78],{"class":67},[57,787,788],{"class":59,"line":116},[57,789,790],{"class":67},"  shallowMount, VueWrapper,\n",[57,792,793,795,797,800],{"class":59,"line":124},[57,794,216],{"class":67},[57,796,219],{"class":74},[57,798,799],{"class":84}," '@vue\u002Ftest-utils'",[57,801,225],{"class":67},[57,803,804],{"class":59,"line":130},[57,805,231],{"emptyLinePlaceholder":230},[57,807,808,811,814,816],{"class":59,"line":136},[57,809,810],{"class":74},"const",[57,812,813],{"class":63}," defaultProps",[57,815,75],{"class":74},[57,817,78],{"class":67},[57,819,820,823,826],{"class":59,"line":269},[57,821,822],{"class":67},"  iconName: ",[57,824,825],{"class":84},"'testName'",[57,827,97],{"class":67},[57,829,830,833,836],{"class":59,"line":275},[57,831,832],{"class":67},"  width: ",[57,834,835],{"class":84},"'20px'",[57,837,97],{"class":67},[57,839,840,843,845],{"class":59,"line":286},[57,841,842],{"class":67},"  inverted: ",[57,844,387],{"class":63},[57,846,97],{"class":67},[57,848,849,852,854],{"class":59,"line":292},[57,850,851],{"class":67},"  iconColor: ",[57,853,334],{"class":84},[57,855,97],{"class":67},[57,857,858],{"class":59,"line":298},[57,859,860],{"class":67},"};\n",[57,862,863],{"class":59,"line":303},[57,864,231],{"emptyLinePlaceholder":230},[57,866,867,870,872,874,877,880],{"class":59,"line":312},[57,868,869],{"class":242},"describe",[57,871,532],{"class":67},[57,873,254],{"class":84},[57,875,876],{"class":67},", () ",[57,878,879],{"class":74},"=>",[57,881,78],{"class":67},[57,883,884,887,890,892,894,898,900,903,905,908,910,913,916,918,921],{"class":59,"line":317},[57,885,886],{"class":74},"  const",[57,888,889],{"class":242}," createWrapper",[57,891,75],{"class":74},[57,893,515],{"class":67},[57,895,897],{"class":896},"s9osk","props",[57,899,193],{"class":74},[57,901,902],{"class":67}," defaultProps)",[57,904,418],{"class":74},[57,906,907],{"class":242}," VueWrapper",[57,909,187],{"class":67},[57,911,912],{"class":242},"ComponentPublicInstance",[57,914,915],{"class":67},"> ",[57,917,879],{"class":74},[57,919,920],{"class":242}," shallowMount",[57,922,923],{"class":67},"(IconBase, {\n",[57,925,926],{"class":59,"line":323},[57,927,928],{"class":67},"    props,\n",[57,930,931],{"class":59,"line":329},[57,932,933],{"class":67},"  });\n",[57,935,936],{"class":59,"line":339},[57,937,231],{"emptyLinePlaceholder":230},[57,939,940,943,945,948,950,952],{"class":59,"line":344},[57,941,942],{"class":242},"  it",[57,944,532],{"class":67},[57,946,947],{"class":84},"'loads successfully'",[57,949,876],{"class":67},[57,951,879],{"class":74},[57,953,78],{"class":67},[57,955,956,959,962,964,966],{"class":59,"line":350},[57,957,958],{"class":74},"    const",[57,960,961],{"class":63}," wrapper",[57,963,75],{"class":74},[57,965,889],{"class":242},[57,967,968],{"class":67},"();\n",[57,970,971],{"class":59,"line":355},[57,972,231],{"emptyLinePlaceholder":230},[57,974,975,978],{"class":59,"line":365},[57,976,977],{"class":242},"    expect",[57,979,980],{"class":67},"(\n",[57,982,983,986,989,991,994,997,1000],{"class":59,"line":370},[57,984,985],{"class":67},"      wrapper.",[57,987,988],{"class":242},"find",[57,990,532],{"class":67},[57,992,993],{"class":84},"'.icon-base'",[57,995,996],{"class":67},").",[57,998,999],{"class":242},"exists",[57,1001,1002],{"class":67},"(),\n",[57,1004,1005,1008,1011,1013,1016],{"class":59,"line":376},[57,1006,1007],{"class":67},"    ).",[57,1009,1010],{"class":242},"toBe",[57,1012,532],{"class":67},[57,1014,1015],{"class":63},"true",[57,1017,538],{"class":67},[57,1019,1020],{"class":59,"line":382},[57,1021,933],{"class":67},[57,1023,1024],{"class":59,"line":392},[57,1025,231],{"emptyLinePlaceholder":230},[57,1027,1028,1030,1032,1035,1037,1039],{"class":59,"line":397},[57,1029,942],{"class":242},[57,1031,532],{"class":67},[57,1033,1034],{"class":84},"'renders parameter iconName as aria-labelledby'",[57,1036,876],{"class":67},[57,1038,879],{"class":74},[57,1040,78],{"class":67},[57,1042,1043,1045,1047,1049,1051],{"class":59,"line":403},[57,1044,958],{"class":74},[57,1046,961],{"class":63},[57,1048,75],{"class":74},[57,1050,889],{"class":242},[57,1052,968],{"class":67},[57,1054,1055],{"class":59,"line":409},[57,1056,231],{"emptyLinePlaceholder":230},[57,1058,1059,1061],{"class":59,"line":427},[57,1060,977],{"class":242},[57,1062,980],{"class":67},[57,1064,1065,1067,1069,1071,1073,1075,1078,1080,1083],{"class":59,"line":436},[57,1066,985],{"class":67},[57,1068,988],{"class":242},[57,1070,532],{"class":67},[57,1072,993],{"class":84},[57,1074,996],{"class":67},[57,1076,1077],{"class":242},"attributes",[57,1079,532],{"class":67},[57,1081,1082],{"class":84},"'aria-labelledby'",[57,1084,1085],{"class":67},"),\n",[57,1087,1088,1090,1093,1095,1097],{"class":59,"line":444},[57,1089,1007],{"class":67},[57,1091,1092],{"class":242},"toEqual",[57,1094,532],{"class":67},[57,1096,825],{"class":84},[57,1098,538],{"class":67},[57,1100,1101],{"class":59,"line":463},[57,1102,933],{"class":67},[57,1104,1105],{"class":59,"line":469},[57,1106,231],{"emptyLinePlaceholder":230},[57,1108,1109,1111,1113,1116,1118,1120],{"class":59,"line":474},[57,1110,942],{"class":242},[57,1112,532],{"class":67},[57,1114,1115],{"class":84},"'renders width parameter as icon width'",[57,1117,876],{"class":67},[57,1119,879],{"class":74},[57,1121,78],{"class":67},[57,1123,1124,1126,1128,1130,1132],{"class":59,"line":489},[57,1125,958],{"class":74},[57,1127,961],{"class":63},[57,1129,75],{"class":74},[57,1131,889],{"class":242},[57,1133,968],{"class":67},[57,1135,1136],{"class":59,"line":509},[57,1137,231],{"emptyLinePlaceholder":230},[57,1139,1140,1142],{"class":59,"line":523},[57,1141,977],{"class":242},[57,1143,980],{"class":67},[57,1145,1146,1148,1150,1152,1154,1156,1158,1160,1163],{"class":59,"line":541},[57,1147,985],{"class":67},[57,1149,988],{"class":242},[57,1151,532],{"class":67},[57,1153,993],{"class":84},[57,1155,996],{"class":67},[57,1157,1077],{"class":242},[57,1159,532],{"class":67},[57,1161,1162],{"class":84},"'width'",[57,1164,1085],{"class":67},[57,1166,1167,1169,1171,1173,1175],{"class":59,"line":547},[57,1168,1007],{"class":67},[57,1170,1092],{"class":242},[57,1172,532],{"class":67},[57,1174,835],{"class":84},[57,1176,538],{"class":67},[57,1178,1179],{"class":59,"line":552},[57,1180,933],{"class":67},[57,1182,1183],{"class":59,"line":560},[57,1184,231],{"emptyLinePlaceholder":230},[57,1186,1187,1189,1191,1194,1196,1198],{"class":59,"line":565},[57,1188,942],{"class":242},[57,1190,532],{"class":67},[57,1192,1193],{"class":84},"'renders group color as red'",[57,1195,876],{"class":67},[57,1197,879],{"class":74},[57,1199,78],{"class":67},[57,1201,1202,1204,1206,1208,1210],{"class":59,"line":570},[57,1203,958],{"class":74},[57,1205,961],{"class":63},[57,1207,75],{"class":74},[57,1209,889],{"class":242},[57,1211,246],{"class":67},[57,1213,1214,1217],{"class":59,"line":576},[57,1215,1216],{"class":74},"      ...",[57,1218,1219],{"class":67},"defaultProps,\n",[57,1221,1222,1225,1228],{"class":59,"line":587},[57,1223,1224],{"class":67},"      iconColor: ",[57,1226,1227],{"class":84},"'red'",[57,1229,97],{"class":67},[57,1231,1232],{"class":59,"line":597},[57,1233,1234],{"class":67},"    });\n",[57,1236,1237],{"class":59,"line":606},[57,1238,231],{"emptyLinePlaceholder":230},[57,1240,1241,1243],{"class":59,"line":617},[57,1242,977],{"class":242},[57,1244,980],{"class":67},[57,1246,1247,1249,1251,1253,1256,1258,1261],{"class":59,"line":628},[57,1248,985],{"class":67},[57,1250,988],{"class":242},[57,1252,532],{"class":67},[57,1254,1255],{"class":84},"'.icon-base__group'",[57,1257,996],{"class":67},[57,1259,1260],{"class":242},"classes",[57,1262,1002],{"class":67},[57,1264,1265,1267,1269],{"class":59,"line":639},[57,1266,1007],{"class":67},[57,1268,1092],{"class":242},[57,1270,1271],{"class":67},"([\n",[57,1273,1274,1277],{"class":59,"line":650},[57,1275,1276],{"class":84},"      'icon-base__group'",[57,1278,97],{"class":67},[57,1280,1281,1284],{"class":59,"line":661},[57,1282,1283],{"class":84},"      'icon-base__group--red'",[57,1285,97],{"class":67},[57,1287,1288],{"class":59,"line":672},[57,1289,1290],{"class":67},"    ]);\n",[57,1292,1293],{"class":59,"line":678},[57,1294,933],{"class":67},[57,1296,1297],{"class":59,"line":697},[57,1298,231],{"emptyLinePlaceholder":230},[57,1300,1301,1303,1305,1308,1310,1312],{"class":59,"line":709},[57,1302,942],{"class":242},[57,1304,532],{"class":67},[57,1306,1307],{"class":84},"'inverts icon when invert=true'",[57,1309,876],{"class":67},[57,1311,879],{"class":74},[57,1313,78],{"class":67},[57,1315,1316,1318,1320,1322,1324],{"class":59,"line":719},[57,1317,958],{"class":74},[57,1319,961],{"class":63},[57,1321,75],{"class":74},[57,1323,889],{"class":242},[57,1325,246],{"class":67},[57,1327,1328,1330],{"class":59,"line":730},[57,1329,1216],{"class":74},[57,1331,1219],{"class":67},[57,1333,1335,1338,1340],{"class":59,"line":1334},62,[57,1336,1337],{"class":67},"      inverted: ",[57,1339,1015],{"class":63},[57,1341,97],{"class":67},[57,1343,1345],{"class":59,"line":1344},63,[57,1346,1234],{"class":67},[57,1348,1350],{"class":59,"line":1349},64,[57,1351,231],{"emptyLinePlaceholder":230},[57,1353,1355,1357],{"class":59,"line":1354},65,[57,1356,977],{"class":242},[57,1358,980],{"class":67},[57,1360,1362,1364,1366,1368,1371,1373,1375],{"class":59,"line":1361},66,[57,1363,985],{"class":67},[57,1365,988],{"class":242},[57,1367,532],{"class":67},[57,1369,1370],{"class":84},"'.icon-base--inverted'",[57,1372,996],{"class":67},[57,1374,999],{"class":242},[57,1376,1002],{"class":67},[57,1378,1380,1382,1384,1386,1388],{"class":59,"line":1379},67,[57,1381,1007],{"class":67},[57,1383,1010],{"class":242},[57,1385,532],{"class":67},[57,1387,1015],{"class":63},[57,1389,538],{"class":67},[57,1391,1393],{"class":59,"line":1392},68,[57,1394,933],{"class":67},[57,1396,1398],{"class":59,"line":1397},69,[57,1399,1400],{"class":67},"});\n",[10,1402,1403],{},"The most important rules that I used were the following:",[14,1405,1406,1413,1420,1427],{},[17,1407,1408,1409,1412],{},"I am trying to use only once ",[54,1410,1411],{},"expect"," in each function.",[17,1414,1415,1416,1419],{},"I always create the function ",[54,1417,1418],{},"createWrapper"," with all required inputs",[17,1421,1422,1423,1426],{},"I introduce ",[54,1424,1425],{},"defaultProps"," with the default and required values",[17,1428,1429,1430,1432,1433],{},"I use ",[54,1431,1425],{}," as the default parameter for ",[54,1434,1418],{},[10,1436,1437,1438,1441,1442,1444,1445,1447],{},"It took me some time to find ",[54,1439,1440],{},"VueWrapper\u003CComponentPublicInstance>","\nas return trype for ",[54,1443,1418],{},"function. I also introduce the\n",[54,1446,1425],{}," in order to have autocompletion, avoid DRY and type checking.",[10,1449,160,1450,1452,1453,1455],{},[54,1451,1418],{}," function is always invoked by every single test. Our goal is\nto make each test completely ",[148,1454,163],{}," this way. I make sure that all variables\nare initialized for each test, so that tests can be executed concurrently.",[39,1457,1459],{"id":1458},"recipe-for-stateful-components","Recipe for stateful components",[10,1461,160,1462,1465,1466,1468],{},[148,1463,1464],{},"stateful"," component is a component in my applications that uses ",[148,1467,31],{}," as\ninput and output.",[10,1470,1471],{},"Taking the example below:",[47,1473,1475],{"className":178,"code":1474,"language":180,"meta":52,"style":52},"\u003Cscript lang=\"ts\">\nimport {\n  defineComponent,\n} from 'vue';\n\nimport PostSummary from '@\u002Fcomponents\u002FPostSummary.vue';\nimport SpinningLoader from '@\u002Fcomponents\u002FSpinningLoader.vue';\nimport {\n  createNamespacedHelpers,\n} from 'vuex';\n\n\nimport {\n  BlogPost,\n} from '@\u002Fstore\u002Fblog\u002Ftypes';\n\nconst {\n  mapActions,\n  mapState,\n} = createNamespacedHelpers('blog');\n\n\nexport default defineComponent({\n  name: 'BlogView',\n  components: {\n    PostSummary,\n    SpinningLoader,\n  },\n  metaInfo: {\n    title: 'Blog',\n  },\n  data() {\n    return {\n      isLoading: false,\n    };\n  },\n  computed: {\n    ...mapState([\n      'posts',\n    ]),\n    visiblePostsOrderByDateDesc(): ReadonlyArray\u003CBlogPost> {\n      const visiblePosts = this.posts.filter((post: BlogPost) => post.isVisible);\n      visiblePosts.sort((one: BlogPost, another: BlogPost) => another.created - one.created);\n      return visiblePosts;\n    },\n  },\n  async created(): Promise\u003Cvoid> {\n    this.isLoading = true;\n    try {\n      await this.refreshPosts();\n    } finally {\n      this.isLoading = false;\n    }\n  },\n  methods: {\n    ...mapActions([\n      'refreshPosts',\n    ]),\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"blog-view\">\n    \u003Ch1 class=\"blog-view__headline\">\n      \u003Ci class=\"icon-heart\" \u002F>\n      Blog\n    \u003C\u002Fh1>\n    \u003Cdiv\n      v-if=\"isLoading\"\n      class=\"blog-view__spinner\"\n    >\n      \u003CSpinningLoader \u002F>\n    \u003C\u002Fdiv>\n    \u003Csection\n      v-else\n      class=\"blog-view__container\"\n    >\n      \u003CPostSummary\n        v-for=\"post in visiblePostsOrderByDateDesc\"\n        :key=\"post.id\"\n        class=\"blog-view__post\"\n        :post=\"post\"\n        :title=\"post.id\"\n      \u002F>\n    \u003C\u002Fsection>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[54,1476,1477,1489,1495,1499,1509,1513,1527,1541,1547,1552,1563,1567,1571,1577,1582,1593,1597,1603,1610,1617,1633,1637,1641,1651,1660,1665,1670,1675,1679,1684,1694,1698,1706,1713,1722,1727,1731,1735,1745,1752,1757,1777,1814,1854,1861,1865,1869,1891,1906,1913,1927,1937,1951,1956,1960,1965,1974,1981,1985,1989,1993,2001,2005,2013,2027,2041,2056,2061,2070,2077,2089,2100,2106,2116,2126,2134,2142,2152,2157,2165,2181,2192,2203,2214,2224,2230,2240,2249],{"__ignoreMap":52},[57,1478,1479,1481,1483,1485,1487],{"class":59,"line":60},[57,1480,187],{"class":74},[57,1482,190],{"class":67},[57,1484,193],{"class":74},[57,1486,196],{"class":84},[57,1488,199],{"class":74},[57,1490,1491,1493],{"class":59,"line":81},[57,1492,204],{"class":74},[57,1494,78],{"class":67},[57,1496,1497],{"class":59,"line":91},[57,1498,211],{"class":67},[57,1500,1501,1503,1505,1507],{"class":59,"line":100},[57,1502,216],{"class":67},[57,1504,219],{"class":74},[57,1506,222],{"class":84},[57,1508,225],{"class":67},[57,1510,1511],{"class":59,"line":108},[57,1512,231],{"emptyLinePlaceholder":230},[57,1514,1515,1517,1520,1522,1525],{"class":59,"line":116},[57,1516,204],{"class":74},[57,1518,1519],{"class":67}," PostSummary ",[57,1521,219],{"class":74},[57,1523,1524],{"class":84}," '@\u002Fcomponents\u002FPostSummary.vue'",[57,1526,225],{"class":67},[57,1528,1529,1531,1534,1536,1539],{"class":59,"line":124},[57,1530,204],{"class":74},[57,1532,1533],{"class":67}," SpinningLoader ",[57,1535,219],{"class":74},[57,1537,1538],{"class":84}," '@\u002Fcomponents\u002FSpinningLoader.vue'",[57,1540,225],{"class":67},[57,1542,1543,1545],{"class":59,"line":130},[57,1544,204],{"class":74},[57,1546,78],{"class":67},[57,1548,1549],{"class":59,"line":136},[57,1550,1551],{"class":67},"  createNamespacedHelpers,\n",[57,1553,1554,1556,1558,1561],{"class":59,"line":269},[57,1555,216],{"class":67},[57,1557,219],{"class":74},[57,1559,1560],{"class":84}," 'vuex'",[57,1562,225],{"class":67},[57,1564,1565],{"class":59,"line":275},[57,1566,231],{"emptyLinePlaceholder":230},[57,1568,1569],{"class":59,"line":286},[57,1570,231],{"emptyLinePlaceholder":230},[57,1572,1573,1575],{"class":59,"line":292},[57,1574,204],{"class":74},[57,1576,78],{"class":67},[57,1578,1579],{"class":59,"line":298},[57,1580,1581],{"class":67},"  BlogPost,\n",[57,1583,1584,1586,1588,1591],{"class":59,"line":303},[57,1585,216],{"class":67},[57,1587,219],{"class":74},[57,1589,1590],{"class":84}," '@\u002Fstore\u002Fblog\u002Ftypes'",[57,1592,225],{"class":67},[57,1594,1595],{"class":59,"line":312},[57,1596,231],{"emptyLinePlaceholder":230},[57,1598,1599,1601],{"class":59,"line":317},[57,1600,810],{"class":74},[57,1602,78],{"class":67},[57,1604,1605,1608],{"class":59,"line":323},[57,1606,1607],{"class":63},"  mapActions",[57,1609,97],{"class":67},[57,1611,1612,1615],{"class":59,"line":329},[57,1613,1614],{"class":63},"  mapState",[57,1616,97],{"class":67},[57,1618,1619,1621,1623,1626,1628,1631],{"class":59,"line":339},[57,1620,216],{"class":67},[57,1622,193],{"class":74},[57,1624,1625],{"class":242}," createNamespacedHelpers",[57,1627,532],{"class":67},[57,1629,1630],{"class":84},"'blog'",[57,1632,538],{"class":67},[57,1634,1635],{"class":59,"line":344},[57,1636,231],{"emptyLinePlaceholder":230},[57,1638,1639],{"class":59,"line":350},[57,1640,231],{"emptyLinePlaceholder":230},[57,1642,1643,1645,1647,1649],{"class":59,"line":355},[57,1644,236],{"class":74},[57,1646,239],{"class":74},[57,1648,243],{"class":242},[57,1650,246],{"class":67},[57,1652,1653,1655,1658],{"class":59,"line":365},[57,1654,251],{"class":67},[57,1656,1657],{"class":84},"'BlogView'",[57,1659,97],{"class":67},[57,1661,1662],{"class":59,"line":370},[57,1663,1664],{"class":67},"  components: {\n",[57,1666,1667],{"class":59,"line":376},[57,1668,1669],{"class":67},"    PostSummary,\n",[57,1671,1672],{"class":59,"line":382},[57,1673,1674],{"class":67},"    SpinningLoader,\n",[57,1676,1677],{"class":59,"line":392},[57,1678,400],{"class":67},[57,1680,1681],{"class":59,"line":397},[57,1682,1683],{"class":67},"  metaInfo: {\n",[57,1685,1686,1689,1692],{"class":59,"line":403},[57,1687,1688],{"class":67},"    title: ",[57,1690,1691],{"class":84},"'Blog'",[57,1693,97],{"class":67},[57,1695,1696],{"class":59,"line":409},[57,1697,400],{"class":67},[57,1699,1700,1703],{"class":59,"line":427},[57,1701,1702],{"class":242},"  data",[57,1704,1705],{"class":67},"() {\n",[57,1707,1708,1711],{"class":59,"line":436},[57,1709,1710],{"class":74},"    return",[57,1712,78],{"class":67},[57,1714,1715,1718,1720],{"class":59,"line":444},[57,1716,1717],{"class":67},"      isLoading: ",[57,1719,387],{"class":63},[57,1721,97],{"class":67},[57,1723,1724],{"class":59,"line":463},[57,1725,1726],{"class":67},"    };\n",[57,1728,1729],{"class":59,"line":469},[57,1730,400],{"class":67},[57,1732,1733],{"class":59,"line":474},[57,1734,406],{"class":67},[57,1736,1737,1740,1743],{"class":59,"line":489},[57,1738,1739],{"class":74},"    ...",[57,1741,1742],{"class":242},"mapState",[57,1744,1271],{"class":67},[57,1746,1747,1750],{"class":59,"line":509},[57,1748,1749],{"class":84},"      'posts'",[57,1751,97],{"class":67},[57,1753,1754],{"class":59,"line":523},[57,1755,1756],{"class":67},"    ]),\n",[57,1758,1759,1762,1764,1766,1769,1771,1774],{"class":59,"line":541},[57,1760,1761],{"class":242},"    visiblePostsOrderByDateDesc",[57,1763,415],{"class":67},[57,1765,418],{"class":74},[57,1767,1768],{"class":242}," ReadonlyArray",[57,1770,187],{"class":67},[57,1772,1773],{"class":242},"BlogPost",[57,1775,1776],{"class":67},"> {\n",[57,1778,1779,1781,1784,1786,1789,1792,1795,1798,1801,1803,1806,1809,1811],{"class":59,"line":547},[57,1780,492],{"class":74},[57,1782,1783],{"class":63}," visiblePosts",[57,1785,75],{"class":74},[57,1787,1788],{"class":63}," this",[57,1790,1791],{"class":67},".posts.",[57,1793,1794],{"class":242},"filter",[57,1796,1797],{"class":67},"((",[57,1799,1800],{"class":896},"post",[57,1802,418],{"class":74},[57,1804,1805],{"class":242}," BlogPost",[57,1807,1808],{"class":67},") ",[57,1810,879],{"class":74},[57,1812,1813],{"class":67}," post.isVisible);\n",[57,1815,1816,1819,1822,1824,1827,1829,1831,1834,1837,1839,1841,1843,1845,1848,1851],{"class":59,"line":552},[57,1817,1818],{"class":67},"      visiblePosts.",[57,1820,1821],{"class":242},"sort",[57,1823,1797],{"class":67},[57,1825,1826],{"class":896},"one",[57,1828,418],{"class":74},[57,1830,1805],{"class":242},[57,1832,1833],{"class":67},", ",[57,1835,1836],{"class":896},"another",[57,1838,418],{"class":74},[57,1840,1805],{"class":242},[57,1842,1808],{"class":67},[57,1844,879],{"class":74},[57,1846,1847],{"class":67}," another.created ",[57,1849,1850],{"class":74},"-",[57,1852,1853],{"class":67}," one.created);\n",[57,1855,1856,1858],{"class":59,"line":560},[57,1857,430],{"class":74},[57,1859,1860],{"class":67}," visiblePosts;\n",[57,1862,1863],{"class":59,"line":565},[57,1864,289],{"class":67},[57,1866,1867],{"class":59,"line":570},[57,1868,400],{"class":67},[57,1870,1871,1874,1877,1879,1881,1884,1886,1889],{"class":59,"line":576},[57,1872,1873],{"class":74},"  async",[57,1875,1876],{"class":242}," created",[57,1878,415],{"class":67},[57,1880,418],{"class":74},[57,1882,1883],{"class":242}," Promise",[57,1885,187],{"class":67},[57,1887,1888],{"class":63},"void",[57,1890,1776],{"class":67},[57,1892,1893,1896,1899,1901,1904],{"class":59,"line":587},[57,1894,1895],{"class":63},"    this",[57,1897,1898],{"class":67},".isLoading ",[57,1900,193],{"class":74},[57,1902,1903],{"class":63}," true",[57,1905,225],{"class":67},[57,1907,1908,1911],{"class":59,"line":597},[57,1909,1910],{"class":74},"    try",[57,1912,78],{"class":67},[57,1914,1915,1918,1920,1922,1925],{"class":59,"line":606},[57,1916,1917],{"class":74},"      await",[57,1919,1788],{"class":63},[57,1921,68],{"class":67},[57,1923,1924],{"class":242},"refreshPosts",[57,1926,968],{"class":67},[57,1928,1929,1932,1935],{"class":59,"line":617},[57,1930,1931],{"class":67},"    } ",[57,1933,1934],{"class":74},"finally",[57,1936,78],{"class":67},[57,1938,1939,1942,1944,1946,1949],{"class":59,"line":628},[57,1940,1941],{"class":63},"      this",[57,1943,1898],{"class":67},[57,1945,193],{"class":74},[57,1947,1948],{"class":63}," false",[57,1950,225],{"class":67},[57,1952,1953],{"class":59,"line":639},[57,1954,1955],{"class":67},"    }\n",[57,1957,1958],{"class":59,"line":650},[57,1959,400],{"class":67},[57,1961,1962],{"class":59,"line":661},[57,1963,1964],{"class":67},"  methods: {\n",[57,1966,1967,1969,1972],{"class":59,"line":672},[57,1968,1739],{"class":74},[57,1970,1971],{"class":242},"mapActions",[57,1973,1271],{"class":67},[57,1975,1976,1979],{"class":59,"line":678},[57,1977,1978],{"class":84},"      'refreshPosts'",[57,1980,97],{"class":67},[57,1982,1983],{"class":59,"line":697},[57,1984,1756],{"class":67},[57,1986,1987],{"class":59,"line":709},[57,1988,400],{"class":67},[57,1990,1991],{"class":59,"line":719},[57,1992,1400],{"class":67},[57,1994,1995,1997,1999],{"class":59,"line":730},[57,1996,579],{"class":74},[57,1998,582],{"class":67},[57,2000,199],{"class":74},[57,2002,2003],{"class":59,"line":1334},[57,2004,231],{"emptyLinePlaceholder":230},[57,2006,2007,2009,2011],{"class":59,"line":1344},[57,2008,187],{"class":67},[57,2010,592],{"class":242},[57,2012,199],{"class":67},[57,2014,2015,2017,2020,2022,2025],{"class":59,"line":1349},[57,2016,600],{"class":74},[57,2018,2019],{"class":67},"div class",[57,2021,193],{"class":74},[57,2023,2024],{"class":84},"\"blog-view\"",[57,2026,199],{"class":74},[57,2028,2029,2031,2034,2036,2039],{"class":59,"line":1354},[57,2030,681],{"class":74},[57,2032,2033],{"class":67},"h1 class",[57,2035,193],{"class":74},[57,2037,2038],{"class":84},"\"blog-view__headline\"",[57,2040,199],{"class":74},[57,2042,2043,2045,2048,2050,2053],{"class":59,"line":1361},[57,2044,700],{"class":74},[57,2046,2047],{"class":67},"i class",[57,2049,193],{"class":74},[57,2051,2052],{"class":84},"\"icon-heart\"",[57,2054,2055],{"class":74}," \u002F>\n",[57,2057,2058],{"class":59,"line":1379},[57,2059,2060],{"class":67},"      Blog\n",[57,2062,2063,2065,2068],{"class":59,"line":1392},[57,2064,712],{"class":74},[57,2066,2067],{"class":67},"h1",[57,2069,199],{"class":74},[57,2071,2072,2074],{"class":59,"line":1397},[57,2073,681],{"class":74},[57,2075,2076],{"class":67},"div\n",[57,2078,2080,2083,2086],{"class":59,"line":2079},70,[57,2081,2082],{"class":67},"      v",[57,2084,2085],{"class":74},"-if=",[57,2087,2088],{"class":84},"\"isLoading\"\n",[57,2090,2092,2095,2097],{"class":59,"line":2091},71,[57,2093,2094],{"class":67},"      class",[57,2096,193],{"class":74},[57,2098,2099],{"class":84},"\"blog-view__spinner\"\n",[57,2101,2103],{"class":59,"line":2102},72,[57,2104,2105],{"class":74},"    >\n",[57,2107,2109,2111,2114],{"class":59,"line":2108},73,[57,2110,700],{"class":74},[57,2112,2113],{"class":67},"SpinningLoader ",[57,2115,706],{"class":74},[57,2117,2119,2121,2124],{"class":59,"line":2118},74,[57,2120,712],{"class":74},[57,2122,2123],{"class":67},"div",[57,2125,199],{"class":74},[57,2127,2129,2131],{"class":59,"line":2128},75,[57,2130,681],{"class":74},[57,2132,2133],{"class":67},"section\n",[57,2135,2137,2139],{"class":59,"line":2136},76,[57,2138,2082],{"class":67},[57,2140,2141],{"class":74},"-else\n",[57,2143,2145,2147,2149],{"class":59,"line":2144},77,[57,2146,2094],{"class":67},[57,2148,193],{"class":74},[57,2150,2151],{"class":84},"\"blog-view__container\"\n",[57,2153,2155],{"class":59,"line":2154},78,[57,2156,2105],{"class":74},[57,2158,2160,2162],{"class":59,"line":2159},79,[57,2161,700],{"class":74},[57,2163,2164],{"class":67},"PostSummary\n",[57,2166,2168,2171,2173,2176,2178],{"class":59,"line":2167},80,[57,2169,2170],{"class":67},"        v",[57,2172,1850],{"class":74},[57,2174,2175],{"class":67},"for",[57,2177,193],{"class":74},[57,2179,2180],{"class":84},"\"post in visiblePostsOrderByDateDesc\"\n",[57,2182,2184,2187,2189],{"class":59,"line":2183},81,[57,2185,2186],{"class":67},"        :key",[57,2188,193],{"class":74},[57,2190,2191],{"class":84},"\"post.id\"\n",[57,2193,2195,2198,2200],{"class":59,"line":2194},82,[57,2196,2197],{"class":67},"        class",[57,2199,193],{"class":74},[57,2201,2202],{"class":84},"\"blog-view__post\"\n",[57,2204,2206,2209,2211],{"class":59,"line":2205},83,[57,2207,2208],{"class":67},"        :post",[57,2210,193],{"class":74},[57,2212,2213],{"class":84},"\"post\"\n",[57,2215,2217,2220,2222],{"class":59,"line":2216},84,[57,2218,2219],{"class":67},"        :title",[57,2221,193],{"class":74},[57,2223,2191],{"class":84},[57,2225,2227],{"class":59,"line":2226},85,[57,2228,2229],{"class":74},"      \u002F>\n",[57,2231,2233,2235,2238],{"class":59,"line":2232},86,[57,2234,712],{"class":74},[57,2236,2237],{"class":67},"section",[57,2239,199],{"class":74},[57,2241,2243,2245,2247],{"class":59,"line":2242},87,[57,2244,722],{"class":74},[57,2246,2123],{"class":67},[57,2248,199],{"class":74},[57,2250,2252,2254,2256],{"class":59,"line":2251},88,[57,2253,579],{"class":74},[57,2255,592],{"class":67},[57,2257,199],{"class":74},[10,2259,2260],{},"I implemented the following unit test for it:",[47,2262,2264],{"className":178,"code":2263,"language":180,"meta":52,"style":52},"import {\n  shallowMount,\n  createLocalVue,\n  Wrapper,\n} from '@vue\u002Ftest-utils';\nimport Vuex, {\n  Store,\n} from 'vuex';\nimport {\n  RootState,\n} from '@\u002Fstore\u002Ftypes';\nimport {\n  BlogPost,\n  BlogState,\n} from '@\u002Fstore\u002Fblog\u002Ftypes';\n\nimport PostSummary from '@\u002Fcomponents\u002FPostSummary.vue';\nimport SpinningLoader from '@\u002Fcomponents\u002FSpinningLoader.vue';\nimport BlogView from '@\u002Fviews\u002FBlogView.vue';\n\nconst localVue = createLocalVue();\n\nlocalVue.use(Vuex);\n\ndescribe('BlogView', () => {\n  const actions = {\n    refreshPosts: jest.fn(),\n  };\n\n  const createPost = (id = 'test'): BlogPost => ({\n    id,\n    title: `Post ${id}`,\n    created: 1613845690000,\n    isVisible: true,\n    tags: [],\n  });\n\n  const createDefaultState = (): BlogState => ({\n    post: createPost(),\n    postContent: '',\n    posts: [\n      createPost(),\n    ],\n    selectedPostId: '',\n  });\n\n  const createStore = (\n    state: BlogState = createDefaultState(),\n  ): Store\u003CRootState> => new Vuex.Store({\n    modules: {\n      blog: {\n        actions,\n        namespaced: true,\n        state: {\n          ...state,\n        },\n      },\n    },\n  });\n\n  const createWrapper = (\n    store: Store\u003CRootState> = createStore(),\n  ): Wrapper\u003CBlogView> => shallowMount(\n    BlogView,\n    {\n      localVue,\n      store,\n    },\n  );\n\n  beforeEach(() => {\n    actions.refreshPosts.mockClear();\n  });\n\n  it('should refresh posts when initialized', () => {\n    createWrapper();\n\n    expect(\n      actions.refreshPosts,\n    ).toHaveBeenCalled();\n  });\n\n  it('should render spinning loader before loading completed', () => {\n    const wrapper = createWrapper();\n\n    expect(\n      wrapper.findComponent(SpinningLoader).exists(),\n    ).toBe(true);\n  });\n\n  it('should render one visible post after loading completed', async () => {\n    const wrapper = createWrapper();\n\n    await wrapper.vm.$nextTick();\n    await wrapper.vm.$nextTick();\n\n    expect(\n      wrapper.findComponent({\n        name: 'PostSummary',\n      }).exists(),\n    ).toBe(true);\n  });\n\n  it('should render one visible post when another hidden post provided', async () => {\n    const invisiblePost = createPost('another');\n    invisiblePost.isVisible = false;\n\n    const store = createStore({\n      ...createDefaultState(),\n      posts: [\n        createPost(),\n        invisiblePost,\n      ],\n    });\n    const wrapper = createWrapper(store);\n\n    await wrapper.vm.$nextTick();\n    await wrapper.vm.$nextTick();\n\n    expect(\n      wrapper.findAllComponents(PostSummary).length,\n    ).toEqual(1);\n  });\n\n  it('should have the newest post as first', async () => {\n    const post = createPost();\n    const newestPost = createPost('another');\n    newestPost.created = post.created + 60000;\n\n    const store = createStore({\n      ...createDefaultState(),\n      posts: [\n        createPost(),\n        newestPost,\n      ],\n    });\n    const wrapper = createWrapper(store);\n\n    await wrapper.vm.$nextTick();\n    await wrapper.vm.$nextTick();\n\n    expect(\n      wrapper.findComponent(PostSummary).attributes('title'),\n    ).toEqual('another');\n  });\n});\n",[54,2265,2266,2272,2277,2282,2287,2297,2304,2309,2319,2325,2330,2341,2347,2351,2356,2366,2370,2382,2394,2408,2412,2426,2430,2441,2445,2459,2470,2480,2485,2489,2521,2526,2539,2549,2558,2563,2567,2571,2592,2602,2611,2616,2623,2628,2637,2641,2645,2657,2672,2702,2707,2712,2717,2726,2731,2739,2744,2749,2753,2757,2761,2771,2792,2814,2819,2824,2829,2834,2838,2843,2847,2859,2869,2873,2877,2892,2899,2903,2909,2914,2923,2927,2931,2946,2958,2962,2968,2982,2994,2999,3004,3026,3039,3044,3058,3069,3074,3081,3090,3101,3111,3124,3129,3134,3154,3173,3185,3190,3204,3214,3220,3228,3234,3240,3245,3259,3264,3275,3286,3291,3298,3314,3328,3333,3338,3358,3372,3390,3409,3414,3427,3436,3441,3448,3454,3459,3464,3477,3482,3493,3504,3509,3516,3534,3547,3552],{"__ignoreMap":52},[57,2267,2268,2270],{"class":59,"line":60},[57,2269,204],{"class":74},[57,2271,78],{"class":67},[57,2273,2274],{"class":59,"line":81},[57,2275,2276],{"class":67},"  shallowMount,\n",[57,2278,2279],{"class":59,"line":91},[57,2280,2281],{"class":67},"  createLocalVue,\n",[57,2283,2284],{"class":59,"line":100},[57,2285,2286],{"class":67},"  Wrapper,\n",[57,2288,2289,2291,2293,2295],{"class":59,"line":108},[57,2290,216],{"class":67},[57,2292,219],{"class":74},[57,2294,799],{"class":84},[57,2296,225],{"class":67},[57,2298,2299,2301],{"class":59,"line":116},[57,2300,204],{"class":74},[57,2302,2303],{"class":67}," Vuex, {\n",[57,2305,2306],{"class":59,"line":124},[57,2307,2308],{"class":67},"  Store,\n",[57,2310,2311,2313,2315,2317],{"class":59,"line":130},[57,2312,216],{"class":67},[57,2314,219],{"class":74},[57,2316,1560],{"class":84},[57,2318,225],{"class":67},[57,2320,2321,2323],{"class":59,"line":136},[57,2322,204],{"class":74},[57,2324,78],{"class":67},[57,2326,2327],{"class":59,"line":269},[57,2328,2329],{"class":67},"  RootState,\n",[57,2331,2332,2334,2336,2339],{"class":59,"line":275},[57,2333,216],{"class":67},[57,2335,219],{"class":74},[57,2337,2338],{"class":84}," '@\u002Fstore\u002Ftypes'",[57,2340,225],{"class":67},[57,2342,2343,2345],{"class":59,"line":286},[57,2344,204],{"class":74},[57,2346,78],{"class":67},[57,2348,2349],{"class":59,"line":292},[57,2350,1581],{"class":67},[57,2352,2353],{"class":59,"line":298},[57,2354,2355],{"class":67},"  BlogState,\n",[57,2357,2358,2360,2362,2364],{"class":59,"line":303},[57,2359,216],{"class":67},[57,2361,219],{"class":74},[57,2363,1590],{"class":84},[57,2365,225],{"class":67},[57,2367,2368],{"class":59,"line":312},[57,2369,231],{"emptyLinePlaceholder":230},[57,2371,2372,2374,2376,2378,2380],{"class":59,"line":317},[57,2373,204],{"class":74},[57,2375,1519],{"class":67},[57,2377,219],{"class":74},[57,2379,1524],{"class":84},[57,2381,225],{"class":67},[57,2383,2384,2386,2388,2390,2392],{"class":59,"line":323},[57,2385,204],{"class":74},[57,2387,1533],{"class":67},[57,2389,219],{"class":74},[57,2391,1538],{"class":84},[57,2393,225],{"class":67},[57,2395,2396,2398,2401,2403,2406],{"class":59,"line":329},[57,2397,204],{"class":74},[57,2399,2400],{"class":67}," BlogView ",[57,2402,219],{"class":74},[57,2404,2405],{"class":84}," '@\u002Fviews\u002FBlogView.vue'",[57,2407,225],{"class":67},[57,2409,2410],{"class":59,"line":339},[57,2411,231],{"emptyLinePlaceholder":230},[57,2413,2414,2416,2419,2421,2424],{"class":59,"line":344},[57,2415,810],{"class":74},[57,2417,2418],{"class":63}," localVue",[57,2420,75],{"class":74},[57,2422,2423],{"class":242}," createLocalVue",[57,2425,968],{"class":67},[57,2427,2428],{"class":59,"line":350},[57,2429,231],{"emptyLinePlaceholder":230},[57,2431,2432,2435,2438],{"class":59,"line":355},[57,2433,2434],{"class":67},"localVue.",[57,2436,2437],{"class":242},"use",[57,2439,2440],{"class":67},"(Vuex);\n",[57,2442,2443],{"class":59,"line":365},[57,2444,231],{"emptyLinePlaceholder":230},[57,2446,2447,2449,2451,2453,2455,2457],{"class":59,"line":370},[57,2448,869],{"class":242},[57,2450,532],{"class":67},[57,2452,1657],{"class":84},[57,2454,876],{"class":67},[57,2456,879],{"class":74},[57,2458,78],{"class":67},[57,2460,2461,2463,2466,2468],{"class":59,"line":376},[57,2462,886],{"class":74},[57,2464,2465],{"class":63}," actions",[57,2467,75],{"class":74},[57,2469,78],{"class":67},[57,2471,2472,2475,2478],{"class":59,"line":382},[57,2473,2474],{"class":67},"    refreshPosts: jest.",[57,2476,2477],{"class":242},"fn",[57,2479,1002],{"class":67},[57,2481,2482],{"class":59,"line":392},[57,2483,2484],{"class":67},"  };\n",[57,2486,2487],{"class":59,"line":397},[57,2488,231],{"emptyLinePlaceholder":230},[57,2490,2491,2493,2496,2498,2500,2503,2505,2508,2511,2513,2515,2518],{"class":59,"line":403},[57,2492,886],{"class":74},[57,2494,2495],{"class":242}," createPost",[57,2497,75],{"class":74},[57,2499,515],{"class":67},[57,2501,2502],{"class":896},"id",[57,2504,75],{"class":74},[57,2506,2507],{"class":84}," 'test'",[57,2509,2510],{"class":67},")",[57,2512,418],{"class":74},[57,2514,1805],{"class":242},[57,2516,2517],{"class":74}," =>",[57,2519,2520],{"class":67}," ({\n",[57,2522,2523],{"class":59,"line":409},[57,2524,2525],{"class":67},"    id,\n",[57,2527,2528,2530,2533,2535,2537],{"class":59,"line":427},[57,2529,1688],{"class":67},[57,2531,2532],{"class":84},"`Post ${",[57,2534,2502],{"class":67},[57,2536,458],{"class":84},[57,2538,97],{"class":67},[57,2540,2541,2544,2547],{"class":59,"line":436},[57,2542,2543],{"class":67},"    created: ",[57,2545,2546],{"class":63},"1613845690000",[57,2548,97],{"class":67},[57,2550,2551,2554,2556],{"class":59,"line":444},[57,2552,2553],{"class":67},"    isVisible: ",[57,2555,1015],{"class":63},[57,2557,97],{"class":67},[57,2559,2560],{"class":59,"line":463},[57,2561,2562],{"class":67},"    tags: [],\n",[57,2564,2565],{"class":59,"line":469},[57,2566,933],{"class":67},[57,2568,2569],{"class":59,"line":474},[57,2570,231],{"emptyLinePlaceholder":230},[57,2572,2573,2575,2578,2580,2583,2585,2588,2590],{"class":59,"line":489},[57,2574,886],{"class":74},[57,2576,2577],{"class":242}," createDefaultState",[57,2579,75],{"class":74},[57,2581,2582],{"class":67}," ()",[57,2584,418],{"class":74},[57,2586,2587],{"class":242}," BlogState",[57,2589,2517],{"class":74},[57,2591,2520],{"class":67},[57,2593,2594,2597,2600],{"class":59,"line":509},[57,2595,2596],{"class":67},"    post: ",[57,2598,2599],{"class":242},"createPost",[57,2601,1002],{"class":67},[57,2603,2604,2607,2609],{"class":59,"line":523},[57,2605,2606],{"class":67},"    postContent: ",[57,2608,360],{"class":84},[57,2610,97],{"class":67},[57,2612,2613],{"class":59,"line":541},[57,2614,2615],{"class":67},"    posts: [\n",[57,2617,2618,2621],{"class":59,"line":547},[57,2619,2620],{"class":242},"      createPost",[57,2622,1002],{"class":67},[57,2624,2625],{"class":59,"line":552},[57,2626,2627],{"class":67},"    ],\n",[57,2629,2630,2633,2635],{"class":59,"line":560},[57,2631,2632],{"class":67},"    selectedPostId: ",[57,2634,360],{"class":84},[57,2636,97],{"class":67},[57,2638,2639],{"class":59,"line":565},[57,2640,933],{"class":67},[57,2642,2643],{"class":59,"line":570},[57,2644,231],{"emptyLinePlaceholder":230},[57,2646,2647,2649,2652,2654],{"class":59,"line":576},[57,2648,886],{"class":74},[57,2650,2651],{"class":242}," createStore",[57,2653,75],{"class":74},[57,2655,2656],{"class":67}," (\n",[57,2658,2659,2662,2664,2666,2668,2670],{"class":59,"line":587},[57,2660,2661],{"class":896},"    state",[57,2663,418],{"class":74},[57,2665,2587],{"class":242},[57,2667,75],{"class":74},[57,2669,2577],{"class":242},[57,2671,1002],{"class":67},[57,2673,2674,2677,2679,2682,2684,2687,2689,2691,2694,2697,2700],{"class":59,"line":597},[57,2675,2676],{"class":67},"  )",[57,2678,418],{"class":74},[57,2680,2681],{"class":242}," Store",[57,2683,187],{"class":67},[57,2685,2686],{"class":242},"RootState",[57,2688,915],{"class":67},[57,2690,879],{"class":74},[57,2692,2693],{"class":74}," new",[57,2695,2696],{"class":67}," Vuex.",[57,2698,2699],{"class":242},"Store",[57,2701,246],{"class":67},[57,2703,2704],{"class":59,"line":606},[57,2705,2706],{"class":67},"    modules: {\n",[57,2708,2709],{"class":59,"line":617},[57,2710,2711],{"class":67},"      blog: {\n",[57,2713,2714],{"class":59,"line":628},[57,2715,2716],{"class":67},"        actions,\n",[57,2718,2719,2722,2724],{"class":59,"line":639},[57,2720,2721],{"class":67},"        namespaced: ",[57,2723,1015],{"class":63},[57,2725,97],{"class":67},[57,2727,2728],{"class":59,"line":650},[57,2729,2730],{"class":67},"        state: {\n",[57,2732,2733,2736],{"class":59,"line":661},[57,2734,2735],{"class":74},"          ...",[57,2737,2738],{"class":67},"state,\n",[57,2740,2741],{"class":59,"line":672},[57,2742,2743],{"class":67},"        },\n",[57,2745,2746],{"class":59,"line":678},[57,2747,2748],{"class":67},"      },\n",[57,2750,2751],{"class":59,"line":697},[57,2752,289],{"class":67},[57,2754,2755],{"class":59,"line":709},[57,2756,933],{"class":67},[57,2758,2759],{"class":59,"line":719},[57,2760,231],{"emptyLinePlaceholder":230},[57,2762,2763,2765,2767,2769],{"class":59,"line":730},[57,2764,886],{"class":74},[57,2766,889],{"class":242},[57,2768,75],{"class":74},[57,2770,2656],{"class":67},[57,2772,2773,2776,2778,2780,2782,2784,2786,2788,2790],{"class":59,"line":1334},[57,2774,2775],{"class":896},"    store",[57,2777,418],{"class":74},[57,2779,2681],{"class":242},[57,2781,187],{"class":67},[57,2783,2686],{"class":242},[57,2785,915],{"class":67},[57,2787,193],{"class":74},[57,2789,2651],{"class":242},[57,2791,1002],{"class":67},[57,2793,2794,2796,2798,2801,2803,2806,2808,2810,2812],{"class":59,"line":1344},[57,2795,2676],{"class":67},[57,2797,418],{"class":74},[57,2799,2800],{"class":242}," Wrapper",[57,2802,187],{"class":67},[57,2804,2805],{"class":242},"BlogView",[57,2807,915],{"class":67},[57,2809,879],{"class":74},[57,2811,920],{"class":242},[57,2813,980],{"class":67},[57,2815,2816],{"class":59,"line":1349},[57,2817,2818],{"class":67},"    BlogView,\n",[57,2820,2821],{"class":59,"line":1354},[57,2822,2823],{"class":67},"    {\n",[57,2825,2826],{"class":59,"line":1361},[57,2827,2828],{"class":67},"      localVue,\n",[57,2830,2831],{"class":59,"line":1379},[57,2832,2833],{"class":67},"      store,\n",[57,2835,2836],{"class":59,"line":1392},[57,2837,289],{"class":67},[57,2839,2840],{"class":59,"line":1397},[57,2841,2842],{"class":67},"  );\n",[57,2844,2845],{"class":59,"line":2079},[57,2846,231],{"emptyLinePlaceholder":230},[57,2848,2849,2852,2855,2857],{"class":59,"line":2091},[57,2850,2851],{"class":242},"  beforeEach",[57,2853,2854],{"class":67},"(() ",[57,2856,879],{"class":74},[57,2858,78],{"class":67},[57,2860,2861,2864,2867],{"class":59,"line":2102},[57,2862,2863],{"class":67},"    actions.refreshPosts.",[57,2865,2866],{"class":242},"mockClear",[57,2868,968],{"class":67},[57,2870,2871],{"class":59,"line":2108},[57,2872,933],{"class":67},[57,2874,2875],{"class":59,"line":2118},[57,2876,231],{"emptyLinePlaceholder":230},[57,2878,2879,2881,2883,2886,2888,2890],{"class":59,"line":2128},[57,2880,942],{"class":242},[57,2882,532],{"class":67},[57,2884,2885],{"class":84},"'should refresh posts when initialized'",[57,2887,876],{"class":67},[57,2889,879],{"class":74},[57,2891,78],{"class":67},[57,2893,2894,2897],{"class":59,"line":2136},[57,2895,2896],{"class":242},"    createWrapper",[57,2898,968],{"class":67},[57,2900,2901],{"class":59,"line":2144},[57,2902,231],{"emptyLinePlaceholder":230},[57,2904,2905,2907],{"class":59,"line":2154},[57,2906,977],{"class":242},[57,2908,980],{"class":67},[57,2910,2911],{"class":59,"line":2159},[57,2912,2913],{"class":67},"      actions.refreshPosts,\n",[57,2915,2916,2918,2921],{"class":59,"line":2167},[57,2917,1007],{"class":67},[57,2919,2920],{"class":242},"toHaveBeenCalled",[57,2922,968],{"class":67},[57,2924,2925],{"class":59,"line":2183},[57,2926,933],{"class":67},[57,2928,2929],{"class":59,"line":2194},[57,2930,231],{"emptyLinePlaceholder":230},[57,2932,2933,2935,2937,2940,2942,2944],{"class":59,"line":2205},[57,2934,942],{"class":242},[57,2936,532],{"class":67},[57,2938,2939],{"class":84},"'should render spinning loader before loading completed'",[57,2941,876],{"class":67},[57,2943,879],{"class":74},[57,2945,78],{"class":67},[57,2947,2948,2950,2952,2954,2956],{"class":59,"line":2216},[57,2949,958],{"class":74},[57,2951,961],{"class":63},[57,2953,75],{"class":74},[57,2955,889],{"class":242},[57,2957,968],{"class":67},[57,2959,2960],{"class":59,"line":2226},[57,2961,231],{"emptyLinePlaceholder":230},[57,2963,2964,2966],{"class":59,"line":2232},[57,2965,977],{"class":242},[57,2967,980],{"class":67},[57,2969,2970,2972,2975,2978,2980],{"class":59,"line":2242},[57,2971,985],{"class":67},[57,2973,2974],{"class":242},"findComponent",[57,2976,2977],{"class":67},"(SpinningLoader).",[57,2979,999],{"class":242},[57,2981,1002],{"class":67},[57,2983,2984,2986,2988,2990,2992],{"class":59,"line":2251},[57,2985,1007],{"class":67},[57,2987,1010],{"class":242},[57,2989,532],{"class":67},[57,2991,1015],{"class":63},[57,2993,538],{"class":67},[57,2995,2997],{"class":59,"line":2996},89,[57,2998,933],{"class":67},[57,3000,3002],{"class":59,"line":3001},90,[57,3003,231],{"emptyLinePlaceholder":230},[57,3005,3007,3009,3011,3014,3016,3019,3022,3024],{"class":59,"line":3006},91,[57,3008,942],{"class":242},[57,3010,532],{"class":67},[57,3012,3013],{"class":84},"'should render one visible post after loading completed'",[57,3015,1833],{"class":67},[57,3017,3018],{"class":74},"async",[57,3020,3021],{"class":67}," () ",[57,3023,879],{"class":74},[57,3025,78],{"class":67},[57,3027,3029,3031,3033,3035,3037],{"class":59,"line":3028},92,[57,3030,958],{"class":74},[57,3032,961],{"class":63},[57,3034,75],{"class":74},[57,3036,889],{"class":242},[57,3038,968],{"class":67},[57,3040,3042],{"class":59,"line":3041},93,[57,3043,231],{"emptyLinePlaceholder":230},[57,3045,3047,3050,3053,3056],{"class":59,"line":3046},94,[57,3048,3049],{"class":74},"    await",[57,3051,3052],{"class":67}," wrapper.vm.",[57,3054,3055],{"class":242},"$nextTick",[57,3057,968],{"class":67},[57,3059,3061,3063,3065,3067],{"class":59,"line":3060},95,[57,3062,3049],{"class":74},[57,3064,3052],{"class":67},[57,3066,3055],{"class":242},[57,3068,968],{"class":67},[57,3070,3072],{"class":59,"line":3071},96,[57,3073,231],{"emptyLinePlaceholder":230},[57,3075,3077,3079],{"class":59,"line":3076},97,[57,3078,977],{"class":242},[57,3080,980],{"class":67},[57,3082,3084,3086,3088],{"class":59,"line":3083},98,[57,3085,985],{"class":67},[57,3087,2974],{"class":242},[57,3089,246],{"class":67},[57,3091,3093,3096,3099],{"class":59,"line":3092},99,[57,3094,3095],{"class":67},"        name: ",[57,3097,3098],{"class":84},"'PostSummary'",[57,3100,97],{"class":67},[57,3102,3104,3107,3109],{"class":59,"line":3103},100,[57,3105,3106],{"class":67},"      }).",[57,3108,999],{"class":242},[57,3110,1002],{"class":67},[57,3112,3114,3116,3118,3120,3122],{"class":59,"line":3113},101,[57,3115,1007],{"class":67},[57,3117,1010],{"class":242},[57,3119,532],{"class":67},[57,3121,1015],{"class":63},[57,3123,538],{"class":67},[57,3125,3127],{"class":59,"line":3126},102,[57,3128,933],{"class":67},[57,3130,3132],{"class":59,"line":3131},103,[57,3133,231],{"emptyLinePlaceholder":230},[57,3135,3137,3139,3141,3144,3146,3148,3150,3152],{"class":59,"line":3136},104,[57,3138,942],{"class":242},[57,3140,532],{"class":67},[57,3142,3143],{"class":84},"'should render one visible post when another hidden post provided'",[57,3145,1833],{"class":67},[57,3147,3018],{"class":74},[57,3149,3021],{"class":67},[57,3151,879],{"class":74},[57,3153,78],{"class":67},[57,3155,3157,3159,3162,3164,3166,3168,3171],{"class":59,"line":3156},105,[57,3158,958],{"class":74},[57,3160,3161],{"class":63}," invisiblePost",[57,3163,75],{"class":74},[57,3165,2495],{"class":242},[57,3167,532],{"class":67},[57,3169,3170],{"class":84},"'another'",[57,3172,538],{"class":67},[57,3174,3176,3179,3181,3183],{"class":59,"line":3175},106,[57,3177,3178],{"class":67},"    invisiblePost.isVisible ",[57,3180,193],{"class":74},[57,3182,1948],{"class":63},[57,3184,225],{"class":67},[57,3186,3188],{"class":59,"line":3187},107,[57,3189,231],{"emptyLinePlaceholder":230},[57,3191,3193,3195,3198,3200,3202],{"class":59,"line":3192},108,[57,3194,958],{"class":74},[57,3196,3197],{"class":63}," store",[57,3199,75],{"class":74},[57,3201,2651],{"class":242},[57,3203,246],{"class":67},[57,3205,3207,3209,3212],{"class":59,"line":3206},109,[57,3208,1216],{"class":74},[57,3210,3211],{"class":242},"createDefaultState",[57,3213,1002],{"class":67},[57,3215,3217],{"class":59,"line":3216},110,[57,3218,3219],{"class":67},"      posts: [\n",[57,3221,3223,3226],{"class":59,"line":3222},111,[57,3224,3225],{"class":242},"        createPost",[57,3227,1002],{"class":67},[57,3229,3231],{"class":59,"line":3230},112,[57,3232,3233],{"class":67},"        invisiblePost,\n",[57,3235,3237],{"class":59,"line":3236},113,[57,3238,3239],{"class":67},"      ],\n",[57,3241,3243],{"class":59,"line":3242},114,[57,3244,1234],{"class":67},[57,3246,3248,3250,3252,3254,3256],{"class":59,"line":3247},115,[57,3249,958],{"class":74},[57,3251,961],{"class":63},[57,3253,75],{"class":74},[57,3255,889],{"class":242},[57,3257,3258],{"class":67},"(store);\n",[57,3260,3262],{"class":59,"line":3261},116,[57,3263,231],{"emptyLinePlaceholder":230},[57,3265,3267,3269,3271,3273],{"class":59,"line":3266},117,[57,3268,3049],{"class":74},[57,3270,3052],{"class":67},[57,3272,3055],{"class":242},[57,3274,968],{"class":67},[57,3276,3278,3280,3282,3284],{"class":59,"line":3277},118,[57,3279,3049],{"class":74},[57,3281,3052],{"class":67},[57,3283,3055],{"class":242},[57,3285,968],{"class":67},[57,3287,3289],{"class":59,"line":3288},119,[57,3290,231],{"emptyLinePlaceholder":230},[57,3292,3294,3296],{"class":59,"line":3293},120,[57,3295,977],{"class":242},[57,3297,980],{"class":67},[57,3299,3301,3303,3306,3309,3312],{"class":59,"line":3300},121,[57,3302,985],{"class":67},[57,3304,3305],{"class":242},"findAllComponents",[57,3307,3308],{"class":67},"(PostSummary).",[57,3310,3311],{"class":63},"length",[57,3313,97],{"class":67},[57,3315,3317,3319,3321,3323,3326],{"class":59,"line":3316},122,[57,3318,1007],{"class":67},[57,3320,1092],{"class":242},[57,3322,532],{"class":67},[57,3324,3325],{"class":63},"1",[57,3327,538],{"class":67},[57,3329,3331],{"class":59,"line":3330},123,[57,3332,933],{"class":67},[57,3334,3336],{"class":59,"line":3335},124,[57,3337,231],{"emptyLinePlaceholder":230},[57,3339,3341,3343,3345,3348,3350,3352,3354,3356],{"class":59,"line":3340},125,[57,3342,942],{"class":242},[57,3344,532],{"class":67},[57,3346,3347],{"class":84},"'should have the newest post as first'",[57,3349,1833],{"class":67},[57,3351,3018],{"class":74},[57,3353,3021],{"class":67},[57,3355,879],{"class":74},[57,3357,78],{"class":67},[57,3359,3361,3363,3366,3368,3370],{"class":59,"line":3360},126,[57,3362,958],{"class":74},[57,3364,3365],{"class":63}," post",[57,3367,75],{"class":74},[57,3369,2495],{"class":242},[57,3371,968],{"class":67},[57,3373,3375,3377,3380,3382,3384,3386,3388],{"class":59,"line":3374},127,[57,3376,958],{"class":74},[57,3378,3379],{"class":63}," newestPost",[57,3381,75],{"class":74},[57,3383,2495],{"class":242},[57,3385,532],{"class":67},[57,3387,3170],{"class":84},[57,3389,538],{"class":67},[57,3391,3393,3396,3398,3401,3404,3407],{"class":59,"line":3392},128,[57,3394,3395],{"class":67},"    newestPost.created ",[57,3397,193],{"class":74},[57,3399,3400],{"class":67}," post.created ",[57,3402,3403],{"class":74},"+",[57,3405,3406],{"class":63}," 60000",[57,3408,225],{"class":67},[57,3410,3412],{"class":59,"line":3411},129,[57,3413,231],{"emptyLinePlaceholder":230},[57,3415,3417,3419,3421,3423,3425],{"class":59,"line":3416},130,[57,3418,958],{"class":74},[57,3420,3197],{"class":63},[57,3422,75],{"class":74},[57,3424,2651],{"class":242},[57,3426,246],{"class":67},[57,3428,3430,3432,3434],{"class":59,"line":3429},131,[57,3431,1216],{"class":74},[57,3433,3211],{"class":242},[57,3435,1002],{"class":67},[57,3437,3439],{"class":59,"line":3438},132,[57,3440,3219],{"class":67},[57,3442,3444,3446],{"class":59,"line":3443},133,[57,3445,3225],{"class":242},[57,3447,1002],{"class":67},[57,3449,3451],{"class":59,"line":3450},134,[57,3452,3453],{"class":67},"        newestPost,\n",[57,3455,3457],{"class":59,"line":3456},135,[57,3458,3239],{"class":67},[57,3460,3462],{"class":59,"line":3461},136,[57,3463,1234],{"class":67},[57,3465,3467,3469,3471,3473,3475],{"class":59,"line":3466},137,[57,3468,958],{"class":74},[57,3470,961],{"class":63},[57,3472,75],{"class":74},[57,3474,889],{"class":242},[57,3476,3258],{"class":67},[57,3478,3480],{"class":59,"line":3479},138,[57,3481,231],{"emptyLinePlaceholder":230},[57,3483,3485,3487,3489,3491],{"class":59,"line":3484},139,[57,3486,3049],{"class":74},[57,3488,3052],{"class":67},[57,3490,3055],{"class":242},[57,3492,968],{"class":67},[57,3494,3496,3498,3500,3502],{"class":59,"line":3495},140,[57,3497,3049],{"class":74},[57,3499,3052],{"class":67},[57,3501,3055],{"class":242},[57,3503,968],{"class":67},[57,3505,3507],{"class":59,"line":3506},141,[57,3508,231],{"emptyLinePlaceholder":230},[57,3510,3512,3514],{"class":59,"line":3511},142,[57,3513,977],{"class":242},[57,3515,980],{"class":67},[57,3517,3519,3521,3523,3525,3527,3529,3532],{"class":59,"line":3518},143,[57,3520,985],{"class":67},[57,3522,2974],{"class":242},[57,3524,3308],{"class":67},[57,3526,1077],{"class":242},[57,3528,532],{"class":67},[57,3530,3531],{"class":84},"'title'",[57,3533,1085],{"class":67},[57,3535,3537,3539,3541,3543,3545],{"class":59,"line":3536},144,[57,3538,1007],{"class":67},[57,3540,1092],{"class":242},[57,3542,532],{"class":67},[57,3544,3170],{"class":84},[57,3546,538],{"class":67},[57,3548,3550],{"class":59,"line":3549},145,[57,3551,933],{"class":67},[57,3553,3555],{"class":59,"line":3554},146,[57,3556,1400],{"class":67},[10,3558,3559],{},"Basic rules for creating this file are the following:",[14,3561,3562,3570,3577,3582,3588],{},[17,3563,3564,3565,3567,3568],{},"I only make ",[148,3566,1464],{}," view components. I prefer any dependencies to them\nto be ",[148,3569,163],{},[17,3571,3572,3573,3576],{},"I instantiate ",[54,3574,3575],{},"wrapper"," in each unit test",[17,3578,3572,3579,3576],{},[54,3580,3581],{},"store",[17,3583,3584,3585],{},"All action methods are mocked using ",[54,3586,3587],{},"jest.fn()",[17,3589,3590,3591],{},"I reset actions before each test using ",[54,3592,3593],{},"actions.refreshPosts.mockReset()",[2067,3595,3597],{"id":3596},"recipe-for-mocking-dependencies","Recipe for mocking dependencies",[10,3599,3600],{},"Another case is the need to mock a service (most usually a http service) that\nwe use inside a vue component. Let's take the example below:",[47,3602,3604],{"className":178,"code":3603,"language":180,"meta":52,"style":52},"import gdprService from '@\u002Fservices\u002FlocalStorage';\nimport {\n  defineComponent,\n} from 'vue';\n\nexport default defineComponent({\n  name: 'CookieNotification',\n  data() {\n    return {\n      isVisible: false,\n      googleAnalytics: null,\n    };\n  },\n  mounted() {\n    this.isVisible = !gdprService.isGdprAccepted();\n  },\n  methods: {\n    accept(): void {\n      gdprService.acceptGdpr();\n      this.isVisible = false;\n    },\n    deny(): void {\n      gdprService.acceptGdpr();\n      this.isVisible = false;\n    },\n  },\n});\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003Ctransition name=\"slide-up\">\n    \u003Cdiv\n      v-if=\"isVisible\"\n      class=\"cookie-notification\"\n      qa-ref=\"cookie-notification\"\n    >\n      Hey! This site uses cookies for Google Analytics\n      \u003Cdiv class=\"cookie-notification__actions\">\n        \u003Cbutton\n          class=\"cookie-notification__button cookie-notification__button--ok\"\n          qa-ref=\"cookie-notification-button-yes\"\n          @click=\"accept\"\n        >\n          Got it!\n        \u003C\u002Fbutton>\n        \u003Cbutton\n          class=\"cookie-notification__button cookie-notification__button--no\"\n          qa-ref=\"cookie-notification-button-no\"\n          @click=\"deny\"\n        >\n          No way!\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftransition>\n\u003C\u002Ftemplate>\n\n",[54,3605,3606,3620,3626,3630,3640,3644,3654,3663,3669,3675,3684,3694,3698,3702,3709,3729,3733,3737,3751,3761,3773,3777,3790,3798,3810,3814,3818,3822,3830,3838,3852,3858,3867,3876,3890,3894,3905,3918,3926,3936,3950,3960,3965,3973,3983,3989,3998,4011,4020,4024,4031,4039,4048,4056,4065],{"__ignoreMap":52},[57,3607,3608,3610,3613,3615,3618],{"class":59,"line":60},[57,3609,204],{"class":74},[57,3611,3612],{"class":67}," gdprService ",[57,3614,219],{"class":74},[57,3616,3617],{"class":84}," '@\u002Fservices\u002FlocalStorage'",[57,3619,225],{"class":67},[57,3621,3622,3624],{"class":59,"line":81},[57,3623,204],{"class":74},[57,3625,78],{"class":67},[57,3627,3628],{"class":59,"line":91},[57,3629,211],{"class":67},[57,3631,3632,3634,3636,3638],{"class":59,"line":100},[57,3633,216],{"class":67},[57,3635,219],{"class":74},[57,3637,222],{"class":84},[57,3639,225],{"class":67},[57,3641,3642],{"class":59,"line":108},[57,3643,231],{"emptyLinePlaceholder":230},[57,3645,3646,3648,3650,3652],{"class":59,"line":116},[57,3647,236],{"class":74},[57,3649,239],{"class":74},[57,3651,243],{"class":242},[57,3653,246],{"class":67},[57,3655,3656,3658,3661],{"class":59,"line":124},[57,3657,251],{"class":67},[57,3659,3660],{"class":84},"'CookieNotification'",[57,3662,97],{"class":67},[57,3664,3665,3667],{"class":59,"line":130},[57,3666,1702],{"class":242},[57,3668,1705],{"class":67},[57,3670,3671,3673],{"class":59,"line":136},[57,3672,1710],{"class":74},[57,3674,78],{"class":67},[57,3676,3677,3680,3682],{"class":59,"line":269},[57,3678,3679],{"class":67},"      isVisible: ",[57,3681,387],{"class":63},[57,3683,97],{"class":67},[57,3685,3686,3689,3692],{"class":59,"line":275},[57,3687,3688],{"class":67},"      googleAnalytics: ",[57,3690,3691],{"class":63},"null",[57,3693,97],{"class":67},[57,3695,3696],{"class":59,"line":286},[57,3697,1726],{"class":67},[57,3699,3700],{"class":59,"line":292},[57,3701,400],{"class":67},[57,3703,3704,3707],{"class":59,"line":298},[57,3705,3706],{"class":242},"  mounted",[57,3708,1705],{"class":67},[57,3710,3711,3713,3716,3718,3721,3724,3727],{"class":59,"line":303},[57,3712,1895],{"class":63},[57,3714,3715],{"class":67},".isVisible ",[57,3717,193],{"class":74},[57,3719,3720],{"class":74}," !",[57,3722,3723],{"class":67},"gdprService.",[57,3725,3726],{"class":242},"isGdprAccepted",[57,3728,968],{"class":67},[57,3730,3731],{"class":59,"line":312},[57,3732,400],{"class":67},[57,3734,3735],{"class":59,"line":317},[57,3736,1964],{"class":67},[57,3738,3739,3742,3744,3746,3749],{"class":59,"line":323},[57,3740,3741],{"class":242},"    accept",[57,3743,415],{"class":67},[57,3745,418],{"class":74},[57,3747,3748],{"class":63}," void",[57,3750,78],{"class":67},[57,3752,3753,3756,3759],{"class":59,"line":329},[57,3754,3755],{"class":67},"      gdprService.",[57,3757,3758],{"class":242},"acceptGdpr",[57,3760,968],{"class":67},[57,3762,3763,3765,3767,3769,3771],{"class":59,"line":339},[57,3764,1941],{"class":63},[57,3766,3715],{"class":67},[57,3768,193],{"class":74},[57,3770,1948],{"class":63},[57,3772,225],{"class":67},[57,3774,3775],{"class":59,"line":344},[57,3776,289],{"class":67},[57,3778,3779,3782,3784,3786,3788],{"class":59,"line":350},[57,3780,3781],{"class":242},"    deny",[57,3783,415],{"class":67},[57,3785,418],{"class":74},[57,3787,3748],{"class":63},[57,3789,78],{"class":67},[57,3791,3792,3794,3796],{"class":59,"line":355},[57,3793,3755],{"class":67},[57,3795,3758],{"class":242},[57,3797,968],{"class":67},[57,3799,3800,3802,3804,3806,3808],{"class":59,"line":365},[57,3801,1941],{"class":63},[57,3803,3715],{"class":67},[57,3805,193],{"class":74},[57,3807,1948],{"class":63},[57,3809,225],{"class":67},[57,3811,3812],{"class":59,"line":370},[57,3813,289],{"class":67},[57,3815,3816],{"class":59,"line":376},[57,3817,400],{"class":67},[57,3819,3820],{"class":59,"line":382},[57,3821,1400],{"class":67},[57,3823,3824,3826,3828],{"class":59,"line":392},[57,3825,579],{"class":74},[57,3827,582],{"class":67},[57,3829,199],{"class":74},[57,3831,3832,3834,3836],{"class":59,"line":397},[57,3833,187],{"class":67},[57,3835,592],{"class":242},[57,3837,199],{"class":67},[57,3839,3840,3842,3845,3847,3850],{"class":59,"line":403},[57,3841,600],{"class":74},[57,3843,3844],{"class":67},"transition name",[57,3846,193],{"class":74},[57,3848,3849],{"class":84},"\"slide-up\"",[57,3851,199],{"class":74},[57,3853,3854,3856],{"class":59,"line":409},[57,3855,681],{"class":74},[57,3857,2076],{"class":67},[57,3859,3860,3862,3864],{"class":59,"line":427},[57,3861,2082],{"class":67},[57,3863,2085],{"class":74},[57,3865,3866],{"class":84},"\"isVisible\"\n",[57,3868,3869,3871,3873],{"class":59,"line":436},[57,3870,2094],{"class":67},[57,3872,193],{"class":74},[57,3874,3875],{"class":84},"\"cookie-notification\"\n",[57,3877,3878,3881,3883,3886,3888],{"class":59,"line":444},[57,3879,3880],{"class":67},"      qa",[57,3882,1850],{"class":74},[57,3884,3885],{"class":67},"ref",[57,3887,193],{"class":74},[57,3889,3875],{"class":84},[57,3891,3892],{"class":59,"line":463},[57,3893,2105],{"class":74},[57,3895,3896,3899,3902],{"class":59,"line":469},[57,3897,3898],{"class":67},"      Hey",[57,3900,3901],{"class":74},"!",[57,3903,3904],{"class":67}," This site uses cookies for Google Analytics\n",[57,3906,3907,3909,3911,3913,3916],{"class":59,"line":474},[57,3908,700],{"class":74},[57,3910,2019],{"class":67},[57,3912,193],{"class":74},[57,3914,3915],{"class":84},"\"cookie-notification__actions\"",[57,3917,199],{"class":74},[57,3919,3920,3923],{"class":59,"line":489},[57,3921,3922],{"class":74},"        \u003C",[57,3924,3925],{"class":67},"button\n",[57,3927,3928,3931,3933],{"class":59,"line":509},[57,3929,3930],{"class":67},"          class",[57,3932,193],{"class":74},[57,3934,3935],{"class":84},"\"cookie-notification__button cookie-notification__button--ok\"\n",[57,3937,3938,3941,3943,3945,3947],{"class":59,"line":523},[57,3939,3940],{"class":67},"          qa",[57,3942,1850],{"class":74},[57,3944,3885],{"class":67},[57,3946,193],{"class":74},[57,3948,3949],{"class":84},"\"cookie-notification-button-yes\"\n",[57,3951,3952,3955,3957],{"class":59,"line":541},[57,3953,3954],{"class":67},"          @click",[57,3956,193],{"class":74},[57,3958,3959],{"class":84},"\"accept\"\n",[57,3961,3962],{"class":59,"line":547},[57,3963,3964],{"class":74},"        >\n",[57,3966,3967,3970],{"class":59,"line":552},[57,3968,3969],{"class":67},"          Got it",[57,3971,3972],{"class":74},"!\n",[57,3974,3975,3978,3981],{"class":59,"line":560},[57,3976,3977],{"class":74},"        \u003C\u002F",[57,3979,3980],{"class":67},"button",[57,3982,199],{"class":74},[57,3984,3985,3987],{"class":59,"line":565},[57,3986,3922],{"class":74},[57,3988,3925],{"class":67},[57,3990,3991,3993,3995],{"class":59,"line":570},[57,3992,3930],{"class":67},[57,3994,193],{"class":74},[57,3996,3997],{"class":84},"\"cookie-notification__button cookie-notification__button--no\"\n",[57,3999,4000,4002,4004,4006,4008],{"class":59,"line":576},[57,4001,3940],{"class":67},[57,4003,1850],{"class":74},[57,4005,3885],{"class":67},[57,4007,193],{"class":74},[57,4009,4010],{"class":84},"\"cookie-notification-button-no\"\n",[57,4012,4013,4015,4017],{"class":59,"line":587},[57,4014,3954],{"class":67},[57,4016,193],{"class":74},[57,4018,4019],{"class":84},"\"deny\"\n",[57,4021,4022],{"class":59,"line":597},[57,4023,3964],{"class":74},[57,4025,4026,4029],{"class":59,"line":606},[57,4027,4028],{"class":67},"          No way",[57,4030,3972],{"class":74},[57,4032,4033,4035,4037],{"class":59,"line":617},[57,4034,3977],{"class":74},[57,4036,3980],{"class":67},[57,4038,199],{"class":74},[57,4040,4041,4044,4046],{"class":59,"line":628},[57,4042,4043],{"class":74},"      \u003C\u002F",[57,4045,2123],{"class":67},[57,4047,199],{"class":74},[57,4049,4050,4052,4054],{"class":59,"line":639},[57,4051,712],{"class":74},[57,4053,2123],{"class":67},[57,4055,199],{"class":74},[57,4057,4058,4060,4063],{"class":59,"line":650},[57,4059,722],{"class":74},[57,4061,4062],{"class":67},"transition",[57,4064,199],{"class":74},[57,4066,4067,4069,4071],{"class":59,"line":661},[57,4068,579],{"class":74},[57,4070,592],{"class":67},[57,4072,199],{"class":74},[10,4074,4075],{},"And this is the unit test I have written for this:",[47,4077,4079],{"className":178,"code":4078,"language":180,"meta":52,"style":52},"import {\n  ComponentPublicInstance,\n} from 'vue';\nimport CookieNotification from '@\u002Fcomponents\u002FCookieNotification.vue';\nimport {\n  shallowMount, VueWrapper,\n} from '@vue\u002Ftest-utils';\nimport {\n  mocked,\n} from 'ts-jest';\n\nimport gdprService from '@\u002Fservices\u002FlocalStorage';\n\njest.mock('@\u002Fservices\u002FlocalStorage');\n\ndescribe('CookieNotification', () => {\n  const $ga = {\n    enable: jest.fn(),\n    page: jest.fn(),\n    disable: jest.fn(),\n  };\n\n  const mockedGdprService = mocked(gdprService);\n\n  const getWrapper = (): VueWrapper\u003CComponentPublicInstance> => shallowMount(CookieNotification, {\n    global: {\n      mocks: {\n        $ga,\n      },\n    },\n  });\n\n  beforeEach(() => {\n    mockedGdprService.acceptGdpr.mockReset();\n    mockedGdprService.isGdprAccepted.mockReset();\n  });\n\n  it('hides the cookie notification by default', () => {\n    mockedGdprService.isGdprAccepted.mockReturnValue(true);\n    const wrapper = getWrapper();\n\n    expect(\n      wrapper.find('.cookie-notification').exists(),\n    ).toBe(false);\n  });\n\n  it('displays the cookie notification after is mounted', async () => {\n    mockedGdprService.isGdprAccepted.mockReturnValue(false);\n    const wrapper = getWrapper();\n    await wrapper.vm.$nextTick();\n    expect(mockedGdprService.isGdprAccepted).toHaveBeenCalled();\n    expect(\n      wrapper.find('.cookie-notification').exists(),\n    ).toBe(true);\n  });\n\n  it('closes the cookie notification after we click OK button', async () => {\n    mockedGdprService.isGdprAccepted.mockReturnValue(false);\n    const wrapper = getWrapper();\n\n    await wrapper.vm.$nextTick();\n\n    const button = wrapper.find('.cookie-notification__button--ok');\n\n    button.trigger('click');\n    await wrapper.vm.$nextTick();\n\n    expect(\n      wrapper.find('.cookie-notification').exists(),\n    ).toBe(false);\n  });\n\n  it('closes the cookie notification after we click NO WAY button', async () => {\n    mockedGdprService.isGdprAccepted.mockReturnValue(false);\n    const wrapper = getWrapper();\n\n    await wrapper.vm.$nextTick();\n\n    const button = wrapper.find('.cookie-notification__button--no');\n    button.trigger('click');\n\n    await wrapper.vm.$nextTick();\n\n    expect(\n      wrapper.find('.cookie-notification').exists(),\n    ).toBe(false);\n  });\n})\n",[54,4080,4081,4087,4091,4101,4115,4121,4125,4135,4141,4146,4157,4161,4173,4177,4192,4196,4210,4221,4230,4239,4248,4252,4256,4271,4275,4303,4308,4313,4318,4322,4326,4330,4334,4344,4354,4363,4367,4371,4386,4399,4411,4415,4421,4438,4450,4454,4458,4477,4489,4501,4511,4522,4528,4544,4556,4560,4564,4583,4595,4607,4611,4621,4625,4646,4650,4665,4675,4679,4685,4701,4713,4717,4721,4740,4752,4764,4768,4778,4782,4801,4813,4817,4827,4831,4837,4853,4865,4869],{"__ignoreMap":52},[57,4082,4083,4085],{"class":59,"line":60},[57,4084,204],{"class":74},[57,4086,78],{"class":67},[57,4088,4089],{"class":59,"line":81},[57,4090,755],{"class":67},[57,4092,4093,4095,4097,4099],{"class":59,"line":91},[57,4094,216],{"class":67},[57,4096,219],{"class":74},[57,4098,222],{"class":84},[57,4100,225],{"class":67},[57,4102,4103,4105,4108,4110,4113],{"class":59,"line":100},[57,4104,204],{"class":74},[57,4106,4107],{"class":67}," CookieNotification ",[57,4109,219],{"class":74},[57,4111,4112],{"class":84}," '@\u002Fcomponents\u002FCookieNotification.vue'",[57,4114,225],{"class":67},[57,4116,4117,4119],{"class":59,"line":108},[57,4118,204],{"class":74},[57,4120,78],{"class":67},[57,4122,4123],{"class":59,"line":116},[57,4124,790],{"class":67},[57,4126,4127,4129,4131,4133],{"class":59,"line":124},[57,4128,216],{"class":67},[57,4130,219],{"class":74},[57,4132,799],{"class":84},[57,4134,225],{"class":67},[57,4136,4137,4139],{"class":59,"line":130},[57,4138,204],{"class":74},[57,4140,78],{"class":67},[57,4142,4143],{"class":59,"line":136},[57,4144,4145],{"class":67},"  mocked,\n",[57,4147,4148,4150,4152,4155],{"class":59,"line":269},[57,4149,216],{"class":67},[57,4151,219],{"class":74},[57,4153,4154],{"class":84}," 'ts-jest'",[57,4156,225],{"class":67},[57,4158,4159],{"class":59,"line":275},[57,4160,231],{"emptyLinePlaceholder":230},[57,4162,4163,4165,4167,4169,4171],{"class":59,"line":286},[57,4164,204],{"class":74},[57,4166,3612],{"class":67},[57,4168,219],{"class":74},[57,4170,3617],{"class":84},[57,4172,225],{"class":67},[57,4174,4175],{"class":59,"line":292},[57,4176,231],{"emptyLinePlaceholder":230},[57,4178,4179,4182,4185,4187,4190],{"class":59,"line":298},[57,4180,4181],{"class":67},"jest.",[57,4183,4184],{"class":242},"mock",[57,4186,532],{"class":67},[57,4188,4189],{"class":84},"'@\u002Fservices\u002FlocalStorage'",[57,4191,538],{"class":67},[57,4193,4194],{"class":59,"line":303},[57,4195,231],{"emptyLinePlaceholder":230},[57,4197,4198,4200,4202,4204,4206,4208],{"class":59,"line":312},[57,4199,869],{"class":242},[57,4201,532],{"class":67},[57,4203,3660],{"class":84},[57,4205,876],{"class":67},[57,4207,879],{"class":74},[57,4209,78],{"class":67},[57,4211,4212,4214,4217,4219],{"class":59,"line":317},[57,4213,886],{"class":74},[57,4215,4216],{"class":63}," $ga",[57,4218,75],{"class":74},[57,4220,78],{"class":67},[57,4222,4223,4226,4228],{"class":59,"line":323},[57,4224,4225],{"class":67},"    enable: jest.",[57,4227,2477],{"class":242},[57,4229,1002],{"class":67},[57,4231,4232,4235,4237],{"class":59,"line":329},[57,4233,4234],{"class":67},"    page: jest.",[57,4236,2477],{"class":242},[57,4238,1002],{"class":67},[57,4240,4241,4244,4246],{"class":59,"line":339},[57,4242,4243],{"class":67},"    disable: jest.",[57,4245,2477],{"class":242},[57,4247,1002],{"class":67},[57,4249,4250],{"class":59,"line":344},[57,4251,2484],{"class":67},[57,4253,4254],{"class":59,"line":350},[57,4255,231],{"emptyLinePlaceholder":230},[57,4257,4258,4260,4263,4265,4268],{"class":59,"line":355},[57,4259,886],{"class":74},[57,4261,4262],{"class":63}," mockedGdprService",[57,4264,75],{"class":74},[57,4266,4267],{"class":242}," mocked",[57,4269,4270],{"class":67},"(gdprService);\n",[57,4272,4273],{"class":59,"line":365},[57,4274,231],{"emptyLinePlaceholder":230},[57,4276,4277,4279,4282,4284,4286,4288,4290,4292,4294,4296,4298,4300],{"class":59,"line":370},[57,4278,886],{"class":74},[57,4280,4281],{"class":242}," getWrapper",[57,4283,75],{"class":74},[57,4285,2582],{"class":67},[57,4287,418],{"class":74},[57,4289,907],{"class":242},[57,4291,187],{"class":67},[57,4293,912],{"class":242},[57,4295,915],{"class":67},[57,4297,879],{"class":74},[57,4299,920],{"class":242},[57,4301,4302],{"class":67},"(CookieNotification, {\n",[57,4304,4305],{"class":59,"line":376},[57,4306,4307],{"class":67},"    global: {\n",[57,4309,4310],{"class":59,"line":382},[57,4311,4312],{"class":67},"      mocks: {\n",[57,4314,4315],{"class":59,"line":392},[57,4316,4317],{"class":67},"        $ga,\n",[57,4319,4320],{"class":59,"line":397},[57,4321,2748],{"class":67},[57,4323,4324],{"class":59,"line":403},[57,4325,289],{"class":67},[57,4327,4328],{"class":59,"line":409},[57,4329,933],{"class":67},[57,4331,4332],{"class":59,"line":427},[57,4333,231],{"emptyLinePlaceholder":230},[57,4335,4336,4338,4340,4342],{"class":59,"line":436},[57,4337,2851],{"class":242},[57,4339,2854],{"class":67},[57,4341,879],{"class":74},[57,4343,78],{"class":67},[57,4345,4346,4349,4352],{"class":59,"line":444},[57,4347,4348],{"class":67},"    mockedGdprService.acceptGdpr.",[57,4350,4351],{"class":242},"mockReset",[57,4353,968],{"class":67},[57,4355,4356,4359,4361],{"class":59,"line":463},[57,4357,4358],{"class":67},"    mockedGdprService.isGdprAccepted.",[57,4360,4351],{"class":242},[57,4362,968],{"class":67},[57,4364,4365],{"class":59,"line":469},[57,4366,933],{"class":67},[57,4368,4369],{"class":59,"line":474},[57,4370,231],{"emptyLinePlaceholder":230},[57,4372,4373,4375,4377,4380,4382,4384],{"class":59,"line":489},[57,4374,942],{"class":242},[57,4376,532],{"class":67},[57,4378,4379],{"class":84},"'hides the cookie notification by default'",[57,4381,876],{"class":67},[57,4383,879],{"class":74},[57,4385,78],{"class":67},[57,4387,4388,4390,4393,4395,4397],{"class":59,"line":509},[57,4389,4358],{"class":67},[57,4391,4392],{"class":242},"mockReturnValue",[57,4394,532],{"class":67},[57,4396,1015],{"class":63},[57,4398,538],{"class":67},[57,4400,4401,4403,4405,4407,4409],{"class":59,"line":523},[57,4402,958],{"class":74},[57,4404,961],{"class":63},[57,4406,75],{"class":74},[57,4408,4281],{"class":242},[57,4410,968],{"class":67},[57,4412,4413],{"class":59,"line":541},[57,4414,231],{"emptyLinePlaceholder":230},[57,4416,4417,4419],{"class":59,"line":547},[57,4418,977],{"class":242},[57,4420,980],{"class":67},[57,4422,4423,4425,4427,4429,4432,4434,4436],{"class":59,"line":552},[57,4424,985],{"class":67},[57,4426,988],{"class":242},[57,4428,532],{"class":67},[57,4430,4431],{"class":84},"'.cookie-notification'",[57,4433,996],{"class":67},[57,4435,999],{"class":242},[57,4437,1002],{"class":67},[57,4439,4440,4442,4444,4446,4448],{"class":59,"line":560},[57,4441,1007],{"class":67},[57,4443,1010],{"class":242},[57,4445,532],{"class":67},[57,4447,387],{"class":63},[57,4449,538],{"class":67},[57,4451,4452],{"class":59,"line":565},[57,4453,933],{"class":67},[57,4455,4456],{"class":59,"line":570},[57,4457,231],{"emptyLinePlaceholder":230},[57,4459,4460,4462,4464,4467,4469,4471,4473,4475],{"class":59,"line":576},[57,4461,942],{"class":242},[57,4463,532],{"class":67},[57,4465,4466],{"class":84},"'displays the cookie notification after is mounted'",[57,4468,1833],{"class":67},[57,4470,3018],{"class":74},[57,4472,3021],{"class":67},[57,4474,879],{"class":74},[57,4476,78],{"class":67},[57,4478,4479,4481,4483,4485,4487],{"class":59,"line":587},[57,4480,4358],{"class":67},[57,4482,4392],{"class":242},[57,4484,532],{"class":67},[57,4486,387],{"class":63},[57,4488,538],{"class":67},[57,4490,4491,4493,4495,4497,4499],{"class":59,"line":597},[57,4492,958],{"class":74},[57,4494,961],{"class":63},[57,4496,75],{"class":74},[57,4498,4281],{"class":242},[57,4500,968],{"class":67},[57,4502,4503,4505,4507,4509],{"class":59,"line":606},[57,4504,3049],{"class":74},[57,4506,3052],{"class":67},[57,4508,3055],{"class":242},[57,4510,968],{"class":67},[57,4512,4513,4515,4518,4520],{"class":59,"line":617},[57,4514,977],{"class":242},[57,4516,4517],{"class":67},"(mockedGdprService.isGdprAccepted).",[57,4519,2920],{"class":242},[57,4521,968],{"class":67},[57,4523,4524,4526],{"class":59,"line":628},[57,4525,977],{"class":242},[57,4527,980],{"class":67},[57,4529,4530,4532,4534,4536,4538,4540,4542],{"class":59,"line":639},[57,4531,985],{"class":67},[57,4533,988],{"class":242},[57,4535,532],{"class":67},[57,4537,4431],{"class":84},[57,4539,996],{"class":67},[57,4541,999],{"class":242},[57,4543,1002],{"class":67},[57,4545,4546,4548,4550,4552,4554],{"class":59,"line":650},[57,4547,1007],{"class":67},[57,4549,1010],{"class":242},[57,4551,532],{"class":67},[57,4553,1015],{"class":63},[57,4555,538],{"class":67},[57,4557,4558],{"class":59,"line":661},[57,4559,933],{"class":67},[57,4561,4562],{"class":59,"line":672},[57,4563,231],{"emptyLinePlaceholder":230},[57,4565,4566,4568,4570,4573,4575,4577,4579,4581],{"class":59,"line":678},[57,4567,942],{"class":242},[57,4569,532],{"class":67},[57,4571,4572],{"class":84},"'closes the cookie notification after we click OK button'",[57,4574,1833],{"class":67},[57,4576,3018],{"class":74},[57,4578,3021],{"class":67},[57,4580,879],{"class":74},[57,4582,78],{"class":67},[57,4584,4585,4587,4589,4591,4593],{"class":59,"line":697},[57,4586,4358],{"class":67},[57,4588,4392],{"class":242},[57,4590,532],{"class":67},[57,4592,387],{"class":63},[57,4594,538],{"class":67},[57,4596,4597,4599,4601,4603,4605],{"class":59,"line":709},[57,4598,958],{"class":74},[57,4600,961],{"class":63},[57,4602,75],{"class":74},[57,4604,4281],{"class":242},[57,4606,968],{"class":67},[57,4608,4609],{"class":59,"line":719},[57,4610,231],{"emptyLinePlaceholder":230},[57,4612,4613,4615,4617,4619],{"class":59,"line":730},[57,4614,3049],{"class":74},[57,4616,3052],{"class":67},[57,4618,3055],{"class":242},[57,4620,968],{"class":67},[57,4622,4623],{"class":59,"line":1334},[57,4624,231],{"emptyLinePlaceholder":230},[57,4626,4627,4629,4632,4634,4637,4639,4641,4644],{"class":59,"line":1344},[57,4628,958],{"class":74},[57,4630,4631],{"class":63}," button",[57,4633,75],{"class":74},[57,4635,4636],{"class":67}," wrapper.",[57,4638,988],{"class":242},[57,4640,532],{"class":67},[57,4642,4643],{"class":84},"'.cookie-notification__button--ok'",[57,4645,538],{"class":67},[57,4647,4648],{"class":59,"line":1349},[57,4649,231],{"emptyLinePlaceholder":230},[57,4651,4652,4655,4658,4660,4663],{"class":59,"line":1354},[57,4653,4654],{"class":67},"    button.",[57,4656,4657],{"class":242},"trigger",[57,4659,532],{"class":67},[57,4661,4662],{"class":84},"'click'",[57,4664,538],{"class":67},[57,4666,4667,4669,4671,4673],{"class":59,"line":1361},[57,4668,3049],{"class":74},[57,4670,3052],{"class":67},[57,4672,3055],{"class":242},[57,4674,968],{"class":67},[57,4676,4677],{"class":59,"line":1379},[57,4678,231],{"emptyLinePlaceholder":230},[57,4680,4681,4683],{"class":59,"line":1392},[57,4682,977],{"class":242},[57,4684,980],{"class":67},[57,4686,4687,4689,4691,4693,4695,4697,4699],{"class":59,"line":1397},[57,4688,985],{"class":67},[57,4690,988],{"class":242},[57,4692,532],{"class":67},[57,4694,4431],{"class":84},[57,4696,996],{"class":67},[57,4698,999],{"class":242},[57,4700,1002],{"class":67},[57,4702,4703,4705,4707,4709,4711],{"class":59,"line":2079},[57,4704,1007],{"class":67},[57,4706,1010],{"class":242},[57,4708,532],{"class":67},[57,4710,387],{"class":63},[57,4712,538],{"class":67},[57,4714,4715],{"class":59,"line":2091},[57,4716,933],{"class":67},[57,4718,4719],{"class":59,"line":2102},[57,4720,231],{"emptyLinePlaceholder":230},[57,4722,4723,4725,4727,4730,4732,4734,4736,4738],{"class":59,"line":2108},[57,4724,942],{"class":242},[57,4726,532],{"class":67},[57,4728,4729],{"class":84},"'closes the cookie notification after we click NO WAY button'",[57,4731,1833],{"class":67},[57,4733,3018],{"class":74},[57,4735,3021],{"class":67},[57,4737,879],{"class":74},[57,4739,78],{"class":67},[57,4741,4742,4744,4746,4748,4750],{"class":59,"line":2118},[57,4743,4358],{"class":67},[57,4745,4392],{"class":242},[57,4747,532],{"class":67},[57,4749,387],{"class":63},[57,4751,538],{"class":67},[57,4753,4754,4756,4758,4760,4762],{"class":59,"line":2128},[57,4755,958],{"class":74},[57,4757,961],{"class":63},[57,4759,75],{"class":74},[57,4761,4281],{"class":242},[57,4763,968],{"class":67},[57,4765,4766],{"class":59,"line":2136},[57,4767,231],{"emptyLinePlaceholder":230},[57,4769,4770,4772,4774,4776],{"class":59,"line":2144},[57,4771,3049],{"class":74},[57,4773,3052],{"class":67},[57,4775,3055],{"class":242},[57,4777,968],{"class":67},[57,4779,4780],{"class":59,"line":2154},[57,4781,231],{"emptyLinePlaceholder":230},[57,4783,4784,4786,4788,4790,4792,4794,4796,4799],{"class":59,"line":2159},[57,4785,958],{"class":74},[57,4787,4631],{"class":63},[57,4789,75],{"class":74},[57,4791,4636],{"class":67},[57,4793,988],{"class":242},[57,4795,532],{"class":67},[57,4797,4798],{"class":84},"'.cookie-notification__button--no'",[57,4800,538],{"class":67},[57,4802,4803,4805,4807,4809,4811],{"class":59,"line":2167},[57,4804,4654],{"class":67},[57,4806,4657],{"class":242},[57,4808,532],{"class":67},[57,4810,4662],{"class":84},[57,4812,538],{"class":67},[57,4814,4815],{"class":59,"line":2183},[57,4816,231],{"emptyLinePlaceholder":230},[57,4818,4819,4821,4823,4825],{"class":59,"line":2194},[57,4820,3049],{"class":74},[57,4822,3052],{"class":67},[57,4824,3055],{"class":242},[57,4826,968],{"class":67},[57,4828,4829],{"class":59,"line":2205},[57,4830,231],{"emptyLinePlaceholder":230},[57,4832,4833,4835],{"class":59,"line":2216},[57,4834,977],{"class":242},[57,4836,980],{"class":67},[57,4838,4839,4841,4843,4845,4847,4849,4851],{"class":59,"line":2226},[57,4840,985],{"class":67},[57,4842,988],{"class":242},[57,4844,532],{"class":67},[57,4846,4431],{"class":84},[57,4848,996],{"class":67},[57,4850,999],{"class":242},[57,4852,1002],{"class":67},[57,4854,4855,4857,4859,4861,4863],{"class":59,"line":2232},[57,4856,1007],{"class":67},[57,4858,1010],{"class":242},[57,4860,532],{"class":67},[57,4862,387],{"class":63},[57,4864,538],{"class":67},[57,4866,4867],{"class":59,"line":2242},[57,4868,933],{"class":67},[57,4870,4871],{"class":59,"line":2251},[57,4872,573],{"class":67},[10,4874,4875,4876,4879],{},"The function ",[54,4877,4878],{},"mocked"," is actually the one that really matters here. It extends\nthe type of the injected dependency and allows you to easily work with it. It\ntook me a lot of time to find this function, but it made my code much cleaner.",[10,4881,4882,4883,168,4886,68],{},"This function is actually the main reason for writing this post, since it is\nalmost necessary for writing unit tests with ",[4884,4885,180],"strong",{},[4884,4887,4888],{},"jest",[39,4890,4891],{"id":4891},"challenges",[10,4893,4894],{},"The challenge I usually find when I write unit tests:",[14,4896,4897,4900,4903],{},[17,4898,4899],{},"Mocking dependency injection",[17,4901,4902],{},"Mocking custom events",[17,4904,4905,4906,4909,4910],{},"Interacting with ",[54,4907,4908],{},"wrapper.vm"," object in ",[4884,4911,180],{},[10,4913,4914],{},"My quick tips there:",[14,4916,4917,4920,4927,4933],{},[17,4918,4919],{},"Dependencies shall always return functions, so I can mock them",[17,4921,4922,4923,4926],{},"Create ",[54,4924,4925],{},"mocks.ts"," file containing functions for generating necessary mock\nobjects",[17,4928,4929,4930],{},"When testing component uses other ones, refer to them using ",[54,4931,4932],{},"wrapper.findComponent()",[17,4934,4935],{},"I avoid using wrapper.vm and focus in testing DOM elements instead.",[4937,4938,4939],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":52,"searchDepth":81,"depth":81,"links":4941},[4942,4943,4944,4945],{"id":41,"depth":81,"text":42},{"id":156,"depth":81,"text":157},{"id":1458,"depth":81,"text":1459},{"id":4891,"depth":81,"text":4891},1639294022,"This is a description 5","md",{},"\u002Fblog\u002Fjest-vue-typescript",{"title":5,"description":4947},"blog\u002Fjest-vue-typescript",[],"NCtszn2jFtbFlXQH5y9C9Tqg4ut7Qt4vDPWEdTYmipA",1786914024204]