mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

MM-52213 webapp/platform/components : Add unit test framework (#23366)

Просмотр исходного кода
Этот коммит содержится в:
M-ZubairAhmed
2023-05-18 17:40:12 +05:30
коммит произвёл GitHub
родитель c894cd3f30
Коммит 5808b848c3
10 изменённых файлов: 414 добавлений и 101 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

143
webapp/platform/components/src/legacy_generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap Обычный файл
Просмотреть файл

@@ -0,0 +1,143 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LegacyGenericModal should match snapshot for base case 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body
class="modal-open"
style="padding-right: 0px;"
>
<div
aria-hidden="true"
/>
<div
role="dialog"
>
<div
class="fade modal-backdrop in"
/>
<div
aria-labelledby="genericModalLabel"
class="fade in modal"
id="genericModal"
role="dialog"
style="display: block; padding-right: 0px;"
tabindex="-1"
>
<div
class="a11y__modal GenericModal modal-dialog"
>
<div
class="modal-content"
role="document"
>
<div
data-testid="sentinelStart"
tabindex="-1"
/>
<div
class="GenericModal__wrapper-enter-key-press-catcher"
tabindex="0"
>
<div
class="modal-header"
>
<button
aria-label="Close"
class="close"
type="button"
>
<span
aria-hidden="true"
>
×
</span>
<span
class="sr-only"
>
Close
</span>
</button>
</div>
<div
class="modal-body"
>
<div
class="GenericModal__header"
>
<h1
id="genericModalLabel"
>
Modal Header Text
</h1>
</div>
<div
class="GenericModal__body padding"
/>
</div>
</div>
<div
data-testid="sentinelEnd"
tabindex="-1"
/>
</div>
</div>
</div>
</div>
</body>,
"container": <div
aria-hidden="true"
/>,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;

201
webapp/platform/components/src/legacy_generic_modal/footer_content/__snapshots__/footer_pagination.test.tsx.snap
Просмотреть файл

@@ -1,41 +1,170 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/GenericModal/FooterPagination should render default 1`] = `
<div
className="footer-pagination"
>
<div
className="footer-pagination__legend"
/>
<div
className="footer-pagination__button-container"
>
<button
className="footer-pagination__button-container__button disabled"
disabled={true}
onClick={[MockFunction]}
type="button"
exports[`LegacyGenericModal/FooterPagination should render default 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div>
<div
class="footer-pagination"
>
<div
class="footer-pagination__legend"
/>
<div
class="footer-pagination__button-container"
>
<button
class="footer-pagination__button-container__button disabled"
disabled=""
type="button"
>
<svg
fill="currentColor"
height="16"
version="1.1"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
/>
</svg>
<span>
Previous
</span>
</button>
<button
class="footer-pagination__button-container__button disabled"
disabled=""
type="button"
>
<span>
Next
</span>
<svg
fill="currentColor"
height="16"
version="1.1"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</button>
</div>
</div>
</div>
</body>,
"container": <div>
<div
class="footer-pagination"
>
<ChevronLeftIcon
size={16}
<div
class="footer-pagination__legend"
/>
<span>
Previous
</span>
</button>
<button
className="footer-pagination__button-container__button disabled"
disabled={true}
onClick={[MockFunction]}
type="button"
>
<span>
Next
</span>
<ChevronRightIcon
size={16}
/>
</button>
</div>
</div>
<div
class="footer-pagination__button-container"
>
<button
class="footer-pagination__button-container__button disabled"
disabled=""
type="button"
>
<svg
fill="currentColor"
height="16"
version="1.1"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
/>
</svg>
<span>
Previous
</span>
</button>
<button
class="footer-pagination__button-container__button disabled"
disabled=""
type="button"
>
<span>
Next
</span>
<svg
fill="currentColor"
height="16"
version="1.1"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</button>
</div>
</div>
</div>,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;

77
webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx
Просмотреть файл

@@ -2,11 +2,12 @@
// See LICENSE.txt for license information.
import React from 'react';
import {shallow} from 'enzyme';
import {render, screen} from '@testing-library/react';
import {FooterPagination} from './';
import {FooterPagination} from './footer_pagination';
import {wrapIntl} from '../../testUtils'
describe('components/GenericModal/FooterPagination', () => {
describe('LegacyGenericModal/FooterPagination', () => {
const baseProps = {
page: 0,
total: 0,
@@ -16,73 +17,21 @@ describe('components/GenericModal/FooterPagination', () => {
};
test('should render default', () => {
const wrapper = shallow(
<FooterPagination {...baseProps}/>,
);
const wrapper = render(wrapIntl(<FooterPagination {...baseProps}/>));
expect(wrapper).toMatchSnapshot();
});
test('should render pagination legend', () => {
const wrapper = shallow(
<FooterPagination
{...baseProps}
page={0}
total={17}
itemsPerPage={10}
/>,
);
const props = {
...baseProps,
page: 0,
total: 17,
itemsPerPage: 10,
}
const legend = wrapper.find('.footer-pagination__legend');
render(wrapIntl(<FooterPagination {...props}/>));
expect(legend.length).toEqual(1);
expect(legend.at(0).text()).toEqual('Showing 1-10 of 17');
});
test('should render pagination buttons', () => {
const wrapper = shallow(
<FooterPagination
{...baseProps}
page={1}
total={30}
itemsPerPage={10}
/>,
);
const buttons = wrapper.find('.footer-pagination__button-container__button');
expect(buttons.length).toEqual(2);
expect(buttons.at(0).text()).toEqual('<ChevronLeftIcon />Previous');
expect(buttons.at(1).text()).toEqual('Next<ChevronRightIcon />');
});
test('should handle pagination buttons', async () => {
const onPreviousPage = jest.fn();
const onNextPage = jest.fn();
const wrapper = shallow(
<FooterPagination
page={1}
total={30}
itemsPerPage={10}
onPreviousPage={onPreviousPage}
onNextPage={onNextPage}
/>,
);
const buttons = wrapper.find('.footer-pagination__button-container__button');
const prevButton = buttons.at(0);
const nextButton = buttons.at(1);
expect(prevButton.hasClass('disabled')).toBeFalsy();
expect(nextButton.hasClass('disabled')).toBeFalsy();
nextButton.simulate('click');
expect(onNextPage).toHaveBeenCalledTimes(1);
prevButton.simulate('click');
expect(onPreviousPage).toHaveBeenCalledTimes(1);
expect(screen.getByText('Showing 1-10 of 17')).toBeInTheDocument();
});
});

39
webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.test.tsx Обычный файл
Просмотреть файл

@@ -0,0 +1,39 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {render, screen} from '@testing-library/react';
import {LegacyGenericModal} from './legacy_generic_modal';
import {wrapIntl} from '../testUtils';
describe('LegacyGenericModal', () => {
const baseProps = {
onExited: jest.fn(),
modalHeaderText: 'Modal Header Text',
children: <></>,
};
test('should match snapshot for base case', () => {
const wrapper = render(
wrapIntl(<LegacyGenericModal {...baseProps}/>),
);
expect(wrapper).toMatchSnapshot();
});
test('should have confirm and cancels buttons when handlers are passed for both buttons', () => {
const props = {
...baseProps,
handleConfirm: jest.fn(),
handleCancel: jest.fn(),
};
render(
wrapIntl(<LegacyGenericModal {...props}/>),
);
expect(screen.getByText('Confirm')).toBeInTheDocument();
expect(screen.getByText('Cancel')).toBeInTheDocument();
});
});

4
webapp/platform/components/src/setupTests.ts Обычный файл
Просмотреть файл

@@ -0,0 +1,4 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import '@testing-library/jest-dom';

13
webapp/platform/components/src/testUtils.tsx Обычный файл
Просмотреть файл

@@ -0,0 +1,13 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {ReactNode} from 'react'
import {IntlProvider, createIntl} from 'react-intl'
export const defaultIntl = createIntl({
locale: 'en',
defaultLocale: 'en',
messages: {},
})
export const wrapIntl = (children?: ReactNode) => <IntlProvider {...defaultIntl}>{children}</IntlProvider>

1
webapp/platform/components/src/tour_tip/tour_tip.tsx
Просмотреть файл

@@ -8,7 +8,6 @@ import {Placement} from 'tippy.js';
import classNames from 'classnames';
import {PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
import {useClickOutsideRef} from '../common/hooks/useClickOutsideRef';
import 'tippy.js/dist/tippy.css';
import 'tippy.js/themes/light-border.css';