Add basic tests for <SearchType.Accordion />

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
2021-12-28 17:08:01 +01:00
parent dd95ac91cc
commit eeb2269bb9
2 changed files with 120 additions and 1 deletions
@@ -0,0 +1,119 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed 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 } from '@testing-library/react';
+import user from '@testing-library/user-event';
+
+import { SearchContext } from '../SearchContext';
+import { SearchType } from './SearchType';
+
+describe('SearchType.Accordion', () => {
+  const contextSpy = {
+    result: { loading: false, value: { results: [] } },
+    term: '',
+    types: [],
+    filters: {},
+    toggleModal: jest.fn(),
+    setTerm: jest.fn(),
+    setTypes: jest.fn(),
+    setFilters: jest.fn(),
+    setPageCursor: jest.fn(),
+  };
+
+  const expectedLabel = 'Expected Label';
+  const expectedType = {
+    value: 'expected-type',
+    name: 'Expected Type',
+    icon: <></>,
+  };
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should render as expected', () => {
+    const { getByText } = render(
+      <SearchContext.Provider value={contextSpy}>
+        <SearchType.Accordion name={expectedLabel} types={[expectedType]} />
+      </SearchContext.Provider>,
+    );
+
+    // The given label should be rendered.
+    expect(getByText(expectedLabel)).toBeInTheDocument();
+
+    // "Collapse" is visible by default (element is not collapsed)
+    expect(getByText('Collapse')).toBeInTheDocument();
+
+    // The default "all" type should be rendered.
+    expect(getByText('All')).toBeInTheDocument();
+
+    // The given type is also visible
+    expect(getByText(expectedType.name)).toBeInTheDocument();
+  });
+
+  it('should set entire types array when a type is selected', () => {
+    const { getByText } = render(
+      <SearchContext.Provider value={contextSpy}>
+        <SearchType.Accordion name={expectedLabel} types={[expectedType]} />
+      </SearchContext.Provider>,
+    );
+
+    user.click(getByText(expectedType.name));
+
+    expect(contextSpy.setTypes).toHaveBeenCalledWith([expectedType.value]);
+  });
+
+  it('should reset types array when all is selected', () => {
+    const { getByText } = render(
+      <SearchContext.Provider value={contextSpy}>
+        <SearchType.Accordion
+          name={expectedLabel}
+          defaultValue={expectedType.value}
+          types={[expectedType]}
+        />
+      </SearchContext.Provider>,
+    );
+
+    user.click(getByText('All'));
+
+    expect(contextSpy.setTypes).toHaveBeenCalledWith([]);
+  });
+
+  it('should reset page cursor when a new type is selected', () => {
+    const { getByText } = render(
+      <SearchContext.Provider value={contextSpy}>
+        <SearchType.Accordion name={expectedLabel} types={[expectedType]} />
+      </SearchContext.Provider>,
+    );
+
+    user.click(getByText(expectedType.name));
+
+    expect(contextSpy.setPageCursor).toHaveBeenCalledWith(undefined);
+  });
+
+  it('should collapse when a new type is selected', () => {
+    const { getByText, queryByText } = render(
+      <SearchContext.Provider value={contextSpy}>
+        <SearchType.Accordion name={expectedLabel} types={[expectedType]} />
+      </SearchContext.Provider>,
+    );
+
+    user.click(getByText(expectedType.name));
+
+    expect(queryByText('Collapse')).not.toBeInTheDocument();
+  });
+});
@@ -93,7 +93,7 @@ export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => {
  const handleClick = (type: string) => {
    return () => {
      setTypes(type !== '' ? [type] : []);
-      setPageCursor('');
+      setPageCursor(undefined);
      setExpanded(false);
    };
  };