Cover oauth with e2e tests and fix some old and newly introduced bugs

packages/app/components/ui/Panel.tsx

@@ -42,7 +42,7 @@ export function Panel(props: {
 
 export function PanelHeader(props: { children: React.ReactNode }) {
   return (
-    <div className={styles.header} {...props}>
+    <div className={styles.header} {...props} data-testid="auth-header">
       {props.children}
     </div>
   );
@@ -50,7 +50,7 @@ export function PanelHeader(props: { children: React.ReactNode }) {
 
 export function PanelBody(props: { children: React.ReactNode }) {
   return (
-    <div className={styles.body} {...props}>
+    <div className={styles.body} {...props} data-testid="auth-body">
       {props.children}
     </div>
   );
@@ -58,7 +58,7 @@ export function PanelBody(props: { children: React.ReactNode }) {
 
 export function PanelFooter(props: { children: React.ReactNode }) {
   return (
-    <div className={styles.footer} {...props}>
+    <div className={styles.footer} {...props} data-testid="auth-controls">
       {props.children}
     </div>
   );

packages/app/components/ui/bsod/BSoD.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { FormattedMessage as Message } from 'react-intl';
-import { IntlProvider } from 'app/components/i18n';
 import logger from 'app/services/logger';
 import appInfo from 'app/components/auth/appInfo/AppInfo.intl.json';
 
@@ -42,32 +41,30 @@ class BSoD extends React.Component<{}, State> {
     }
 
     return (
-      <IntlProvider>
-        <div className={styles.body}>
-          <canvas
-            className={styles.canvas}
-            ref={(el: HTMLCanvasElement | null) => el && new BoxesField(el)}
-          />
+      <div className={styles.body}>
+        <canvas
+          className={styles.canvas}
+          ref={(el: HTMLCanvasElement | null) => el && new BoxesField(el)}
+        />
 
-          <div className={styles.wrapper}>
-            <div className={styles.title}>
-              <Message {...appInfo.appName} />
-            </div>
-            <div className={styles.lineWithMargin}>
-              <Message {...messages.criticalErrorHappened} />
-            </div>
-            <div className={styles.line}>
-              <Message {...messages.reloadPageOrContactUs} />
-            </div>
-            <a href={emailUrl} className={styles.support}>
-              support@ely.by
-            </a>
-            <div className={styles.easterEgg}>
-              <Message {...messages.alsoYouCanInteractWithBackground} />
-            </div>
+        <div className={styles.wrapper}>
+          <div className={styles.title}>
+            <Message {...appInfo.appName} />
+          </div>
+          <div className={styles.lineWithMargin}>
+            <Message {...messages.criticalErrorHappened} />
+          </div>
+          <div className={styles.line}>
+            <Message {...messages.reloadPageOrContactUs} />
+          </div>
+          <a href={emailUrl} className={styles.support}>
+            support@ely.by
+          </a>
+          <div className={styles.easterEgg}>
+            <Message {...messages.alsoYouCanInteractWithBackground} />
           </div>
         </div>
-      </IntlProvider>
+      </div>
     );
   }
 }

packages/app/components/ui/bsod/dispatchBsod.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import { bsod } from './actions';
-import BSoD from 'app/components/ui/bsod/BSoD';
-
-let injectedStore;
-let onBsod;
-
-export default function dispatchBsod(store = injectedStore) {
-  store.dispatch(bsod());
-  onBsod && onBsod();
-
-  ReactDOM.render(<BSoD />, document.getElementById('app'));
-}
-
-export function inject(store, stopLoading) {
-  injectedStore = store;
-  onBsod = stopLoading;
-}

packages/app/components/ui/bsod/dispatchBsod.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ContextProvider } from 'app/shell';
+import { Store } from 'app/reducers';
+import { History } from 'history';
+
+import { bsod } from './actions';
+import BSoD from './BSoD';
+
+let injectedStore: Store;
+let injectedHistory: History<any>;
+let onBsod: undefined | (() => void);
+
+export default function dispatchBsod(
+  store = injectedStore,
+  history = injectedHistory,
+) {
+  store.dispatch(bsod());
+  onBsod && onBsod();
+
+  ReactDOM.render(
+    <ContextProvider store={store} history={history}>
+      <BSoD />
+    </ContextProvider>,
+    document.getElementById('app'),
+  );
+}
+
+export function inject({
+  store,
+  history,
+  stopLoading,
+}: {
+  store: Store;
+  history: History<any>;
+  stopLoading: () => void;
+}) {
+  injectedStore = store;
+  injectedHistory = history;
+  onBsod = stopLoading;
+}

packages/app/components/ui/bsod/factory.ts

@@ -1,11 +1,21 @@
 import request from 'app/services/request';
 import logger from 'app/services/logger';
+import { Store } from 'app/reducers';
+import { History } from 'history';
 
 import dispatchBsod, { inject } from './dispatchBsod';
 import BsodMiddleware from './BsodMiddleware';
 
-export default function factory(store, stopLoading) {
-  inject(store, stopLoading);
+export default function factory({
+  store,
+  history,
+  stopLoading,
+}: {
+  store: Store;
+  history: History<any>;
+  stopLoading: () => void;
+}) {
+  inject({ store, history, stopLoading });
 
   // do bsod for 500/404 errors
   request.addMiddleware(new BsodMiddleware(dispatchBsod, logger));