Как смоделировать реакцию-адал с помощью приложения для создания реакции - PullRequest
0 голосов
/ 19 февраля 2019

У меня есть это приложение, которое я создал с помощью create-реагировать-приложение v2, я использую Jest, как он поставляется из коробки, и в качестве утилиты тестирования я дополняю его react-testing-library ?.Приложение авторизуется ADAL, и мы использовали библиотеку react-adal, чтобы помочь нам взаимодействовать с React.После того, как я добавил adal, все мои модульные тесты начали ломаться, потому что теперь есть слой авторизации.Моя проблема в том, что я не смог смоделировать аутентификационную часть и пройти аутентификационную часть, используя мои модульные тесты, если это имеет смысл.Мне было интересно, имел ли кто-нибудь опыт в этой области и протянул руку помощи:)

App.js

import { Provider } from 'react-redux';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import store from './store';
import { GlobalStyle } from './utils/styles/global';
import { SimpleDialog } from './components';
import {
    Home,
} from './Pages/index';
import { icons } from './utils/Icons';
import { withAdalLoginApi } from './components/Auth/AdalAuthProvider/Adal.config';
/**
 * icons() contains all the added icons to the project
 */
icons();

/**
 * Has root component of the react app
 * every view and component are handled
 * by this top most component of the
 * react heirarchy
 */
const App = () => (
    <Provider store={store}>
        <Fragment>
            <GlobalStyle />
            <SimpleDialog aria-modal aria-label="simple-dialog" />
            <Router>
                <Switch>
                  <Route exact path='/' component={Home}
                </Switch>
            </Router>
        </Fragment>
    </Provider>
);

export default withAdalLoginApi(App);

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { runWithAdal } from 'react-adal';
import App from './App';
import { authContext } from './components/Auth/AdalAuthProvider/Adal.config';
import * as serviceWorker from './serviceWorker';

const DO_NOT_LOGIN = false;

runWithAdal(
    authContext,
    () => {
        ReactDOM.render(<App />, document.getElementById('root'));
    },
    DO_NOT_LOGIN,
);

serviceWorker.unregister();

adal.config.js:

**import {
    AuthenticationContext,
    adalFetch,
    withAdalLogin,
    runWithAdal,
    adalGetToken,
} from 'react-adal';

export const adalConfig = {
    tenant: process.env.REACT_APP_TENANT,
    clientId: process.env.REACT_APP_MSAL_CLIENT_ID,
    endpoints: { api: process.env.REACT_APP_GRAPH_ENDPOINT },
    cacheLocation: process.env.REACT_APP_CACHE_LOCATION,
};

const DO_NOT_LOGIN = false;
export const authContext = new AuthenticationContext(adalConfig, false);

/**
 * Takes React.DOM App render and wraps it,
 * to avoid duplicate ReactApps started on iframes
 *
 * @param {*} path
 */
export const withAdal = dom => runWithAdal(authContext, () => dom, DO_NOT_LOGIN);

/**
 * Logs user out
 */
export const logOut = () => authContext.logOut();

/**
 * acquire token
 */
export const acquireToken = () => authContext.acquireToken();

/**
 * something
 */
export const getAdalToken = () => adalGetToken(authContext, adalConfig.endpoints.api);

/**
 * adalFetch
 *
 * @param {*} fetch
 * @param {*} url
 * @param {*} options
 */
export const adalApiFetch = (fetch, url, options) => adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);
**

App.test.js:

import React from 'react';
// import ReactDOM from 'react-dom';
import { render } from 'react-testing-library';
import * as adal from 'react-adal';
import App from '../App';
import {
    withAdalLoginApi,
    getAdalToken,
    authContext,
    adalConfig,
} from '../components/Auth/AdalAuthProvider/Adal.config';

adal.adalGetToken = jest.fn();

fit('Logs in', async () => {
    render(<App />);
});

Я пробовал несколько вещей, но продолжаю получать одно и то же сообщение: { message: 'User login is required', msg: 'login required' }

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...