perf: use alertdialog role (#23)

* build: upgrade rsuite 5

* chore(deps): upgrdade @testing-library/jest-dom

* perf: use alertdialog role

docs/styles.less

@@ -1,4 +1,4 @@
-@import '~rsuite5/lib/styles/index.less';
+@import '~rsuite5/styles/index.less';
 
 .page {
   padding: 50px;

package.json

@@ -66,7 +66,7 @@
     "@babel/polyfill": "^7.6.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.0.4",
     "@testing-library/user-event": "^12.1.7",
     "@types/webpack": "^4.41.22",
@@ -98,13 +98,13 @@
     "react-hot-loader": "^3.1.3",
     "rsuite": "^3.8.13",
     "rsuite4": "npm:rsuite@^4.9.3",
-    "rsuite5": "npm:rsuite@^5.0.0-alpha.5",
+    "rsuite5": "npm:rsuite@^5.0.1",
+    "semantic-release": "^17.4.3",
     "style-loader": "^0.18.2",
     "url-loader": "^2.2.0",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "semantic-release": "^17.4.3"
+    "webpack-dev-server": "^3.11.0"
   },
   "browserslist": [
     "> 1%",

src/InteractionModal.js

@@ -77,8 +77,13 @@ function InteractionModal({
   };
 
   return (
-    <Modal size="xs" {...modalProps}>
-      <Modal.Body>{children}</Modal.Body>
+    <Modal
+      role="alertdialog"
+      size="xs"
+      aria-describedby="alertdialog-description"
+      {...modalProps}
+    >
+      <Modal.Body id="alertdialog-description">{children}</Modal.Body>
       <Modal.Footer>
         {showCancelButton && (
           <Button

src/__tests__/InteractionModal.test.js

@@ -9,11 +9,11 @@ import {
 import userEvent from '@testing-library/user-event';
 import InteractionModal from '../InteractionModal';
 
-it('shows a dialog with message text and buttons', () => {
+it('shows an alert dialog with message text and buttons', () => {
   const message = 'Hey';
   const { getByRole } = render(<InteractionModal>{message}</InteractionModal>);
 
-  const dialog = getByRole('dialog');
+  const dialog = getByRole('alertdialog');
   expect(dialog).toBeVisible();
   expect(dialog).toHaveTextContent(message);
 
@@ -60,14 +60,14 @@ it('hides dialog on clicking ok button', async () => {
   const { getByRole } = render(<InteractionModal></InteractionModal>);
 
   userEvent.click(getByRole('button', { name: '确定' }));
-  await waitForElementToBeRemoved(getByRole('dialog'));
+  await waitForElementToBeRemoved(getByRole('alertdialog'));
 });
 
 it('hides dialog on clicking cancel button', async () => {
   const { getByRole } = render(<InteractionModal></InteractionModal>);
 
   userEvent.click(getByRole('button', { name: '取消' }));
-  await waitForElementToBeRemoved(getByRole('dialog'));
+  await waitForElementToBeRemoved(getByRole('alertdialog'));
 });
 
 it('calls onOk on clicking ok button', () => {

src/__tests__/alert.test.js

@@ -16,7 +16,7 @@ it('shows dialog with given message and an ok button', () => {
   const message = 'Message';
 
   alert(message);
-  const dialog = screen.getByRole('dialog');
+  const dialog = screen.getByRole('alertdialog');
   expect(dialog).toBeVisible();
   expect(dialog).toHaveTextContent(message);
 
@@ -30,7 +30,7 @@ it('closes on clicking ok button', async () => {
 
   userEvent.click(screen.getByRole('button', { name: '确定' }));
 
-  await waitForElementToBeRemoved(screen.getByRole('dialog'));
+  await waitForElementToBeRemoved(screen.getByRole('alertdialog'));
 });
 
 it('renders custom ok button text', () => {
@@ -88,7 +88,7 @@ describe('triggers callbacks', () => {
 
     it('closes after Promise finishes', async () => {
       jest.advanceTimersByTime(1000);
-      await waitForElementToBeRemoved(screen.getByRole('dialog'));
+      await waitForElementToBeRemoved(screen.getByRole('alertdialog'));
     });
   });
 });

src/__tests__/confirm.test.js

@@ -17,7 +17,7 @@ it('shows dialog with given message and two buttons', async () => {
   const message = 'Message';
 
   confirm(message);
-  const dialog = screen.getByRole('dialog');
+  const dialog = screen.getByRole('alertdialog');
   expect(dialog).toBeVisible();
   expect(dialog).toHaveTextContent(message);
 
@@ -221,7 +221,7 @@ describe('triggers callbacks', () => {
       act(() => {
         jest.advanceTimersByTime(1000);
       });
-      await waitForElementToBeRemoved(screen.getByRole('dialog'));
+      await waitForElementToBeRemoved(screen.getByRole('alertdialog'));
       jest.useRealTimers();
     });
   });

src/__tests__/prompt.test.js

@@ -17,7 +17,7 @@ it('shows dialog with given message and an text input and two buttons', async ()
   const message = 'Message';
   prompt(message);
 
-  const dialog = screen.getByRole('dialog');
+  const dialog = screen.getByRole('alertdialog');
   expect(dialog).toBeVisible();
   expect(dialog).toHaveTextContent(message);
 
@@ -231,7 +231,7 @@ describe('triggers callbacks', () => {
       act(() => {
         jest.advanceTimersByTime(1000);
       });
-      await waitForElementToBeRemoved(screen.getByRole('dialog'));
+      await waitForElementToBeRemoved(screen.getByRole('alertdialog'));
       jest.useRealTimers();
     });
   });

webpack.config.js

@@ -36,6 +36,9 @@ if (process.env.NODE_ENV === 'production') {
   );
 }
 
+/**
+ * @type import('webpack').Configuration
+ */
 const common = {
   entry: path.resolve(__dirname, 'docs/index.js'),
   devServer: {
@@ -83,6 +86,11 @@ const common = {
       },
     ],
   },
+  resolve: {
+    alias: {
+      rsuite: path.resolve(__dirname, './node_modules/rsuite5'),
+    },
+  },
 };
 
 module.exports = () => {