Skip to content

Commit

Permalink
fix: Dataset creation header is now uneditable and holds proper defau…
Browse files Browse the repository at this point in the history
…lt values (#21557)

Co-authored-by: AAfghahi <arash.afghahi@gmail.com>
  • Loading branch information
lyndsiWilliams and AAfghahi authored Oct 13, 2022
1 parent b1bf25e commit df3b5a8
Show file tree
Hide file tree
Showing 6 changed files with 31 additions and 53 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,7 @@ describe('AddDataset', () => {
const blankeStateImgs = screen.getAllByRole('img', { name: /empty/i });

// Header
expect(
await screen.findByRole('textbox', {
name: /dataset name/i,
}),
).toBeVisible();
expect(await screen.findByTestId('editable-title')).toBeVisible();
// Left panel
expect(blankeStateImgs[0]).toBeVisible();
// Footer
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,64 +16,49 @@
* specific language governing permissions and limitations
* under the License.
*/
import userEvent from '@testing-library/user-event';
import React from 'react';
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import Header from 'src/views/CRUD/data/dataset/AddDataset/Header';
import Header, {
DEFAULT_TITLE,
} from 'src/views/CRUD/data/dataset/AddDataset/Header';

describe('Header', () => {
const mockSetDataset = jest.fn();

const waitForRender = (datasetName: string) =>
waitFor(() =>
render(<Header setDataset={mockSetDataset} datasetName={datasetName} />),
);
const waitForRender = (props?: any) =>
waitFor(() => render(<Header setDataset={mockSetDataset} {...props} />));

it('renders a blank state Header', async () => {
await waitForRender('');
test('renders a blank state Header', async () => {
await waitForRender();

const datasetNameTextbox = screen.getByRole('textbox', {
name: /dataset name/i,
});
const datasetName = screen.getByTestId('editable-title');
const saveButton = screen.getByRole('button', {
name: /save save/i,
});
const menuButton = screen.getByRole('button', {
name: /menu actions trigger/i,
});

expect(datasetNameTextbox).toBeVisible();
expect(datasetName).toBeVisible();
expect(saveButton).toBeVisible();
expect(saveButton).toBeDisabled();
expect(menuButton).toBeVisible();
expect(menuButton).toBeDisabled();
});

it('updates display value of dataset name textbox when Header title is changed', async () => {
await waitForRender('');

const datasetNameTextbox = screen.getByRole('textbox', {
name: /dataset name/i,
});
test('displays "New dataset" when a table is not selected', async () => {
await waitForRender();

// Textbox should start with an empty display value and placeholder text
expect(datasetNameTextbox).toHaveDisplayValue('');
expect(
screen.getByPlaceholderText(/add the name of the dataset/i),
).toBeVisible();

// Textbox should update its display value when user inputs a new value
userEvent.type(datasetNameTextbox, 'Test name');
expect(datasetNameTextbox).toHaveDisplayValue('Test name');
const datasetName = screen.getByTestId('editable-title');
expect(datasetName.innerHTML).toBe(DEFAULT_TITLE);
});

it('passes an existing dataset title into the dataset name textbox', async () => {
await waitForRender('Existing Dataset Name');
test('displays table name when a table is selected', async () => {
// The schema and table name are passed in through props once selected
await waitForRender({ schema: 'testSchema', title: 'testTable' });

const datasetNameTextbox = screen.getByRole('textbox', {
name: /dataset name/i,
});
const datasetName = screen.getByTestId('editable-title');

expect(datasetNameTextbox).toHaveDisplayValue('Existing Dataset Name');
expect(datasetName.innerHTML).toBe('testTable');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ import {
DSReducerActionType,
} from 'src/views/CRUD/data/dataset/AddDataset/types';

export const DEFAULT_TITLE = t('New dataset');

const tooltipProps: { text: string; placement: TooltipPlacement } = {
text: t('Select a database table and create dataset'),
placement: 'bottomRight',
Expand Down Expand Up @@ -59,21 +61,22 @@ const renderOverlay = () => (

export default function Header({
setDataset,
datasetName,
title = DEFAULT_TITLE,
}: {
setDataset: React.Dispatch<DSReducerActionType>;
datasetName: string;
title?: string | null | undefined;
schema?: string | null | undefined;
}) {
const editableTitleProps = {
title: datasetName,
placeholder: t('Add the name of the dataset'),
title: title ?? DEFAULT_TITLE,
placeholder: DEFAULT_TITLE,
onSave: (newDatasetName: string) => {
setDataset({
type: DatasetActionType.changeDataset,
payload: { name: 'dataset_name', value: newDatasetName },
});
},
canEdit: true,
canEdit: false,
label: t('dataset name'),
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import { DatasetActionType } from '../types';

interface LeftPanelProps {
setDataset: Dispatch<SetStateAction<object>>;
schema?: string | undefined | null;
schema?: string | null | undefined;
dbId?: number;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export default function AddDataset() {
>(datasetReducer, null);

const HeaderComponent = () => (
<Header setDataset={setDataset} datasetName={dataset?.dataset_name ?? ''} />
<Header setDataset={setDataset} title={dataset?.table_name} />
);

const LeftPanelComponent = () => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,12 @@ describe('DatasetLayout', () => {
const mockSetDataset = jest.fn();

const waitForRender = () =>
waitFor(() =>
render(<Header setDataset={mockSetDataset} datasetName="" />),
);
waitFor(() => render(<Header setDataset={mockSetDataset} />));

it('renders a Header when passed in', async () => {
await waitForRender();

expect(
screen.getByRole('textbox', {
name: /dataset name/i,
}),
).toBeVisible();
expect(screen.getByTestId('editable-title')).toBeVisible();
});

it('renders a LeftPanel when passed in', async () => {
Expand Down

0 comments on commit df3b5a8

Please sign in to comment.