d457763c-d8983881c27cb744e643.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{"12Sq":function(a,s,e){"use strict";e.r(s),e.d(s,"_frontmatter",(function(){return j})),e.d(s,"default",(function(){return g}));var n,t=e("35sm"),c=e("PgR7"),b=e("blud"),p=e("StMV"),m=e("Th6I"),j={},O=(n="Example",function(a){return console.warn("Component "+n+" was not imported, exported, or provided by MDXProvider as global scope"),Object(b.b)("div",a)}),N={_frontmatter:j},r=m.a;function g(a){var s=a.components,e=Object(t.a)(a,["components"]);return Object(b.b)(r,Object.assign({},N,e,{components:s,mdxType:"MDXLayout"}),Object(b.b)("h2",{id:"testing"},"Testing",Object(b.b)("a",Object.assign({parentName:"h2"},{href:"#testing","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://duckduckgo.com/?q=arrange+act+assert",target:"_blank",rel:"noreferrer"}),"Arrange-Act-Assert")," pattern works great with React")),Object(b.b)(O,{testLink:"https://codesandbox.io/s/63edz?file=/src/index.test.ts",code:Object(b.b)(c.Fragment,null,Object(b.b)("pre",{className:"grvsc-container dracula","data-language":"ts","data-index":"0"},Object(b.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// pseudo tests using AAA, read it as prose"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"wrap everything in a describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"/* 1 */"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// setup needed for every test"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ARRANGE"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"group main functionality in 1st level of describes"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"/* 2 */"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// do something to change the state"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// use a `beforeEach` even if there is only one `it`"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// it will be easier to extend later"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ARRANGE & ACT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should respond to the change"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// test the outcome"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"use nested describes to dive into branches"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"/* 3 */"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// do something that changes the state further"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ARRANGE & ACT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should respond to the change"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// assertion given that 1, 2, 3 executed"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should follow the structure of your code"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// it should be easy to find where new tests need to go"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region events"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"example events"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when the user types"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// find input element"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ARRANGE"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// fire change event so that it is invalid"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ACT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should validate input"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// find error"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// match text in error"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when the input is valid"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// fire a change event so that the input is valid"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ACT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should validate input"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// find error"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// expect that there are none"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when the user submits"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// find submit button"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// click it"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ARRANGE & ACT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should call api"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// expect mock to have been called with form data"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region a11y"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"example a11y"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when the accordion is closed"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// find the toggle button"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ARRANGE"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should have aria-expanded=false"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// expect the toggle button to have the attribute"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when the accordion is open"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// click the toggle"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ACT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should have aria-expanded=true"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// expect the toggle button to have the attribute"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when the accordion is closed"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// click the toggle"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ACT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should have aria-expanded=false"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// expect the toggle button to have the attribute"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #region non-happy"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"example non-happy paths"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when the api times out"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// use mock timers"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// set mock to return unresolved promise"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ARRANGE"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// action that calls into api"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ACT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should show spinner"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// find spinner"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// expect that it exists"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when request times out"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// run timers"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ACT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should show error"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// find error"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// match text"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when api errors"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// set mock to return unresolved promise"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ARRANGE"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// action that calls into api"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ACT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should show error"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// find error"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// match text"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// ASSERT"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk4"}),"// #endregion"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"})"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," dummy "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null")))))),mdxType:"Example"}),Object(b.b)("h3",{id:"giffinder"},Object(b.b)("inlineCode",{parentName:"h3"},"GifFinder"),Object(b.b)("a",Object.assign({parentName:"h3"},{href:"#giffinder","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"let’s test a component that uses state & effects to find gifs")),Object(b.b)(O,{link:"https://codesandbox.io/s/mo1ln?file=/src/example.tsx",testLink:"https://codesandbox.io/s/3wm7o?file=/src/example.tsx",style:{width:"100%",height:"50em"},code:Object(b.b)(c.Fragment,null,Object(b.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"1"},Object(b.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React, { FC, useEffect, useState } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," classes "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./example.module.css"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { TenorAPI } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./tenor-api"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"interface"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"GifFinderProps"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"onFound"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"url"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"void"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"GifFinder"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"GifFinderProps"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"> "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ({ "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"onFound"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," }) "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [query, setQuery] "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"''"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [results, setResults] "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"[] "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useEffect"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"let"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," shouldUpdate "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"true"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"if"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," (query) {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      TenorAPI."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"search"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(query)."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"then"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"newResults"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"if"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," (shouldUpdate) "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setResults"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(newResults)"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      shouldUpdate "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"false"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    }"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  }, [query])"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"section"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        find a gif"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"input"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"placeholder"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"query"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{query}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onChange"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"event"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setQuery"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(event.target.value)}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"label"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      {results "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"&&"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{classes.grid}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          {results."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"map"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk8 mtki"}),"result"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),") "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"              "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"              "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"key"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{result}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"              "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{classes.button}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"              "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," onFound "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"&&"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"onFound"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(result)}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"              "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"aria-label"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gif"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            >"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"              <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"img"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"className"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{classes.image} "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"src"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{result} "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"alt"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gif"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"            </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"          ))}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      )}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"section"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"Example"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"FC"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [gif, setGif] "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"useState"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"<"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"string"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"|"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"return"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," gif "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"?"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"img"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"src"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{gif} "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"alt"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gif"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">found gif</"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"p"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"type"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),'"'),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onClick"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"setGif"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"null"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")}>"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        find new gif"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"button"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    </"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"div"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),">"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  ) "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," ("))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"GifFinder"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onFound"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{setGif} />"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  )"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"}"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"export"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"default"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," <"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Example"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," />")))))),render:Object(b.b)(c.Fragment,null,Object(b.b)(c.Fragment,null,p.a)),mdxType:"Example"}),Object(b.b)("h3",{id:"testing-giffinder"},"Testing ",Object(b.b)("inlineCode",{parentName:"h3"},"GifFinder"),Object(b.b)("a",Object.assign({parentName:"h3"},{href:"#testing-giffinder","aria-hidden":!0,tabIndex:-1,className:"slug"}),"#")),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"The more your tests resemble the way your software is used,\nthe more confidence they can give you."),Object(b.b)("p",{parentName:"blockquote"},"— ",Object(b.b)("a",Object.assign({parentName:"p"},{href:"https://testing-library.com/",target:"_blank",rel:"noreferrer"}),Object(b.b)("inlineCode",{parentName:"a"},"@testing-library")))),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://create-react-app.dev/",target:"_blank",rel:"noreferrer"}),Object(b.b)("inlineCode",{parentName:"a"},"create-react-app"))," comes with ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://testing-library.com/",target:"_blank",rel:"noreferrer"}),Object(b.b)("inlineCode",{parentName:"a"},"@testing-library"))),Object(b.b)("li",{parentName:"ul"},"works with ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://testing-library.com/docs/angular-testing-library/intro",target:"_blank",rel:"noreferrer"}),"angular"),", ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://testing-library.com/docs/vue-testing-library/intro",target:"_blank",rel:"noreferrer"}),"vue"),", ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://testing-library.com/docs/dom-testing-library/intro",target:"_blank",rel:"noreferrer"}),"plain DOM"),", etc…"),Object(b.b)("li",{parentName:"ul"},"no selectors, ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://coderefinery.nz/2020/10/21/forcing-functions-in-software-development/",target:"_blank",rel:"noreferrer"}),"forcing")," you to write accessible components"),Object(b.b)("li",{parentName:"ul"},"alternatively, use ",Object(b.b)("a",Object.assign({parentName:"li"},{href:"https://github.com/enzymejs/enzyme",target:"_blank",rel:"noreferrer"}),"enzyme"))),Object(b.b)(O,{testLink:"https://codesandbox.io/s/3wm7o?file=/src/example.test.tsx",code:Object(b.b)(c.Fragment,null,Object(b.b)("pre",{className:"grvsc-container dracula","data-language":"tsx","data-index":"2"},Object(b.b)("code",Object.assign({parentName:"pre"},{className:"grvsc-code"}),Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  act,"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  cleanup,"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  fireEvent,"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  render,"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  RenderResult,"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"} "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"@testing-library/react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," React "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { GifFinder } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./example"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"import"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { TenorAPI } "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"from"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"./tenor-api"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"GifFinder"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"let"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," component"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"RenderResult"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"let"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," onFound"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"jest"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Mock"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    onFound "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," jest."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"fn"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    component "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"render"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(<"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"GifFinder"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9 mtki"}),"onFound"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"{onFound} />)"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"afterEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"cleanup"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should snapshot"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"expect"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(component.container)."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toMatchSnapshot"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when searching"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"let"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," queryInput"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"HTMLElement"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"let"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," searchSpy"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"jest"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"SpyInstance"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"async"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," searchPromise "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk3 mtki"}),"Promise"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"resolve"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(["),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gif1"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gif2"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gif3"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"])"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      searchSpy "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," jest."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"spyOn"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(TenorAPI, "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"search"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"mockReturnValue"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(searchPromise)"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      queryInput "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," component."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"getByLabelText"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"find a gif"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      fireEvent."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"input"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(queryInput, { target"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," { value"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),":"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," } })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"await"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"act"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"async"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"await"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," searchPromise"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"afterEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      searchSpy."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"mockRestore"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should start a search"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"expect"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(searchSpy)."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toHaveBeenCalledWith"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"react"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"expect"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(searchSpy)."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toHaveBeenCalledTimes"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should render the gifs"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"expect"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(component.container)."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toMatchSnapshot"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"()"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"describe"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"when clicking a gif"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"beforeEach"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(() "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"const"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," [, gif2] "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"="),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," component."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"getAllByLabelText"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gif"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        fireEvent."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"click"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(gif2)"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"it"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"should call onFound"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),", () "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk6"}),"=>"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"})," {"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"expect"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(onFound)."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toHaveBeenCalledWith"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk7"}),"gif2"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk11"}),"'"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"        "),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"expect"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"(onFound)."),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk9"}),"toHaveBeenCalledTimes"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"("),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk5"}),"1"),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),")"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"      })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"    })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"  })"))),"\n",Object(b.b)("span",Object.assign({parentName:"code"},{className:"grvsc-line"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"grvsc-source"}),Object(b.b)("span",Object.assign({parentName:"span"},{className:"mtk1"}),"})")))))),mdxType:"Example"}),Object(b.b)("style",{className:"grvsc-styles"},"\n  \n  .dracula {\n    color: #F8F8F2;\n    background-color: #282A36;\n  }\n  .dracula .mtki { font-style: italic; }\n  .dracula .mtk4 { color: #6272A4; }\n  .dracula .mtk9 { color: #50FA7B; }\n  .dracula .mtk1 { color: #F8F8F2; }\n  .dracula .mtk11 { color: #E9F284; }\n  .dracula .mtk7 { color: #F1FA8C; }\n  .dracula .mtk6 { color: #FF79C6; }\n  .dracula .mtk5 { color: #BD93F9; }\n  .dracula .mtk3 { color: #8BE9FD; }\n  .dracula .mtk8 { color: #FFB86C; }\n  .dracula .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n"))}g.isMDXComponent=!0}}]);
//# sourceMappingURL=d457763c-d8983881c27cb744e643.js.map