Unit Test

[skkrishn1]

import React from 'react'; import { render, fireEvent, waitFor } from '@testing-library/react'; import { AnalyticsTracker } from './AnalyticsTracker';

describe('AnalyticsTracker', () => { const formElements = [ { tagName: 'INPUT', name: 'username', value: 'john' }, { tagName: 'TEXTAREA', name: 'description', value: 'hello world' }, { tagName: 'BUTTON', type: 'submit' }, ];

const parentComponentName = 'MyForm';

const analytics = { trackEvent: jest.fn(), };

beforeEach(() => { jest.resetAllMocks(); });

it('tracks input changes', () => { const { container } = render(

);

const inputElement = container.querySelector('input[name="username"]');
fireEvent.change(inputElement, { target: { value: 'jane' } });

expect(analytics.trackEvent).toHaveBeenCalledTimes(1);
expect(analytics.trackEvent).toHaveBeenCalledWith({
  category: 'Form',
  action: 'Input Changed',
  label: 'username',
  value: 'jane',
  meta: {
    component: parentComponentName,
    eventName: 'Input Changed',
  },
});

});

it('tracks textarea changes', () => { const { container } = render(

);

const textareaElement = container.querySelector('textarea[name="description"]');
fireEvent.change(textareaElement, { target: { value: 'hello universe' } });

expect(analytics.trackEvent).toHaveBeenCalledTimes(1);
expect(analytics.trackEvent).toHaveBeenCalledWith({
  category: 'Form',
  action: 'Textarea Changed',
  label: 'description',
  value: 'hello universe',
  meta: {
    component: parentComponentName,
    eventName: 'Textarea Changed',
  },
});

});

it('tracks submit button clicks', () => { const { container } = render(

);

const submitButton = container.querySelector('button[type="submit"]');
fireEvent.click(submitButton);

expect(analytics.trackEvent).toHaveBeenCalledTimes(1);
expect(analytics.trackEvent).toHaveBeenCalledWith({
  category: 'Form',
  action: 'Submit Button Clicked',
  label: 'Submit',
  value: '',
  meta: {
    component: parentComponentName,
    eventName: 'Submit Button Clicked',
  },
});

});

it('tracks multiple analytics events', () => { const { container } = render(

);

const inputElement = container.querySelector('input[name="username"]');
fireEvent.change(inputElement, { target: { value: 'jane' } });

const textareaElement = container.querySelector('textarea[name="description"]');
fireEvent.change(textareaElement, { target: { value: 'hello universe' } });

const submitButton = container.querySelector('button[type="submit"]');
fireEvent.click(submitButton);

expect(analytics.trackEvent).toHaveBeenCalledTimes(3);

}); });

[skkrishn1]

const { container } = render(

  <AnalyticsTracker formElements={formElements} parentComponentName={parentComponentName} />

);