mirror of https://github.com/apache/superset.git
test: Tests for DeleteModal component (#13286)
* tests for DeleteModal component * fix: test attribute * removing config from DeleteModal.test.tsx * re-run tests * Update superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx Co-authored-by: Jesse Yang <jesse.yang@airbnb.com> * Update superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx Co-authored-by: Jesse Yang <jesse.yang@airbnb.com> * Update superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx Co-authored-by: Jesse Yang <jesse.yang@airbnb.com> * Update superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx Co-authored-by: Jesse Yang <jesse.yang@airbnb.com> Co-authored-by: Jesse Yang <jesse.yang@airbnb.com>
This commit is contained in:
parent
776685736c
commit
8395b3d6c8
|
@ -0,0 +1,78 @@
|
|||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import DeleteModal from '.';
|
||||
|
||||
test('Must display title and content', () => {
|
||||
const props = {
|
||||
title: <div data-test="test-title">Title</div>,
|
||||
description: <div data-test="test-description">Description</div>,
|
||||
onConfirm: jest.fn(),
|
||||
onHide: jest.fn(),
|
||||
open: true,
|
||||
};
|
||||
render(<DeleteModal {...props} />);
|
||||
expect(screen.getByTestId('test-title')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('test-title')).toBeVisible();
|
||||
expect(screen.getByTestId('test-description')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('test-description')).toBeVisible();
|
||||
});
|
||||
|
||||
test('Calling "onHide"', () => {
|
||||
const props = {
|
||||
title: <div data-test="test-title">Title</div>,
|
||||
description: <div data-test="test-description">Description</div>,
|
||||
onConfirm: jest.fn(),
|
||||
onHide: jest.fn(),
|
||||
open: true,
|
||||
};
|
||||
render(<DeleteModal {...props} />);
|
||||
expect(props.onHide).toBeCalledTimes(0);
|
||||
expect(props.onConfirm).toBeCalledTimes(0);
|
||||
expect(screen.getByText('×')).toBeVisible();
|
||||
userEvent.click(screen.getByText('×'));
|
||||
expect(props.onHide).toBeCalledTimes(1);
|
||||
expect(props.onConfirm).toBeCalledTimes(0);
|
||||
});
|
||||
|
||||
test('Calling "onConfirm" only after typing "delete" in the input', () => {
|
||||
const props = {
|
||||
title: <div data-test="test-title">Title</div>,
|
||||
description: <div data-test="test-description">Description</div>,
|
||||
onConfirm: jest.fn(),
|
||||
onHide: jest.fn(),
|
||||
open: true,
|
||||
};
|
||||
render(<DeleteModal {...props} />);
|
||||
expect(props.onHide).toBeCalledTimes(0);
|
||||
expect(props.onConfirm).toBeCalledTimes(0);
|
||||
expect(screen.getByTestId('delete-modal-input')).toBeVisible();
|
||||
expect(props.onConfirm).toBeCalledTimes(0);
|
||||
|
||||
// do not execute "onConfirm" if you have not typed "delete"
|
||||
userEvent.click(screen.getByText('delete'));
|
||||
expect(props.onConfirm).toBeCalledTimes(0);
|
||||
|
||||
// execute "onConfirm" if you have typed "delete"
|
||||
userEvent.type(screen.getByTestId('delete-modal-input'), 'delete');
|
||||
userEvent.click(screen.getByText('delete'));
|
||||
expect(props.onConfirm).toBeCalledTimes(1);
|
||||
});
|
|
@ -70,8 +70,8 @@ export default function DeleteModal({
|
|||
</FormLabel>
|
||||
<FormControl
|
||||
data-test="delete-modal-input"
|
||||
id="delete"
|
||||
type="text"
|
||||
id="delete"
|
||||
bsSize="sm"
|
||||
autoComplete="off"
|
||||
onChange={(
|
Loading…
Reference in New Issue