ionic-team
diff --git a/Diff for: ‎.github/CODEOWNERS
-3 b/Diff for: ‎.github/CODEOWNERS
-3
diff --git a/Diff for: ‎.prettierignore
+1 b/Diff for: ‎.prettierignore
+1
diff --git a/Diff for: ‎docs/api/backdrop.md
+1-1 b/Diff for: ‎docs/api/backdrop.md
+1-1
diff --git a/Diff for: ‎docs/developing/keyboard.md
+4-121 b/Diff for: ‎docs/developing/keyboard.md
+4-121
diff --git a/Diff for: ‎docs/react/testing/introduction.md
+21 b/Diff for: ‎docs/react/testing/introduction.md
+21
diff --git a/Diff for: ‎docs/react/testing/unit-testing/best-practices.md
+51 b/Diff for: ‎docs/react/testing/unit-testing/best-practices.md
+51
diff --git a/Diff for: ‎docs/react/testing/unit-testing/examples.md
+112 b/Diff for: ‎docs/react/testing/unit-testing/examples.md
+112
diff --git a/Diff for: ‎docs/react/testing/unit-testing/setup.md
+40 b/Diff for: ‎docs/react/testing/unit-testing/setup.md
+40
@@ -12,9 +12,6 @@
 # This should make it easy to add new rules without breaking existing ones.
 
 /_templates/ @mapsandapps
-/docs/api/ @mapsandapps
-/src/ @mapsandapps
-/static/usage/ @mapsandapps
 
 /static/code/stackblitz/**/*/package.json @ionic-team/framework
 /static/code/stackblitz/**/*/package-lock.json @ionic-team/framework
@@ -13,3 +13,4 @@ static/code/stackblitz
 .github
 build
 node_modules
+src/translate
@@ -16,7 +16,7 @@ Backdropは、他のコンポーネントをオーバーレイするためフル
 
 ## 基本的な使い方
 
-バックドロップは、デフォルトで透明です。バックドロップは、その背後にあるコンテンツのクリックやタップを防ぐことができます。
+Backdropは、その後ろのコンテンツをクリックしたりタップしたりするのを防ぎます。デフォルトでは透明なので、下のデモではCSSで見えるようにしています。
 
 import Basic from '@site/static/usage/v7/backdrop/basic/index.md';
 
 
@@ -2,7 +2,6 @@
 title: Keyboard
 ---
 
-import Codepen from '@components/global/Codepen';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -29,77 +28,9 @@ import TabItem from '@theme/TabItem';
 
 ### Usage
 
-````mdx-code-block
-<Tabs
-  defaultValue="javascript"
-  groupId="framework"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<ion-item>
-  <ion-label>Username or Email</ion-label>
-  <ion-input inputmode="email"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Enter a number</ion-label>
-  <ion-textarea inputmode="numeric"></ion-textarea>
-</ion-item>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<ion-item>
-  <ion-label>Username or Email</ion-label>
-  <ion-input inputmode="email"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Enter a number</ion-label>
-  <ion-textarea inputmode="numeric"></ion-textarea>
-</ion-item>
-```
-</TabItem>
-<TabItem value="react">
-
-```html
-<IonItem>
-  <IonLabel>Username or Email</IonLabel>
-  <IonInput inputmode="email"></IonInput>
-</IonItem>
-
-<IonItem>
-  <IonLabel>Enter a number</IonLabel>
-  <IonTextarea inputmode="numeric"></IonTextarea>
-</IonItem>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<ion-item>
-  <ion-label>Username or Email</ion-label>
-  <ion-input inputmode="email"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Enter a number</ion-label>
-  <ion-textarea inputmode="numeric"></ion-textarea>
-</ion-item>
-```
-</TabItem>
-</Tabs>
-````
+import Inputmode from '@site/static/usage/v7/keyboard/inputmode/index.md';
 
-<Codepen user="ionic" slug="abvJVVv" height="400" />
+<Inputmode />
 
 :::note
 `inputmode` 属性は Chrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode
@@ -115,57 +46,9 @@ import TabItem from '@theme/TabItem';
 
 ### Usage
 
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<ion-item>
-  <ion-label>Enter search query</ion-label>
-  <ion-input enterkeyhint="search" type="search"></ion-input>
-</ion-item>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<ion-item>
-  <ion-label>Enter search query</ion-label>
-  <ion-input enterkeyhint="search" type="search"></ion-input>
-</ion-item>
-```
-</TabItem>
-<TabItem value="react">
-
-```html
-<IonItem>
-  <IonLabel>Enter search query</IonLabel>
-  <IonInput enterkeyhint="search" type="search"></IonInput>
-</IonItem>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<ion-item>
-  <ion-label>Enter search query</ion-label>
-  <ion-input enterkeyhint="search" type="search"></ion-input>
-</ion-item>
-```
-</TabItem>
-</Tabs>
-````
+import Enterkeyhint from '@site/static/usage/v7/keyboard/enterkeyhint/index.md';
 
-<Codepen user="ionic" slug="GRpWyRB" height="350" />
+<Enterkeyhint />
 
 :::note
 `enterkeyhint` 属性は Chrome 77+ and iOS Safari 13.4+ のデバイスでサポートされています
 
@@ -0,0 +1,21 @@
+---
+sidebar_label: Introduction
+title: Ionic React Testing Introduction
+description: Learn how to test an Ionic React application. This document provides an overview of how to test an application built with @ionic/react.
+---
+
+# Testing Ionic React
+
+This document provides an overview of how to test an application built with `@ionic/react`. It covers the basics of testing with React, as well as the specific tools and libraries developers can use to test their applications.
+
+## Introduction
+
+Testing is an important part of the development process, and it helps to ensure that an application is working as intended. In `@ionic/react`, testing is done using a combination of tools and libraries, including Jest, React Testing Library, Playwright or Cypress.
+
+## Types of Tests
+
+There are two types of tests that can be written:
+
+**Unit Tests**: Unit tests are used to test individual functions and components in isolation. [Jest](https://jestjs.io) and [React Testing Library](https://testing-library.com) are commonly used for unit testing.
+
+**Integration Tests**: Integration tests are used to test how different components work together. [Cypress](https://www.cypress.io) or [Playwright](https://playwright.dev) are commonly used for integration testing.
@@ -0,0 +1,51 @@
+---
+sidebar_label: Best Practices
+---
+
+# Best Practices
+
+## IonApp is required for test templates
+
+In your test template when rendering with React Testing Library, you must wrap your component with an `IonApp` component. This is required for the component to be rendered correctly.
+
+```tsx title="Example.test.tsx"
+import { IonApp } from '@ionic/react';
+import { render } from "@testing-library/react";
+
+import Example from './Example';
+
+test('example', () => {
+  render(
+    <IonApp>
+      <Example />
+    </IonApp>
+  );
+  ...
+});
+```
+
+## Use `user-event` for user interactions
+
+React Testing Library recommends using the `user-event` library for simulating user interactions. This library provides a more realistic simulation of user interactions than the `fireEvent` function provided by React Testing Library.
+
+```tsx title="Example.test.tsx"
+import { IonApp } from '@ionic/react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Example from './Example';
+
+test('example', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <IonApp>
+      <Example />
+    </IonApp>
+  );
+
+  await user.click(screen.getByRole('button', { name: /click me!/i }));
+});
+```
+
+For more information on `user-event`, see the [user-event documentation](https://testing-library.com/docs/user-event/intro/).
@@ -0,0 +1,112 @@
+---
+sidebar_label: Examples
+title: Ionic React Testing Examples
+description: Learn how to test an Ionic React application. This document provides examples of how to test different types of components.
+---
+
+# Examples
+
+## Testing a modal presented from a trigger
+
+This example shows how to test a modal that is presented from a trigger. The modal is presented when the user clicks a button.
+
+### Example component
+
+```tsx title="src/Example.tsx"
+import { IonButton, IonModal } from '@ionic/react';
+
+export default function Example() {
+  return (
+    <>
+      <IonButton id="open-modal">Open</IonButton>
+      <IonModal trigger="open-modal">Modal content</IonModal>
+    </>
+  );
+}
+```
+
+### Testing the modal
+
+```tsx title="src/Example.test.tsx"
+import { IonApp } from '@ionic/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import Example from './Example';
+
+test('button presents a modal when clicked', async () => {
+  render(
+    <IonApp>
+      <Example />
+    </IonApp>
+  );
+  // Simulate a click on the button
+  fireEvent.click(screen.getByText('Open'));
+  // Wait for the modal to be presented
+  await waitFor(() => {
+    // Assert that the modal is present
+    expect(screen.getByText('Modal content')).toBeInTheDocument();
+  });
+});
+```
+
+## Testing a modal presented from useIonModal
+
+This example shows how to test a modal that is presented using the `useIonModal` hook. The modal is presented when the user clicks a button.
+
+### Example component
+
+```tsx title="src/Example.tsx"
+import { IonContent, useIonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonPage } from '@ionic/react';
+
+const ModalContent: React.FC = () => {
+  return (
+    <IonContent>
+      <div>Modal Content</div>
+    </IonContent>
+  );
+};
+
+const Example: React.FC = () => {
+  const [present] = useIonModal(ModalContent);
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Blank</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen={true}>
+        <IonButton expand="block" className="ion-margin" onClick={() => present()}>
+          Open
+        </IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Example;
+```
+
+### Testing the modal
+
+```tsx title="src/Example.test.tsx"
+import { IonApp } from '@ionic/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import Example from './Example';
+
+test('should present ModalContent when button is clicked', async () => {
+  render(
+    <IonApp>
+      <Example />
+    </IonApp>
+  );
+  // Simulate a click on the button
+  fireEvent.click(screen.getByText('Open'));
+  // Wait for the modal to be presented
+  await waitFor(() => {
+    // Assert that the modal is present
+    expect(screen.getByText('Modal Content')).toBeInTheDocument();
+  });
+});
+```
@@ -0,0 +1,40 @@
+---
+sidebar_label: Setup
+title: Ionic React Unit Testing Setup
+description: Learn how to set up unit tests for an Ionic React application.
+---
+
+# Unit Testing Setup
+
+Ionic requires a few additional steps to set up unit tests. If you are using an Ionic starter project, these steps have already been completed for you.
+
+### Install React Testing Library
+
+React Testing Library is a set of utilities that make it easier to test React components. It's used to interact with components and test their behavior.
+
+```bash
+npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event
+```
+
+### Initialize Ionic React
+
+Ionic React requires the `setupIonicReact` function to be called before any tests are run. Failing to do so will result in mode-based classes and platform behaviors not being applied to your components.
+
+In `src/setupTest.ts`, add the following code:
+
+```diff
+import '@testing-library/jest-dom/extend-expect';
+
++ import { setupIonicReact } from '@ionic/react';
+
++ setupIonicReact();
+
+// Mock matchmedia
+window.matchMedia = window.matchMedia || function () {
+  return {
+    matches: false,
+    addListener: function () { },
+    removeListener: function () { }
+  };
+};
+```