Skip to content

Commit

Permalink
refactor test
Browse files Browse the repository at this point in the history 
se añade id a todos los test
  • Loading branch information
@TektiticEel9062
TektiticEel9062 committed Jun 7, 2024
1 parent b0d2d69 commit c882714
Show file tree
Hide file tree
Showing 19 changed files with 299 additions and 304 deletions.
106 changes: 53 additions & 53 deletions src/components/Filters/__tests__/Filters.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,68 +3,68 @@ import { IMultiselectOptions } from '../../MultiselectOptions/types';
import Filters from '../Filters'; // Adjust the path if needed

afterEach(() => {
cleanup();
cleanup();
});

describe("Tests for Filters Component", () => {
// Sample test data
const mockOptions: IMultiselectOptions[] = [
{
label: "Option 1", isSelected: false,
onChange: function (_label: string, _isSelected: boolean): void {
throw new Error("Function not implemented.");
}
},
{
label: "Option 2", isSelected: true,
onChange: function (_label: string, _isSelected: boolean): void {
throw new Error("Function not implemented.");
}
},
{
label: "Option 3", isSelected: false,
onChange: function (_label: string, _isSelected: boolean): void {
throw new Error("Function not implemented.");
}
},
];
// Sample test data
const mockOptions: IMultiselectOptions[] = [
{
label: "Option 1", isSelected: false,
onChange: function (_label: string, _isSelected: boolean): void {
throw new Error("Function not implemented.");
}
},
{
label: "Option 2", isSelected: true,
onChange: function (_label: string, _isSelected: boolean): void {
throw new Error("Function not implemented.");
}
},
{
label: "Option 3", isSelected: false,
onChange: function (_label: string, _isSelected: boolean): void {
throw new Error("Function not implemented.");
}
},
];

const mockOnFilterChange = jest.fn();
const mockOnFilterChange = jest.fn();

const renderComponent = () => {
render(
<Filters
options={mockOptions}
onFilterChange={mockOnFilterChange}
/>
);
};
const renderComponent = () => {
render(
<Filters
options={mockOptions}
onFilterChange={mockOnFilterChange}
/>
);
};

test("Should render the component correctly with the button", () => {
renderComponent();
test("ID: F.Filters.1 - Should render the component correctly with the button", () => {
renderComponent();

// Ensure the filter button is rendered
expect(screen.getByTestId("filter-wrapper")).toBeInTheDocument();
});
// Ensure the filter button is rendered
expect(screen.getByTestId("filter-wrapper")).toBeInTheDocument();
});

test("Should toggle the visibility of Multiselect component on button click", async () => {
renderComponent();
const button = screen.getByTestId("aci-button");
test("ID: F.Filters.2 - Should toggle the visibility of Multiselect component on button click", async () => {
renderComponent();
const button = screen.getByTestId("aci-button");

// Click the button to show the Multiselect component
fireEvent.click(button);
expect(screen.getByTestId("filter-wrapper__multiselect")).toBeInTheDocument();
expect(screen.getAllByTestId('filter-wrapper__multiselect__options')).toHaveLength(mockOptions.length);
});
// Click the button to show the Multiselect component
fireEvent.click(button);
expect(screen.getByTestId("filter-wrapper__multiselect")).toBeInTheDocument();
expect(screen.getAllByTestId('filter-wrapper__multiselect__options')).toHaveLength(mockOptions.length);
});

test("Should call onFilterChange with updated options when Multiselect changes", async () => {
renderComponent();
const button = screen.getByTestId("aci-button");
fireEvent.click(button);
test("ID: F.Filters.3 - Should call onFilterChange with updated options when Multiselect changes", async () => {
renderComponent();
const button = screen.getByTestId("aci-button");
fireEvent.click(button);

const option = screen.getAllByTestId("filter-wrapper__multiselect__options");
fireEvent.click(option[0]);
const option = screen.getAllByTestId("filter-wrapper__multiselect__options");
fireEvent.click(option[0]);

expect(mockOnFilterChange).toHaveBeenCalledTimes(1);
});
});
expect(mockOnFilterChange).toHaveBeenCalledTimes(1);
});
});
20 changes: 10 additions & 10 deletions src/components/HistoryAgent/__tests__/HistoryAgent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ afterEach(() => {
});

describe("Tests for HistoryAgent Component", () => {
test("Should display the log and description correctly", () => {
test("ID: HA.1 - Should display the log and description correctly", () => {
const { getByText } = render(
<HistoryAgent
log="Test Log"
Expand All @@ -28,7 +28,7 @@ describe("Tests for HistoryAgent Component", () => {
expect(getByText('Test Log')).toBeInTheDocument();
});

test("Should expand and show the description on click", () => {
test("ID: HA.2 - Should expand and show the description on click", () => {
const { getByText, getByTestId } = render(
<HistoryAgent
log="Test Log"
Expand All @@ -42,10 +42,10 @@ describe("Tests for HistoryAgent Component", () => {
const container = getByText('Test Log').closest('.history-agent__container');
fireEvent.click(container!);

expect(getByText('Test Description')).toBeVisible(); // Description should be visible after click
expect(getByText('Test Description')).toBeVisible();
});

test("Should display the correct date format", () => {
test("ID: HA.3 - Should display the correct date format", () => {
const date = new Date('2024-05-28T12:00:00');
const { getByText } = render(
<HistoryAgent
Expand All @@ -69,7 +69,7 @@ describe("Tests for HistoryAgent Component", () => {
expect(getByText(formattedDate)).toBeInTheDocument();
});

test("Should apply the correct styles based on color prop", () => {
test("ID: HA.4 - Should apply the correct styles based on color prop", () => {
const { getByTestId, rerender } = render(
<HistoryAgent
log="Test Log"
Expand All @@ -96,7 +96,8 @@ describe("Tests for HistoryAgent Component", () => {
iconContainer = getByTestId('icon').closest('.history-agent__icon-container');
expect(iconContainer).toHaveClass('history-agent__icon-container--red');
});
test("Should expand and show the description on click", () => {

test("ID: HA.5 - Should expand and show the description on click", () => {
const { getByText } = render(
<HistoryAgent
log="Test Log"
Expand All @@ -112,7 +113,8 @@ describe("Tests for HistoryAgent Component", () => {

expect(getByText('Test Description')).toBeInTheDocument();
});
test("Should apply the correct styles based on color prop", () => {

test("ID: HA.6 - Should apply the correct styles based on color prop", () => {
const { getByTestId, rerender } = render(
<HistoryAgent
log="Test Log"
Expand All @@ -139,6 +141,4 @@ describe("Tests for HistoryAgent Component", () => {
iconContainer = getByTestId('icon').closest('.history-agent__icon-container');
expect(iconContainer).toHaveClass('history-agent__icon-container--red');
});


});
});
6 changes: 3 additions & 3 deletions src/components/Icon/__tests__/Icon.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ afterEach(() => {
});

describe("Tests for Icon Component", () => {
test("Should render all the valid values for the iconNames", () => {
test("ID: IC.1 - Should render all the valid values for the iconNames", () => {
// Loop through all the valid values for the iconName
Object.values(IconNames).forEach((iconName) => {
render(<Icon iconName={iconName} />);
Expand All @@ -16,12 +16,12 @@ describe("Tests for Icon Component", () => {
});
});

test('Renders an invalid value for the iconName', () => {
test('ID: IC.2 - Renders an invalid value for the iconName', () => {
render(<Icon iconName={"invalid-value" as IconNames} />);

const icon = screen.getByTestId('default');

// Check that the button contains the text
expect(icon).toHaveTextContent('Icon not found :(');
});
});
});
52 changes: 27 additions & 25 deletions ...ents/IndividualTrainingExpansionPanel/__tests__/IndividualTrainingExpansionPanel.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,36 @@ import IndividualTrainingExpansionPanel from '../IndividualTrainingExpansionPane
import { TrainingCardToggle } from '../../TrainingCardToggle';

afterEach(() => {
cleanup();
cleanup();
});

describe("Tests for IndividualTrainingExpansionPanel Component", () => {
test("Should change its completion porcentage value correctly on click to finish a task", async () => {
const { getByTestId } = render(<IndividualTrainingExpansionPanel title={'Tests'} trainings={[
{ label: 'Test', isComplete: false },
]} />);
test("ID: ITEP.1 - Should change its completion percentage value correctly on click to finish a task", async () => {
const { getByTestId } = render(<IndividualTrainingExpansionPanel title={'Tests'} trainings={[
{ label: 'Test', isComplete: false },
]} />);

const expansionPanel = getByTestId('expansion-panel');
expect(expansionPanel.getAttribute('data-porcentage')).toBe('0');
});
test("Should change its completion porcentage value correctly on click to finish a task 2", async () => {
const { getByTestId } = render(<IndividualTrainingExpansionPanel title={'Tests'} trainings={[
{ label: 'Test', isComplete: false },
{ label: 'Test', isComplete: true },
]} />);
const expansionPanel = getByTestId('expansion-panel');
expect(expansionPanel.getAttribute('data-porcentage')).toBe('0');
});

const expansionPanel = getByTestId('expansion-panel');
expect(expansionPanel.getAttribute('data-porcentage')).toBe('50');
});
test("Should change its completion porcentage value correctly on click to finish a task 3", async () => {
const { getByTestId } = render(<IndividualTrainingExpansionPanel title={'Tests'} trainings={[
{ label: 'Test', isComplete: true },
{ label: 'Test', isComplete: true },
]} />);
test("ID: ITEP.2 - Should change its completion percentage value correctly with a mixed completion state", async () => {
const { getByTestId } = render(<IndividualTrainingExpansionPanel title={'Tests'} trainings={[
{ label: 'Test', isComplete: false },
{ label: 'Test', isComplete: true },
]} />);

const expansionPanel = getByTestId('expansion-panel');
expect(expansionPanel.getAttribute('data-porcentage')).toBe('100');
});
});
const expansionPanel = getByTestId('expansion-panel');
expect(expansionPanel.getAttribute('data-porcentage')).toBe('50');
});

test("ID: ITEP.3 - Should change its completion percentage value correctly when all tasks are complete", async () => {
const { getByTestId } = render(<IndividualTrainingExpansionPanel title={'Tests'} trainings={[
{ label: 'Test', isComplete: true },
{ label: 'Test', isComplete: true },
]} />);

const expansionPanel = getByTestId('expansion-panel');
expect(expansionPanel.getAttribute('data-porcentage')).toBe('100');
});
});
45 changes: 22 additions & 23 deletions src/components/InformationBar/__tests__/InformationBar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,32 @@ import { IItemSubitem } from '../../ItemSubitem/types';
import InformationBar from '../InformationBar';

afterEach(() => {
cleanup();
cleanup();
});

describe("Tests for InformationBar Component", () => {
const elementsMock: IItemSubitem[] = [
{ title: "Item 1", content: "Content 1", color: "yellow" },
{ title: "Item 2", content: "Content 2", color: "red" }
];

const elementsMock: IItemSubitem[] = [
{ title: "Item 1", content: "Content 1", color: "yellow" },
{ title: "Item 2", content: "Content 2", color: "red" }
];

test("InformationBar component renders correctly", () => {
render(<InformationBar title="Test Title" elements={elementsMock} />);
const bar = screen.getByTestId("information-bar");
expect(bar).toBeInTheDocument();
expect(screen.getByTestId("information-bar-title").textContent).toBe("Test Title");
});
test("ID: IB.1 - InformationBar component renders correctly with title and elements", () => {
render(<InformationBar title="Test Title" elements={elementsMock} />);
const bar = screen.getByTestId("information-bar");
expect(bar).toBeInTheDocument();
expect(screen.getByTestId("information-bar-title").textContent).toBe("Test Title");
});

test("Title displays correctly", () => {
render(<InformationBar title="Unique Title" elements={elementsMock} />);
const title = screen.getByTestId("information-bar-title");
expect(title.textContent).toBe("Unique Title");
});
test("ID: IB.2 - Title displays correctly with unique text", () => {
render(<InformationBar title="Unique Title" elements={elementsMock} />);
const title = screen.getByTestId("information-bar-title");
expect(title.textContent).toBe("Unique Title");
});

test("Applies correct styling and classes", () => {
render(<InformationBar title="Test Title" elements={elementsMock} />);
const bar = screen.getByTestId("information-bar");
expect(bar).toHaveClass('bg-white');
expect(bar).toHaveClass('drop-shadow-lg');
});
test("ID: IB.3 - Applies correct styling and classes to the bar", () => {
render(<InformationBar title="Test Title" elements={elementsMock} />);
const bar = screen.getByTestId("information-bar");
expect(bar).toHaveClass('bg-white');
expect(bar).toHaveClass('drop-shadow-lg');
});
});
12 changes: 6 additions & 6 deletions src/components/InputField/__tests__/InputField.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import InputField from '../InputField';
describe('InputField component', () => {
const mockOnChange = jest.fn();

it('Should render input with the correct type and placeholder', () => {
it('ID: IF.1 - Should render input with the correct type and placeholder', () => {
render(
<InputField
id="test"
Expand All @@ -24,7 +24,7 @@ describe('InputField component', () => {
expect(inputElement).toHaveAttribute('type', 'text');
});

it('Should call onChange when the input value changes', () => {
it('ID: IF.2 - Should call onChange when the input value changes', () => {
render(
<InputField
id="test"
Expand All @@ -44,7 +44,7 @@ describe('InputField component', () => {
expect(mockOnChange).toHaveBeenCalledWith('test', 'new value');
});

it('Should toggle password visibility', () => {
it('ID: IF.3 - Should toggle password visibility', () => {
render(
<InputField
id="test"
Expand All @@ -67,7 +67,7 @@ describe('InputField component', () => {
expect(inputElement).toHaveAttribute('type', 'text');
});

it('Should render label and helper text', () => {
it('ID: IF.4 - Should render label and helper text', () => {
render(
<InputField
id="test"
Expand All @@ -85,7 +85,7 @@ describe('InputField component', () => {
expect(screen.getByText('Helper text')).toBeInTheDocument();
});

it('Should apply the correct class based on color prop', () => {
it('ID: IF.5 - Should apply the correct class based on color prop', () => {
render(
<InputField
id="test"
Expand All @@ -102,4 +102,4 @@ describe('InputField component', () => {
const inputElement = screen.getByPlaceholderText('Enter text');
expect(inputElement).toHaveClass('input-field__container__input-container__input--red');
});
});
});
Loading

0 comments on commit c882714

Please sign in to comment.