2019-04-05 02:23:40 +07:00
|
|
|
import React from 'react';
|
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
import { render, waitForElement, fireEvent } from '../utils/test-react-testing-library';
|
2019-10-08 03:19:18 +07:00
|
|
|
import storage from '../utils/storage';
|
2019-11-24 02:15:14 +07:00
|
|
|
// eslint-disable-next-line jest/no-mocks-import
|
2019-06-20 19:37:28 +07:00
|
|
|
import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-10-19 15:49:04 +07:00
|
|
|
import App from './App';
|
2019-10-08 03:19:18 +07:00
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
jest.mock('../utils/storage', () => {
|
2019-04-05 02:23:40 +07:00
|
|
|
class LocalStorageMock {
|
2019-10-11 03:20:05 +07:00
|
|
|
private store: Record<string, string>;
|
2019-06-20 19:37:28 +07:00
|
|
|
public constructor() {
|
2019-04-05 02:23:40 +07:00
|
|
|
this.store = {};
|
|
|
|
}
|
2019-06-20 19:37:28 +07:00
|
|
|
public clear(): void {
|
2019-04-05 02:23:40 +07:00
|
|
|
this.store = {};
|
|
|
|
}
|
2019-10-11 03:20:05 +07:00
|
|
|
public getItem(key: string): unknown {
|
2019-04-05 02:23:40 +07:00
|
|
|
return this.store[key] || null;
|
|
|
|
}
|
2019-10-11 03:20:05 +07:00
|
|
|
public setItem(key: string, value: string): void {
|
2019-04-05 02:23:40 +07:00
|
|
|
this.store[key] = value.toString();
|
|
|
|
}
|
2019-10-11 03:20:05 +07:00
|
|
|
public removeItem(key: string): void {
|
2019-04-05 02:23:40 +07:00
|
|
|
delete this.store[key];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return new LocalStorageMock();
|
|
|
|
});
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
jest.mock('../utils/api', () => ({
|
2019-11-24 02:15:14 +07:00
|
|
|
// eslint-disable-next-line jest/no-mocks-import
|
2019-06-20 19:37:28 +07:00
|
|
|
request: require('../../jest/unit/components/__mocks__/api').default.request,
|
2019-04-05 02:23:40 +07:00
|
|
|
}));
|
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
/* eslint-disable react/jsx-no-bind*/
|
|
|
|
describe('<App />', () => {
|
|
|
|
test('should display the Loading component at the beginning ', () => {
|
|
|
|
const { container, queryByTestId } = render(<App />);
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
expect(container.firstChild).toMatchSnapshot();
|
|
|
|
expect(queryByTestId('loading')).toBeTruthy();
|
2019-04-05 02:23:40 +07:00
|
|
|
});
|
2019-05-02 02:02:46 +07:00
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
test('should display the Header component ', async () => {
|
|
|
|
const { container, queryByTestId } = render(<App />);
|
|
|
|
|
|
|
|
expect(container.firstChild).toMatchSnapshot();
|
|
|
|
expect(queryByTestId('loading')).toBeTruthy();
|
|
|
|
|
|
|
|
// wait for the Header component appearance and return the element
|
|
|
|
const headerElement = await waitForElement(() => queryByTestId('header'));
|
|
|
|
expect(headerElement).toBeTruthy();
|
2019-04-05 02:23:40 +07:00
|
|
|
});
|
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
test('handleLogout - logouts the user and clear localstorage', async () => {
|
2019-04-05 02:23:40 +07:00
|
|
|
storage.setItem('username', 'verdaccio');
|
|
|
|
storage.setItem('token', generateTokenWithTimeRange(24));
|
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
const { queryByTestId } = render(<App />);
|
|
|
|
|
|
|
|
// wait for the Account's circle element component appearance and return the element
|
|
|
|
const accountCircleElement = await waitForElement(() => queryByTestId('header--menu-accountcircle'));
|
|
|
|
expect(accountCircleElement).toBeTruthy();
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
if (accountCircleElement) {
|
|
|
|
fireEvent.click(accountCircleElement);
|
|
|
|
|
|
|
|
// wait for the Button's logout element component appearance and return the element
|
|
|
|
const buttonLogoutElement = await waitForElement(() => queryByTestId('header--button-logout'));
|
|
|
|
expect(buttonLogoutElement).toBeTruthy();
|
|
|
|
|
|
|
|
if (buttonLogoutElement) {
|
|
|
|
fireEvent.click(buttonLogoutElement);
|
|
|
|
|
|
|
|
expect(queryByTestId('greetings-label')).toBeFalsy();
|
|
|
|
}
|
|
|
|
}
|
2019-04-05 02:23:40 +07:00
|
|
|
});
|
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
test('isUserAlreadyLoggedIn: token already available in storage', async () => {
|
2019-04-05 02:23:40 +07:00
|
|
|
storage.setItem('username', 'verdaccio');
|
2019-11-25 01:21:08 +07:00
|
|
|
storage.setItem('token', generateTokenWithTimeRange(24));
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
const { queryByTestId, queryAllByText } = render(<App />);
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
// wait for the Account's circle element component appearance and return the element
|
|
|
|
const accountCircleElement = await waitForElement(() => queryByTestId('header--menu-accountcircle'));
|
|
|
|
expect(accountCircleElement).toBeTruthy();
|
|
|
|
|
|
|
|
if (accountCircleElement) {
|
|
|
|
fireEvent.click(accountCircleElement);
|
2019-04-05 02:23:40 +07:00
|
|
|
|
2019-11-25 01:21:08 +07:00
|
|
|
// wait for the Greeting's label element component appearance and return the element
|
|
|
|
const greetingsLabelElement = await waitForElement(() => queryByTestId('greetings-label'));
|
|
|
|
expect(greetingsLabelElement).toBeTruthy();
|
|
|
|
|
|
|
|
if (greetingsLabelElement) {
|
|
|
|
expect(queryAllByText('verdaccio')).toBeTruthy();
|
|
|
|
}
|
|
|
|
}
|
2019-04-05 02:23:40 +07:00
|
|
|
});
|
|
|
|
});
|