Merge remote-tracking branch 'origin/main' into multichoice

.github/workflows/build-main.yml

@@ -0,0 +1,31 @@
+name: Node.js Build and Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '21'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Test
+        run: npm run citest
+
+      - name: Build
+        run: npm run build

README.md

@@ -32,7 +32,11 @@ To begin, wrap your app with ActionDialogsContext, a React context consumer that
 import { ActionDialogsContext } from 'react-dialog-mui';
 
 function YourApp() {
-  return <ActionDialogsContext>// your app code</ActionDialogsContext>;
+  return (
+    <ActionDialogsContext>
+      <YourAppComponent />
+    </ActionDialogsContext>
+  );
 }
 ```
 

package.json

@@ -7,7 +7,8 @@
     "prebuild": "rm -rf build",
     "build": "tsc --project tsconfig.json",
     "format": "npx prettier --config ./.prettierrc --write **/*.{ts,tsx,js,jsx,scss,yml,html,json,md}",
-    "test": "echo \"Error: no test specified\"",
+    "test": "vitest",
+    "citest": "CI=true vitest",
     "dev": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -31,8 +32,11 @@
     "@storybook/react": "^8.0.6",
     "@storybook/react-vite": "^8.0.6",
     "@storybook/test": "^8.0.6",
+    "@testing-library/react": "^14.3.0",
+    "jsdom": "^24.0.0",
     "storybook": "^8.0.6",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^1.4.0"
   },
   "dependencies": {
     "@emotion/react": "^11",

src/components/PromptDialog.tsx

@@ -101,7 +101,7 @@ export default function PromptDialog(
         {props.readonly !== true && (
           <DialogActions sx={{ display: 'flex', gap: 2, justifyContent: 'end' }}>
             <Button type='submit' disabled={isDisabled} variant='contained'>
-              {props.saveLabel || 'Save Changes'}
+              {props.saveLabel || 'Save'}
             </Button>
           </DialogActions>
         )}

src/stories/AlertExample.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { test, describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { ActionDialogsContext } from 'react-dialog-mui';
+import { AlertExample } from './AlertExample';
+import { ChoiceExample } from './ChoiceExample';
+import { ConfirmExample } from './ConfirmExample';
+import {
+  ModalExample,
+  ModalExampleWithChildComponent,
+  ModalExampleWithFormSubmit,
+  ModalExampleWithManualDismiss,
+} from './ModalExample';
+import { PromptExample } from './PromptExample';
+
+// Replace the original Dialog with the mock component
+vi.mock('@mui/material', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('@mui/material')>();
+  return {
+    ...mod,
+    Dialog: (props) => {
+      return <div>{props.children}</div>;
+    },
+  };
+});
+
+it('AlertExample should render the component', async () => {
+  const component = render(
+    <ActionDialogsContext>
+      <AlertExample />
+    </ActionDialogsContext>,
+  );
+  const button = component.container.querySelector('button');
+  expect(button?.innerHTML).toMatchInlineSnapshot(`"My Action"`);
+
+  // open modal and test content
+  fireEvent.click(button);
+  expect(
+    component.container.querySelector('.MuiDialogTitle-root')?.textContent,
+  ).toMatchInlineSnapshot(`"Query Result"`);
+  expect(
+    component.container.querySelector('.MuiDialogContent-root')?.textContent,
+  ).toMatchInlineSnapshot(
+    `"The query has successfully executed, yielding 200 records in 15 seconds."`,
+  );
+  expect(
+    component.container.querySelector('.MuiDialogActions-root')?.textContent,
+  ).toMatchInlineSnapshot(`"Acknowledge"`);
+});

src/stories/ChoiceExample.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { test, describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { ActionDialogsContext } from 'react-dialog-mui';
+import { AlertExample } from './AlertExample';
+import { ChoiceExample } from './ChoiceExample';
+import { ConfirmExample } from './ConfirmExample';
+import {
+  ModalExample,
+  ModalExampleWithChildComponent,
+  ModalExampleWithFormSubmit,
+  ModalExampleWithManualDismiss,
+} from './ModalExample';
+import { PromptExample } from './PromptExample';
+
+// Replace the original Dialog with the mock component
+vi.mock('@mui/material', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('@mui/material')>();
+  return {
+    ...mod,
+    Dialog: (props) => {
+      return <div>{props.children}</div>;
+    },
+  };
+});
+
+it('ChoiceExample should render the component', async () => {
+  const component = render(
+    <ActionDialogsContext>
+      <ChoiceExample />
+    </ActionDialogsContext>,
+  );
+  const button = component.container.querySelector('button');
+  expect(button?.innerHTML).toMatchInlineSnapshot(`"Switch Session"`);
+
+  // open modal and test content
+  fireEvent.click(button);
+  expect(
+    component.container.querySelector('.MuiDialogTitle-root')?.textContent,
+  ).toMatchInlineSnapshot(`"Switch session"`);
+  expect(
+    component.container.querySelector('.MuiDialogContent-root')?.textContent,
+  ).toMatchInlineSnapshot(
+    `"Select one of the following sessions:Session 1Session 2Session 3Session 4Apply"`,
+  );
+});

src/stories/ConfirmExample.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { test, describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { ActionDialogsContext } from 'react-dialog-mui';
+import { AlertExample } from './AlertExample';
+import { ChoiceExample } from './ChoiceExample';
+import { ConfirmExample } from './ConfirmExample';
+import {
+  ModalExample,
+  ModalExampleWithChildComponent,
+  ModalExampleWithFormSubmit,
+  ModalExampleWithManualDismiss,
+} from './ModalExample';
+import { PromptExample } from './PromptExample';
+
+// Replace the original Dialog with the mock component
+vi.mock('@mui/material', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('@mui/material')>();
+  return {
+    ...mod,
+    Dialog: (props) => {
+      return <div>{props.children}</div>;
+    },
+  };
+});
+
+it('ConfirmExample should render the component', async () => {
+  const component = render(
+    <ActionDialogsContext>
+      <ConfirmExample />
+    </ActionDialogsContext>,
+  );
+  const button = component.container.querySelector('button');
+  expect(button?.innerHTML).toMatchInlineSnapshot(`"Delete Query?"`);
+
+  // open modal and test content
+  fireEvent.click(button);
+  expect(
+    component.container.querySelector('.MuiDialogTitle-root')?.textContent,
+  ).toMatchInlineSnapshot(`"Confirmation?"`);
+  expect(
+    component.container.querySelector('.MuiDialogContent-root')?.textContent,
+  ).toMatchInlineSnapshot(`"Do you want to delete this query?"`);
+});

src/stories/ModalExample.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { test, describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { ActionDialogsContext } from 'react-dialog-mui';
+import { ModalExample } from './ModalExample';
+import { ChoiceExample } from './ChoiceExample';
+import { ConfirmExample } from './ConfirmExample';
+import {
+  ModalExample,
+  ModalExampleWithChildComponent,
+  ModalExampleWithFormSubmit,
+  ModalExampleWithManualDismiss,
+} from './ModalExample';
+import { PromptExample } from './PromptExample';
+
+// Replace the original Dialog with the mock component
+vi.mock('@mui/material', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('@mui/material')>();
+  return {
+    ...mod,
+    Dialog: (props) => {
+      return <div>{props.children}</div>;
+    },
+  };
+});
+
+it('ModalExample should render the component', async () => {
+  const component = render(
+    <ActionDialogsContext>
+      <ModalExample />
+    </ActionDialogsContext>,
+  );
+  const button = component.container.querySelector('button');
+  expect(button?.innerHTML).toMatchInlineSnapshot(`"Show Details"`);
+
+  // open modal and test content
+  fireEvent.click(button);
+  expect(
+    component.container.querySelector('.MuiDialogTitle-root')?.textContent,
+  ).toMatchInlineSnapshot(`"Query Details"`);
+  expect(
+    component.container
+      .querySelector('.MuiDialogContent-root')
+      ?.textContent.includes(`Name: Sample Mocked QueryStatus: PendingCreated Date:`),
+  ).toBe(true);
+});

src/stories/Prompt.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { test, describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { ActionDialogsContext } from 'react-dialog-mui';
+import { AlertExample } from './AlertExample';
+import { ChoiceExample } from './ChoiceExample';
+import { ConfirmExample } from './ConfirmExample';
+import {
+  ModalExample,
+  ModalExampleWithChildComponent,
+  ModalExampleWithFormSubmit,
+  ModalExampleWithManualDismiss,
+} from './ModalExample';
+import { PromptExample } from './PromptExample';
+
+// Replace the original Dialog with the mock component
+vi.mock('@mui/material', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('@mui/material')>();
+  return {
+    ...mod,
+    Dialog: (props) => {
+      return <div>{props.children}</div>;
+    },
+  };
+});
+
+it('PromptExample should render the component', async () => {
+  const component = render(
+    <ActionDialogsContext>
+      <PromptExample />
+    </ActionDialogsContext>,
+  );
+  const button = component.container.querySelector('button');
+  expect(button?.innerHTML).toMatchInlineSnapshot(`"Rename Query?"`);
+
+  // open modal and test content
+  fireEvent.click(button);
+  expect(
+    component.container.querySelector('.MuiDialogTitle-root')?.textContent,
+  ).toMatchInlineSnapshot(`"Rename Query"`);
+  expect(
+    component.container.querySelector('.MuiDialogContent-root')?.textContent,
+  ).toMatchInlineSnapshot(`"New Query NameNew Query Name"`);
+  expect(
+    component.container.querySelector('.MuiDialogActions-root')?.textContent,
+  ).toMatchInlineSnapshot(`"Save"`);
+});