Skip to content

Feature/testing #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 11, 2024
Merged

Feature/testing #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d3cdb8d
“Austin 5/11 updated testing suite to Vitest for compatibility
InvectivusTaco May 11, 2024
b1f61d6
merge resolved
InvectivusTaco May 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 73 additions & 59 deletions __tests__/BottomTabs.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import '@testing-library/jest-dom';
// @vitest-environment jsdom

import { describe, it, expect } from 'vitest'
import {
fireEvent,
render,
Expand All @@ -23,27 +24,28 @@ import React from 'react';
import StateManager from '../app/src/components/StateManagement/StateManagement';
import store from '../app/src/redux/store';

describe('Bottom Panel Render Test', () => {
test('should render all six tabs', () => {
render(
describe('Bottom Panel Render test', () => {
it('should render all six tabs', () => {
const { unmount } = render(
<Provider store={store}>
<BottomTabs />
</Provider>
);
expect(screen.getAllByRole('tab')).toHaveLength(6);
// expect(screen.getByText('Code Preview')).toBeInTheDocument();
expect(screen.getByText('Component Tree')).toBeInTheDocument();
expect(screen.getByText('Creation Panel')).toBeInTheDocument();
expect(screen.getByText('Customization')).toBeInTheDocument();
expect(screen.getByText('CSS Editor')).toBeInTheDocument();
expect(screen.getByText('Context Manager')).toBeInTheDocument();
expect(screen.getByText('State Manager')).toBeInTheDocument();
expect(screen.getAllByRole('tab')).toHaveLength(8);
expect(screen.getByText('Component Tree')).toBeDefined();
expect(screen.getByText('Creation Panel')).toBeDefined();
expect(screen.getByText('Customization')).toBeDefined();
expect(screen.getByText('CSS Editor')).toBeDefined();
expect(screen.getByText('Context Manager')).toBeDefined();
expect(screen.getByText('State Manager')).toBeDefined();
expect(screen.getByText('MUI Props')).toBeDefined();
unmount();
});
});

describe('Creation Panel', () => {
test('should invalidate empty field in New Component name', async () => {
render(
it('should invalidate empty field in New Component name', async () => {
const { unmount } = render(
<Provider store={store}>
<ComponentPanel isThemeLight={null} />
</Provider>
Expand All @@ -54,18 +56,19 @@ describe('Creation Panel', () => {
await waitFor(() => {
expect(
screen.getByText('Component name cannot be blank.')
).toBeInTheDocument();
).toBeDefined();
});
unmount();
});

test('should invalidate New Component name containing symbols', async () => {
render(
it('should invalidate New Component name containing symbols', async () => {
const { unmount } = render(
<Provider store={store}>
<ComponentPanel isThemeLight={null} />
</Provider>
);

fireEvent.change(screen.getByLabelText('Name:'), {
fireEvent.change(screen.getByLabelText('Name'), {
target: {
value: '!@#'
}
Expand All @@ -76,12 +79,15 @@ describe('Creation Panel', () => {
await waitFor(() => {
expect(
screen.getByText('Component name must start with a letter.')
).toBeInTheDocument();
).toBeDefined();
});
unmount();
});
})

test('should invalidate empty field in HTML Tag tag', async () => {
render(
describe('HTML Panel', () => {
it('should invalidate empty field in HTML Tag tag', async () => {
const { unmount } = render(
<Provider store={store}>
<HTMLPanel isThemeLight={null} />
</Provider>
Expand All @@ -92,22 +98,23 @@ describe('Creation Panel', () => {
await waitFor(() => {
expect(screen.getAllByText('* Input cannot be blank. *')).toHaveLength(2);
});
unmount();
});

test('should invalidate HTML Element name containing symbols', async () => {
render(
it('should invalidate HTML Element name containing symbols', async () => {
const { unmount } = render(
<Provider store={store}>
<HTMLPanel isThemeLight={null} />
</Provider>
);

fireEvent.change(screen.getByLabelText('Element Name:'), {
fireEvent.change(screen.getByLabelText('Element Name'), {
target: {
value: '!@#'
}
});

fireEvent.change(screen.getByLabelText('Tag:'), {
fireEvent.change(screen.getByLabelText('Tag'), {
target: {
value: '!@#'
}
Expand All @@ -120,49 +127,53 @@ describe('Creation Panel', () => {
screen.getAllByText('* Input must start with a letter. *')
).toHaveLength(2);
});
unmount();
});
});

describe('Context Manager', () => {
test('should render Create/Edit, Assign, and Display tabs', () => {
render(
it('should render Create/Edit, Assign, and Display tabs', () => {
const { unmount } = render(
<Provider store={store}>
<ContextManager />
</Provider>
);
expect(screen.getAllByRole('tab')).toHaveLength(3);
unmount();
});
test('Create/Edit Tab should contain all buttons, inputs field, and a data table', () => {
render(
it('Create/Edit Tab should contain all buttons, inputs field, and a data table', () => {
const { unmount } = render(
<Provider store={store}>
<ContextManager />
</Provider>
);
expect(screen.getAllByRole('textbox')).toHaveLength(3);
expect(screen.getAllByRole('button')).toHaveLength(4);
expect(screen.getByText('Context Name')).toBeInTheDocument();
expect(screen.getByRole('table')).toBeInTheDocument();
expect(screen.getAllByRole('button')).toHaveLength(3);
expect(screen.getByText('Context Name')).toBeDefined();
expect(screen.getByRole('table')).toBeDefined();
unmount();
});
test('Assign Tab should contain all buttons and input fields', () => {
render(
it('Assign Tab should contain all buttons and input fields', () => {
const { unmount } = render(
<Provider store={store}>
<ContextManager />
</Provider>
);

fireEvent.click(screen.getByText('Assign'));
expect(screen.getByText('Contexts Consumed')).toBeInTheDocument();
expect(screen.getByText('Contexts Consumed')).toBeDefined();
const dropdown = screen.getByLabelText('Select Component');
expect(dropdown).toBeInTheDocument();
expect(dropdown).toBeDefined();
expect(screen.getAllByRole('button')).toHaveLength(1);
expect(screen.getAllByRole('combobox')).toHaveLength(2);
expect(screen.getAllByRole('table')).toHaveLength(2);
unmount();
});
});

describe('State Manager', () => {
test('Should render all containers', () => {
render(
it('Should render all containers', () => {
const { unmount } = render(
<Provider store={store}>
<StateManager isThemeLight={null} />
</Provider>
Expand All @@ -171,63 +182,66 @@ describe('State Manager', () => {
expect(screen.getAllByRole('textbox')).toHaveLength(2);
expect(screen.getAllByRole('grid')).toHaveLength(3);
expect(screen.getAllByRole('columnheader')).toHaveLength(9);
unmount();
});

test('Display tab should render correct elements', () => {
render(
it('Display tab should render correct elements', () => {
const { unmount } = render(
<Provider store={store}>
<StateManager isThemeLight={null} />
</Provider>
);
fireEvent.click(screen.getByText('Display'));
expect(screen.getByRole('table')).toBeInTheDocument();
expect(screen.getByRole('table')).toBeDefined();
expect(
screen.getByText('State Initialized in Current Component:')
).toBeInTheDocument();
).toBeDefined();
unmount();
});
});

describe('Customization Panel', () => {
test('Should render customization container with no elements in Canvas', () => {
render(
it('Should render customization container with no elements in Canvas', () => {
const { unmount } = render(
<Provider store={store}>
<BrowserRouter>
<CustomizationPanel />
<CustomizationPanel isThemeLight={true} />
</BrowserRouter>
</Provider>
);
expect(screen.getByText('Parent Component:')).toBeInTheDocument();
expect(screen.getByText('App')).toBeInTheDocument();
expect(
screen.getByText(
'Drag and drop an html element (or focus one) to see what happens!'
)
).toBeInTheDocument();
expect(screen.getByText('Parent Component:')).toBeDefined();
expect(screen.getByText('App')).toBeDefined();
expect(screen.getByText('Drag or click an html element to the canvas to see what happens!')).toBeDefined();
unmount();
});
test('Should render all buttons and inputs when Canvas has element', () => {
render(
})

describe('Canvas', () => {
it('Should render all buttons and inputs when Canvas has element', async () => {
const { unmount } = render(
<Provider store={store}>
<BrowserRouter>
<DndProvider backend={HTML5Backend}>
<DragDropPanel />
<MainContainer />
<CustomizationPanel />
<CustomizationPanel isThemeLight={true}/>
</DndProvider>
</BrowserRouter>
</Provider>
);
const drop = screen.getByTestId('drop');
const div = screen.getAllByText('Div')[0];
expect(drop).toBeInTheDocument();
expect(div).toBeInTheDocument();
expect(drop).toBeDefined();
expect(div).toBeDefined();
fireEvent.dragStart(div);
fireEvent.dragEnter(drop);
fireEvent.dragOver(drop);
fireEvent.drop(drop);
//check if customization panel elements are rendering correctly
const panel = screen.getByTestId('customization');
const panel = screen.getAllByTestId('customization')[0];
expect(within(panel).getAllByRole('textbox')).toHaveLength(4);
// check dropdowns
expect(within(panel).getAllByRole('button')).toHaveLength(12);
expect(within(panel).getAllByRole('button')).toHaveLength(6);
unmount();
});
});
63 changes: 32 additions & 31 deletions __tests__/DragAndDrop.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import '@testing-library/jest-dom';

// @viit-enviroment jsdom
// import '@testing-library/jest-dom';
import { describe, it, expect } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';

import ComponentDrag from '../app/src/components/left/ComponentDrag';
Expand All @@ -21,42 +22,42 @@ function TestContext(component) {
}

describe('Drag and Drop Side Panel', () => {
test('Renders all HTML Element choices', () => {
it('Renders all HTML Element choices', () => {
render(TestContext(<DragDropPanel />));
expect(screen.getByText('Div')).toBeInTheDocument();
expect(screen.getByText('Img')).toBeInTheDocument();
expect(screen.getByText('Form')).toBeInTheDocument();
expect(screen.getByText('Button')).toBeInTheDocument();
expect(screen.getByText('Link')).toBeInTheDocument();
expect(screen.getByText('Paragraph')).toBeInTheDocument();
expect(screen.getByText('Header 1')).toBeInTheDocument();
expect(screen.getByText('Header 2')).toBeInTheDocument();
expect(screen.getByText('Span')).toBeInTheDocument();
expect(screen.getByText('Input')).toBeInTheDocument();
expect(screen.getByText('Label')).toBeInTheDocument();
expect(screen.getByText('Ordered List')).toBeInTheDocument();
expect(screen.getByText('Unordered List')).toBeInTheDocument();
expect(screen.getByText('Menu')).toBeInTheDocument();
expect(screen.getByText('List')).toBeInTheDocument();
expect(screen.getByText('Div')).toBeDefined();
expect(screen.getByText('Img')).toBeDefined();
expect(screen.getByText('Form')).toBeDefined();
expect(screen.getByText('Button')).toBeDefined();
expect(screen.getByText('Link')).toBeDefined();
expect(screen.getByText('Paragraph')).toBeDefined();
expect(screen.getByText('Header 1')).toBeDefined();
expect(screen.getByText('Header 2')).toBeDefined();
expect(screen.getByText('Span')).toBeDefined();
expect(screen.getByText('Input')).toBeDefined();
expect(screen.getByText('Label')).toBeDefined();
expect(screen.getByText('Ordered List')).toBeDefined();
expect(screen.getByText('Unordered List')).toBeDefined();
expect(screen.getByText('Menu')).toBeDefined();
expect(screen.getByText('List')).toBeDefined();
expect(screen.queryByText('separator')).toBe(null);
});

test('Renders all React Router Component choices', () => {
it('Renders all React Router Component choices', () => {
render(TestContext(<DragDropPanel />));

expect(screen.getByText('Switch')).toBeInTheDocument();
expect(screen.getByText('Route')).toBeInTheDocument();
expect(screen.getByText('LinkTo')).toBeInTheDocument();
expect(screen.getAllByText('Switch')[0]).toBeDefined();
expect(screen.getAllByText('Route')[0]).toBeDefined();
expect(screen.getAllByText('LinkTo')[0]).toBeDefined();
});

test.skip('Should render Roots Components and Reusbale components', () => {
render(TestContext(<ComponentDrag />));
it.skip('Should render Roots Components and Reusbale components', () => {
render(TestContext(<ComponentDrag isThemeLight={true} isVisible={true} />));

expect(screen.getByText('Root Components')).toBeInTheDocument();
expect(screen.getByText('Reusable Components')).toBeInTheDocument();
expect(screen.getByText('Root Components')).toBeDefined();
expect(screen.getByText('Reusable Components')).toBeDefined();
});

test('test drag and drop', () => {
it('test drag and drop', () => {
render(
TestContext(
<>
Expand All @@ -66,13 +67,13 @@ describe('Drag and Drop Side Panel', () => {
)
);
const drop = screen.getByTestId('drop');
const div = screen.getByText('Div');
expect(drop).toBeInTheDocument();
expect(div).toBeInTheDocument();
const div = screen.getAllByText('Div')[0];
expect(drop).toBeDefined();
expect(div).toBeDefined();
fireEvent.dragStart(div);
fireEvent.dragEnter(drop);
fireEvent.dragOver(drop);
fireEvent.drop(drop);
expect(within(drop).getByText('div')).toBeInTheDocument();
expect(within(drop).getByText('div')).toBeDefined();
});
});
Loading