refine test scripts

Author: elbakerino

README.md

@@ -11,7 +11,7 @@ Files:
 - [src/App.jsx](./src/App.jsx) setup `binding` and `UIMetaProvider`
 - [src/t.jsx](./src/t.jsx) dictionary setup
 
-Run on [CodeSandbox](https://codesandbox.io/s/github/ui-schema/demo-cra/tree/master/?autoresize=1&fontsize=12&hidenavigation=1&module=%2Fsrc%2FApp.jsx) or [StackBlitz](https://stackblitz.com/github/ui-schema/demo-cra).
+Run on [CodeSandbox](https://codesandbox.io/s/github/ui-schema/demo-cra/tree/master/?autoresize=1&fontsize=12&hidenavigation=1&module=%2Fsrc%2FApp.jsx) or [StackBlitz](https://stackblitz.com/github/ui-schema/demo-cra?file=%2Fsrc%2FApp.jsx).
 
 Explore more:
 
@@ -50,3 +50,9 @@ Then run tests:
 ```shell
 npm test
 ```
+
+Or run tests in watch mode:
+
+```shell
+npm run tdd
+```

package.json

@@ -32,8 +32,8 @@
     },
     "scripts": {
         "start": "cross-env NODE_ENV=development vite",
-        "prebuild": "vitest run --coverage",
         "build": "cross-env NODE_ENV=production vite build",
-        "test": "vitest"
+        "test": "vitest run --coverage",
+        "tdd": "vitest"
     }
 }

src/App.test.jsx

@@ -1,5 +1,4 @@
 import { expect, test } from 'vitest'
-import React from 'react';
 import { render } from 'vitest-browser-react'
 import App from './App';
 
@@ -12,10 +11,6 @@ test('renders header', async () => {
 test('Form is interactive', async () => {
     const {getByText} = render(<App/>);
 
-    // full test:
-    // - check that `Form is invalid.` exists in dom
-    // - toggle the element of "Center Item Content"
-    // - check that `Form is valid.` exists in dom
     const invalidText = getByText(/Form is invalid./i);
     await expect.element(invalidText).toBeInTheDocument();
 

src/components/DemoEditor.jsx

@@ -202,7 +202,6 @@ const AppEditor = () => {
             <Typography
                 variant={'body2'}
                 sx={{
-                    // mack background semantic using mui theme
                     backgroundColor: invalid ? 'error.main' : 'success.main',
                     color: invalid ? 'error.contrastText' : 'success.contrastText',
                     p: 1,