Merge pull request meshtastic#494 from danditomaso/issue-486-are-you-sure-dialog

Issue 486 are you sure dialog

Author: danditomaso

deno.lock

@@ -0,0 +1,43 @@
+# Mocks Directory
+
+This directory contains mock implementations used by Vitest for testing.
+
+## Structure
+
+The directory structure mirrors the actual project structure to make mocking
+more intuitive:
+
+```
+__mocks__/
+├── components/
+│   └── UI/
+│       ├── Dialog.tsx
+│       ├── Button.tsx
+│       ├── Checkbox.tsx
+│       └── ...
+├── core/
+│   └── ...
+└── ...
+```
+
+## Auto-mocking
+
+Vitest will automatically use the mock files in this directory when the
+corresponding module is imported in tests. For example, when a test imports
+`@components/UI/Dialog.tsx`, Vitest will use
+`__mocks__/components/UI/Dialog.tsx` instead.
+
+## Creating New Mocks
+
+To create a new mock:
+
+1. Create a file in the same relative path as the original module
+2. Export the mocked functionality with the same names as the original
+3. Add a `vi.mock()` statement to `vitest.setup.ts` if needed
+
+## Mock Guidelines
+
+- Keep mocks as simple as possible
+- Use `data-testid` attributes for easy querying in tests
+- Implement just enough functionality to test the component
+- Use TypeScript types to ensure compatibility with the original module

src/__mocks__/README.md

@@ -0,0 +1,20 @@
+import { vi } from 'vitest'
+
+vi.mock('@components/UI/Button.tsx', () => ({
+  Button: ({ children, name, disabled, onClick }: {
+    children: React.ReactNode,
+    variant: string,
+    name: string,
+    disabled?: boolean,
+    onClick: () => void
+  }) =>
+    <button
+      type="button"
+      name={name}
+      data-testid={`button-${name}`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+}));

src/__mocks__/components/UI/Button.tsx

@@ -0,0 +1,6 @@
+import { vi } from 'vitest'
+
+vi.mock('@components/UI/Checkbox.tsx', () => ({
+  Checkbox: ({ id, checked, onChange }: { id: string, checked: boolean, onChange: () => void }) =>
+    <input data-testid="checkbox" type="checkbox" id={id} checked={checked} onChange={onChange} />
+}));

src/__mocks__/components/UI/Checkbox.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+export const Dialog = ({ children, open }: {
+  children: React.ReactNode,
+  open: boolean,
+  onOpenChange?: (open: boolean) => void
+}) => open ? <div data-testid="dialog">{children}</div> : null;
+
+export const DialogContent = ({
+  children,
+  className
+}: {
+  children: React.ReactNode,
+  className?: string
+}) => <div data-testid="dialog-content" className={className}>{children}</div>;
+
+export const DialogHeader = ({
+  children
+}: {
+  children: React.ReactNode
+}) => <div data-testid="dialog-header">{children}</div>;
+
+export const DialogTitle = ({
+  children
+}: {
+  children: React.ReactNode
+}) => <div data-testid="dialog-title">{children}</div>;
+
+export const DialogDescription = ({
+  children,
+  className
+}: {
+  children: React.ReactNode,
+  className?: string
+}) => <div data-testid="dialog-description" className={className}>{children}</div>;
+
+export const DialogFooter = ({
+  children,
+  className
+}: {
+  children: React.ReactNode,
+  className?: string
+}) => <div data-testid="dialog-footer" className={className}>{children}</div>;

src/__mocks__/components/UI/Dialog/Dialog.tsx

@@ -0,0 +1,6 @@
+import { vi } from 'vitest'
+
+vi.mock('@components/UI/Label.tsx', () => ({
+  Label: ({ children, htmlFor, className }: { children: React.ReactNode, htmlFor: string, className?: string }) =>
+    <label data-testid="label" htmlFor={htmlFor} className={className}>{children}</label>
+}));

src/__mocks__/components/UI/Label.tsx

@@ -0,0 +1,7 @@
+import { vi } from "vitest";
+
+vi.mock('@components/UI/Typography/Link.tsx', () => ({
+  Link: ({ children, href, className }: { children: React.ReactNode, href: string, className?: string }) =>
+    <a data-testid="link" href={href} className={className}>{children}</a>
+}));
+

src/__mocks__/components/UI/Link.tsx

@@ -3,6 +3,7 @@ import { create } from "@bufbuild/protobuf";
 import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -52,6 +53,7 @@ export const DeviceNameDialog = ({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
+        <DialogClose />
         <DialogHeader>
           <DialogTitle>Change Device Name</DialogTitle>
           <DialogDescription>