endimonan commented on code in PR #38470:
URL: https://github.com/apache/superset/pull/38470#discussion_r2936444399
##########
superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx:
##########
@@ -1249,3 +1284,399 @@ test('resets dependent filter to first item when value
does not exist in data',
);
});
});
+
+test('renders text input instead of dropdown when operatorType is ILIKE
contains', () => {
+ jest.useFakeTimers();
+ const setDataMaskMock = jest.fn();
+ const props = buildSelectFilterProps({
+ formData: { operatorType: SelectFilterOperatorType.Contains },
+ filterState: { value: undefined },
+ setDataMask: setDataMaskMock,
+ });
+
+ render(<SelectFilterPlugin {...props} />, {
+ useRedux: true,
+ initialState: {
+ nativeFilters: {
+ filters: { 'test-filter': { name: 'Test Filter' } },
+ },
+ dataMask: {
+ 'test-filter': {
+ extraFormData: {},
+ filterState: { value: undefined },
+ },
+ },
+ },
+ });
+
+ expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+ expect(
+ screen.getByPlaceholderText('Type to search (contains)...'),
+ ).toBeInTheDocument();
+});
+
+test('renders text input with starts-with placeholder', () => {
+ jest.useFakeTimers();
+ const setDataMaskMock = jest.fn();
+ const props = buildSelectFilterProps({
+ formData: { operatorType: SelectFilterOperatorType.StartsWith },
+ filterState: { value: undefined },
+ setDataMask: setDataMaskMock,
+ });
+
+ render(<SelectFilterPlugin {...props} />, {
+ useRedux: true,
+ initialState: {
+ nativeFilters: {
+ filters: { 'test-filter': { name: 'Test Filter' } },
+ },
+ dataMask: {
+ 'test-filter': {
+ extraFormData: {},
+ filterState: { value: undefined },
+ },
+ },
+ },
+ });
+
+ expect(
+ screen.getByPlaceholderText('Type to search (starts with)...'),
+ ).toBeInTheDocument();
+});
+
+test('typing in LIKE input calls setDataMask with ILIKE Contains payload',
async () => {
+ jest.useFakeTimers();
+ const setDataMaskMock = jest.fn();
+ const props = buildSelectFilterProps({
+ formData: { operatorType: SelectFilterOperatorType.Contains },
+ filterState: { value: undefined },
+ setDataMask: setDataMaskMock,
+ });
+
+ render(<SelectFilterPlugin {...props} />, {
+ useRedux: true,
+ initialState: {
+ nativeFilters: {
+ filters: { 'test-filter': { name: 'Test Filter' } },
+ },
+ dataMask: {
+ 'test-filter': {
+ extraFormData: {},
+ filterState: { value: undefined },
+ },
+ },
+ },
+ });
+
+ setDataMaskMock.mockClear();
+ const input = screen.getByPlaceholderText('Type to search (contains)...');
+ fireEvent.change(input, { target: { value: 'Jen' } });
+ act(() => {
+ jest.advanceTimersByTime(500);
+ });
+
+ expect(setDataMaskMock).toHaveBeenCalledWith(
+ expect.objectContaining({
+ extraFormData: {
+ filters: [
+ {
+ col: 'gender',
+ op: 'ILIKE',
+ val: '%Jen%',
+ },
+ ],
+ },
+ }),
+ );
+});
+
+test('typing in LIKE input with inverse selection calls setDataMask with NOT
ILIKE payload', async () => {
+ jest.useFakeTimers();
+ const setDataMaskMock = jest.fn();
+ const props = buildSelectFilterProps({
+ formData: {
+ operatorType: SelectFilterOperatorType.Contains,
+ inverseSelection: true,
+ },
+ filterState: { value: undefined },
+ setDataMask: setDataMaskMock,
+ });
+
+ render(<SelectFilterPlugin {...props} />, {
+ useRedux: true,
+ initialState: {
+ nativeFilters: {
+ filters: { 'test-filter': { name: 'Test Filter' } },
+ },
+ dataMask: {
+ 'test-filter': {
+ extraFormData: {},
+ filterState: { value: undefined },
+ },
+ },
+ },
+ });
+
+ setDataMaskMock.mockClear();
+ const input = screen.getByPlaceholderText('Type to search (contains)...');
+ fireEvent.change(input, { target: { value: 'Jen' } });
+ act(() => {
+ jest.advanceTimersByTime(500);
+ });
+
+ expect(setDataMaskMock).toHaveBeenCalledWith(
+ expect.objectContaining({
+ extraFormData: {
+ filters: [
+ {
+ col: 'gender',
+ op: 'NOT ILIKE',
+ val: '%Jen%',
+ },
+ ],
+ },
+ }),
+ );
+});
+
+test('clear-all resets LIKE input value and calls setDataMask with empty
state', async () => {
+ jest.useFakeTimers();
+ const setDataMaskMock = jest.fn();
+ const likeProps = buildSelectFilterProps({
+ formData: { operatorType: SelectFilterOperatorType.Contains },
+ filterState: { value: ['Jen'] },
+ setDataMask: setDataMaskMock,
+ });
+
+ const reduxState = {
+ useRedux: true,
+ initialState: {
+ nativeFilters: {
+ filters: { 'test-filter': { name: 'Test Filter' } },
+ },
+ dataMask: {
+ 'test-filter': {
+ extraFormData: {
+ filters: [{ col: 'gender', op: 'ILIKE', val: '%Jen%' }],
+ },
+ filterState: { value: ['Jen'] },
+ },
+ },
+ },
+ };
+
+ const { rerender } = render(
+ <SelectFilterPlugin {...likeProps} />,
+ reduxState,
+ );
+
+ const input = screen.getByPlaceholderText('Type to search (contains)...');
+ expect(input).toHaveValue('Jen');
+
+ setDataMaskMock.mockClear();
+
+ rerender(
+ <SelectFilterPlugin
+ {...likeProps}
+ clearAllTrigger={{ 'test-filter': true }}
+ />,
+ );
+
+ await waitFor(() => {
+ expect(input).toHaveValue('');
+ });
+
+ await waitFor(() => {
+ expect(setDataMaskMock).toHaveBeenCalledWith(
+ expect.objectContaining({
+ filterState: expect.objectContaining({
+ value: null,
+ }),
+ }),
+ );
+ });
+
+ act(() => {
+ jest.advanceTimersByTime(500);
+ });
+
+ expect(setDataMaskMock).not.toHaveBeenCalledWith(
+ expect.objectContaining({
+ extraFormData: {
+ filters: [
+ {
+ col: 'gender',
+ op: 'ILIKE',
+ val: '%Jen%',
+ },
+ ],
+ },
+ }),
+ );
+});
+
+test('pending LIKE debounce still applies after rerender recreates
updateDataMask', async () => {
+ jest.useFakeTimers();
+ const setDataMaskMock = jest.fn();
+ const likeProps = buildSelectFilterProps({
+ formData: { operatorType: SelectFilterOperatorType.Contains },
+ filterState: { value: undefined },
+ setDataMask: setDataMaskMock,
+ });
+
+ const reduxState = {
+ useRedux: true,
+ initialState: {
+ nativeFilters: {
+ filters: { 'test-filter': { name: 'Test Filter' } },
+ },
+ dataMask: {
+ 'test-filter': {
+ extraFormData: {},
+ filterState: { value: undefined },
+ },
+ },
+ },
+ };
+
+ const { rerender } = render(
+ <SelectFilterPlugin {...likeProps} />,
+ reduxState,
+ );
+
+ fireEvent.change(
+ screen.getByPlaceholderText('Type to search (contains)...'),
+ {
+ target: { value: 'Jen' },
+ },
+ );
+
+ setDataMaskMock.mockClear();
+
+ rerender(
+ <SelectFilterPlugin
+ {...buildSelectFilterProps({
+ formData: { operatorType: SelectFilterOperatorType.Contains },
+ filterState: { value: undefined, label: 'external change' },
+ setDataMask: setDataMaskMock,
+ })}
+ />,
+ );
+
+ act(() => {
+ jest.advanceTimersByTime(500);
+ });
+
+ expect(setDataMaskMock).toHaveBeenCalledWith(
+ expect.objectContaining({
+ extraFormData: {
+ filters: [
+ {
+ col: 'gender',
+ op: 'ILIKE',
+ val: '%Jen%',
+ },
+ ],
+ },
+ }),
+ );
+});
+
+test('pending LIKE debounce is canceled when operatorType switches back to
Exact', async () => {
+ jest.useFakeTimers();
+ const setDataMaskMock = jest.fn();
+ const likeProps = buildSelectFilterProps({
+ formData: { operatorType: SelectFilterOperatorType.Contains },
+ filterState: { value: undefined },
+ setDataMask: setDataMaskMock,
+ });
+
+ const reduxState = {
+ useRedux: true,
+ initialState: {
+ nativeFilters: {
+ filters: { 'test-filter': { name: 'Test Filter' } },
+ },
+ dataMask: {
+ 'test-filter': {
+ extraFormData: {},
+ filterState: { value: undefined },
+ },
+ },
+ },
+ };
+
+ const { rerender } = render(
+ <SelectFilterPlugin {...likeProps} />,
+ reduxState,
+ );
+
+ fireEvent.change(
+ screen.getByPlaceholderText('Type to search (contains)...'),
+ {
+ target: { value: 'Jen' },
+ },
+ );
+
+ setDataMaskMock.mockClear();
+
+ rerender(
+ <SelectFilterPlugin
+ {...buildSelectFilterProps({
+ formData: { operatorType: SelectFilterOperatorType.Exact },
+ filterState: { value: undefined },
+ setDataMask: setDataMaskMock,
+ })}
+ />,
+ );
+
+ act(() => {
+ jest.advanceTimersByTime(500);
+ });
+
+ expect(setDataMaskMock).not.toHaveBeenCalledWith(
+ expect.objectContaining({
+ extraFormData: {
+ filters: [
+ {
+ col: 'gender',
+ op: 'ILIKE',
+ val: '%Jen%',
+ },
+ ],
+ },
+ }),
+ );
Review Comment:
Done
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
