Merge pull request #2 from maxceem/feature/cross-imports

Cross Imports

Author: urwithat

jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
   },
   moduleNameMapper: {
     "\\.(css)$": "identity-obj-proxy",
+    "\\.svg$": "<rootDir>/__mocks__/fileMock.js",
   },
   setupFilesAfterEnv: [
     "../node_modules/@testing-library/jest-dom/dist/index.js",

package-lock.json

@@ -30,6 +30,7 @@
     "eslint-config-prettier": "^6.7.0",
     "eslint-config-react-important-stuff": "^2.0.0",
     "eslint-plugin-prettier": "^3.1.1",
+    "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.2.7",
     "jest-cli": "^25.2.7",
@@ -47,6 +48,7 @@
     "@reach/router": "^1.3.4",
     "express": "^4.17.1",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "react-use": "^15.3.4"
   }
 }

package.json

@@ -0,0 +1,7 @@
+module.exports = {
+  login: () => {},
+  logout: () => {},
+  setAppMenu: () => {},
+  getAuthUserTokens: () => new Promise(() => {}),
+  getAuthUserProfile: () => new Promise(() => {}),
+};

src/__mocks__/@topcoder/micro-frontends-navbar-app.js

@@ -0,0 +1 @@
+module.exports = "";

src/__mocks__/fileMock.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { useAsync } from "react-use";
+import {
+  login,
+  logout,
+  getAuthUserTokens,
+  getAuthUserProfile,
+} from "@topcoder/micro-frontends-navbar-app";
+
+const Profile = ({ authUserProfile }) => (
+  <>
+    <h3>User Profile</h3>
+    {authUserProfile.loading ? (
+      <div>User Profile Loading...</div>
+    ) : authUserProfile.error ? (
+      <div>Profile Loading Error: {authUserProfile.error.message}</div>
+    ) : (
+      <ul>
+        <li>
+          <strong>Handle: </strong> {authUserProfile.value.handle}
+        </li>
+        <li>
+          <strong>First Name: </strong> {authUserProfile.value.firstName}
+        </li>
+        <li>
+          <strong>Last Name: </strong> {authUserProfile.value.lastName}
+        </li>
+      </ul>
+    )}
+  </>
+);
+
+const AuthDemo = () => {
+  // see how the `useAsync` hook works here https://github.com/streamich/react-use/blob/master/docs/useAsync.md
+  const authUserTokens = useAsync(getAuthUserTokens);
+  const authUserProfile = useAsync(getAuthUserProfile);
+
+  return (
+    <>
+      <h2>Authentication</h2>
+      {authUserTokens.loading ? (
+        <div>Authentication...</div>
+      ) : authUserTokens.error ? (
+        <div>Authentication Error: {authUserTokens.error.message}</div>
+      ) : (
+        <div>
+          {authUserTokens.value.tokenV3 ? (
+            <div>
+              User is logged-in <button onClick={logout}>Logout</button>
+              <Profile authUserProfile={authUserProfile} />
+            </div>
+          ) : (
+            <>
+              User is logged-out <button onClick={login}>Login</button>
+            </>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AuthDemo;