Merge pull request #11 from oslabs-beta/bryanna/reactTesting

Bryanna/react testing

Author: crumblepie

__tests__/Header.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen, fireEvent } from '../src/test-utils.js';
+import '@testing-library/jest-dom/extend-expect';
+import Header from '../src/components/Header';
+
+describe('Header', () => {
+  test('renders Header component with Clear Project button with on click functionality', () => {
+    const { getByTestId } = render(<Header />);
+    const clearProjectButton = getByTestId('clear-project-button');
+    expect(clearProjectButton).toBeInTheDocument();
+    const mockFunction = jest.fn(() => true);
+    fireEvent.click(clearProjectButton);
+    expect(mockFunction()).toBe(true);
+  });
+
+  test('renders Header component with light/dark mode Toggle with on click functionality', () => {
+    const { getByTestId } = render(<Header />);
+    const mockFunction = jest.fn(() => true);
+    const themeToggle = getByTestId('toggle-theme-btn');
+    expect(themeToggle).toBeInTheDocument();
+    fireEvent.click(themeToggle);
+    expect(mockFunction()).toBe(true);
+  });
+});

__tests__/LeftPanel.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen, fireEvent } from '../src/test-utils.js';
+import '@testing-library/jest-dom/extend-expect';
+// import DnD from '../src/components/DnD';
+import CompCreator from '../src/components/CompCreator';
+import Tree from '../src/components/Tree';
+// import TreeRecursive from '../src/components/TreeRecursive';
+import TreeFile from '../src/components/TreeFile';
+
+describe('Left Panel', () => {
+  test('renders CompCreator component with input field and add button', () => {
+    const { getByTestId } = render(<CompCreator />);
+    expect(screen.getByText('React Component')).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    const addButton = getByTestId('add-button');
+    expect(addButton).toBeInTheDocument();
+    // const mockFunction = jest.fn(() => true);
+    // fireEvent.click(addButton);
+    // expect(mockFunction()).toBe(true);
+  });
+
+  test('value of comp creator input field changes', () => {
+    const { queryByPlaceholderText } = render(<CompCreator />);
+    const input = queryByPlaceholderText('Component Name');
+    fireEvent.change(input, { target: { value: 'test' } });
+    expect(input.value).toBe('test');
+  });
+
+  test('renders the tree component which displays file tree', () => {
+    const { getByTestId } = render(<Tree />);
+    expect(getByTestId('filetree')).toBeInTheDocument();
+  });
+
+  // test('renders the tree folders with on click functionality', () => {
+  //   const { getByTestId } = render(<TreeRecursive />);
+  //   expect(getByTestId('folder')).toBeInTheDocument();
+  // });
+
+  // test('renders the tree files with on click functionality', () => {
+  //   const { getByTestId } = render(<TreeFile />);
+  //   expect(getByTestId('file')).toBeInTheDocument();
+  // });
+
+  //HAVING ISSUES WITH TESTS INVOLVING DND DUE TO PROVIDER/STORE ISSUE WITH REACT TESTING LIBRARY
+
+  // test('renders fflow logo with on click functionality', () => {
+  //   const { getByTestId } = render(<DnD />);
+  //   const appLogo = getByTestId('app-logo');
+  //   expect(appLogo).toBeInTheDocument();
+  //   const mockFunction = jest.fn(() => true);
+  //   fireEvent.click(appLogo);
+  //   expect(mockFunction()).toBe(true);
+  // });
+
+  // test('renders tree component', () => {
+  //   render(<DnD />);
+  //   expect(screen.getByText('FOLDERS')).toBeInTheDocument();
+  // });
+});

__tests__/Navigation.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, screen, fireEvent } from '../src/test-utils.js';
+import '@testing-library/jest-dom/extend-expect';
+import Navigation from '../src/components/Navigation';
+
+describe('Navigation', () => {
+  test('renders Navigation component with DnD icon button with on click functionality', () => {
+    const { getByTestId } = render(<Navigation />);
+    const dndButton = getByTestId('dnd-button');
+    expect(dndButton).toBeInTheDocument();
+    const mockFunction = jest.fn(() => true);
+    fireEvent.click(dndButton);
+    expect(mockFunction()).toBe(true);
+  });
+
+  test('renders Navigation component with file tree icon button with on click functionality', () => {
+    const { getByTestId } = render(<Navigation />);
+    const fileTreeButton = getByTestId('filetree-button');
+    expect(fileTreeButton).toBeInTheDocument();
+    const mockFunction = jest.fn(() => true);
+    fireEvent.click(fileTreeButton);
+    expect(mockFunction()).toBe(true);
+  });
+
+  test('renders Navigation component with save icon button with on click functionality', () => {
+    const { getByTestId } = render(<Navigation />);
+    const saveButton = getByTestId('save-button');
+    expect(saveButton).toBeInTheDocument();
+    const mockFunction = jest.fn(() => true);
+    fireEvent.click(saveButton);
+    expect(mockFunction()).toBe(true);
+  });
+
+  test('renders Navigation component with export icon button with on click functionality', () => {
+    const { getByTestId } = render(<Navigation />);
+    const exportButton = getByTestId('export-button');
+    expect(exportButton).toBeInTheDocument();
+    const mockFunction = jest.fn(() => true);
+    fireEvent.click(exportButton);
+    expect(mockFunction()).toBe(true);
+  });
+
+  test('renders Navigation component with trash icon button with on click functionality', () => {
+    const { getByTestId } = render(<Navigation />);
+    const trashButton = getByTestId('trash-button');
+    expect(trashButton).toBeInTheDocument();
+    const mockFunction = jest.fn(() => true);
+    fireEvent.click(trashButton);
+    expect(mockFunction()).toBe(true);
+  });
+});