Skip to content

Commit

Permalink
“Austin 5/11 updated testing suite to Vitest for compatibility
Browse files Browse the repository at this point in the history 
>
>
Co-author-by: Zack Vandiver <[email protected]>
Co-author-by: Heather Pfeiffer <[email protected]>
Co-author-by: Austin Alvarez <InvectivusTaco>
Co-author-by: Jesse Wowczuk <[email protected]>
Co-author-by: Sean Ryan <[email protected]>”
  • Loading branch information
@InvectivusTaco
InvectivusTaco committed May 11, 2024
1 parent 26f8c39 commit d3cdb8d
Show file tree
Hide file tree
Showing 26 changed files with 1,715 additions and 1,003 deletions.
132 changes: 73 additions & 59 deletions __tests__/BottomTabs.test.tsx
View file
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
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

0 comments on commit d3cdb8d

Please sign in to comment.