Updated tests

src/App.test.tsx

@@ -12,102 +12,32 @@ describe('App', () => {
     chrome.flush();
   });
 
-  it('renders Tab Collector header', async () => {
-    chrome.storage.local.get.withArgs('tabs').yields({ tabs: [] });
-
-    render(<App />);
-    const headerElement = await screen.findByText(/Tab Collector/i);
-    expect(headerElement).toBeInTheDocument();
-
-    expect(chrome.storage.local.get).toHaveBeenCalledWith('tabs');
-  });
-
-  it('renders sample tab when tabs are undefined in chrome storage', async () => {
-    chrome.storage.local.get.withArgs('tabs').yields({ tabs: undefined });
-
+  test('renders logo', () => {
     render(<App />);
-    const tabElements = await screen.findAllByRole('listitem');
-    expect(tabElements).toHaveLength(1);
-    expect(tabElements[0]).toHaveTextContent('Sample tab');
-  });
-
-  it('renders tabs from chrome storage', async () => {
-    const mocktabs = [
-      { id: 1, text: 'Tab 1' },
-      { id: 2, text: 'Tab 2' },
-    ];
-    chrome.storage.local.get.withArgs('tabs').yields({ tabs: mocktabs });
-
-    render(<App />);
-    const tabElements = await screen.findAllByRole('listitem');
-    expect(tabElements).toHaveLength(2);
-    expect(tabElements[0]).toHaveTextContent('Tab 1');
-    expect(tabElements[1]).toHaveTextContent('Tab 2');
-  });
-
-  it('updates tab in chrome storage when edited', async () => {
-    const mocktabs = [
-      { id: 1, text: 'Sample tab' },
-      { id: 2, text: 'Tab 2' },
-    ];
-    chrome.storage.local.get.withArgs('tabs').yields({ tabs: mocktabs });
-
-    render(<App />);
-    const editButtons = await screen.findAllByText('Edit');
-    expect(editButtons).toHaveLength(2);
-    const editButton = editButtons[0];
-    fireEvent.click(editButton);
-
-    const textArea = await screen.findByDisplayValue('Sample tab');
-    fireEvent.change(textArea, { target: { value: 'Updated tab' } });
+    expect(screen.getByText('Tabs')).toBeInTheDocument();
+  });  
 
-    const saveButton = await screen.findByText('Save');
-    fireEvent.click(saveButton);
-
-    expect(chrome.storage.local.set).toHaveBeenCalledWith({
-      tabs: [{ id: 1, text: 'Updated tab' }, { id: 2, text: 'Tab 2' }],
+  test('filters tabs based on selected thresholds', async () => {
+    // Mock the storage local get method
+    const getMock = jest.spyOn(chrome.storage.local, 'get');
+    getMock.mockImplementation((keys, callback) => {
+      callback({ tabs: [] }); // Mocking an empty tab list
     });
-  });
-
-  it('removes tab from chrome storage when deleted', async () => {
-    const mocktabs = [{ id: 1, text: 'Tab to delete' }];
-    chrome.storage.local.get.withArgs('tabs').yields({ tabs: mocktabs });
 
+    // Render the app
     render(<App />);
-    const deleteButton = await screen.findByText('Delete');
-    fireEvent.click(deleteButton);
 
-    expect(chrome.storage.local.set).toHaveBeenCalledWith({ tabs: [] });
-  });
-
-  it('sets initial state with sample tab when local storage is empty', async () => {
-    chrome.storage.local.get.withArgs('tabs').yields({});
-
-    render(<App />);
-    const tabElements = await screen.findAllByRole('listitem');
-    expect(tabElements).toHaveLength(1);
-    expect(tabElements[0]).toHaveTextContent('Sample tab');
-  });
+    // Check if the logo is rendered
+    expect(screen.getByText('Tabs')).toBeInTheDocument();
 
-  it('sets initial state with empty array when tabs key is an empty array in local storage', async () => {
-    chrome.storage.local.get.withArgs('tabs').yields({ tabs: [] });
+    // Simulate clicking on threshold buttons
+    fireEvent.click(screen.getByText('Over a week'));
+    fireEvent.click(screen.getByText('More than half a day'));
+    fireEvent.click(screen.getByText('More than 20s'));
+    fireEvent.click(screen.getByText('More than 10s'));
+    fireEvent.click(screen.getByText('Recent'));
 
-    render(<App />);
-    const tabElements = screen.queryAllByRole('listitem');
-    expect(tabElements).toHaveLength(0);
+    // Restore the original implementation of chrome storage local get
+    getMock.mockRestore();
   });
-
-  /*it('handles edited tab with no changes', async () => {
-    const mocktabs = [{ id: 1, text: 'Sample tab' }];
-    chrome.storage.local.get.withArgs('tabs').yields({ tabs: mocktabs });
-
-    render(<App />);
-    const editButton = await screen.findByText('Edit');
-    fireEvent.click(editButton);
-
-    const saveButton = await screen.findByText('Save');
-    fireEvent.click(saveButton);
-
-    expect(chrome.storage.local.set).not.toHaveBeenCalled();
-  });*/
-});
+});

src/components/TabsItem.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { TabsItem, Tab } from './TabsItem';
+
+describe('TabsItem', () => {
+  const mockTab: Tab = {
+    id: 1,
+    text: 'Example Tab\nTimestamp',
+    url: 'http://example.com',
+    time: 'Timestamp',
+  };
+
+  test('renders tab title and timestamp', () => {
+    const onDelete = jest.fn();
+    const { getByText } = render(<TabsItem tab={mockTab} onDelete={onDelete} />);
+    expect(getByText('Example Tab')).toBeInTheDocument();
+    expect(getByText('Timestamp')).toBeInTheDocument();
+  });
+
+  test('calls onDelete when delete button is clicked', () => {
+    const onDelete = jest.fn();
+    const { getByText } = render(<TabsItem tab={mockTab} onDelete={onDelete} />);
+    fireEvent.click(getByText('Delete'));
+    expect(onDelete).toHaveBeenCalledWith(1);
+  });
+});

src/components/TabsList.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import TabsList, { TabsListProps } from './TabsList';
+import { Tab } from './TabsItem';
+
+describe('TabsList', () => {
+  const mockTabs: Tab[] = [
+    {
+      id: 1,
+      text: 'Example Tab 1\nTimestamp 1',
+      url: 'http://example.com/1',
+      time: 'Timestamp 1',
+    },
+    {
+      id: 2,
+      text: 'Example Tab 2\nTimestamp 2',
+      url: 'http://example.com/2',
+      time: 'Timestamp 2',
+    },
+  ];
+
+  const onDeleteTabMock = jest.fn();
+
+  const renderComponent = (props: Partial<TabsListProps> = {}) => {
+    const defaultProps: TabsListProps = {
+      title: 'Tabs',
+      tabs: mockTabs,
+      onDeleteTab: onDeleteTabMock,
+    };
+    return render(<TabsList {...defaultProps} {...props} />);
+  };
+
+  test('renders title and tab count', () => {
+    const { getByText } = renderComponent();
+    expect(getByText('Tabs (2)')).toBeInTheDocument();
+  });
+
+  test('renders tab list when title is clicked', () => {
+    const { getByText, queryByText } = renderComponent();
+    expect(queryByText('Example Tab 1')).toBeNull();
+    expect(queryByText('Example Tab 2')).toBeNull();
+
+    fireEvent.click(getByText('Tabs (2)'));
+
+    expect(getByText('Example Tab 1')).toBeInTheDocument();
+    expect(getByText('Example Tab 2')).toBeInTheDocument();
+  });
+
+  test('calls onDeleteTab when delete button of a tab is clicked', () => {
+    const { getByText } = renderComponent();
+    fireEvent.click(getByText('Tabs (2)'));
+
+    // Find the delete button within the first tab item and click it
+    const deleteButton = getByText('Delete', { selector: 'li:nth-of-type(1) button' });
+    fireEvent.click(deleteButton);
+
+    expect(onDeleteTabMock).toHaveBeenCalledWith(1);
+  });
+
+});