chore(E2E): use cypress-storybook library for tests (#18353)

* chore(E2E): use cypress-storybook library for tests

This pr introduces
[cypress-storybook](https://github.com/NicholasBoll/cypress-storybook)
integration for cypress tests. Removes the need for the custom
`visitStory` utility.

The OSS integration uses storybook internals to modify controls and knobs
which will be leverage in future PRs to improve testing.

cypress-storybook also uses storybook internals to reload stories
without a page reload and speeds up the tests by 50% in the best cases

* Change files

* add cypresss-storybook addon to react-examples too

* Change files

* update change file

.storybook/preview.js

@@ -1,3 +1,4 @@
 import { withFluentProvider, withStrictMode } from '@fluentui/react-storybook';
+import 'cypress-storybook/react';
 
 export const decorators = [withFluentProvider, withStrictMode];

change/@fluentui-react-examples-a2261aab-dd20-49b5-9a04-e1b638f66fb3.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add cypress-storybook-plugin",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-menu-ed1cf7c6-0169-42f3-b547-1ef71d5c20c3.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Use cypress-storybook for e2e tests",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tabster-f220f4d8-0406-4e9d-853c-40511008f91f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "packageName": "@fluentui/react-tabster",
+  "comment": "Add cypress-storybook-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -115,6 +115,7 @@
     "css-loader": "5.0.1",
     "cypress": "6.6.0",
     "cypress-real-events": "1.2.0",
+    "cypress-storybook": "0.5.1",
     "danger": "^6.0.5",
     "del": "6.0.0",
     "eslint": "7.25.0",
@@ -154,10 +155,10 @@
     "tslib": "2.2.0",
     "typescript": "4.1.5",
     "webpack": "5.21.2",
-    "webpack-cli": "4.3.1",
-    "webpack-dev-server": "4.0.0-beta.0",
     "webpack-bundle-analyzer": "4.4.2",
+    "webpack-cli": "4.3.1",
     "webpack-dev-middleware": "4.2.0",
+    "webpack-dev-server": "4.0.0-beta.0",
     "webpack-hot-middleware": "2.25.0",
     "yargs": "13.3.2"
   },

packages/react-examples/.storybook/preview.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { configure, addParameters, addDecorator } from '@storybook/react';
+import 'cypress-storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import { withPerformance } from 'storybook-addon-performance';
 import { withFluentProvider, withKeytipLayer, withStrictMode } from '@fluentui/storybook';