From 41adc7eb0118b77d1fd71509af525c55cd0867ff Mon Sep 17 00:00:00 2001
From: andres alcocer <devandres.tech@gmail.com>
Date: Sun, 27 Nov 2022 21:38:30 -0500
Subject: [PATCH] installed react testing library

---
 .storybook/preview.js                         | 17 +++++++++--
 package-lock.json                             | 30 +++++++++++++++++++
 package.json                                  |  1 +
 .../Button/__tests__/Button.stories.tsx       | 16 ++++++++++
 4 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 48afd56..152c0b7 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,9 +1,22 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
\ No newline at end of file
+  backgrounds: {
+    default: 'dark',
+    values: [
+      {
+        name: 'dark',
+        value: '#141414',
+      },
+      {
+        name: 'light',
+        value: '#fff',
+      },
+    ],
+  },
+}
diff --git a/package-lock.json b/package-lock.json
index b50fb01..71ab681 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,7 @@
         "@storybook/preset-create-react-app": "^4.1.2",
         "@storybook/react": "^6.5.13",
         "@storybook/testing-library": "^0.0.13",
+        "@testing-library/react": "^13.4.0",
         "babel-loader": "^9.1.0",
         "babel-plugin-named-exports-order": "^0.0.2",
         "clean-webpack-plugin": "^4.0.0",
@@ -13367,6 +13368,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/@testing-library/react": {
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
+      "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@testing-library/dom": "^8.5.0",
+        "@types/react-dom": "^18.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@testing-library/user-event": {
       "version": "13.5.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
@@ -49763,6 +49782,17 @@
         }
       }
     },
+    "@testing-library/react": {
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
+      "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@testing-library/dom": "^8.5.0",
+        "@types/react-dom": "^18.0.0"
+      }
+    },
     "@testing-library/user-event": {
       "version": "13.5.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
diff --git a/package.json b/package.json
index 8e1dcee..d2f61b2 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "@storybook/preset-create-react-app": "^4.1.2",
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
+    "@testing-library/react": "^13.4.0",
     "babel-loader": "^9.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "clean-webpack-plugin": "^4.0.0",
diff --git a/src/components/Button/__tests__/Button.stories.tsx b/src/components/Button/__tests__/Button.stories.tsx
index e5cfefe..56231c3 100644
--- a/src/components/Button/__tests__/Button.stories.tsx
+++ b/src/components/Button/__tests__/Button.stories.tsx
@@ -8,6 +8,22 @@ import PlayLogo from '../../../static/images/play-button.svg'
 export default {
   title: 'Button',
   component: Button,
+  parameters: {
+    parameters: {
+      backgrounds: {
+        default: '#141414',
+        values: [
+          { name: 'dark', value: '#141414' },
+          { name: 'light', value: '#fff' },
+        ],
+      },
+    },
+    docs: {
+      description: {
+        component: 'Primary and secondary styles for all buttons',
+      },
+    },
+  },
 } as ComponentMeta<typeof Button>
 
 const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />