P685:[{"_692":39,"_693":43,"_694":695},"app1","app2","diffCode","var Component=(()=>{var b=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),x=(n,a)=>{for(var r in a)s(n,r,{get:a[r],enumerable:!0})},d=(n,a,r,l)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let t of h(a))!v.call(n,t)&&t!==r&&s(n,t,{get:()=>a[t],enumerable:!(l=u(a,t))||l.enumerable});return n};var g=(n,a,r)=>(r=n!=null?b(f(n)):{},d(a||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),k=n=>d(s({},\"__esModule\",{value:!0}),n);var c=y((A,i)=>{i.exports=_jsx_runtime});var w={};x(w,{default:()=>p,frontmatter:()=>N});var e=g(c()),N=void 0;function m(n){let a={code:\"code\",pre:\"pre\",span:\"span\",...n.components},{Accordion:r,Icon:l,LaunchEditor:t}=a;return r||o(\"Accordion\",!0),l||o(\"Icon\",!0),t||o(\"LaunchEditor\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r,{title:\"tests/e2e/homepage.test.ts\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"tests/e2e/homepage.test.ts\",\"data-start\":\"1\",\"data-remove\":\"1,2,3,6,7,8,9,10,11,12,13,14,15\",\"data-add\":\"4,16,17\",\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4A3} Remove this import.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// You will be using your custom `test` and `expect` functions.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"test\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"expect\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"@playwright/test\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"test\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"expect\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"#tests/test-extend.ts\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// \\u{1F428} Import `test` and `expect` from the \"#tests/test-extend.ts\" module.'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} import { this, that } from 'somewhere'\"}),`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"test\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"displays the welcome heading\"}),\"'\",\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" ({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Import the newly created `navigate` fixture from the test context.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\",\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"}) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Replace the `page.goto()` call with `navigate()`.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// Explore the path argument to `navigate()`. See how it provides route suggestions?\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-remove\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"goto\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/\"}),\"'\",\")\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"test\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"displays the welcome heading\"}),\"'\",\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" ({ \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"navigate\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\" }) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"navigate\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"/\"}),\"'\",\")\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-diff-line-number\":\"5\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-diff-line-number\":\"6\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"expect\"}),\"(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"7\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"getByRole\"}),\"(\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"heading\"}),\"'\",\", { name: \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"The Epic Stack\"}),\"'\",\" }),\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/02.test-setup/01.problem.custom-fixtures/tests/e2e/homepage.test.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"02.test-setup/01.problem.custom-fixtures/tests/e2e/homepage.test.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/02.test-setup/01.problem.custom-fixtures/tests/e2e/homepage.test.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/02.test-setup/01.solution.custom-fixtures/tests/e2e/homepage.test.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(l,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/02.test-setup/01.solution.custom-fixtures/tests/e2e/homepage.test.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/02.test-setup/01.problem.custom-fixtures/tests/e2e/homepage.test.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(l,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/02.test-setup/01.solution.custom-fixtures/tests/e2e/homepage.test.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"02.test-setup/01.solution.custom-fixtures/tests/e2e/homepage.test.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})}),`\n`,(0,e.jsx)(r,{title:\"tests/test-extend.ts\",variant:\"changed\",children:(0,e.jsxs)(\"div\",{className:\"relative\",children:[(0,e.jsx)(a.pre,{\"data-filename\":\"tests/test-extend.ts\",\"data-start\":\"1\",\"data-remove\":\"1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37\",\"data-add\":\"38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55\",\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,e.jsxs)(a.code,{children:[(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// \\u{1F428} Import `test` and `expect` from the \"@playwright/test\" package.'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// Alias the `test` import as `testBase`, you will need it in the future.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} import { this as that, another } from 'package'\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// \\u{1F428} Import `href` and `type Register` from \"react-router\".'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} import { this, typeof that } from 'package'\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// \\u{1F428} Declare a new interface called \"Fixtures\".'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// In that interface, declare a \"navigate\" function with the following type:'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} navigate: (...args: Parameters>) => Promise\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} interface Fixtures {}\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// \\u{1F428} Declare and export a new variable called \"test\".'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// Assign it the result of calling `testBase.extend()`.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// Provide the `Fixtures` interface as a type argument to the `testBase.extend()` call.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} export const test = value\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} testBase.extend()\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Provide an object as the first argument to the `testBase.extend()`.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// In that object, declare an asynchronous function called \"navigate\"'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// with the following call signature:\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} { async navigate({ page }, use) {} }\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Inside the `navigate` function, call and await the `use()` function.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} await use()\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4DC} The `use()` function expects the implementation of your custom fixture.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// Whatever you provide it as an argument will be exposed as the value of \"navigate\"'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// in your tests.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Provide the implementation of the fixture as the first argument to the\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// `use()` function. The fixture must do the following:\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:'// - Get the arguments past by it as \"...args\";'}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// - Call `page.goto()` and await that call.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// - Pass `href(...args)` as the argument to `page.goto()`.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"//\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F428} Finally, export the `expect` function from this module.\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",\"data-remove\":!0,\"data-diff-line-number\":\"0\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} export { something }\"}),`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",\"data-add\":!0,\"data-diff-line-number\":\"1\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"test\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"as\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"testBase\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"expect\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"@playwright/test\"}),\"'\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"href\"}),\", \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"type\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"Register\"}),\" } \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"react-router\"}),\"'\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"interface\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Fixtures\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"navigate\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" <\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"T\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"extends\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"keyof\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Register\"}),\"[\",\"'\",(0,e.jsx)(a.span,{style:{color:\"var(--base0B)\"},children:\"pages\"}),\"'\",\"]>(\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",\"data-add\":!0,\"data-diff-line-number\":\"6\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"...\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"args\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Parameters\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"typeof\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"href\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"T\"}),\">>\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",\"data-add\":!0,\"data-diff-line-number\":\"7\",children:[\"\t) \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Promise\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0C)\"},children:\"void\"}),\">\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"45\",\"data-add\":!0,\"data-diff-line-number\":\"8\",children:[\"}\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"46\",\"data-add\":!0,\"data-diff-line-number\":\"9\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"47\",\"data-add\":!0,\"data-diff-line-number\":\"10\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"test\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"testBase\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"extend\"}),\"<\",(0,e.jsx)(a.span,{style:{color:\"var(--base0A)\"},children:\"Fixtures\"}),\">({\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"48\",\"data-add\":!0,\"data-diff-line-number\":\"11\",children:[\"\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"navigate\"}),\"({ \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\" }, \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"use\"}),\") {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"49\",\"data-add\":!0,\"data-diff-line-number\":\"12\",children:[\"\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"use\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" (\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"...\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"args\"}),\") \",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"50\",\"data-add\":!0,\"data-diff-line-number\":\"13\",children:[\"\t\t\t\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"page\"}),\".\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"goto\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base0D)\"},children:\"href\"}),\"(\",(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"...\"}),(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"args\"}),\"))\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"51\",\"data-add\":!0,\"data-diff-line-number\":\"14\",children:[\"\t\t})\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"52\",\"data-add\":!0,\"data-diff-line-number\":\"15\",children:[\"\t},\",`\n`]}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"53\",\"data-add\":!0,\"data-diff-line-number\":\"16\",children:[\"})\",`\n`]}),(0,e.jsx)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"54\",\"data-add\":!0,\"data-diff-line-number\":\"17\",children:`\n`}),(0,e.jsxs)(a.span,{className:\"codeblock-line\",\"data-line-number\":\"55\",\"data-add\":!0,\"data-diff-line-number\":\"18\",children:[(0,e.jsx)(a.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" { \",(0,e.jsx)(a.span,{style:{color:\"var(--base08)\"},children:\"expect\"}),\" }\",`\n`]})]})}),(0,e.jsxs)(\"div\",{className:\"flex gap-4 absolute top-1 right-3 items-center\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/02.test-setup/01.problem.custom-fixtures/tests/test-extend.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"02.test-setup/01.problem.custom-fixtures/tests/test-extend.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 1\"})}),(0,e.jsxs)(\"div\",{className:\"display-alt-down flex gap-2\",children:[(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/02.test-setup/01.problem.custom-fixtures/tests/test-extend.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/02.test-setup/01.solution.custom-fixtures/tests/test-extend.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(l,{name:\"ArrowLeft\",title:\"Copy app 2 file to app 1\"})})}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/02.test-setup/01.solution.custom-fixtures/tests/test-extend.ts\",syncTo:{file:\"/myapp/workshop-content/exercises/02.test-setup/01.problem.custom-fixtures/tests/test-extend.ts\"},children:(0,e.jsx)(\"span\",{className:\"block border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:(0,e.jsx)(l,{name:\"ArrowRight\",title:\"Copy app 1 file to app 2\"})})})]}),(0,e.jsx)(t,{file:\"/myapp/workshop-content/exercises/02.test-setup/01.solution.custom-fixtures/tests/test-extend.ts\",line:1,children:(0,e.jsx)(\"span\",{title:\"02.test-setup/01.solution.custom-fixtures/tests/test-extend.ts\",className:\"border hover:bg-foreground/20 rounded px-2 py-0.5 font-mono text-xs font-semibold\",children:\"OPEN in APP 2\"})})]})]})})]})}function p(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,{...n,children:(0,e.jsx)(m,{...n})}):m(n)}function o(n,a){throw new Error(\"Expected \"+(a?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(w);})();\n;return Component;"]

02. Test setup/01. Custom fixtures (🏁 solution)

Custom fixtures

Related materials