ScopeAccess component implementation (#154)

* component based on enumScope

* apply review comments

* add store props

* Revert "add store props"

This reverts commit 0e0978c5f3.

* Tests for ScopedAccess (#156)

* Tests for ScopedAccess

* Create cypress mountTestProvider

Co-authored-by: eglehelms <e.helms@cognigy.com>
Co-authored-by: Brandon Lee Kitajchuk <bk@kitajchuk.com>

cypress/fixtures/userLogin.json

@@ -1,5 +1,7 @@
 {
   "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX3NpZCI6IjFjNTc4MWQyLTY5MGItNDIwYy1iZDUzLTVkN2Y1NjMwMDVjOCIsInNjb3BlIjoiYWRtaW4iLCJmb3JjZV9jaGFuZ2UiOnRydWUsInBlcm1pc3Npb25zIjpbIlBST1ZJU0lPTl9VU0VSUyIsIlBST1ZJU0lPTl9TRVJWSUNFUyIsIlZJRVdfT05MWSJdLCJpYXQiOjE2NjY3OTgzMTEsImV4cCI6MTY2NjgwMTkxMX0.ZV3KnRit8WGpipfiiMAZ2AVLQ25csWje1-K6hdqxktE",
   "user_sid": "78131ad5-f041-4d5d-821c-47b2d8c6d015",
-  "force_change": false
+  "force_change": false,
+  "scope": "admin",
+  "permissions": ["VIEW_ONLY", "PROVISION_SERVICES", "PROVISION_USERS"]
 }

cypress/support/component.tsx

@@ -19,23 +19,47 @@ import "src/styles/index.scss";
 // Import commands.js using ES2015 syntax:
 import "./commands";
 
+import React from "react";
+
 import { mount } from "cypress/react18";
 
+import { TestProvider } from "src/test";
+
+import type { TestProviderProps } from "src/test";
+import type { MountOptions, MountReturn } from "cypress/react";
+
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
 // Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
 declare global {
   // Disabling, but: https://typescript-eslint.io/rules/no-namespace/...
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
       mount: typeof mount;
+      /**
+       * Mounts a React node
+       * @param component React Node to mount
+       * @param options Additional options to pass into mount
+       */
+      mountTestProvider(
+        component: React.ReactNode,
+        options?: MountOptions & { authProps?: TestProviderProps["authProps"] }
+      ): Cypress.Chainable<MountReturn>;
     }
   }
 }
 
 Cypress.Commands.add("mount", mount);
 
+// This gives us access to dispatch inside of our test wrappers...
+Cypress.Commands.add("mountTestProvider", (component, options = {}) => {
+  const { authProps, ...mountOptions } = options;
+  const wrapper = (
+    <TestProvider authProps={authProps}>{component}</TestProvider>
+  );
+  return mount(wrapper, mountOptions);
+});
+
 // Example use:
 // cy.mount(<MyComponent />)