Merge pull request #104 from serconde/#100--Accessibility-check-html-element-roles-trainer

brauliodiez · web-flow · commit c60f4c1d51a8 · 2020-11-17T11:33:31.000+01:00
Added unit tests for all the subcomponents of the trainer component
diff --git a/front/package.json b/front/package.json
@@ -49,7 +49,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/react-hooks": "^3.2.1",
-    "@testing-library/user-event": "^12.1.6",
+    "@testing-library/user-event": "^12.2.2",
     "@types/jest": "^24.0.23",
     "@types/react": "^16.9.13",
     "@types/react-dom": "^16.9.4",
diff --git a/front/src/pods/trainer/components/header.component.spec.tsx b/front/src/pods/trainer/components/header.component.spec.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent unit tests', () => {
+  it('should show the trainer and the students links when passing valid values', () => {
+    // Arrange
+    const props = {
+      currentTrainerUrl: 'http://current.trainer.url',
+      currentStudentUrl: 'http://current.student.url',
+    };
+
+    // Act
+    render(<HeaderComponent {...props} />);
+    const linkCopyInputs = screen.getAllByRole('textbox');
+    const linkCopyButtons = screen.getAllByRole('button');
+
+    // Assert
+
+    expect(linkCopyInputs.length).toBe(2);
+    expect(linkCopyButtons.length).toBe(2);
+    linkCopyInputs.forEach(input => expect(input).toHaveAttribute('readonly'));
+    expect(linkCopyInputs[0]).toHaveValue(props.currentTrainerUrl);
+    expect(linkCopyInputs[1]).toHaveValue(props.currentStudentUrl);
+  });
+
+  it('should show empty trainer and the students link when passing undefined values', () => {
+    // Arrange
+    const props = {
+      currentTrainerUrl: undefined,
+      currentStudentUrl: undefined,
+    };
+
+    // Act
+    render(<HeaderComponent {...props} />);
+    const linkCopyInputs = screen.getAllByRole('textbox');
+
+    // Assert
+
+    expect(linkCopyInputs[0]).toBeEmpty();
+    expect(linkCopyInputs[1]).toBeEmpty();
+  });
+
+  it('should show empty trainer and the students link when passing null values', () => {
+    // Arrange
+    const props = {
+      currentTrainerUrl: null,
+      currentStudentUrl: null,
+    };
+
+    // Act
+    render(<HeaderComponent {...props} />);
+    const linkCopyInputs = screen.getAllByRole('textbox');
+
+    // Assert
+
+    expect(linkCopyInputs[0]).toBeEmpty();
+    expect(linkCopyInputs[1]).toBeEmpty();
+  });
+});
diff --git a/front/src/pods/trainer/components/header.component.tsx b/front/src/pods/trainer/components/header.component.tsx
@@ -18,12 +18,12 @@ export const HeaderComponent: React.FC<Props> = props => {
       <CopyFieldComponent
         labelName="Trainer Link"
         inputId="trainer-link"
-        urlLink={currentTrainerUrl}
+        urlLink={currentTrainerUrl ?? ''}
       />
       <CopyFieldComponent
         labelName="Students Link"
         inputId="student-link"
-        urlLink={currentStudentUrl}
+        urlLink={currentStudentUrl ?? ''}
       />
     </div>
   );
diff --git a/front/src/pods/trainer/components/new-text.component.spec.tsx b/front/src/pods/trainer/components/new-text.component.spec.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NewTextComponent } from './new-text.component';
+
+describe('NewTextComponent unit tests', () => {
+  it('should handle the entered text when clicking on the send button', () => {
+    // Arrange
+    const handleAppendTrainerText = jest.fn();
+
+    // Act
+    render(
+      <NewTextComponent handleAppendTrainerText={handleAppendTrainerText} />
+    );
+
+    const inputText = screen.getByRole('textbox');
+    const sendButton = screen.getByRole('button');
+
+    userEvent.type(inputText, 'Test text');
+    userEvent.click(sendButton);
+
+    // Assert
+    expect(handleAppendTrainerText).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not handle any text when there is not entered text and clicking on the send button', () => {
+    // Arrange
+    const handleAppendTrainerText = jest.fn();
+
+    // Act
+    render(
+      <NewTextComponent handleAppendTrainerText={handleAppendTrainerText} />
+    );
+
+    const sendButton = screen.getByRole('button');
+
+    userEvent.click(sendButton);
+
+    // Assert
+    expect(handleAppendTrainerText).not.toHaveBeenCalled();
+  });
+});
diff --git a/front/src/pods/trainer/components/session.component.spec.tsx b/front/src/pods/trainer/components/session.component.spec.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import { SessionComponent } from './session.component';
+import userEvent from '@testing-library/user-event';
+
+describe('SessionComponent unit tests', () => {
+  it('should send the concatenation of the session saved text plus the entered one when clicking the send full content button', () => {
+    // Arrange
+    const props = {
+      log: 'Hello! ',
+      handleSendFullContentLog: jest.fn(),
+    }
+    const expectedSentText = 'Hello! How are you doing?';
+
+    // Act
+
+    render(<SessionComponent {...props} />);
+
+    const textArea = screen.getByRole('textbox');
+    const sendFullContentButton = screen.getAllByRole('button')[1];
+
+    userEvent.type(textArea, 'How are you doing?');
+    userEvent.click(sendFullContentButton);
+
+    // Assert
+
+    expect(props.handleSendFullContentLog).toHaveBeenCalledTimes(1);
+    expect(props.handleSendFullContentLog).toHaveBeenCalledWith(expectedSentText);
+  });
+
+  it('should send the concatenation of the previous session text plus the entered one when clicking the send full content button', () => {
+    // Arrange
+    const props = {
+      log: 'Hello! ',
+      handleSendFullContentLog: jest.fn(),
+    }
+    const expectedSentText = 'Hello! How are you doing?';
+
+    // Act
+
+    render(<SessionComponent {...props} />);
+
+    const textArea = screen.getByRole('textbox');
+    const sendFullContentButton = screen.getAllByRole('button')[1];
+
+    userEvent.type(textArea, 'How are you doing?');
+    userEvent.click(sendFullContentButton);
+
+    // Assert
+
+    expect(props.handleSendFullContentLog).toHaveBeenCalledTimes(1);
+    expect(props.handleSendFullContentLog).toHaveBeenCalledWith(expectedSentText);
+  });
+
+  it('should reset the session text to the original one when clicking the undo button', () => {
+    // Arrange
+    const props = {
+      log: 'Hello! ',
+      handleSendFullContentLog: jest.fn(),
+    }
+    const expectedSentText = 'Hello! ';
+
+    // Act
+
+    render(<SessionComponent {...props} />);
+
+    const textArea = screen.getByRole('textbox');
+    const undoButton = screen.getAllByRole('button')[0];
+
+    userEvent.type(textArea, 'How are you doing?');
+    undoButton.click();
+
+    // Assert
+
+    expect(textArea).toHaveValue(expectedSentText);
+  });
+});
