ATLAS-5294: ATLAS UI: Shared component library tests

dashboard/src/components/CreateDropdown/__tests__/CreateDropdown.test.tsx

@@ -0,0 +1,128 @@
+/*
+ * 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, fireEvent, waitFor } from '@utils/test-utils'
+import { MemoryRouter } from 'react-router-dom'
+import CreateDropdown from '../CreateDropdown'
+
+const mockNavigate = jest.fn()
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual<typeof import('react-router-dom')>('react-router-dom'),
+	useNavigate: () => mockNavigate,
+}))
+
+jest.mock('@views/Entity/EntityForm', () => ({
+	__esModule: true,
+	default: ({ open, onClose }: { open: boolean; onClose: () => void }) =>
+		open ? (
+			<div data-testid="entity-form">
+				<button type="button" onClick={onClose}>
+					Close entity
+				</button>
+			</div>
+		) : null
+}))
+
+jest.mock('@views/Classification/ClassificationForm', () => ({
+	__esModule: true,
+	default: ({ open, onClose }: { open: boolean; onClose: () => void }) =>
+		open ? (
+			<div data-testid="classification-form">
+				<button type="button" onClick={onClose}>
+					Close classification
+				</button>
+			</div>
+		) : null
+}))
+
+jest.mock('@views/Glossary/AddUpdateGlossaryForm', () => ({
+	__esModule: true,
+	default: ({ open, onClose }: { open: boolean; onClose: () => void }) =>
+		open ? (
+			<div data-testid="glossary-form">
+				<button type="button" onClick={onClose}>
+					Close glossary
+				</button>
+			</div>
+		) : null
+}))
+
+describe('CreateDropdown (header Create menu)', () => {
+	beforeEach(() => {
+		mockNavigate.mockClear()
+	})
+
+	it('opens menu and launches Entity / Classification / Glossary modals', async () => {
+		render(
+			<MemoryRouter>
+				<CreateDropdown />
+			</MemoryRouter>,
+			{ withRouter: false }
+		)
+
+		fireEvent.click(screen.getByRole('button', { name: /create/i }))
+
+		await waitFor(() => {
+			expect(screen.getByRole('menu')).toBeInTheDocument()
+		})
+
+		fireEvent.click(screen.getByText('Entity'))
+		expect(await screen.findByTestId('entity-form')).toBeInTheDocument()
+
+		fireEvent.click(screen.getByText('Close entity'))
+		await waitFor(() => {
+			expect(screen.queryByTestId('entity-form')).not.toBeInTheDocument()
+		})
+
+		fireEvent.click(screen.getByRole('button', { name: /create/i }))
+		fireEvent.click(screen.getByText('Classification'))
+		expect(await screen.findByTestId('classification-form')).toBeInTheDocument()
+		fireEvent.click(screen.getByText('Close classification'))
+
+		fireEvent.click(screen.getByRole('button', { name: /create/i }))
+		fireEvent.click(screen.getByText('Glossary'))
+		expect(await screen.findByTestId('glossary-form')).toBeInTheDocument()
+		fireEvent.click(screen.getByText('Close glossary'))
+	})
+
+	it('navigates to Administrator for Business Metadata and Enum', async () => {
+		render(
+			<MemoryRouter>
+				<CreateDropdown />
+			</MemoryRouter>,
+			{ withRouter: false }
+		)
+
+		fireEvent.click(screen.getByRole('button', { name: /create/i }))
+		fireEvent.click(screen.getByText('Business Metadata'))
+
+		expect(mockNavigate).toHaveBeenCalledWith({
+			pathname: '/administrator',
+			search: 'tabActive=businessMetadata&create=true'
+		})
+
+		fireEvent.click(screen.getByRole('button', { name: /create/i }))
+		fireEvent.click(screen.getByText('Enum'))
+
+		expect(mockNavigate).toHaveBeenCalledWith({
+			pathname: '/administrator',
+			search: 'tabActive=enum'
+		})
+	})
+})

dashboard/src/components/DatePicker/__tests__/CustomDatePicker.test.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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 "@utils/test-utils";
+import CustomDatepicker from "@components/DatePicker/CustomDatePicker";
+
+let capturedProps: any;
+
+// Mock date-fns used by CustomHeader
+jest.mock("date-fns", () => ({
+  getYear: (d: Date) => d.getFullYear(),
+  getMonth: (d: Date) => d.getMonth()
+}));
+
+// Mock react-datepicker to a simple input-like component to avoid types/transform issues
+jest.mock("react-datepicker", () => {
+  const React = require("react");
+  return React.forwardRef((props: any, ref: any) => {
+    capturedProps = props;
+    const { renderCustomHeader } = props;
+    const headerProps = {
+      date: new Date(2024, 0, 1),
+      changeYear: jest.fn(),
+      changeMonth: jest.fn(),
+      decreaseMonth: jest.fn(),
+      increaseMonth: jest.fn(),
+      prevMonthButtonDisabled: false,
+      nextMonthButtonDisabled: false
+    };
+    return (
+      <div>
+        {renderCustomHeader ? renderCustomHeader(headerProps) : null}
+        <div data-testid="mock-datepicker" />
+      </div>
+    );
+  });
+});
+
+// react-datepicker renders inputs and popper elements; we verify key props
+
+describe("CustomDatepicker", () => {
+  it("renders with selected date, forwards props, and uses custom header", () => {
+    const selected = new Date(2024, 0, 1, 10, 30, 45);
+    const onChange = jest.fn();
+
+    const { container, rerender } = render(
+      <CustomDatepicker
+        selected={selected}
+        onChange={onChange}
+        placeholderText="Pick a date"
+        showTimeInput
+        // Intentionally override with a different format to verify passthrough precedence
+        dateFormat="yyyy-MM-dd"
+      />
+    );
+
+    // Input should exist and have placeholder (prop passthrough)
+    const mock = screen.getByTestId("mock-datepicker");
+    expect(mock).toBeTruthy();
+
+    // Assert forwarded props on initial render (override in rest should take precedence)
+    expect(capturedProps.selected).toBe(selected);
+    expect(capturedProps.onChange).toBe(onChange);
+    expect(capturedProps.timeInputLabel).toBe("");
+    expect(capturedProps.dateFormat).toBe("yyyy-MM-dd");
+    expect(typeof capturedProps.renderCustomHeader).toBe("function");
+
+    // Changing props should re-render
+    rerender(
+      <CustomDatepicker
+        selected={selected}
+        onChange={onChange}
+        placeholderText="Choose"
+        showTimeInput
+      />
+    );
+    const mock2 = screen.getByTestId("mock-datepicker");
+    expect(mock2).toBeTruthy();
+
+    // After rerender without overriding dateFormat, the component's default should apply
+    expect(capturedProps.dateFormat).toBe("MM/dd/yyyy h:mm:ss aa");
+
+    // Ensure custom header render function is invoked by our mock
+    // The mocked component renders the header immediately if provided
+    // So presence of the wrapper ensures no crash
+    expect(container.firstChild).toBeTruthy();
+  });
+});
+
+

dashboard/src/components/DatePicker/__tests__/CustomHeader.test.tsx

@@ -0,0 +1,102 @@
+/*
+ * 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, fireEvent, within } from "@utils/test-utils";
+import CustomHeader from "@components/DatePicker/CustomHeader";
+
+// Mock date-fns to avoid transforming node_modules with optional chaining
+jest.mock("date-fns", () => ({
+  getYear: (d: Date) => d.getFullYear(),
+  getMonth: (d: Date) => d.getMonth()
+}));
+
+describe("CustomHeader", () => {
+  it("renders controls and triggers navigation handlers", () => {
+    const date = new Date(2024, 4, 15); // May 15, 2024
+    const changeYear = jest.fn();
+    const changeMonth = jest.fn();
+    const decreaseMonth = jest.fn();
+    const increaseMonth = jest.fn();
+
+    const { container } = render(
+      <CustomHeader
+        date={date}
+        changeYear={changeYear}
+        changeMonth={changeMonth}
+        decreaseMonth={decreaseMonth}
+        increaseMonth={increaseMonth}
+        prevMonthButtonDisabled={false}
+        nextMonthButtonDisabled={true}
+      />
+    );
+
+    const buttons = container.querySelectorAll("button");
+    expect(buttons.length).toBe(2);
+    expect(buttons[0].hasAttribute('disabled')).toBe(false);
+    expect(buttons[1].hasAttribute('disabled')).toBe(true);
+
+    fireEvent.click(buttons[0]);
+    expect(decreaseMonth).toHaveBeenCalledTimes(1);
+
+    // Clicking disabled button should not invoke handler
+    fireEvent.click(buttons[1]);
+    expect(increaseMonth).not.toHaveBeenCalled();
+
+    const selects = screen.getAllByRole("combobox");
+    expect(selects.length).toBe(2);
+
+    // Year select
+    const yearSelect = selects[0];
+    const yearOptions = within(yearSelect).getAllByRole("option");
+    expect(yearOptions.length).toBe(100);
+    fireEvent.change(yearSelect, { target: { value: String(2020) } });
+    expect(changeYear).toHaveBeenCalledWith(2020);
+
+    // Month select
+    const monthSelect = selects[1];
+    const monthOptions = within(monthSelect).getAllByRole("option");
+    expect(monthOptions.length).toBe(12);
+    fireEvent.change(monthSelect, { target: { value: "March" } });
+    expect(changeMonth).toHaveBeenCalledWith(2); // March index
+  });
+
+  it("enables next-month button and triggers increase when allowed", () => {
+    const date = new Date(2024, 7, 10);
+    const increaseMonth = jest.fn();
+    const decreaseMonth = jest.fn();
+
+    const { container } = render(
+      <CustomHeader
+        date={date}
+        changeYear={jest.fn()}
+        changeMonth={jest.fn()}
+        decreaseMonth={decreaseMonth}
+        increaseMonth={increaseMonth}
+        prevMonthButtonDisabled={false}
+        nextMonthButtonDisabled={false}
+      />
+    );
+
+    const buttons = container.querySelectorAll("button");
+    expect(buttons.length).toBe(2);
+    fireEvent.click(buttons[1]);
+    expect(increaseMonth).toHaveBeenCalledTimes(1);
+  });
+});
+
+