@atomic-testing/component-driver-mui-v9 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tianzhen Lin (Tangent)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,76 @@
+# @atomic-testing/component-driver-mui-v9
+
+Component drivers for [Material UI](https://mui.com) v9 components. Component drivers expose simple APIs for unit tests or end‑to‑end tests to interact with MUI components—such as reading states and setting values—so test engineers can focus on test flows without needing to track how the inner MUI components work.
+
+## The problem
+
+Material UI hides complex markup behind its components. Without dedicated drivers your tests often need to rely on implementation details, making them brittle as your application grows.
+
+## The solution
+
+The drivers in this package expose high‑level interactions for MUI widgets. Combined with the React adapter, they let you reuse scene definitions across DOM and end‑to‑end tests, focusing on **reusability**, **composability** and **adaptability**.
+
+## Installation
+
+```bash
+npm install @atomic-testing/core @atomic-testing/react-19 \
+  @atomic-testing/component-driver-html @atomic-testing/component-driver-mui-v9 --save-dev
+```
+
+Refer to the [documentation](https://atomic-testing.dev/) for usage patterns and examples.
+
+## Example
+
+1. Create a small component using MUI and assign `data-testid` values to the elements you want to interact with:
+
+   ```tsx title="Counter.tsx"
+   import { useState } from 'react';
+
+   import Button from '@mui/material/Button';
+
+   export function Counter() {
+     const [count, setCount] = useState(0);
+     return (
+       <div>
+         <span data-testid='count'>{count}</span>
+         <Button data-testid='increment' onClick={() => setCount(c => c + 1)}>
+           Increment
+         </Button>
+       </div>
+     );
+   }
+   ```
+
+2. Define a `ScenePart` describing the count display and button using the MUI driver:
+
+   ```ts title="counterScenePart.ts"
+   import { HTMLSpanDriver } from '@atomic-testing/component-driver-html';
+   import { ButtonDriver } from '@atomic-testing/component-driver-mui-v9';
+   import { byDataTestId, ScenePart } from '@atomic-testing/core';
+
+   export const counterScenePart = {
+     count: { locator: byDataTestId('count'), driver: HTMLSpanDriver },
+     increment: { locator: byDataTestId('increment'), driver: ButtonDriver },
+   } satisfies ScenePart;
+   ```
+
+3. Write a test using `createTestEngine` to render the component and interact with it:
+
+   ```ts title="Counter.test.tsx"
+   import { createTestEngine } from '@atomic-testing/react-19';
+
+   import { Counter } from './Counter';
+   import { counterScenePart } from './counterScenePart';
+
+   test('increments when the button is clicked', async () => {
+     const engine = createTestEngine(<Counter />, counterScenePart);
+
+     expect(await engine.parts.count.getText()).toBe('0');
+     await engine.parts.increment.click();
+     expect(await engine.parts.count.getText()).toBe('1');
+
+     await engine.cleanUp();
+   });
+   ```
+
+For more in‑depth information, visit [https://atomic-testing.dev](https://atomic-testing.dev).