[{"id":"55e81c5c-3d64-479b-a1b7-b3f8bc5c4608","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Testing Best Practices","styles":{}}],"children":[]},{"id":"e66e383f-716e-4f4a-afe6-34ccb3fd3695","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Testing Best Practices","styles":{"bold":true}},{"type":"text","text":" means writing tests that are useful, maintainable, and close to real user behavior.","styles":{}}],"children":[]},{"id":"b8e6ef00-703c-43e2-8309-0476210f070b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"2863cf23-0ffa-479d-b73a-05e83dc23c6e","type":"procode","props":{"code":"testing best practices = write tests that prove the app works correctly\n","language":"txt","filename":"","files":"[{\"id\":\"8xnlhkn7u\",\"name\":\"code\",\"code\":\"testing best practices = write tests that prove the app works correctly\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f65eb403-8cd0-44f7-ac8e-38737f5c4490","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"5bd6ecba-0b85-4d93-9bac-c638a0a3a954","type":"procode","props":{"code":"Bad test\n└── checks internal implementation\n\nGood test\n└── checks what user sees and does\n","language":"txt","filename":"","files":"[{\"id\":\"mfx02nuhm\",\"name\":\"code\",\"code\":\"Bad test\\n└── checks internal implementation\\n\\nGood test\\n└── checks what user sees and does\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca21a7e7-c4e4-4a74-8c47-29d9b6158774","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Testing best practices are important because bad tests can make your project harder to maintain.","styles":{}}],"children":[]},{"id":"39c93c1d-62b0-4015-baee-e7bc81d4daa9","type":"divider","props":{},"children":[]},{"id":"cc47d88d-724f-48cc-9d4b-2ed6dcf4cca5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"c5898984-6759-4c90-aa7c-e073c0fc9d27","type":"procode","props":{"code":"Testing Best Practices\n├── Test user behavior\n├── Test important features\n├── Avoid testing implementation details\n├── Use clear test names\n├── Keep tests simple\n├── Test loading state\n├── Test error state\n├── Test empty state\n├── Mock API when needed\n└── Keep tests maintainable\n","language":"txt","filename":"","files":"[{\"id\":\"2nmnldzrx\",\"name\":\"code\",\"code\":\"Testing Best Practices\\n├── Test user behavior\\n├── Test important features\\n├── Avoid testing implementation details\\n├── Use clear test names\\n├── Keep tests simple\\n├── Test loading state\\n├── Test error state\\n├── Test empty state\\n├── Mock API when needed\\n└── Keep tests maintainable\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb0d4b93-28f8-45c5-87de-3b6699398cbb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a3e6fbd7-5c3c-46ec-b15f-230fd0cda64e","type":"procode","props":{"code":"Good test = confidence that app works\n","language":"txt","filename":"","files":"[{\"id\":\"1z9u8kb7c\",\"name\":\"code\",\"code\":\"Good test = confidence that app works\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f39ec310-ea6e-4a12-8415-63324ad14498","type":"divider","props":{},"children":[]},{"id":"5df2f12b-1f21-4d6b-a806-cccbec60bde0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Main Goal of Testing","styles":{}}],"children":[]},{"id":"14992b29-1376-48b9-949a-425bac19f855","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The goal of testing is not to test every line of code.","styles":{}}],"children":[]},{"id":"fa60576a-d51d-4d51-b22c-06465874e83a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The real goal is:","styles":{}}],"children":[]},{"id":"4709a323-bc68-41ed-99f7-29e9e39abf2c","type":"procode","props":{"code":"Make sure important app behavior works correctly.\n","language":"txt","filename":"","files":"[{\"id\":\"amh2tavle\",\"name\":\"code\",\"code\":\"Make sure important app behavior works correctly.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a0e82195-3a36-47b6-a6a6-3c7735f313ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"718e69b1-1a5b-4610-ba73-17888374245f","type":"procode","props":{"code":"Login page\n├── user types email\n├── user types password\n├── user clicks login\n└── user sees dashboard or error message\n","language":"txt","filename":"","files":"[{\"id\":\"olh88os47\",\"name\":\"code\",\"code\":\"Login page\\n├── user types email\\n├── user types password\\n├── user clicks login\\n└── user sees dashboard or error message\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"02fa6d5e-2fb0-44a9-b977-6c9d736a2534","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"e9be21e5-957d-4864-a055-96c29abc0b23","type":"procode","props":{"code":"Test behavior, not just code.\n","language":"txt","filename":"","files":"[{\"id\":\"b67saobz6\",\"name\":\"code\",\"code\":\"Test behavior, not just code.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"79db3a61-6810-42c9-8528-06687c3df0db","type":"divider","props":{},"children":[]},{"id":"e795bfca-5c64-4e3c-b551-d11b8002c4cf","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Like a User","styles":{}}],"children":[]},{"id":"30b3251f-64e3-4c30-b1db-9900fa236048","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good tests should follow how users interact with your app.","styles":{}}],"children":[]},{"id":"21983ce5-785f-46f3-9d65-363a48b4afbc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"User behavior:","styles":{}}],"children":[]},{"id":"3c312463-f582-4141-bf9d-e1d68e34c51b","type":"procode","props":{"code":"User opens page\nUser reads text\nUser clicks button\nUser types input\nUser submits form\nUser sees result\n","language":"txt","filename":"","files":"[{\"id\":\"dmgt2r5ph\",\"name\":\"code\",\"code\":\"User opens page\\nUser reads text\\nUser clicks button\\nUser types input\\nUser submits form\\nUser sees result\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"25cb5aa3-72e5-4620-a5d8-2cfe24665d5a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test should do the same:","styles":{}}],"children":[]},{"id":"7f6696dd-3339-4d4a-b5d3-386f1b2bb1f9","type":"procode","props":{"code":"render()\n\nawait user.type(screen.getByLabelText(/email/i), \"user@mail.com\")\nawait user.type(screen.getByLabelText(/password/i), \"password123\")\n\nawait user.click(screen.getByRole(\"button\", { name: /login/i }))\n\nexpect(screen.getByText(/welcome/i)).toBeInTheDocument()\n","language":"tsx","filename":"","files":"[{\"id\":\"pxn8gccik\",\"name\":\"code\",\"code\":\"render()\\n\\nawait user.type(screen.getByLabelText(/email/i), \\\"user@mail.com\\\")\\nawait user.type(screen.getByLabelText(/password/i), \\\"password123\\\")\\n\\nawait user.click(screen.getByRole(\\\"button\\\", { name: /login/i }))\\n\\nexpect(screen.getByText(/welcome/i)).toBeInTheDocument()\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"871aaea3-3bb5-4e60-93a1-8ff0498823d2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7bf60a70-40df-4754-bdd3-e1af1f562bf4","type":"procode","props":{"code":"If user cannot see it, avoid testing it directly.\n","language":"txt","filename":"","files":"[{\"id\":\"jw7n2pce7\",\"name\":\"code\",\"code\":\"If user cannot see it, avoid testing it directly.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eccc1e2b-5373-45ab-b044-d519a54ae20d","type":"divider","props":{},"children":[]},{"id":"222f049d-6c2b-4caa-babb-361e0a1ece79","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Testing Implementation Details","styles":{}}],"children":[]},{"id":"63d7fef7-4fac-437f-9cf1-61aaee80f2d3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"2ea6c2a2-0562-430e-9fbb-4ffdecf799bc","type":"procode","props":{"code":"expect(component.state.isOpen).toBe(true)\n","language":"tsx","filename":"","files":"[{\"id\":\"wkjgammw5\",\"name\":\"code\",\"code\":\"expect(component.state.isOpen).toBe(true)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f9084b1c-cab9-4839-93db-f7f31c250949","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"b790b6d1-73c6-414f-a19c-009f9765dff9","type":"procode","props":{"code":"This tests internal code, not user behavior.\n","language":"txt","filename":"","files":"[{\"id\":\"co3d31r32\",\"name\":\"code\",\"code\":\"This tests internal code, not user behavior.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"43de898e-d71a-4ba5-b364-8837d144c922","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"15bb9eb6-4f90-4560-b950-a862c711caa2","type":"procode","props":{"code":"expect(screen.getByText(/menu/i)).toBeInTheDocument()\n","language":"tsx","filename":"","files":"[{\"id\":\"gaxiqpjsm\",\"name\":\"code\",\"code\":\"expect(screen.getByText(/menu/i)).toBeInTheDocument()\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8bcb2f96-a077-4d89-9eb7-f0a1cd0f12de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4b814ca1-385c-4d2c-88af-9ac0a44f8511","type":"procode","props":{"code":"Do not test how component works internally.\nTest what the user can see or do.\n","language":"txt","filename":"","files":"[{\"id\":\"osfykv8am\",\"name\":\"code\",\"code\":\"Do not test how component works internally.\\nTest what the user can see or do.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"219ce1cd-2fe1-4019-985f-82bd9ec174a8","type":"divider","props":{},"children":[]},{"id":"3cfa0ac3-7214-40a0-b49f-ccb18985f839","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Good Test Name","styles":{}}],"children":[]},{"id":"fe624f1c-dee3-49c9-8d02-2190070dfdf1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good test name explains expected behavior.","styles":{}}],"children":[]},{"id":"b91422a5-8132-431d-8e92-e8650ff2aae5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good:","styles":{}}],"children":[]},{"id":"45d8abfd-06c3-4472-bc05-60c7e4585f1c","type":"procode","props":{"code":"it(\"shows error message when email is empty\", () => {})\n","language":"tsx","filename":"","files":"[{\"id\":\"wcgdmp2ji\",\"name\":\"code\",\"code\":\"it(\\\"shows error message when email is empty\\\", () => {})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e1f5de24-c8ef-4a93-8747-f1f6a8a1bb0c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"6f8bd86e-6d8f-40b9-a42e-7e3a6a3949dc","type":"procode","props":{"code":"it(\"test login\", () => {})\n","language":"tsx","filename":"","files":"[{\"id\":\"itl7c1gko\",\"name\":\"code\",\"code\":\"it(\\\"test login\\\", () => {})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"81efb8f6-15da-42ce-ba05-c8d62662f476","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better examples:","styles":{}}],"children":[]},{"id":"2b155b98-022d-44f7-9990-70b5280f8c20","type":"procode","props":{"code":"shows products after successful fetch\nshows loading while request is running\nshows error message when request fails\nsubmits form with valid data\ndisables submit button while saving\nredirects user after login\n","language":"txt","filename":"","files":"[{\"id\":\"a0w79fq2m\",\"name\":\"code\",\"code\":\"shows products after successful fetch\\nshows loading while request is running\\nshows error message when request fails\\nsubmits form with valid data\\ndisables submit button while saving\\nredirects user after login\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"580be45c-481f-4976-a329-52005b6f62f5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"550f2cfe-93a0-4d8c-b2dc-3ced4a43ae1b","type":"procode","props":{"code":"Test name should describe behavior.\n","language":"txt","filename":"","files":"[{\"id\":\"67tqv7e23\",\"name\":\"code\",\"code\":\"Test name should describe behavior.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2913e76f-e10f-4ba3-b199-abce84bc802f","type":"divider","props":{},"children":[]},{"id":"be6d3afd-cddd-4391-b69b-061ae1f4efba","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Arrange, Act, Assert Pattern","styles":{}}],"children":[]},{"id":"1e9052ef-30bd-4830-9929-3686ce5dd21c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Professional tests usually follow this pattern:","styles":{}}],"children":[]},{"id":"920f9c92-8894-41f9-b8d1-191374ebb601","type":"procode","props":{"code":"Arrange → prepare test\nAct → do user action\nAssert → check result\n","language":"txt","filename":"","files":"[{\"id\":\"2ovgfwzw3\",\"name\":\"code\",\"code\":\"Arrange → prepare test\\nAct → do user action\\nAssert → check result\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3749a960-207d-4481-8a4f-efee0c714904","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"5e90f902-d39c-4e8e-856b-f69a1fc50be5","type":"procode","props":{"code":"it(\"shows greeting after user types name\", async () => {\n // Arrange\n const user = userEvent.setup()\n render()\n\n // Act\n await user.type(screen.getByLabelText(/name/i), \"Farid\")\n await user.click(screen.getByRole(\"button\", { name: /submit/i }))\n\n // Assert\n expect(screen.getByText(/hello farid/i)).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"uizcsvgm9\",\"name\":\"code\",\"code\":\"it(\\\"shows greeting after user types name\\\", async () => {\\n // Arrange\\n const user = userEvent.setup()\\n render()\\n\\n // Act\\n await user.type(screen.getByLabelText(/name/i), \\\"Farid\\\")\\n await user.click(screen.getByRole(\\\"button\\\", { name: /submit/i }))\\n\\n // Assert\\n expect(screen.getByText(/hello farid/i)).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4ec0ca38-c133-4048-908a-fc64c7accdcb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f38e52a7-82f7-414a-badb-fd2514127715","type":"procode","props":{"code":"Prepare, do action, check result.\n","language":"txt","filename":"","files":"[{\"id\":\"jjcp2jmr3\",\"name\":\"code\",\"code\":\"Prepare, do action, check result.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"741ad174-0ba6-4687-ba2a-55c7e24afa8e","type":"divider","props":{},"children":[]},{"id":"cac8be37-4ebd-449d-bd69-e2e43b53105a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Use React Testing Library Queries Properly","styles":{}}],"children":[]},{"id":"086e3a3f-edc3-4475-8105-3c180f67ba21","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended query priority:","styles":{}}],"children":[]},{"id":"88bcacc9-9495-4f2b-b85d-5f0af8b747d1","type":"procode","props":{"code":"getByRole\ngetByLabelText\ngetByPlaceholderText\ngetByText\ngetByDisplayValue\ngetByAltText\ngetByTitle\ngetByTestId\n","language":"txt","filename":"","files":"[{\"id\":\"9yt0dh4qx\",\"name\":\"code\",\"code\":\"getByRole\\ngetByLabelText\\ngetByPlaceholderText\\ngetByText\\ngetByDisplayValue\\ngetByAltText\\ngetByTitle\\ngetByTestId\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c7737ef4-3299-4e9c-9f11-a24114c4e152","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Best example:","styles":{}}],"children":[]},{"id":"95a7f427-76df-4bbf-bbf7-1c0520538189","type":"procode","props":{"code":"screen.getByRole(\"button\", { name: /submit/i })\n","language":"tsx","filename":"","files":"[{\"id\":\"6pzdmmmya\",\"name\":\"code\",\"code\":\"screen.getByRole(\\\"button\\\", { name: /submit/i })\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07d6122f-ebf9-4422-9a73-2870ecc56c33","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good for input:","styles":{}}],"children":[]},{"id":"4d4d3594-0e0c-446a-8063-4139a9925eff","type":"procode","props":{"code":"screen.getByLabelText(/email/i)\n","language":"tsx","filename":"","files":"[{\"id\":\"gp9gzwklb\",\"name\":\"code\",\"code\":\"screen.getByLabelText(/email/i)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"91a68451-1232-4feb-b1a9-293c28540c85","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"testid","styles":{"code":true}},{"type":"text","text":" only when needed:","styles":{}}],"children":[]},{"id":"0ebad312-100b-449a-9b8c-06d0f9bf65ac","type":"procode","props":{"code":"screen.getByTestId(\"user-menu\")\n","language":"tsx","filename":"","files":"[{\"id\":\"q62jd1yko\",\"name\":\"code\",\"code\":\"screen.getByTestId(\\\"user-menu\\\")\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6ba4e05f-74dd-4413-932c-9a9508b5ae63","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"41dda6d9-7057-4b66-94b9-6b712c51207e","type":"procode","props":{"code":"Prefer queries that match how users find elements.\n","language":"txt","filename":"","files":"[{\"id\":\"wlht3o6aw\",\"name\":\"code\",\"code\":\"Prefer queries that match how users find elements.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"91230bcb-975d-464e-95e0-2a4db4dffe15","type":"divider","props":{},"children":[]},{"id":"b77e2ea4-c882-45c3-a23e-d4ccaf4e623c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Component Rendering","styles":{}}],"children":[]},{"id":"5e7000d0-67ce-4f0a-91ba-3afc70a91fd5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example component:","styles":{}}],"children":[]},{"id":"d180a641-58b1-4f7d-82c3-8edf127fbdf1","type":"procode","props":{"code":"type UserCardProps = {\n name: string\n email: string\n}\n\nexport function UserCard({ name, email }: UserCardProps) {\n return (\n

{name}

{email}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"sbjw8aylj\",\"name\":\"code\",\"code\":\"type UserCardProps = {\\n name: string\\n email: string\\n}\\n\\nexport function UserCard({ name, email }: UserCardProps) {\\n return (\\n

\\n

{name}

\\n

{email}

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cd4047c7-70c2-406f-b595-7f94f63cf8fb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test:","styles":{}}],"children":[]},{"id":"738567fb-f391-4cec-9d42-aab72a9064a4","type":"procode","props":{"code":"import { render, screen } from \"@testing-library/react\"\nimport { UserCard } from \"./user-card\"\n\nit(\"renders user name and email\", () => {\n render()\n\n expect(screen.getByText(\"Farid\")).toBeInTheDocument()\n expect(screen.getByText(\"farid@mail.com\")).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"79ghil9go\",\"name\":\"code\",\"code\":\"import { render, screen } from \\\"@testing-library/react\\\"\\nimport { UserCard } from \\\"./user-card\\\"\\n\\nit(\\\"renders user name and email\\\", () => {\\n render()\\n\\n expect(screen.getByText(\\\"Farid\\\")).toBeInTheDocument()\\n expect(screen.getByText(\\\"farid@mail.com\\\")).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5491ef43-e45a-4720-b298-a8d7cad03e7e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3e836c32-01ed-43c3-999e-fce9661a3fac","type":"procode","props":{"code":"Render component, then check visible result.\n","language":"txt","filename":"","files":"[{\"id\":\"e4dor7tqx\",\"name\":\"code\",\"code\":\"Render component, then check visible result.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"976dd0f1-0256-4fab-bcba-e84c4eb84f64","type":"divider","props":{},"children":[]},{"id":"ed1b80c5-4a54-4a81-9a7a-f8e708297909","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test User Interaction","styles":{}}],"children":[]},{"id":"f6151c63-a842-4047-912d-48f4925637fe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example component:","styles":{}}],"children":[]},{"id":"fbcb2d8f-a535-47a9-9791-ccd68b654e8b","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport function Counter() {\n const [count, setCount] = useState(0)\n\n return (\n

Count: {count}

\n\n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ao4g3smh0\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport function Counter() {\\n const [count, setCount] = useState(0)\\n\\n return (\\n

\\n

Count: {count}

\\n\\n \\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"18e755fe-438a-49cc-a943-3a92f0ee4e5f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test:","styles":{}}],"children":[]},{"id":"cfc248a9-c997-4db1-860c-b47c5145fb1d","type":"procode","props":{"code":"import { render, screen } from \"@testing-library/react\"\nimport userEvent from \"@testing-library/user-event\"\nimport { Counter } from \"./counter\"\n\nit(\"increases count when button is clicked\", async () => {\n const user = userEvent.setup()\n\n render()\n\n await user.click(screen.getByRole(\"button\", { name: /increase/i }))\n\n expect(screen.getByText(\"Count: 1\")).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"1i560blyr\",\"name\":\"code\",\"code\":\"import { render, screen } from \\\"@testing-library/react\\\"\\nimport userEvent from \\\"@testing-library/user-event\\\"\\nimport { Counter } from \\\"./counter\\\"\\n\\nit(\\\"increases count when button is clicked\\\", async () => {\\n const user = userEvent.setup()\\n\\n render()\\n\\n await user.click(screen.getByRole(\\\"button\\\", { name: /increase/i }))\\n\\n expect(screen.getByText(\\\"Count: 1\\\")).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"abf4c385-7e76-4a71-8ce9-e60ada1facf8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"2584722d-3ad0-45de-a08c-b1e2f9d154bc","type":"procode","props":{"code":"Render component\n├── user clicks button\n├── state changes\n└── UI updates\n","language":"txt","filename":"","files":"[{\"id\":\"vhz4qnnh4\",\"name\":\"code\",\"code\":\"Render component\\n├── user clicks button\\n├── state changes\\n└── UI updates\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"43d4f927-5b07-48af-98df-fdeda3a289bf","type":"divider","props":{},"children":[]},{"id":"c419fe01-1a6b-46c0-b436-7dd9751f74e2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Form Input","styles":{}}],"children":[]},{"id":"5d425111-e2b4-430c-9b69-bd9bf7ceec2d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"48865fbb-cecb-42c6-a32c-a4eb9a0ebfae","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport function NameForm() {\n const [name, setName] = useState(\"\")\n\n return (\n

\n Name\n\n setName(event.target.value)}\n />\n\n

Your name is {name}

\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"k046vbo8y\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport function NameForm() {\\n const [name, setName] = useState(\\\"\\\")\\n\\n return (\\n

\\n Name\\n\\n setName(event.target.value)}\\n />\\n\\n

Your name is {name}

\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9563940c-8ca6-44e7-895e-94dfd4ae349f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test:","styles":{}}],"children":[]},{"id":"20260409-37fa-409d-a6c0-ea7defac7667","type":"procode","props":{"code":"import { render, screen } from \"@testing-library/react\"\nimport userEvent from \"@testing-library/user-event\"\nimport { NameForm } from \"./name-form\"\n\nit(\"updates name when user types\", async () => {\n const user = userEvent.setup()\n\n render()\n\n await user.type(screen.getByLabelText(/name/i), \"Farid\")\n\n expect(screen.getByText(/your name is farid/i)).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"zm6b96gnx\",\"name\":\"code\",\"code\":\"import { render, screen } from \\\"@testing-library/react\\\"\\nimport userEvent from \\\"@testing-library/user-event\\\"\\nimport { NameForm } from \\\"./name-form\\\"\\n\\nit(\\\"updates name when user types\\\", async () => {\\n const user = userEvent.setup()\\n\\n render()\\n\\n await user.type(screen.getByLabelText(/name/i), \\\"Farid\\\")\\n\\n expect(screen.getByText(/your name is farid/i)).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d2a16438-e98f-4626-8580-8e64063e1783","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"21a7a8d4-c2a3-43c8-a27c-622f03580c1e","type":"procode","props":{"code":"Test input by typing like a real user.\n","language":"txt","filename":"","files":"[{\"id\":\"37i5ajktk\",\"name\":\"code\",\"code\":\"Test input by typing like a real user.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c3f31507-999b-4b40-94fa-96b723540b12","type":"divider","props":{},"children":[]},{"id":"3d548b22-64d1-4f0c-8746-28615cd46205","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Form Submission","styles":{}}],"children":[]},{"id":"811472f3-db8c-47d9-99d8-3df579896418","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"a1fa5aa2-2965-4cea-b3d2-5218c0a34a96","type":"procode","props":{"code":"type LoginFormProps = {\n onSubmit: (email: string, password: string) => void\n}\n\nexport function LoginForm({ onSubmit }: LoginFormProps) {\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n const formData = new FormData(event.currentTarget)\n\n onSubmit(\n String(formData.get(\"email\")),\n String(formData.get(\"password\"))\n )\n }\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"5fovkq5mi\",\"name\":\"code\",\"code\":\"type LoginFormProps = {\\n onSubmit: (email: string, password: string) => void\\n}\\n\\nexport function LoginForm({ onSubmit }: LoginFormProps) {\\n function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n const formData = new FormData(event.currentTarget)\\n\\n onSubmit(\\n String(formData.get(\\\"email\\\")),\\n String(formData.get(\\\"password\\\"))\\n )\\n }\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7c1acfd4-79ca-4313-90b3-481ac1249d0f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test:","styles":{}}],"children":[]},{"id":"d30e78a6-9fe1-4ed6-ad31-f0efc2b3c037","type":"procode","props":{"code":"import { render, screen } from \"@testing-library/react\"\nimport userEvent from \"@testing-library/user-event\"\nimport { expect, vi } from \"vitest\"\nimport { LoginForm } from \"./login-form\"\n\nit(\"submits email and password\", async () => {\n const user = userEvent.setup()\n const handleSubmit = vi.fn()\n\n render()\n\n await user.type(screen.getByLabelText(/email/i), \"user@mail.com\")\n await user.type(screen.getByLabelText(/password/i), \"password123\")\n await user.click(screen.getByRole(\"button\", { name: /login/i }))\n\n expect(handleSubmit).toHaveBeenCalledWith(\n \"user@mail.com\",\n \"password123\"\n )\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"ujnnr9qdw\",\"name\":\"code\",\"code\":\"import { render, screen } from \\\"@testing-library/react\\\"\\nimport userEvent from \\\"@testing-library/user-event\\\"\\nimport { expect, vi } from \\\"vitest\\\"\\nimport { LoginForm } from \\\"./login-form\\\"\\n\\nit(\\\"submits email and password\\\", async () => {\\n const user = userEvent.setup()\\n const handleSubmit = vi.fn()\\n\\n render()\\n\\n await user.type(screen.getByLabelText(/email/i), \\\"user@mail.com\\\")\\n await user.type(screen.getByLabelText(/password/i), \\\"password123\\\")\\n await user.click(screen.getByRole(\\\"button\\\", { name: /login/i }))\\n\\n expect(handleSubmit).toHaveBeenCalledWith(\\n \\\"user@mail.com\\\",\\n \\\"password123\\\"\\n )\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c1f05cb-3790-47f5-ab43-b53828cd962e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"1d674bbc-c19c-4ac2-8dd5-c72368f9bcba","type":"procode","props":{"code":"Test form by filling input and clicking submit.\n","language":"txt","filename":"","files":"[{\"id\":\"q98dayqtd\",\"name\":\"code\",\"code\":\"Test form by filling input and clicking submit.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"048ae181-7a94-4474-81fd-9009d45c4537","type":"divider","props":{},"children":[]},{"id":"2033ee37-8c6b-47db-bf69-d95211f48cf0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Loading State","styles":{}}],"children":[]},{"id":"cb1c7d54-64c7-491f-803f-ace4d50ec0ca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Component example:","styles":{}}],"children":[]},{"id":"093381e1-317d-46fa-a873-409cf7caa129","type":"procode","props":{"code":"export function ProductList({ loading }: { loading: boolean }) {\n if (loading) {\n return

Loading products...

\n }\n\n return

Products loaded

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ibtyvdglx\",\"name\":\"code\",\"code\":\"export function ProductList({ loading }: { loading: boolean }) {\\n if (loading) {\\n return

Loading products...

\\n }\\n\\n return

Products loaded

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e09e1c77-df9b-4394-addf-220224c4ccbc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test:","styles":{}}],"children":[]},{"id":"4012e65d-21b2-4576-8e07-1045db3467c9","type":"procode","props":{"code":"it(\"shows loading state\", () => {\n render()\n\n expect(screen.getByText(/loading products/i)).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"3scbfm1gb\",\"name\":\"code\",\"code\":\"it(\\\"shows loading state\\\", () => {\\n render()\\n\\n expect(screen.getByText(/loading products/i)).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a947cbdf-f1f4-4f44-9f4c-ea73dc6e4876","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5f14bcb5-eb33-454a-9837-88ce1718b8f5","type":"procode","props":{"code":"Loading state should be tested because user sees it.\n","language":"txt","filename":"","files":"[{\"id\":\"2ltjfo6ul\",\"name\":\"code\",\"code\":\"Loading state should be tested because user sees it.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8edc2c17-8d7b-44b8-9107-ca52ea3b4cbd","type":"divider","props":{},"children":[]},{"id":"13521caf-3c7a-4fa7-a09c-cfd6b73baa08","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Error State","styles":{}}],"children":[]},{"id":"27fb4ce1-ea59-4e8a-89ce-4c7e159ce76f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Component example:","styles":{}}],"children":[]},{"id":"ae6e670a-fcb8-4851-b0f2-93731431be95","type":"procode","props":{"code":"export function ErrorMessage({ message }: { message: string }) {\n if (!message) {\n return null\n }\n\n return

{message}

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"tk6eeakfx\",\"name\":\"code\",\"code\":\"export function ErrorMessage({ message }: { message: string }) {\\n if (!message) {\\n return null\\n }\\n\\n return

{message}

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0f30595d-e966-4df1-80a9-bf7f05d39edd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test:","styles":{}}],"children":[]},{"id":"d401ab41-1406-4031-83b1-232e08eeff91","type":"procode","props":{"code":"it(\"shows error message\", () => {\n render()\n\n expect(screen.getByRole(\"alert\")).toHaveTextContent(\n \"Failed to load data\"\n )\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"ah9bjnnq6\",\"name\":\"code\",\"code\":\"it(\\\"shows error message\\\", () => {\\n render()\\n\\n expect(screen.getByRole(\\\"alert\\\")).toHaveTextContent(\\n \\\"Failed to load data\\\"\\n )\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fbf94b63-4e37-4418-9fdc-7aa1c9be0948","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"32e89616-a560-407d-9b71-829fc848bd49","type":"procode","props":{"code":"Error state should be visible and testable.\n","language":"txt","filename":"","files":"[{\"id\":\"vlgnd8uz2\",\"name\":\"code\",\"code\":\"Error state should be visible and testable.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8cc96f9b-daa2-45d1-a0f2-c7590c4f4f51","type":"divider","props":{},"children":[]},{"id":"a75d7c6f-47a2-4394-a41f-1e16bc0a52cb","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Empty State","styles":{}}],"children":[]},{"id":"38682ed7-d399-4686-ac26-f66b3a2f5dd7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Component example:","styles":{}}],"children":[]},{"id":"8b8a63a2-82fe-4b1f-99f3-84476d61be14","type":"procode","props":{"code":"type Product = {\n id: number\n name: string\n}\n\nexport function ProductList({ products }: { products: Product[] }) {\n if (products.length === 0) {\n return

No products found

\n }\n\n return (\n

{product.name}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"8nmrfwjav\",\"name\":\"code\",\"code\":\"type Product = {\\n id: number\\n name: string\\n}\\n\\nexport function ProductList({ products }: { products: Product[] }) {\\n if (products.length === 0) {\\n return

No products found

\\n }\\n\\n return (\\n

{product.name}

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"426a6c24-4174-4a01-9bd0-fb0f85e354d1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test:","styles":{}}],"children":[]},{"id":"6fa51305-866f-4a9d-a423-8d667950c943","type":"procode","props":{"code":"it(\"shows empty state when products are empty\", () => {\n render()\n\n expect(screen.getByText(/no products found/i)).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"mfoxocg2w\",\"name\":\"code\",\"code\":\"it(\\\"shows empty state when products are empty\\\", () => {\\n render()\\n\\n expect(screen.getByText(/no products found/i)).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"62324bd2-8d98-4a2b-936f-64e6bd1c5f57","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a23cb3dd-667a-4b48-8a32-851734c95909","type":"procode","props":{"code":"Empty state is part of real user experience.\n","language":"txt","filename":"","files":"[{\"id\":\"8whcfhmh3\",\"name\":\"code\",\"code\":\"Empty state is part of real user experience.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c03ca75c-fdc4-4b46-bfb8-546e69536c0a","type":"divider","props":{},"children":[]},{"id":"80378e50-a9f0-49bd-8528-bca09ee724cd","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Success State","styles":{}}],"children":[]},{"id":"0b17b8c2-9036-4746-9bf6-066a7868e812","type":"procode","props":{"code":"it(\"shows products when data exists\", () => {\n const products = [\n { id: 1, name: \"Keyboard\" },\n { id: 2, name: \"Mouse\" },\n ]\n\n render()\n\n expect(screen.getByText(\"Keyboard\")).toBeInTheDocument()\n expect(screen.getByText(\"Mouse\")).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"uy223gjzk\",\"name\":\"code\",\"code\":\"it(\\\"shows products when data exists\\\", () => {\\n const products = [\\n { id: 1, name: \\\"Keyboard\\\" },\\n { id: 2, name: \\\"Mouse\\\" },\\n ]\\n\\n render()\\n\\n expect(screen.getByText(\\\"Keyboard\\\")).toBeInTheDocument()\\n expect(screen.getByText(\\\"Mouse\\\")).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"628a04a2-786e-4c6e-acd5-cbefcb117da0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"23b4649a-c8a8-434e-be02-b349f7ecb36e","type":"procode","props":{"code":"Success state proves data is displayed correctly.\n","language":"txt","filename":"","files":"[{\"id\":\"6hcfrw48q\",\"name\":\"code\",\"code\":\"Success state proves data is displayed correctly.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9b56a82d-91d6-4ae3-b7fb-8825ea5ae520","type":"divider","props":{},"children":[]},{"id":"269143cf-a746-429c-8be7-6c636320d9ee","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Async Data","styles":{}}],"children":[]},{"id":"5ee727dd-58e4-4c3c-aae8-62ca207f35c2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"90395cb1-c3f8-4888-8e7c-3e4dd2716815","type":"procode","props":{"code":"it(\"shows products after data is loaded\", async () => {\n render()\n\n expect(screen.getByText(/loading/i)).toBeInTheDocument()\n\n expect(await screen.findByText(\"Keyboard\")).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"gau581dy6\",\"name\":\"code\",\"code\":\"it(\\\"shows products after data is loaded\\\", async () => {\\n render()\\n\\n expect(screen.getByText(/loading/i)).toBeInTheDocument()\\n\\n expect(await screen.findByText(\\\"Keyboard\\\")).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7aa516eb-86b1-4b19-98ac-336878d7d17f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"375822e8-72eb-4715-9f17-005603f03450","type":"procode","props":{"code":"findByText\n├── waits for element\n├── useful for async UI\n└── good after API request or delayed update\n","language":"txt","filename":"","files":"[{\"id\":\"ch6tlxr78\",\"name\":\"code\",\"code\":\"findByText\\n├── waits for element\\n├── useful for async UI\\n└── good after API request or delayed update\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"70c64515-4bb4-4ab1-b380-994db191f02f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"cc422d03-8576-4741-bbb7-3d15ddbeaa7c","type":"procode","props":{"code":"Use findBy for async UI.\n","language":"txt","filename":"","files":"[{\"id\":\"wh29uzr6j\",\"name\":\"code\",\"code\":\"Use findBy for async UI.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0577a23e-12de-465d-a833-ab3bee9c701a","type":"divider","props":{},"children":[]},{"id":"8c92be99-cf0f-4e9e-8a4d-f78d186d9592","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mock API Request","styles":{}}],"children":[]},{"id":"ed51196f-8598-4f29-8d51-4cb702607aef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For component tests, avoid calling real backend.","styles":{}}],"children":[]},{"id":"231e8255-335b-449e-b9e0-733431e06622","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example with mocked function:","styles":{}}],"children":[]},{"id":"75adce92-6883-412b-b7b7-61eac20107db","type":"procode","props":{"code":"const getProducts = vi.fn().mockResolvedValue([\n { id: 1, name: \"Keyboard\" },\n])\n","language":"tsx","filename":"","files":"[{\"id\":\"fago02m9w\",\"name\":\"code\",\"code\":\"const getProducts = vi.fn().mockResolvedValue([\\n { id: 1, name: \\\"Keyboard\\\" },\\n])\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4176ac6f-07a3-4063-88b7-edc884017eb5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"a7fc0c71-54b9-4d76-8da0-d92438bf3c41","type":"procode","props":{"code":"Mock API\n├── test controls returned data\n├── test becomes faster\n├── test does not depend on real server\n└── test is easier to debug\n","language":"txt","filename":"","files":"[{\"id\":\"gagwocr6l\",\"name\":\"code\",\"code\":\"Mock API\\n├── test controls returned data\\n├── test becomes faster\\n├── test does not depend on real server\\n└── test is easier to debug\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f43b86a5-abf7-4f3c-9bce-e0f8a19366a3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4662aa01-e46d-4569-84e1-8bf17b11aa3a","type":"procode","props":{"code":"Component test should not depend on real backend.\n","language":"txt","filename":"","files":"[{\"id\":\"x59c8pqw4\",\"name\":\"code\",\"code\":\"Component test should not depend on real backend.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"037cc20b-2ee5-4e0b-b72e-d5df8da1a46c","type":"divider","props":{},"children":[]},{"id":"d91cc8a4-f163-4d4e-9f9a-841fa084cf38","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test API Service Separately","styles":{}}],"children":[]},{"id":"93b8d31f-b498-429d-b11d-16aaa3e1a743","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"API service:","styles":{}}],"children":[]},{"id":"7cab9f06-f2d0-4490-9b23-f92aa6827e95","type":"procode","props":{"code":"export async function getProducts() {\n const response = await fetch(\"/api/products\")\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch products\")\n }\n\n return response.json()\n}\n","language":"ts","filename":"","files":"[{\"id\":\"uixymx49r\",\"name\":\"code\",\"code\":\"export async function getProducts() {\\n const response = await fetch(\\\"/api/products\\\")\\n\\n if (!response.ok) {\\n throw new Error(\\\"Failed to fetch products\\\")\\n }\\n\\n return response.json()\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d72ab8aa-09ee-45ed-ab0a-ab552346cc0a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Service test idea:","styles":{}}],"children":[]},{"id":"e3a1aebc-fab3-44ca-a0d2-38f6fa992afd","type":"procode","props":{"code":"API service test\n├── success response\n├── error response\n├── wrong data response\n└── unauthorized response\n","language":"txt","filename":"","files":"[{\"id\":\"n0o88jk6v\",\"name\":\"code\",\"code\":\"API service test\\n├── success response\\n├── error response\\n├── wrong data response\\n└── unauthorized response\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4669ad0a-c47f-4260-bea4-50a97b9be3a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"2478b565-ffb3-4541-ba3f-6df6ed3a3631","type":"procode","props":{"code":"Test API logic separately from UI when it becomes complex.\n","language":"txt","filename":"","files":"[{\"id\":\"mdq7hmbph\",\"name\":\"code\",\"code\":\"Test API logic separately from UI when it becomes complex.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"db2d729d-dfae-4262-acdd-048bf07c1015","type":"divider","props":{},"children":[]},{"id":"1f901616-94eb-4033-bcea-dc7d37ec98ff","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Do Not Test Everything","styles":{}}],"children":[]},{"id":"01ee34ff-51a2-4a6c-8d1a-ff454e17a7ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Avoid testing simple implementation details.","styles":{}}],"children":[]},{"id":"e88612a5-34b3-48f7-98df-b422552a4e20","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Not useful:","styles":{}}],"children":[]},{"id":"d6696501-6f51-477b-af63-1602a8a52116","type":"procode","props":{"code":"expect(typeof name).toBe(\"string\")\n","language":"tsx","filename":"","files":"[{\"id\":\"sk5mtmsra\",\"name\":\"code\",\"code\":\"expect(typeof name).toBe(\\\"string\\\")\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca8ca079-3523-4446-9c32-c9d71d7d42e0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"b0eef435-310b-4e5a-b233-95cc10a16636","type":"procode","props":{"code":"expect(screen.getByText(\"Farid\")).toBeInTheDocument()\n","language":"tsx","filename":"","files":"[{\"id\":\"uw5ieiv87\",\"name\":\"code\",\"code\":\"expect(screen.getByText(\\\"Farid\\\")).toBeInTheDocument()\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a5e95223-81b0-409d-8f81-274e5942b449","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Do not test:","styles":{}}],"children":[]},{"id":"3e6f7b28-32b8-4cfc-8c27-48cf92c835dd","type":"procode","props":{"code":"Every CSS class\nEvery div\nEvery internal state variable\nEvery private helper\nEvery library behavior\n","language":"txt","filename":"","files":"[{\"id\":\"yepkf8w8i\",\"name\":\"code\",\"code\":\"Every CSS class\\nEvery div\\nEvery internal state variable\\nEvery private helper\\nEvery library behavior\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d32fe848-9f91-4834-8703-ad85cfcaec9a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"be0f0211-a2f6-4410-ae79-7ad6c73c220e","type":"procode","props":{"code":"Test what matters for app behavior.\n","language":"txt","filename":"","files":"[{\"id\":\"qjmxcxu2q\",\"name\":\"code\",\"code\":\"Test what matters for app behavior.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8ff1b4b5-0fd9-4b1d-814c-b0b62dc77da7","type":"divider","props":{},"children":[]},{"id":"7cffabd6-5279-4f20-b609-dccf4f29bb7b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"What Should You Test?","styles":{}}],"children":[]},{"id":"69a31da8-b7aa-4830-9d35-0b513b8a6604","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test important behavior:","styles":{}}],"children":[]},{"id":"14dae461-5679-4e81-9249-4b2d22f3a7f1","type":"procode","props":{"code":"Page renders correctly\nUser can submit form\nValidation message appears\nLoading state appears\nError state appears\nEmpty state appears\nData appears after fetch\nProtected page redirects guest\nButton triggers correct action\nComponent handles important props\n","language":"txt","filename":"","files":"[{\"id\":\"t1uec4oyv\",\"name\":\"code\",\"code\":\"Page renders correctly\\nUser can submit form\\nValidation message appears\\nLoading state appears\\nError state appears\\nEmpty state appears\\nData appears after fetch\\nProtected page redirects guest\\nButton triggers correct action\\nComponent handles important props\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"64bcb486-42f2-43f8-9b88-567341ca2d7a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"55b42928-3ede-492f-9500-4a82b3bf2c07","type":"procode","props":{"code":"Test important user flows.\n","language":"txt","filename":"","files":"[{\"id\":\"5r2ocjcdj\",\"name\":\"code\",\"code\":\"Test important user flows.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1e578f00-a5ef-4ff8-b51d-add44eceb953","type":"divider","props":{},"children":[]},{"id":"4b9d79c8-5c78-4588-88af-cc4885d34095","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Unit Test vs Component Test vs E2E Test","styles":{}}],"children":[]},{"id":"4f8f2f33-dcc7-4644-ae5f-f5ee47b5fade","type":"procode","props":{"code":"Unit Test\n├── tests small function\n├── fast\n├── isolated\n└── example: formatCurrency()\n\nComponent Test\n├── tests React component\n├── checks UI behavior\n├── uses React Testing Library\n└── example: LoginForm\n\nE2E Test\n├── tests full app flow\n├── runs in real browser\n├── slower\n└── example: login then open dashboard\n","language":"txt","filename":"","files":"[{\"id\":\"zew69bl2p\",\"name\":\"code\",\"code\":\"Unit Test\\n├── tests small function\\n├── fast\\n├── isolated\\n└── example: formatCurrency()\\n\\nComponent Test\\n├── tests React component\\n├── checks UI behavior\\n├── uses React Testing Library\\n└── example: LoginForm\\n\\nE2E Test\\n├── tests full app flow\\n├── runs in real browser\\n├── slower\\n└── example: login then open dashboard\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"82a5f1c7-36de-422e-9495-5b8a1c8a6777","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"770cd781-22e8-4747-8d94-135e13b807d0","type":"procode","props":{"code":"Function logic → unit test\nReact UI behavior → component test\nFull user journey → E2E test\n","language":"txt","filename":"","files":"[{\"id\":\"2338bimls\",\"name\":\"code\",\"code\":\"Function logic → unit test\\nReact UI behavior → component test\\nFull user journey → E2E test\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5405e398-d7b2-4cbd-b07a-0a1bfaa5c0f3","type":"divider","props":{},"children":[]},{"id":"ba805bbf-535a-4478-9bcd-3e0c7b10ac9d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test File Naming","styles":{}}],"children":[]},{"id":"15d39786-44fe-468b-9c57-c3fe3d37efc1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Common names:","styles":{}}],"children":[]},{"id":"d8ef7540-2536-4eb4-86f2-3e9b1f0ad5e4","type":"procode","props":{"code":"button.test.tsx\nbutton.spec.tsx\nlogin-form.test.tsx\nproduct-list.test.tsx\nformat-currency.test.ts\n","language":"txt","filename":"","files":"[{\"id\":\"c07wqib3z\",\"name\":\"code\",\"code\":\"button.test.tsx\\nbutton.spec.tsx\\nlogin-form.test.tsx\\nproduct-list.test.tsx\\nformat-currency.test.ts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a7f39456-7818-4c12-972d-e223f94863bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example structure:","styles":{}}],"children":[]},{"id":"6f8a4937-5993-4fae-9dc6-f819a9e89dbd","type":"procode","props":{"code":"src/\n├── components/\n│ └── ui/\n│ ├── button.tsx\n│ └── button.test.tsx\n├── features/\n│ └── auth/\n│ ├── login-form.tsx\n│ └── login-form.test.tsx\n└── utils/\n ├── format-currency.ts\n └── format-currency.test.ts\n","language":"txt","filename":"","files":"[{\"id\":\"tfwesmz5o\",\"name\":\"code\",\"code\":\"src/\\n├── components/\\n│ └── ui/\\n│ ├── button.tsx\\n│ └── button.test.tsx\\n├── features/\\n│ └── auth/\\n│ ├── login-form.tsx\\n│ └── login-form.test.tsx\\n└── utils/\\n ├── format-currency.ts\\n └── format-currency.test.ts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e6cf87be-6334-4a99-912d-41beb0dcc61d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3117e06b-a431-49e3-b758-7f684f4ef833","type":"procode","props":{"code":"Put test near the file it tests.\n","language":"txt","filename":"","files":"[{\"id\":\"w6f77vi8n\",\"name\":\"code\",\"code\":\"Put test near the file it tests.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86427a50-3344-4347-be08-4cc72c7d9013","type":"divider","props":{},"children":[]},{"id":"ed1fd243-12c4-4af0-9893-fd7ce8b52b85","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Keep Test Data Simple","styles":{}}],"children":[]},{"id":"0f162e98-f3cd-4ebe-9509-7e7a0bac80ce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good:","styles":{}}],"children":[]},{"id":"cbf2e52c-c85c-4f4e-8d63-3e2d7a3ab2fc","type":"procode","props":{"code":"const user = {\n id: 1,\n name: \"Farid\",\n email: \"farid@mail.com\",\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"rz4j25b0o\",\"name\":\"code\",\"code\":\"const user = {\\n id: 1,\\n name: \\\"Farid\\\",\\n email: \\\"farid@mail.com\\\",\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c6f2a6ac-e18c-4aaa-98fd-446070e52d21","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Avoid:","styles":{}}],"children":[]},{"id":"b5896e6d-b28c-4b24-9baf-d878797486be","type":"procode","props":{"code":"const user = {\n id: 1,\n name: \"Farid\",\n email: \"farid@mail.com\",\n address: \"...\",\n profile: { ... },\n permissions: [ ... ],\n settings: { ... },\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"smccwskmh\",\"name\":\"code\",\"code\":\"const user = {\\n id: 1,\\n name: \\\"Farid\\\",\\n email: \\\"farid@mail.com\\\",\\n address: \\\"...\\\",\\n profile: { ... },\\n permissions: [ ... ],\\n settings: { ... },\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4621d933-5945-43fb-9abd-20f673bd41c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d0e25eff-98e9-4236-b837-b279428d7c37","type":"procode","props":{"code":"Use only data needed by the test.\n","language":"txt","filename":"","files":"[{\"id\":\"s9nuwalj0\",\"name\":\"code\",\"code\":\"Use only data needed by the test.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"21029002-dae9-4859-a3ac-9551ffc1c8fb","type":"divider","props":{},"children":[]},{"id":"6b9286db-4334-447c-bfb9-c1943931bd74","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Use Test Helpers When Needed","styles":{}}],"children":[]},{"id":"26e2e684-f7f1-4c9b-9dcb-d2c458a8fadc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If render setup repeats often, create helper.","styles":{}}],"children":[]},{"id":"de08101e-f9cc-4bc8-9291-be1700faca63","type":"procode","props":{"code":"function renderLoginForm() {\n const user = userEvent.setup()\n const handleSubmit = vi.fn()\n\n render()\n\n return {\n user,\n handleSubmit,\n }\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"g15e8u09a\",\"name\":\"code\",\"code\":\"function renderLoginForm() {\\n const user = userEvent.setup()\\n const handleSubmit = vi.fn()\\n\\n render()\\n\\n return {\\n user,\\n handleSubmit,\\n }\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73872c0e-feb8-4d6a-bec2-d34e702ebd77","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usage:","styles":{}}],"children":[]},{"id":"b73de54c-0413-4546-abbe-8f6f8357450b","type":"procode","props":{"code":"it(\"submits form\", async () => {\n const { user, handleSubmit } = renderLoginForm()\n\n await user.type(screen.getByLabelText(/email/i), \"user@mail.com\")\n await user.type(screen.getByLabelText(/password/i), \"password123\")\n await user.click(screen.getByRole(\"button\", { name: /login/i }))\n\n expect(handleSubmit).toHaveBeenCalled()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"bikoww8qn\",\"name\":\"code\",\"code\":\"it(\\\"submits form\\\", async () => {\\n const { user, handleSubmit } = renderLoginForm()\\n\\n await user.type(screen.getByLabelText(/email/i), \\\"user@mail.com\\\")\\n await user.type(screen.getByLabelText(/password/i), \\\"password123\\\")\\n await user.click(screen.getByRole(\\\"button\\\", { name: /login/i }))\\n\\n expect(handleSubmit).toHaveBeenCalled()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"91bf07b3-fab1-4144-98b8-296f2b0cc8af","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"41a52b1f-1894-4322-9ba9-3b720d4bc044","type":"procode","props":{"code":"Test helper reduces repeated setup.\n","language":"txt","filename":"","files":"[{\"id\":\"i97xr1g43\",\"name\":\"code\",\"code\":\"Test helper reduces repeated setup.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0e52b22c-f5e0-47ea-98b9-0f0331deed40","type":"divider","props":{},"children":[]},{"id":"a3b30201-c2ae-4c3e-9fbe-f67177cd487f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Too Much Mocking","styles":{}}],"children":[]},{"id":"5cc4523b-ae80-4116-a07c-5113cf10bb4a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Mocking is useful, but too much mocking can make tests fake.","styles":{}}],"children":[]},{"id":"347eb591-79b4-4307-9936-ed2ff7c260aa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good mock:","styles":{}}],"children":[]},{"id":"d8d27dee-12bd-46b5-8921-0232bc7cc9ed","type":"procode","props":{"code":"Mock API request\nMock navigation\nMock external service\nMock expensive browser API\n","language":"txt","filename":"","files":"[{\"id\":\"xb0s3ihx0\",\"name\":\"code\",\"code\":\"Mock API request\\nMock navigation\\nMock external service\\nMock expensive browser API\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c4f993d8-90b5-42c8-a134-1b8e1a48cc7a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Avoid mocking:","styles":{}}],"children":[]},{"id":"f6a13c2f-89c7-46c5-af28-fe4a909ea955","type":"procode","props":{"code":"React state\nReact rendering\nComponent behavior you want to test\nEverything inside the component\n","language":"txt","filename":"","files":"[{\"id\":\"hddzk75uf\",\"name\":\"code\",\"code\":\"React state\\nReact rendering\\nComponent behavior you want to test\\nEverything inside the component\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33059a16-60a5-4238-a4bc-777657454dc2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7d285fc3-f2ae-474c-b077-f26dabbb7bb6","type":"procode","props":{"code":"Mock external dependencies, not the behavior you are testing.\n","language":"txt","filename":"","files":"[{\"id\":\"cghp03ct3\",\"name\":\"code\",\"code\":\"Mock external dependencies, not the behavior you are testing.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ce68dead-4bc5-4532-8eae-535c12386c87","type":"divider","props":{},"children":[]},{"id":"63bddff4-c7c0-45a7-ba43-05ec51d54801","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Accessibility","styles":{}}],"children":[]},{"id":"41d15c3e-7ea3-4bfc-b873-b14f52e3ab72","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good components are easier to test when accessible.","styles":{}}],"children":[]},{"id":"28461b3b-8bbf-4160-8b09-20fc24ed5603","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good:","styles":{}}],"children":[]},{"id":"4519686d-eee4-480b-9e71-60d3e909b0c1","type":"procode","props":{"code":"Email\n\n","language":"tsx","filename":"","files":"[{\"id\":\"gowjth04d\",\"name\":\"code\",\"code\":\"Email\\n\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fa4d09b7-89fc-4289-a6ca-375bbd8bb694","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test:","styles":{}}],"children":[]},{"id":"81233b63-8bf9-4840-8ece-85e5be996dbe","type":"procode","props":{"code":"screen.getByLabelText(/email/i)\n","language":"tsx","filename":"","files":"[{\"id\":\"qveoox6oa\",\"name\":\"code\",\"code\":\"screen.getByLabelText(/email/i)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5e65777e-7f7c-4c46-b51c-6582203f5210","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button:","styles":{}}],"children":[]},{"id":"2a1f1544-03e4-47c5-85e2-645b760a7ed4","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"4oqy3d9l7\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"177bf7f2-c3ef-4951-b006-31a02ff3cab9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test:","styles":{}}],"children":[]},{"id":"3e696534-91fd-4ea3-8b15-74eaf955597d","type":"procode","props":{"code":"screen.getByRole(\"button\", { name: /submit/i })\n","language":"tsx","filename":"","files":"[{\"id\":\"obzrpcxyu\",\"name\":\"code\",\"code\":\"screen.getByRole(\\\"button\\\", { name: /submit/i })\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"aa5c0054-0874-41a8-b9ee-3ba49685ecab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6ac8a7b6-db5f-4e53-969c-79061c73e4ce","type":"procode","props":{"code":"Accessible UI is easier to test.\n","language":"txt","filename":"","files":"[{\"id\":\"okui8f8ma\",\"name\":\"code\",\"code\":\"Accessible UI is easier to test.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e3b86f9b-2b0a-4ec4-b36d-2f73eff2ff6e","type":"divider","props":{},"children":[]},{"id":"7f5464e6-455c-47c5-a69f-46f21a7fb74a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Validation","styles":{}}],"children":[]},{"id":"75ddb9ac-36f1-448a-aafa-8773c88eed46","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"8dad0fe9-ccaa-42fd-bae6-8e0e97dba175","type":"procode","props":{"code":"it(\"shows validation message when email is empty\", async () => {\n const user = userEvent.setup()\n\n render()\n\n await user.click(screen.getByRole(\"button\", { name: /login/i }))\n\n expect(screen.getByText(/email is required/i)).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"q8i2ymoze\",\"name\":\"code\",\"code\":\"it(\\\"shows validation message when email is empty\\\", async () => {\\n const user = userEvent.setup()\\n\\n render()\\n\\n await user.click(screen.getByRole(\\\"button\\\", { name: /login/i }))\\n\\n expect(screen.getByText(/email is required/i)).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fa776bd8-8c15-49a4-aff5-4a0239c5e2ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"9672f85f-4e5c-442a-a4e7-cd82d28519cd","type":"procode","props":{"code":"Submit empty form\n├── validation runs\n├── error message appears\n└── test checks message\n","language":"txt","filename":"","files":"[{\"id\":\"6k4j8begf\",\"name\":\"code\",\"code\":\"Submit empty form\\n├── validation runs\\n├── error message appears\\n└── test checks message\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"58c777c1-13a1-4dcc-ae93-d99e2773a637","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"1527bc36-c3b3-48d0-82d5-c021fd8a11bc","type":"procode","props":{"code":"Validation is important user behavior.\n","language":"txt","filename":"","files":"[{\"id\":\"48rupbarr\",\"name\":\"code\",\"code\":\"Validation is important user behavior.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"01aeed2d-c30c-475a-a9c9-d4db1f7e3c40","type":"divider","props":{},"children":[]},{"id":"cfeeecda-0faf-4d1f-a415-130e6b2f2b26","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Disabled Button","styles":{}}],"children":[]},{"id":"d148b8f5-fbe8-4502-bb8e-214b5b69c26a","type":"procode","props":{"code":"it(\"disables submit button while loading\", () => {\n render()\n\n expect(screen.getByRole(\"button\", { name: /saving/i })).toBeDisabled()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"afwwcznfi\",\"name\":\"code\",\"code\":\"it(\\\"disables submit button while loading\\\", () => {\\n render()\\n\\n expect(screen.getByRole(\\\"button\\\", { name: /saving/i })).toBeDisabled()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fe893e71-a7f4-4450-a3e5-92092377b8d3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c7ba59c8-7efa-48df-a12c-e51ad142cbd8","type":"procode","props":{"code":"Disabled state prevents wrong user actions.\n","language":"txt","filename":"","files":"[{\"id\":\"j08lakl64\",\"name\":\"code\",\"code\":\"Disabled state prevents wrong user actions.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4d5562f9-4cdf-4549-a3c7-9acb1db7eab3","type":"divider","props":{},"children":[]},{"id":"5d4bc37a-ff49-4323-bd93-1dd4a0228790","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Navigation Behavior","styles":{}}],"children":[]},{"id":"670814de-7142-4858-84df-f73f10626bd0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example with React Router:","styles":{}}],"children":[]},{"id":"b6c1f379-ec5f-481e-9dac-622d8a3e2fd3","type":"procode","props":{"code":"it(\"shows login page for guest user\", () => {\n render(\n \n \n \n )\n\n expect(screen.getByRole(\"heading\", { name: /login/i })).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"w1q0pnyqf\",\"name\":\"code\",\"code\":\"it(\\\"shows login page for guest user\\\", () => {\\n render(\\n \\n \\n \\n )\\n\\n expect(screen.getByRole(\\\"heading\\\", { name: /login/i })).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fd8cd4fb-a88f-4fd9-930c-9dfcd10ae826","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5362c398-ed95-4a59-8dff-d16c104f8e8c","type":"procode","props":{"code":"Protected route behavior should be tested.\n","language":"txt","filename":"","files":"[{\"id\":\"zslubm1my\",\"name\":\"code\",\"code\":\"Protected route behavior should be tested.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0f0f7c74-71ef-42d2-8f60-0071e0ef4cd2","type":"divider","props":{},"children":[]},{"id":"f47e6dca-fc3f-482f-92f3-cd1d44ce2e53","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Use beforeEach for Repeated Setup","styles":{}}],"children":[]},{"id":"e1a7c651-5242-4612-abc7-faecc74965ce","type":"procode","props":{"code":"beforeEach(() => {\n vi.clearAllMocks()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"8p5yqfg8i\",\"name\":\"code\",\"code\":\"beforeEach(() => {\\n vi.clearAllMocks()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4e7918e6-19d2-476a-bfdf-eef678a71ee4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it for:","styles":{}}],"children":[]},{"id":"790d1f24-dd21-4fe4-9400-799941d200a5","type":"procode","props":{"code":"Clearing mocks\nResetting fake timers\nResetting test data\nPreparing repeated setup\n","language":"txt","filename":"","files":"[{\"id\":\"sna95cxni\",\"name\":\"code\",\"code\":\"Clearing mocks\\nResetting fake timers\\nResetting test data\\nPreparing repeated setup\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2fd19f9c-400d-448e-a518-feb3ae73fa99","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"dbb48a87-b088-40f1-ba18-21d791ae3a2f","type":"procode","props":{"code":"Each test should start clean.\n","language":"txt","filename":"","files":"[{\"id\":\"7wwlj0t9h\",\"name\":\"code\",\"code\":\"Each test should start clean.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f14865da-ed7c-4720-b4c8-8fba9eb650fa","type":"divider","props":{},"children":[]},{"id":"4ad33b76-65b5-4b08-bf58-ff31cb6553f2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Test Dependency","styles":{}}],"children":[]},{"id":"ad61fa63-0812-4f77-8259-485f916c3807","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"27ae5a9d-87be-4444-ab4f-f571ff441f83","type":"procode","props":{"code":"Test 1 creates data\nTest 2 depends on data from Test 1\nTest 3 depends on Test 2\n","language":"txt","filename":"","files":"[{\"id\":\"mlod4doc9\",\"name\":\"code\",\"code\":\"Test 1 creates data\\nTest 2 depends on data from Test 1\\nTest 3 depends on Test 2\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"16da0042-cf39-4f45-b210-e9b65db144c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"8e91cfe4-af36-4ac1-8be4-841abf1e26a4","type":"procode","props":{"code":"If one test fails, other tests may fail too.\n","language":"txt","filename":"","files":"[{\"id\":\"n5cxp4ywr\",\"name\":\"code\",\"code\":\"If one test fails, other tests may fail too.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9e7106c0-2c56-4f6d-81ae-c0ca073b776a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"80ec128c-c423-4551-9dea-5ce4fe54b1d0","type":"procode","props":{"code":"Each test prepares its own data.\nEach test can run alone.\n","language":"txt","filename":"","files":"[{\"id\":\"13nrrx5us\",\"name\":\"code\",\"code\":\"Each test prepares its own data.\\nEach test can run alone.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2e59436b-59a1-4cb6-9291-131368a14bb8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"e74e5cd8-4938-4bc7-9af8-b5c2484a41c1","type":"procode","props":{"code":"Tests should be independent.\n","language":"txt","filename":"","files":"[{\"id\":\"9df6e6kqq\",\"name\":\"code\",\"code\":\"Tests should be independent.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ce598bc1-fb61-4339-92e0-99596c26cc0d","type":"divider","props":{},"children":[]},{"id":"6f8fbca8-9d7c-4075-b596-edbc85e146c5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Random Test Data","styles":{}}],"children":[]},{"id":"89421782-cde9-437a-b995-b444327a9665","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"a1c2f553-3888-4a1f-ad47-2acaa5bc966f","type":"procode","props":{"code":"const id = Math.random()\n","language":"tsx","filename":"","files":"[{\"id\":\"axbumckbl\",\"name\":\"code\",\"code\":\"const id = Math.random()\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3609f6a1-6f2c-461e-a624-a4337ea20e74","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"7db53565-20c2-4673-9877-2c31d626ff01","type":"procode","props":{"code":"Random data can make tests inconsistent.\n","language":"txt","filename":"","files":"[{\"id\":\"agbwqruxl\",\"name\":\"code\",\"code\":\"Random data can make tests inconsistent.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"54db3ce7-0026-403e-b688-8da86856d167","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"d9445c79-be6f-42af-ad73-3bfc1178dd0f","type":"procode","props":{"code":"const id = 1\n","language":"tsx","filename":"","files":"[{\"id\":\"bkgstd85j\",\"name\":\"code\",\"code\":\"const id = 1\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de360fe9-d2a1-476c-89b7-e48c0a283084","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b8b9939c-e83d-4d5b-9185-03909e3c0d22","type":"procode","props":{"code":"Tests should be predictable.\n","language":"txt","filename":"","files":"[{\"id\":\"1vhxo08g7\",\"name\":\"code\",\"code\":\"Tests should be predictable.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a045cd50-2a79-4a66-b6cb-49b5599fd38d","type":"divider","props":{},"children":[]},{"id":"3274ea57-be56-43ce-a464-42af0fd73b04","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Flaky Tests","styles":{}}],"children":[]},{"id":"84788c3c-8926-48da-b774-2f912f8900a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flaky test means sometimes pass and sometimes fail.","styles":{}}],"children":[]},{"id":"d9d1bb4b-87c5-45dd-a6cd-39e233764ada","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Common causes:","styles":{}}],"children":[]},{"id":"396f7239-8e1b-4b74-a669-7480117c3406","type":"procode","props":{"code":"Real API dependency\nRandom data\nTiming problem\nMissing await\nWrong async query\nShared state between tests\nEnvironment difference\n","language":"txt","filename":"","files":"[{\"id\":\"c87gja2ii\",\"name\":\"code\",\"code\":\"Real API dependency\\nRandom data\\nTiming problem\\nMissing await\\nWrong async query\\nShared state between tests\\nEnvironment difference\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"106bf382-01e2-47f4-8705-4229918a28c5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"6640052a-9278-4d5b-bfdf-4d84b5aa4c45","type":"procode","props":{"code":"Use mocks for API\nUse stable test data\nUse await for async UI\nKeep tests isolated\nReset mocks before each test\n","language":"txt","filename":"","files":"[{\"id\":\"gb3cz86h6\",\"name\":\"code\",\"code\":\"Use mocks for API\\nUse stable test data\\nUse await for async UI\\nKeep tests isolated\\nReset mocks before each test\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1c16bdc9-86be-4487-abb4-c646298b8b9e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"64b30812-0df8-442c-bea8-3ecb31e01bc3","type":"procode","props":{"code":"Good tests should give the same result every time.\n","language":"txt","filename":"","files":"[{\"id\":\"vswu6ekzl\",\"name\":\"code\",\"code\":\"Good tests should give the same result every time.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c84747c5-5b56-49ee-b072-59d99a7abcf2","type":"divider","props":{},"children":[]},{"id":"848667ee-4519-4a78-b56f-a86a9e9f70f5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Do Not Overuse Snapshot Tests","styles":{}}],"children":[]},{"id":"6011a05e-25e9-4a85-b5a1-7d16fb9b5fa2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Snapshot tests can be useful, but do not rely on them too much.","styles":{}}],"children":[]},{"id":"78919506-e322-4902-999d-ef264ce9c4a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"6bc0a39f-96b4-48f9-920b-41f277d188be","type":"procode","props":{"code":"Large snapshot\n├── hard to review\n├── easy to update blindly\n└── may not prove behavior\n","language":"txt","filename":"","files":"[{\"id\":\"7p4zr9qwb\",\"name\":\"code\",\"code\":\"Large snapshot\\n├── hard to review\\n├── easy to update blindly\\n└── may not prove behavior\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"13f658c8-b3b9-46a6-9777-d2049608f3ca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"20f4706f-5201-4ebf-8388-bf3311628b59","type":"procode","props":{"code":"expect(screen.getByRole(\"button\", { name: /submit/i })).toBeInTheDocument()\n","language":"tsx","filename":"","files":"[{\"id\":\"gzijbtjbh\",\"name\":\"code\",\"code\":\"expect(screen.getByRole(\\\"button\\\", { name: /submit/i })).toBeInTheDocument()\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cf06195b-5f5d-469b-a51e-db79841baff2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c3b92cbf-ebf7-489e-a871-53b38c0dedcf","type":"procode","props":{"code":"Prefer meaningful assertions over large snapshots.\n","language":"txt","filename":"","files":"[{\"id\":\"ugre1c8s5\",\"name\":\"code\",\"code\":\"Prefer meaningful assertions over large snapshots.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e39248cf-20c0-4bf7-82eb-53b8285e94f1","type":"divider","props":{},"children":[]},{"id":"e1bef250-75c1-4386-b7d5-62c98e0581bd","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Good Assertion","styles":{}}],"children":[]},{"id":"39d040e7-f27f-4068-b1ad-8918e0ae772d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good assertion checks real output.","styles":{}}],"children":[]},{"id":"d2f1cc59-cb65-46a8-b554-626cb25aeda9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good:","styles":{}}],"children":[]},{"id":"1fa09b8a-bd26-4a34-b53b-b9350ac7b9cc","type":"procode","props":{"code":"expect(screen.getByText(/login failed/i)).toBeInTheDocument()\n","language":"tsx","filename":"","files":"[{\"id\":\"2nw8mv2rg\",\"name\":\"code\",\"code\":\"expect(screen.getByText(/login failed/i)).toBeInTheDocument()\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fe731ac2-51df-442b-a42d-14c27fabaa17","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"685ae85f-66e7-465a-8872-85a939a07d03","type":"procode","props":{"code":"expect(container.firstChild).toMatchSnapshot()\n","language":"tsx","filename":"","files":"[{\"id\":\"1kigkj64s\",\"name\":\"code\",\"code\":\"expect(container.firstChild).toMatchSnapshot()\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"afe566cc-504e-401b-a477-65704efe676b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"2da36685-7e3d-45a8-8f22-95ebf6ea3735","type":"procode","props":{"code":"Assertion should prove useful behavior.\n","language":"txt","filename":"","files":"[{\"id\":\"kdolprwdd\",\"name\":\"code\",\"code\":\"Assertion should prove useful behavior.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6b074022-7333-4f35-b87c-12bee4cdb06c","type":"divider","props":{},"children":[]},{"id":"d53859ba-32d7-4bc9-ae7c-954bc34976e0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Error Boundary","styles":{}}],"children":[]},{"id":"48276422-e018-4b47-b0ad-d80ed73292ad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If your app uses error boundary, test fallback UI.","styles":{}}],"children":[]},{"id":"09f19d65-5fa9-4643-b28b-ad7346348829","type":"procode","props":{"code":"it(\"shows fallback UI when component crashes\", () => {\n render(\n \n \n \n )\n\n expect(screen.getByText(/something went wrong/i)).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"wcwd3a6x6\",\"name\":\"code\",\"code\":\"it(\\\"shows fallback UI when component crashes\\\", () => {\\n render(\\n \\n \\n \\n )\\n\\n expect(screen.getByText(/something went wrong/i)).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1d1778d0-ca1a-46ac-be78-4f7d2669ced9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"dcee6247-af56-4f88-8a03-87b485f71126","type":"procode","props":{"code":"Error boundary test proves app can recover from UI crash.\n","language":"txt","filename":"","files":"[{\"id\":\"8znbkfdwr\",\"name\":\"code\",\"code\":\"Error boundary test proves app can recover from UI crash.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b25ad43e-8f0e-4af1-b66c-72dc71809000","type":"divider","props":{},"children":[]},{"id":"e3819786-7c7a-48c9-9a0c-a75a05aea3e5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Custom Hook","styles":{}}],"children":[]},{"id":"78b50551-9a37-4df5-93c1-037bab8148b3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example hook:","styles":{}}],"children":[]},{"id":"de6f3263-2880-4b36-8086-8e3479d2b7bd","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport function useToggle(initialValue = false) {\n const [value, setValue] = useState(initialValue)\n\n function toggle() {\n setValue((current) => !current)\n }\n\n return {\n value,\n toggle,\n }\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"6crabepl8\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport function useToggle(initialValue = false) {\\n const [value, setValue] = useState(initialValue)\\n\\n function toggle() {\\n setValue((current) => !current)\\n }\\n\\n return {\\n value,\\n toggle,\\n }\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fde030f6-41f3-4070-8f41-26c5de68d060","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test idea:","styles":{}}],"children":[]},{"id":"7d3471f5-dbc4-44ac-b8c8-d7424d5e5619","type":"procode","props":{"code":"import { renderHook, act } from \"@testing-library/react\"\nimport { useToggle } from \"./use-toggle\"\n\nit(\"toggles value\", () => {\n const { result } = renderHook(() => useToggle())\n\n act(() => {\n result.current.toggle()\n })\n\n expect(result.current.value).toBe(true)\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"lgzq42is0\",\"name\":\"code\",\"code\":\"import { renderHook, act } from \\\"@testing-library/react\\\"\\nimport { useToggle } from \\\"./use-toggle\\\"\\n\\nit(\\\"toggles value\\\", () => {\\n const { result } = renderHook(() => useToggle())\\n\\n act(() => {\\n result.current.toggle()\\n })\\n\\n expect(result.current.value).toBe(true)\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2d078a27-995f-4067-a05d-5c1500be68f2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b0e08c43-4c2c-4125-9239-b6667fe83adf","type":"procode","props":{"code":"Test custom hook when hook contains reusable logic.\n","language":"txt","filename":"","files":"[{\"id\":\"j5uty3t6c\",\"name\":\"code\",\"code\":\"Test custom hook when hook contains reusable logic.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7823f7dd-db6a-4d13-aafb-ef146f454046","type":"divider","props":{},"children":[]},{"id":"46fa5777-abd2-4305-8300-aeaa36eaff8e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Test Utility Function","styles":{}}],"children":[]},{"id":"78fead52-e67b-484d-8f63-d6e0d63be1ce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Utility:","styles":{}}],"children":[]},{"id":"fe0c6e15-677a-427f-a455-c6fcdecb92a8","type":"procode","props":{"code":"export function formatCurrency(value: number) {\n return `Rp ${value.toLocaleString(\"id-ID\")}`\n}\n","language":"ts","filename":"","files":"[{\"id\":\"xkobd9v30\",\"name\":\"code\",\"code\":\"export function formatCurrency(value: number) {\\n return `Rp ${value.toLocaleString(\\\"id-ID\\\")}`\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b5293044-fdad-43ec-887f-40ac77946c1c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test:","styles":{}}],"children":[]},{"id":"dfa1aef7-9fa7-48a6-88d5-955469e821ac","type":"procode","props":{"code":"import { expect, it } from \"vitest\"\nimport { formatCurrency } from \"./format-currency\"\n\nit(\"formats number to Indonesian Rupiah\", () => {\n expect(formatCurrency(250000)).toBe(\"Rp 250.000\")\n})\n","language":"ts","filename":"","files":"[{\"id\":\"v5fkwbxko\",\"name\":\"code\",\"code\":\"import { expect, it } from \\\"vitest\\\"\\nimport { formatCurrency } from \\\"./format-currency\\\"\\n\\nit(\\\"formats number to Indonesian Rupiah\\\", () => {\\n expect(formatCurrency(250000)).toBe(\\\"Rp 250.000\\\")\\n})\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7fdc647f-1f50-4c9f-97ae-3ba1b1388989","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"db9678de-224d-439a-a34b-1d1ebee75c42","type":"procode","props":{"code":"Pure function is easy to unit test.\n","language":"txt","filename":"","files":"[{\"id\":\"2php2zs21\",\"name\":\"code\",\"code\":\"Pure function is easy to unit test.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"efa89ac2-d567-4194-a9b0-2f35f01d8abd","type":"divider","props":{},"children":[]},{"id":"674e4acc-f78a-4081-94c6-f7b9723ad05e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Testing Priority","styles":{}}],"children":[]},{"id":"65ac29d4-5a4f-4b29-affe-79439ac10cc7","type":"procode","props":{"code":"Highest priority\n├── Critical user flows\n├── Auth flow\n├── Payment flow\n├── Form submission\n├── CRUD actions\n├── Permission behavior\n├── API error handling\n└── Important business logic\n\nLower priority\n├── Simple static text\n├── Basic layout wrappers\n├── Library behavior\n└── Internal implementation details\n","language":"txt","filename":"","files":"[{\"id\":\"bjo97kt52\",\"name\":\"code\",\"code\":\"Highest priority\\n├── Critical user flows\\n├── Auth flow\\n├── Payment flow\\n├── Form submission\\n├── CRUD actions\\n├── Permission behavior\\n├── API error handling\\n└── Important business logic\\n\\nLower priority\\n├── Simple static text\\n├── Basic layout wrappers\\n├── Library behavior\\n└── Internal implementation details\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30aa3f72-546b-47b1-9876-cbfb4c49c2de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d22db2f1-a87b-4d55-a6b2-f69d449dfee7","type":"procode","props":{"code":"Test the parts that can break user experience or business logic.\n","language":"txt","filename":"","files":"[{\"id\":\"8e3n83hn3\",\"name\":\"code\",\"code\":\"Test the parts that can break user experience or business logic.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a4d093e7-7c47-4f50-9782-cc83916ff4d4","type":"divider","props":{},"children":[]},{"id":"0916acdd-0d84-4213-a78a-d80cedf8c70c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"f7dad194-8915-4cff-ba56-d8ccff54ca44","type":"procode","props":{"code":"Mistake 1: Testing implementation details\nMistake 2: Testing internal state directly\nMistake 3: Not testing user interaction\nMistake 4: Not testing loading state\nMistake 5: Not testing error state\nMistake 6: Calling real API in component test\nMistake 7: Using unclear test names\nMistake 8: Using too many snapshots\nMistake 9: Forgetting await for async actions\nMistake 10: Making tests depend on each other\n","language":"txt","filename":"","files":"[{\"id\":\"m59r4tu80\",\"name\":\"code\",\"code\":\"Mistake 1: Testing implementation details\\nMistake 2: Testing internal state directly\\nMistake 3: Not testing user interaction\\nMistake 4: Not testing loading state\\nMistake 5: Not testing error state\\nMistake 6: Calling real API in component test\\nMistake 7: Using unclear test names\\nMistake 8: Using too many snapshots\\nMistake 9: Forgetting await for async actions\\nMistake 10: Making tests depend on each other\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"15408bfa-3b17-4375-8252-8d47c6a7be46","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"0a41ac21-d847-490f-b800-ea7db4d5d32f","type":"procode","props":{"code":"Test user behavior.\nUse clear test names.\nMock external services.\nUse stable test data.\nKeep tests independent.\nTest important states.\n","language":"txt","filename":"","files":"[{\"id\":\"dod8i9o72\",\"name\":\"code\",\"code\":\"Test user behavior.\\nUse clear test names.\\nMock external services.\\nUse stable test data.\\nKeep tests independent.\\nTest important states.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3d147e1f-9408-4507-bc4f-436a5fd10b93","type":"divider","props":{},"children":[]},{"id":"0ca57360-5124-4eae-aba6-92f1f98482c5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"e8c7c07c-babb-4881-8eea-6accaa983b51","type":"procode","props":{"code":"Professional Testing Best Practices\n├── Test behavior, not implementation\n├── Write tests from user perspective\n├── Use React Testing Library for components\n├── Use Vitest or Jest as test runner\n├── Use clear test names\n├── Follow Arrange, Act, Assert\n├── Prefer getByRole and getByLabelText\n├── Use userEvent for user interaction\n├── Test loading, success, error, and empty states\n├── Mock external API calls\n├── Keep test data simple\n├── Keep tests independent\n├── Avoid random data\n├── Avoid overusing snapshots\n├── Test critical user flows first\n├── Use helpers for repeated setup\n├── Reset mocks between tests\n└── Make tests easy to read and maintain\n","language":"txt","filename":"","files":"[{\"id\":\"92jdypukt\",\"name\":\"code\",\"code\":\"Professional Testing Best Practices\\n├── Test behavior, not implementation\\n├── Write tests from user perspective\\n├── Use React Testing Library for components\\n├── Use Vitest or Jest as test runner\\n├── Use clear test names\\n├── Follow Arrange, Act, Assert\\n├── Prefer getByRole and getByLabelText\\n├── Use userEvent for user interaction\\n├── Test loading, success, error, and empty states\\n├── Mock external API calls\\n├── Keep test data simple\\n├── Keep tests independent\\n├── Avoid random data\\n├── Avoid overusing snapshots\\n├── Test critical user flows first\\n├── Use helpers for repeated setup\\n├── Reset mocks between tests\\n└── Make tests easy to read and maintain\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"025979e8-7ba3-4d52-9978-c99ee5eadd90","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended structure:","styles":{}}],"children":[]},{"id":"9d93b981-71c7-469d-a977-2b19ac2eb274","type":"procode","props":{"code":"src/\n├── components/\n│ └── ui/\n│ ├── button.tsx\n│ └── button.test.tsx\n├── features/\n│ └── auth/\n│ ├── login-form.tsx\n│ └── login-form.test.tsx\n├── hooks/\n│ ├── use-toggle.ts\n│ └── use-toggle.test.ts\n└── utils/\n ├── format-currency.ts\n └── format-currency.test.ts\n","language":"txt","filename":"","files":"[{\"id\":\"rkiiiasqf\",\"name\":\"code\",\"code\":\"src/\\n├── components/\\n│ └── ui/\\n│ ├── button.tsx\\n│ └── button.test.tsx\\n├── features/\\n│ └── auth/\\n│ ├── login-form.tsx\\n│ └── login-form.test.tsx\\n├── hooks/\\n│ ├── use-toggle.ts\\n│ └── use-toggle.test.ts\\n└── utils/\\n ├── format-currency.ts\\n └── format-currency.test.ts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"74eaef15-29d4-4196-82b7-892583b1af60","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended test style:","styles":{}}],"children":[]},{"id":"5e3f037c-2621-484a-9705-284737e623af","type":"procode","props":{"code":"it(\"shows error message when login fails\", async () => {\n const user = userEvent.setup()\n\n render()\n\n await user.type(screen.getByLabelText(/email/i), \"wrong@mail.com\")\n await user.type(screen.getByLabelText(/password/i), \"wrongpassword\")\n await user.click(screen.getByRole(\"button\", { name: /login/i }))\n\n expect(await screen.findByText(/login failed/i)).toBeInTheDocument()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"epeuveo19\",\"name\":\"code\",\"code\":\"it(\\\"shows error message when login fails\\\", async () => {\\n const user = userEvent.setup()\\n\\n render()\\n\\n await user.type(screen.getByLabelText(/email/i), \\\"wrong@mail.com\\\")\\n await user.type(screen.getByLabelText(/password/i), \\\"wrongpassword\\\")\\n await user.click(screen.getByRole(\\\"button\\\", { name: /login/i }))\\n\\n expect(await screen.findByText(/login failed/i)).toBeInTheDocument()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e3969063-ca39-4e30-8421-af39faa638e5","type":"divider","props":{},"children":[]},{"id":"47584572-157c-45b6-b26b-659a561d7521","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"aae2999b-123a-4356-88cc-7695e9790c49","type":"procode","props":{"code":"Good testing = prove user flow works\n","language":"txt","filename":"","files":"[{\"id\":\"54fba2ixn\",\"name\":\"code\",\"code\":\"Good testing = prove user flow works\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e8af3096-4508-4747-8fa1-13edb8c8bbdd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another simple version:","styles":{}}],"children":[]},{"id":"155fe5af-cc7b-4ee0-b298-a785884cffc2","type":"procode","props":{"code":"User\n├── sees UI\n├── clicks button\n├── types input\n├── submits form\n└── expects result\n","language":"txt","filename":"","files":"[{\"id\":\"nxwo9hl0b\",\"name\":\"code\",\"code\":\"User\\n├── sees UI\\n├── clicks button\\n├── types input\\n├── submits form\\n└── expects result\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"828196f1-949f-4717-9540-b9cb11afac9b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test flow:","styles":{}}],"children":[]},{"id":"4c81d35f-d7b7-4661-b188-bea2377d54bc","type":"procode","props":{"code":"Render component\n├── simulate user action\n├── wait for result if async\n└── assert visible output\n","language":"txt","filename":"","files":"[{\"id\":\"086k21hvx\",\"name\":\"code\",\"code\":\"Render component\\n├── simulate user action\\n├── wait for result if async\\n└── assert visible output\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1708ec7e-8843-4eb0-809b-8174988a853c","type":"divider","props":{},"children":[]},{"id":"f4708f90-3327-4649-8231-5277eb3e859d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"6ba66cce-3ce1-44b9-81bd-558f1668194d","type":"procode","props":{"code":"Testing Best Practices\n├── Help keep React apps reliable\n├── Focus on user behavior\n├── Avoid implementation details\n├── Use clear test names\n├── Use Arrange, Act, Assert\n├── Use userEvent for interactions\n├── Prefer accessible queries\n├── Test loading state\n├── Test error state\n├── Test empty state\n├── Test success state\n├── Mock external API calls\n├── Keep tests independent\n├── Keep test data simple\n├── Avoid flaky tests\n├── Avoid overusing snapshots\n├── Test critical flows first\n└── Keep tests readable and maintainable\n","language":"txt","filename":"","files":"[{\"id\":\"t6xu2yl54\",\"name\":\"code\",\"code\":\"Testing Best Practices\\n├── Help keep React apps reliable\\n├── Focus on user behavior\\n├── Avoid implementation details\\n├── Use clear test names\\n├── Use Arrange, Act, Assert\\n├── Use userEvent for interactions\\n├── Prefer accessible queries\\n├── Test loading state\\n├── Test error state\\n├── Test empty state\\n├── Test success state\\n├── Mock external API calls\\n├── Keep tests independent\\n├── Keep test data simple\\n├── Avoid flaky tests\\n├── Avoid overusing snapshots\\n├── Test critical flows first\\n└── Keep tests readable and maintainable\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e844c5f6-2638-4897-a1f4-061a9ec61830","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Testing Best Practices","styles":{"code":true}},{"type":"text","text":" is important because tests should give confidence that the React app works correctly. The professional rule is simple: ","styles":{}},{"type":"text","text":"test what the user sees and does, not how the component is built internally.","styles":{"bold":true}}],"children":[]},{"id":"bcc5c7b9-99c6-4f3c-abd8-77ed9e9d149d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]