2019-04-05 02:23:40 +07:00
|
|
|
import React from 'react';
|
|
|
|
import { BrowserRouter as Router } from 'react-router-dom';
|
2019-11-23 19:41:14 +07:00
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
import { render, fireEvent, waitForElement, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
|
|
|
|
import { AppContextProvider } from '../../App';
|
2020-03-08 22:45:07 +07:00
|
|
|
import translationEN from '../../../i18n/translations/en-US.json';
|
2019-10-08 03:19:18 +07:00
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
import Header from './Header';
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
const props = {
|
|
|
|
user: {
|
|
|
|
username: 'verddacio-user',
|
|
|
|
},
|
|
|
|
packages: [],
|
2019-10-08 12:47:11 +07:00
|
|
|
};
|
|
|
|
|
|
|
|
/* eslint-disable react/jsx-no-bind*/
|
2019-04-05 02:23:40 +07:00
|
|
|
describe('<Header /> component with logged in state', () => {
|
2019-10-08 12:47:11 +07:00
|
|
|
test('should load the component in logged out state', () => {
|
|
|
|
const { container, queryByTestId, getByText } = render(
|
|
|
|
<Router>
|
2020-01-13 04:21:29 +07:00
|
|
|
<AppContextProvider>
|
2019-11-25 01:21:08 +07:00
|
|
|
<Header />
|
|
|
|
</AppContextProvider>
|
2019-10-08 12:47:11 +07:00
|
|
|
</Router>
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(container.firstChild).toMatchSnapshot();
|
2019-11-25 01:21:08 +07:00
|
|
|
expect(queryByTestId('header--menu-accountcircle')).toBeNull();
|
2019-10-08 12:47:11 +07:00
|
|
|
expect(getByText('Login')).toBeTruthy();
|
|
|
|
});
|
|
|
|
|
|
|
|
test('should load the component in logged in state', () => {
|
|
|
|
const { container, getByTestId, queryByText } = render(
|
2019-04-05 02:23:40 +07:00
|
|
|
<Router>
|
2020-01-13 04:21:29 +07:00
|
|
|
<AppContextProvider user={props.user}>
|
2019-11-25 01:21:08 +07:00
|
|
|
<Header />
|
|
|
|
</AppContextProvider>
|
2019-04-05 02:23:40 +07:00
|
|
|
</Router>
|
|
|
|
);
|
2019-10-08 12:47:11 +07:00
|
|
|
|
|
|
|
expect(container.firstChild).toMatchSnapshot();
|
2019-11-25 01:21:08 +07:00
|
|
|
expect(getByTestId('header--menu-accountcircle')).toBeTruthy();
|
2019-10-08 12:47:11 +07:00
|
|
|
expect(queryByText('Login')).toBeNull();
|
2019-04-05 02:23:40 +07:00
|
|
|
});
|
|
|
|
|
2019-10-08 12:47:11 +07:00
|
|
|
test('should open login dialog', async () => {
|
2020-03-08 22:45:07 +07:00
|
|
|
const { getByTestId } = render(
|
2019-10-08 12:47:11 +07:00
|
|
|
<Router>
|
2020-01-13 04:21:29 +07:00
|
|
|
<AppContextProvider>
|
2019-11-25 01:21:08 +07:00
|
|
|
<Header />
|
|
|
|
</AppContextProvider>
|
2019-10-08 12:47:11 +07:00
|
|
|
</Router>
|
|
|
|
);
|
|
|
|
|
2020-03-08 22:45:07 +07:00
|
|
|
const loginBtn = getByTestId('header--button-login');
|
2019-10-08 12:47:11 +07:00
|
|
|
fireEvent.click(loginBtn);
|
2020-03-08 22:45:07 +07:00
|
|
|
const loginDialog = await waitForElement(() => getByTestId('login--dialog'));
|
2019-12-07 00:09:01 +07:00
|
|
|
expect(loginDialog).toBeTruthy();
|
2019-04-05 02:23:40 +07:00
|
|
|
});
|
|
|
|
|
2019-10-08 12:47:11 +07:00
|
|
|
test('should logout the user', async () => {
|
|
|
|
const { getByText, getByTestId } = render(
|
|
|
|
<Router>
|
2020-01-13 04:21:29 +07:00
|
|
|
<AppContextProvider user={props.user}>
|
2019-11-25 01:21:08 +07:00
|
|
|
<Header />
|
|
|
|
</AppContextProvider>
|
2019-10-08 12:47:11 +07:00
|
|
|
</Router>
|
|
|
|
);
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
const headerMenuAccountCircle = getByTestId('header--menu-accountcircle');
|
2019-10-08 12:47:11 +07:00
|
|
|
fireEvent.click(headerMenuAccountCircle);
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-10-08 12:47:11 +07:00
|
|
|
// wait for button Logout's appearance and return the element
|
|
|
|
const logoutBtn = await waitForElement(() => getByText('Logout'));
|
|
|
|
fireEvent.click(logoutBtn);
|
2019-11-25 01:21:08 +07:00
|
|
|
expect(getByText('Login')).toBeTruthy();
|
2019-04-05 02:23:40 +07:00
|
|
|
});
|
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
test("The question icon should open a new tab of verdaccio's website - installation doc", () => {
|
2019-10-08 12:47:11 +07:00
|
|
|
const { getByTestId } = render(
|
2019-04-05 02:23:40 +07:00
|
|
|
<Router>
|
2020-01-13 04:21:29 +07:00
|
|
|
<AppContextProvider user={props.user}>
|
2019-11-25 01:21:08 +07:00
|
|
|
<Header />
|
|
|
|
</AppContextProvider>
|
2019-04-05 02:23:40 +07:00
|
|
|
</Router>
|
|
|
|
);
|
|
|
|
|
2019-10-08 12:47:11 +07:00
|
|
|
const documentationBtn = getByTestId('header--tooltip-documentation');
|
|
|
|
expect(documentationBtn.getAttribute('href')).toBe('https://verdaccio.org/docs/en/installation');
|
2019-04-05 02:23:40 +07:00
|
|
|
});
|
|
|
|
|
2019-10-08 12:47:11 +07:00
|
|
|
test('should open the registrationInfo modal when clicking on the info icon', async () => {
|
|
|
|
const { getByTestId } = render(
|
|
|
|
<Router>
|
2020-01-13 04:21:29 +07:00
|
|
|
<AppContextProvider user={props.user}>
|
2019-11-25 01:21:08 +07:00
|
|
|
<Header />
|
|
|
|
</AppContextProvider>
|
2019-10-08 12:47:11 +07:00
|
|
|
</Router>
|
|
|
|
);
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-10-08 12:47:11 +07:00
|
|
|
const infoBtn = getByTestId('header--tooltip-info');
|
|
|
|
fireEvent.click(infoBtn);
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-10-08 12:47:11 +07:00
|
|
|
// wait for registrationInfo modal appearance and return the element
|
|
|
|
const registrationInfoModal = await waitForElement(() => getByTestId('registryInfo--dialog'));
|
|
|
|
expect(registrationInfoModal).toBeTruthy();
|
2019-04-05 02:23:40 +07:00
|
|
|
});
|
|
|
|
|
2019-10-08 12:47:11 +07:00
|
|
|
test('should close the registrationInfo modal when clicking on the button close', async () => {
|
|
|
|
const { getByTestId, getByText, queryByTestId } = render(
|
|
|
|
<Router>
|
2020-01-13 04:21:29 +07:00
|
|
|
<AppContextProvider user={props.user}>
|
2019-11-25 01:21:08 +07:00
|
|
|
<Header />
|
|
|
|
</AppContextProvider>
|
2019-10-08 12:47:11 +07:00
|
|
|
</Router>
|
|
|
|
);
|
|
|
|
|
|
|
|
const infoBtn = getByTestId('header--tooltip-info');
|
|
|
|
fireEvent.click(infoBtn);
|
|
|
|
|
|
|
|
// wait for Close's button of registrationInfo modal appearance and return the element
|
2020-03-08 22:45:07 +07:00
|
|
|
const closeBtn = await waitForElement(() => getByText(translationEN.button.close));
|
2019-10-08 12:47:11 +07:00
|
|
|
fireEvent.click(closeBtn);
|
|
|
|
|
2019-10-27 21:49:30 +07:00
|
|
|
const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
|
|
|
|
queryByTestId('registryInfo--dialog')
|
|
|
|
);
|
2019-10-08 12:47:11 +07:00
|
|
|
expect(hasRegistrationInfoModalBeenRemoved).toBeTruthy();
|
2019-11-25 01:21:08 +07:00
|
|
|
test.todo('autocompletion should display suggestions according to the type value');
|
2019-04-05 02:23:40 +07:00
|
|
|
});
|
|
|
|
});
|