Initial commit from ZIP
This commit is contained in:
kusz committed
commit
378d4692a9
454 files changed
+40367
No files matched your search
+441
@@ -0,0 +1,441 @@
|
||||
import React from 'react';
|
||||
import { createMemoryHistory, createLocation } from 'history';
|
||||
import ProjectBrief from 'organisms/ProjectBrief/ProjectBrief';
|
||||
import { cleanup, render, waitForElement, fireEvent, act, wait } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
import { Provider } from 'react-redux';
|
||||
import projectApi from 'API/projects';
|
||||
import productApi from 'API/products';
|
||||
import * as productActions from 'modules/products/actions';
|
||||
import { Route, Router, match } from 'react-router';
|
||||
import configureStore from 'redux-mock-store'; //ES6 modules
|
||||
import { Brand, Category } from 'API/projectData';
|
||||
import { format } from 'date-fns';
|
||||
import useCurrentProject from 'hooks/useCurrentProject';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
afterEach(cleanup);
|
||||
const dispatch = jest.fn();
|
||||
|
||||
//MOCKED DATA
|
||||
const category: Category = {
|
||||
id: 1,
|
||||
name: 'toys',
|
||||
};
|
||||
const brand: Brand = {
|
||||
id: 1,
|
||||
name: 'boys',
|
||||
};
|
||||
const printingFilesDate = '2011-02-01';
|
||||
const promoDate = '2011-01-01';
|
||||
|
||||
const createMockStore = (initialValues: any) => {
|
||||
const mockStore = configureStore();
|
||||
const store = mockStore({
|
||||
projectData: {
|
||||
categories: [category],
|
||||
brands: [brand],
|
||||
},
|
||||
users: {
|
||||
currentUser: {
|
||||
id: 1,
|
||||
organization: {
|
||||
type: 'supplier',
|
||||
},
|
||||
},
|
||||
usersList: [],
|
||||
},
|
||||
projects: {
|
||||
projectsList: [{ ...initialValues }],
|
||||
},
|
||||
});
|
||||
return store;
|
||||
};
|
||||
|
||||
const routeConfiguration = (path: string, params?: any) => {
|
||||
const history = createMemoryHistory({ initialEntries: [path] });
|
||||
const match: match = {
|
||||
isExact: true,
|
||||
path,
|
||||
url: path,
|
||||
params: params ? params : {},
|
||||
};
|
||||
const location = createLocation(match.url);
|
||||
return { history, match, location };
|
||||
};
|
||||
|
||||
const renderWithProviderAndRoute = (ui: any, { routeOptions, history, store }: any): any => {
|
||||
return {
|
||||
...render(
|
||||
<Provider store={store}>
|
||||
<Router history={history}>
|
||||
<Route {...routeOptions}>{ui}</Route>
|
||||
</Router>
|
||||
</Provider>
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
describe('new project', () => {
|
||||
const path = `/projects/new`;
|
||||
let { history, match, location } = routeConfiguration(path);
|
||||
beforeEach(() => (history = createMemoryHistory({ initialEntries: [path] })));
|
||||
|
||||
const initialValues = {
|
||||
id: 1,
|
||||
slug: 'test',
|
||||
name: 'test',
|
||||
products: 'test',
|
||||
maxProductStage: 'max',
|
||||
published: false,
|
||||
updatedAt: new Date(),
|
||||
createdAt: new Date(),
|
||||
printingFilesDate,
|
||||
publishable: false,
|
||||
description: 'description',
|
||||
category: category.id,
|
||||
brand: brand.id,
|
||||
promoDate,
|
||||
productsAmount: 1,
|
||||
};
|
||||
const store = createMockStore(initialValues);
|
||||
|
||||
it('should render blank ProjectBrief on /projects/new ', async () => {
|
||||
const { getByTestId } = renderWithProviderAndRoute(
|
||||
<ProjectBrief dispatch={dispatch} history={history} match={match} location={location} />,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
|
||||
const categoryDropdown = await waitForElement(() => getByTestId('categoryDropdown'));
|
||||
const brandDropdown = await waitForElement(() => getByTestId('brandDropdown'));
|
||||
const printingFilesDateField = await waitForElement(() => getByTestId('printingFilesDatePicker'));
|
||||
const promotionDateField = await waitForElement(() => getByTestId('poromoDateDatePicker'));
|
||||
const saveButton = await waitForElement(() => getByTestId('projectSaveButton'));
|
||||
const projectName = await waitForElement(() => getByTestId('projectName'));
|
||||
const description = await waitForElement(() => getByTestId('description'));
|
||||
expect(projectName).toBeInTheDocument();
|
||||
expect(description).toBeInTheDocument();
|
||||
expect(printingFilesDateField).toBeInTheDocument();
|
||||
expect(promotionDateField).toBeInTheDocument();
|
||||
expect(saveButton).toBeInTheDocument();
|
||||
expect(brandDropdown).toBeInTheDocument();
|
||||
expect(categoryDropdown).toBeInTheDocument();
|
||||
});
|
||||
it('should allow change form values', async () => {
|
||||
const { findByTestId, findByText, findAllByDisplayValue } = renderWithProviderAndRoute(
|
||||
<ProjectBrief dispatch={store.dispatch} history={history} match={match} location={location} />,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
const brandDropdown = await waitForElement(() => findByTestId('brandDropdown'));
|
||||
const categoryDropdown = await waitForElement(() => findByTestId('categoryDropdown'));
|
||||
const projectName = await waitForElement(() => findByTestId('projectName'));
|
||||
const description = await waitForElement(() => findByTestId('description'));
|
||||
const dates = await waitForElement(() => findAllByDisplayValue(format(new Date(), 'yyyy-MM-dd')));
|
||||
//CHECK IF DATE CHANGED
|
||||
fireEvent.change(dates[0], { target: { value: '2011-02-02' } });
|
||||
expect(dates[0]).toHaveValue('2011-02-02');
|
||||
fireEvent.change(dates[1], { target: { value: '2011-02-03' } });
|
||||
expect(dates[1]).toHaveValue('2011-02-03');
|
||||
//CHECK IF PROJECT NAME CHANGED
|
||||
fireEvent.change(projectName, { target: { value: 'projectName' } });
|
||||
expect(projectName).toHaveValue('projectName');
|
||||
//CHECK IF DESCRIPTION CHANGED
|
||||
fireEvent.change(description, { target: { value: 'description' } });
|
||||
expect(description).toHaveValue('description');
|
||||
//CHECK IF BRAND DROPDOWN VALUE CHANGED
|
||||
const brandValue = await waitForElement(() => findByTestId('brandValue'));
|
||||
expect(brandValue.innerHTML).toEqual('Marka');
|
||||
fireEvent.click(brandDropdown);
|
||||
const brandItem = await waitForElement(() => findByText(brand.name));
|
||||
expect(brandItem.innerHTML).toEqual(brand.name);
|
||||
fireEvent.click(brandItem);
|
||||
expect(brandValue.innerHTML).toEqual(brandItem.innerHTML);
|
||||
//CHECK IF CATEGORY DROPDOWN VALUE CHANGED
|
||||
const categoryValue = await waitForElement(() => findByTestId('categoryValue'));
|
||||
expect(categoryValue.innerHTML).toEqual('Kategoria');
|
||||
fireEvent.click(categoryDropdown);
|
||||
const categoryItem = await waitForElement(() => findByText(category.name));
|
||||
expect(categoryItem.innerHTML).toEqual(category.name);
|
||||
fireEvent.click(categoryItem);
|
||||
expect(categoryValue.innerHTML).toEqual(categoryItem.innerHTML);
|
||||
});
|
||||
it('publish button should not be visible if publishabled is false', async () => {
|
||||
const { queryByTestId } = renderWithProviderAndRoute(
|
||||
<ProjectBrief dispatch={store.dispatch} history={history} match={match} location={location} />,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
expect(queryByTestId('publishButton')).toBe(null);
|
||||
});
|
||||
it('should not submit blank form', async () => {
|
||||
const { findByTestId, queryAllByTestId } = renderWithProviderAndRoute(
|
||||
<ProjectBrief dispatch={store.dispatch} history={history} match={match} location={location} />,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
await act(async () => {
|
||||
const saveButton = await waitForElement(() => findByTestId('projectSaveButton'));
|
||||
fireEvent.click(saveButton);
|
||||
});
|
||||
const errors = queryAllByTestId('inputError');
|
||||
expect(errors).toHaveLength(5);
|
||||
});
|
||||
it('should save proper form and redirect to /products/${pid}', async () => {
|
||||
projectApi.createNewProject.mockReturnValueOnce({
|
||||
id: 1,
|
||||
});
|
||||
productApi.getProductsByURL.mockReturnValueOnce([
|
||||
{
|
||||
id: 1,
|
||||
},
|
||||
]);
|
||||
const { findByTestId, queryAllByTestId } = renderWithProviderAndRoute(
|
||||
<ProjectBrief
|
||||
dispatch={store.dispatch}
|
||||
history={history}
|
||||
match={match}
|
||||
location={location}
|
||||
currentProject={initialValues}
|
||||
/>,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
const saveButton = await waitForElement(() => findByTestId('projectSaveButton'));
|
||||
await act(async () => {
|
||||
fireEvent.click(saveButton);
|
||||
const errors = queryAllByTestId('inputError');
|
||||
expect(errors).toHaveLength(0);
|
||||
});
|
||||
expect(projectApi.createNewProject).toHaveBeenCalledTimes(1);
|
||||
expect(productApi.getProductsByURL).toHaveBeenCalledTimes(1);
|
||||
expect(history.location.pathname).toBe('/projects/1/products/1');
|
||||
});
|
||||
|
||||
it('should setCurrentStage to 0', () => {
|
||||
const spy = jest.spyOn(productActions, 'setCurrentStage');
|
||||
renderWithProviderAndRoute(
|
||||
<ProjectBrief dispatch={store.dispatch} history={history} match={match} location={location} />,
|
||||
{ routeOptions: { exact: true, path: '/projects/new' }, history, store }
|
||||
);
|
||||
expect(spy).toHaveBeenCalledWith(0);
|
||||
expect(spy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('existing project not publishable', () => {
|
||||
const path = `/projects/1`;
|
||||
const { history, match, location } = routeConfiguration(path, { id: 1 });
|
||||
const initialValues = {
|
||||
id: 1,
|
||||
slug: 'test',
|
||||
name: 'test',
|
||||
products: 'test',
|
||||
maxProductStage: 'max',
|
||||
published: false,
|
||||
updatedAt: new Date(),
|
||||
createdAt: new Date(),
|
||||
printingFilesDate,
|
||||
publishable: false,
|
||||
description: 'description',
|
||||
category: category.id,
|
||||
brand: brand.id,
|
||||
promoDate,
|
||||
productsAmount: 1,
|
||||
};
|
||||
const store = createMockStore(initialValues);
|
||||
it('should set initial values', async () => {
|
||||
const { getByTestId, findByDisplayValue } = renderWithProviderAndRoute(
|
||||
<ProjectBrief
|
||||
dispatch={dispatch}
|
||||
history={history}
|
||||
match={match}
|
||||
location={location}
|
||||
currentProject={initialValues}
|
||||
/>,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
const projectName = await waitForElement(() => getByTestId('projectName'));
|
||||
const projectDesc = await waitForElement(() => getByTestId('description'));
|
||||
const categoryValue = await waitForElement(() => getByTestId('categoryValue'));
|
||||
const brandValue = await waitForElement(() => getByTestId('brandValue'));
|
||||
const promoDate = await waitForElement(() => findByDisplayValue(initialValues.printingFilesDate));
|
||||
const pfDate = await waitForElement(() => findByDisplayValue(initialValues.promoDate));
|
||||
|
||||
expect(promoDate).toHaveValue(initialValues.printingFilesDate);
|
||||
expect(pfDate).toHaveValue(initialValues.promoDate);
|
||||
expect(categoryValue.innerHTML).toBe(category.name);
|
||||
expect(brandValue.innerHTML).toBe(brand.name);
|
||||
expect(projectName).toHaveValue(initialValues.name);
|
||||
expect(projectDesc).toHaveValue(initialValues.description);
|
||||
//TODO HOW TO CHECK FORMIK VALUES
|
||||
});
|
||||
it('should expand dropdown', async () => {
|
||||
const { getByTestId } = renderWithProviderAndRoute(
|
||||
<ProjectBrief dispatch={store.dispatch} history={history} match={match} location={location} />,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
const brand = await waitForElement(() => getByTestId('brandDropdown'));
|
||||
const category = await waitForElement(() => getByTestId('categoryDropdown'));
|
||||
fireEvent.click(brand);
|
||||
fireEvent.click(category);
|
||||
|
||||
expect(brand).toHaveClass('is-active');
|
||||
expect(category).toHaveClass('is-active');
|
||||
});
|
||||
});
|
||||
describe('existing project publishable', () => {
|
||||
beforeAll(() => {
|
||||
ReactDOM.createPortal = jest.fn((element, node) => {
|
||||
return element;
|
||||
});
|
||||
});
|
||||
afterEach(() => {
|
||||
ReactDOM.createPortal.mockClear();
|
||||
});
|
||||
const path = `/projects/1`;
|
||||
const { history, match, location } = routeConfiguration(path, { id: 1 });
|
||||
const initialValues = {
|
||||
id: 1,
|
||||
slug: 'test',
|
||||
name: 'test',
|
||||
products: 'test',
|
||||
maxProductStage: 'max',
|
||||
published: false,
|
||||
updatedAt: new Date(),
|
||||
createdAt: new Date(),
|
||||
printingFilesDate,
|
||||
publishable: true,
|
||||
description: 'description',
|
||||
category: category.id,
|
||||
brand: brand.id,
|
||||
promoDate,
|
||||
productsAmount: 1,
|
||||
};
|
||||
const store = createMockStore(initialValues);
|
||||
it('publish button should be in DOM but disabled', async () => {
|
||||
useCurrentProject.mockReturnValue({ ...initialValues, publishable: false });
|
||||
const { findByTestId } = renderWithProviderAndRoute(
|
||||
<ProjectBrief
|
||||
dispatch={store.dispatch}
|
||||
history={history}
|
||||
match={match}
|
||||
location={location}
|
||||
currentProject={{ ...initialValues, publishable: false }}
|
||||
/>,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
const publishButton = await waitForElement(() => findByTestId('publishButton'));
|
||||
expect(publishButton).toBeInTheDocument();
|
||||
expect(publishButton).toBeDisabled();
|
||||
});
|
||||
it('publish button should be in DOM and not disabled', async () => {
|
||||
useCurrentProject.mockReturnValue(initialValues);
|
||||
const { findByTestId } = renderWithProviderAndRoute(
|
||||
<ProjectBrief
|
||||
dispatch={store.dispatch}
|
||||
history={history}
|
||||
match={match}
|
||||
location={location}
|
||||
currentProject={initialValues}
|
||||
/>,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
const publishButton = await waitForElement(() => findByTestId('publishButton'));
|
||||
expect(publishButton).toBeInTheDocument();
|
||||
expect(publishButton).not.toBeDisabled();
|
||||
});
|
||||
it('should open modal and spin spinner', async () => {
|
||||
projectApi.publishProject.mockReturnValueOnce({ ...initialValues, published: true });
|
||||
useCurrentProject.mockReturnValue(initialValues);
|
||||
productApi.getProductsByURL.mockReturnValueOnce([
|
||||
{
|
||||
id: 1,
|
||||
},
|
||||
]);
|
||||
const { findByTestId, findByText } = renderWithProviderAndRoute(
|
||||
<ProjectBrief
|
||||
dispatch={store.dispatch}
|
||||
history={history}
|
||||
match={match}
|
||||
location={location}
|
||||
currentProject={initialValues}
|
||||
/>,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
const publishButton = await waitForElement(() => findByTestId('publishButton'));
|
||||
expect(publishButton).toBeInTheDocument();
|
||||
await act(async () => {
|
||||
fireEvent.click(publishButton);
|
||||
});
|
||||
const modal = await waitForElement(() => findByText('Publikacja projektu'));
|
||||
const modalCancel = await waitForElement(() => findByTestId('modalCancel'));
|
||||
const modalSubmit = await waitForElement(() => findByTestId('modalSubmit'));
|
||||
expect(modal).toBeInTheDocument();
|
||||
expect(modalSubmit).toBeInTheDocument();
|
||||
expect(modalCancel).toBeInTheDocument();
|
||||
fireEvent.click(modalSubmit);
|
||||
expect(modalSubmit).toHaveClass('is-loading');
|
||||
await wait(() => expect(modalSubmit).not.toHaveClass('is-loading'));
|
||||
|
||||
expect(modal).not.toBeInTheDocument();
|
||||
});
|
||||
describe('Published Project', () => {
|
||||
const path = `/projects/1`;
|
||||
const { history, match, location } = routeConfiguration(path, { id: 1 });
|
||||
const initialValues = {
|
||||
id: 1,
|
||||
slug: 'test',
|
||||
name: 'test',
|
||||
products: 'test',
|
||||
maxProductStage: 'max',
|
||||
published: true,
|
||||
updatedAt: new Date(),
|
||||
createdAt: new Date(),
|
||||
printingFilesDate,
|
||||
publishable: false,
|
||||
description: 'description',
|
||||
category: category.id,
|
||||
brand: brand.id,
|
||||
promoDate,
|
||||
productsAmount: 1,
|
||||
};
|
||||
const store = createMockStore(initialValues);
|
||||
it('should not display publish button when published is true', async () => {
|
||||
useCurrentProject.mockReturnValue(initialValues);
|
||||
const { queryByTestId } = renderWithProviderAndRoute(
|
||||
<ProjectBrief
|
||||
dispatch={store.dispatch}
|
||||
history={history}
|
||||
match={match}
|
||||
location={location}
|
||||
currentProject={initialValues}
|
||||
/>,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
expect(queryByTestId('publishButton')).toBe(null);
|
||||
});
|
||||
it('should have disabled fields', async () => {
|
||||
useCurrentProject.mockReturnValue(initialValues);
|
||||
const { findByText, findByTestId, findByDisplayValue } = renderWithProviderAndRoute(
|
||||
<ProjectBrief
|
||||
dispatch={store.dispatch}
|
||||
history={history}
|
||||
match={match}
|
||||
location={location}
|
||||
currentProject={initialValues}
|
||||
/>,
|
||||
{ routeOptions: { exact: true, path }, history, store }
|
||||
);
|
||||
const brandValue = await waitForElement(() => findByTestId('brandValue'));
|
||||
const categoryValue = await waitForElement(() => findByTestId('categoryValue'));
|
||||
const projectName = await waitForElement(() => findByTestId('projectName'));
|
||||
const description = await waitForElement(() => findByTestId('description'));
|
||||
const promo = await waitForElement(() => findByDisplayValue(promoDate));
|
||||
const pfDate = await waitForElement(() => findByDisplayValue(printingFilesDate));
|
||||
|
||||
expect(categoryValue.parentElement).toBeDisabled();
|
||||
expect(brandValue.parentElement).toBeDisabled();
|
||||
expect(promo).toBeDisabled();
|
||||
expect(pfDate).toBeDisabled();
|
||||
expect(projectName).toBeDisabled();
|
||||
expect(description).toBeDisabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user