Initial UI testing with Jest

[shivaypiece]

3 initial tests:

1. test using Jest to see if the label of the button component is ‘Create Snippet’:

import * as React from 'react';
import { render, screen } from '@testing-library/react';
import { CreateButton } from '../Button';
import '@testing-library/jest-dom'

describe('CreateButton', () => {
  it('should have "Create Snippet" as button label', () => {
    render(<CreateButton applicationData={null} data={null} name={null} />);
    const buttonElement = screen.getByRole('button', { name: /Create Snippet/i });
    expect(buttonElement).toBeInTheDocument();
  });
});

2. test to check if nameInput and DataText area exist in the TextInput component

  test('renders input and textarea elements', () => {
    render(<DataTextInput applicationData={null} />);

    const nameInput = screen.getByPlaceholderText('Type the name of your snippet...') as HTMLInputElement;
    const dataTextarea = screen.getByPlaceholderText('Add your code/text content into this box') as HTMLTextAreaElement;

    expect(nameInput).toBeInTheDocument();
    expect(dataTextarea).toBeInTheDocument();
  });

3. test to check if there is an update in the state when input and the textarea values change.

  test('updates the state when input and textarea values change', () => {
    render(<DataTextInput applicationData={null} />);

    const nameInput = screen.getByPlaceholderText('Type the name of your snippet...') as HTMLInputElement;
    const dataTextarea = screen.getByPlaceholderText('Add your code/text content into this box') as HTMLTextAreaElement;

    // Simulate user input and check if the state is updated accordingly
    expect(nameInput.value).toEqual('');
    fireEvent.change(nameInput, { target: { value: 'Snippet name' } });
    expect(nameInput.value).toEqual('Snippet name');

    expect(dataTextarea.value).toEqual('');
    fireEvent.change(dataTextarea, { target: { value: 'Snippet code' } });
    expect(dataTextarea.value).toEqual('Snippet code');
  });

[jwafu]

curious here let me know what you think

[jwafu]

nice addition here 👍 i wonder if there is some way to make this a variable so we dont have to exclude this, otherwise i believe we will have to add everyones path here for running tests - no? @shivay-at-pieces

[shivaypiece]

I have updated this to include any directories including mock, so this should work for others as well.