@testing-library/react#getByTestId JavaScript Examples

getTransformationFieldGroups = () => {
  const allGroups = screen.getAllByTestId('transformation-field-group');

  return allGroups.map(group => ({
    marcField: {
      container: getByTestId(group, 'transformation-marcField'),
      input: getByTestId(group, 'transformation-marcField').querySelector('input'),
      isInvalid: getByTestId(group, 'transformation-marcField').classList.contains('isInvalid'),
    },
    indicator1: {
      container: getByTestId(group, 'transformation-indicator1'),
      input: getByTestId(group, 'transformation-indicator1').querySelector('input'),
      isInvalid: getByTestId(group, 'transformation-indicator1').classList.contains('isInvalid'),
    },
    indicator2: {
      container: getByTestId(group, 'transformation-indicator2'),
      input: getByTestId(group, 'transformation-indicator2').querySelector('input'),
      isInvalid: getByTestId(group, 'transformation-indicator2').classList.contains('isInvalid'),
    },
    subfield: {
      container: getByTestId(group, 'transformation-subfield'),
      input: getByTestId(group, 'transformation-subfield').querySelector('input'),
      isInvalid: getByTestId(group, 'transformation-subfield').classList.contains('isInvalid'),
    },
    isInvalid: Boolean(queryAllByTestId(group, 'transformation-invalid').length),
  }));
}

//Simiar test using @testing-library
  it("works with testing-library", () => {
    const onChange = jest.fn();
    act(() => {
      render(<Toggle onChange={onChange} />, container);
    });
  

    // get ahold of the button element, and trigger some clicks on it
    const button = document.querySelector("[data-testid=toggle]");
    expect(button.innerHTML).toBe("Turn on");
  
    fireEvent(
        getByTestId(container, 'toggle'),
        new MouseEvent('click', {
        bubbles: true
        })
    )
  
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(button.innerHTML).toBe("Turn off");
  });

// These tests ensure all elements are rendering on login

describe('login screen and registration screens', () => {
  test('renders the title on login', () => {
    const { getByText } = renderWithProviders(<Login />);
    const title = getByText(/LogIn to your Store/i);
    expect(title).toBeVisible();
  });
  test('renders logo', () => {
    const { getByTestId } = renderWithProviders(<Login />);
    expect(getByTestId('loginLogo')).toBeVisible();
  });
  test('renders phone number input', () => {
    const { getByTestId } = renderWithProviders(<Login />);
    expect(getByTestId('phoneNumberInput')).toBeVisible();
  });
  test('renders password input', () => {
    const { getByTestId } = renderWithProviders(<Login />);
    expect(getByTestId('loginPasswordInput')).toBeVisible();
  });
  test('renders forgot password link', () => {
    const { getByText } = renderWithProviders(<Login />);
    expect(getByText(/forgot password/i)).toBeVisible();
  });
  test('renders login button', () => {
    const { getByTestId } = renderWithProviders(<Login />);
    expect(getByTestId('loginButton')).toBeVisible();
  });
  test('renders create store button', () => {
    const { getByTestId } = renderWithProviders(<Login />);
    expect(getByTestId('createStoreButton')).toBeVisible();
  });
  test('renders main login image', () => {
    const { getByAltText } = renderWithProviders(<Login />);
    expect(getByAltText(/login/i)).toBeVisible();
  });
  test('renders colorful image background', () => {
    const { getByTestId } = renderWithProviders(<Login />);
    expect(getByTestId('imageBackground')).toBeVisible();
  });
  test('renders phone / password background div', () => {
    const { getByTestId } = renderWithProviders(<Login />);
    expect(getByTestId('loginFormWrapper')).toBeVisible();
  });
  
});

describe('ChooseJobProfile', () => {
  describe('rendering ChooseJobProfile', () => {
    const exportProfileSpy = jest.fn(Promise.resolve.bind(Promise));
    const pushHistorySpy = jest.fn();
    const mutator = buildMutator({ export: { POST: exportProfileSpy } });
    const location = { state: { fileDefinitionId: 'fileDefinitionId' } };
    let renderResult;

    beforeEach(() => {
      renderResult = renderWithIntl(
        <Router>
          <ChooseJobProfile
            resources={resources}
            mutator={mutator}
            history={{ push: pushHistorySpy }}
            location={location}
          />
        </Router>,
        translationsProperties
      );
    });

    afterEach(() => {
      jest.clearAllMocks();
    });

    it('should be visible', () => {
      const { container } = renderResult;

      expect(container.querySelector('#pane-results')).toBeVisible();
    });

    it('should display correct title and subtitle', () => {
      const { container } = renderResult;
      const paneHeader = container.querySelector('[data-test-pane-header]');

      expect(getByText(paneHeader, 'Select job profile to run the export')).toBeVisible();
      expect(getByText(paneHeader, '2 job profiles')).toBeVisible();
    });

    it('should place headers in correct order', () => {
      const { container } = renderResult;
      const headers = container.querySelectorAll('#search-results-list .mclHeader');

      expect(getByText(headers[0], 'Name')).toBeVisible();
      expect(getByText(headers[1], 'Description')).toBeVisible();
      expect(getByText(headers[2], 'Updated')).toBeVisible();
      expect(getByText(headers[3], 'Updated by')).toBeVisible();
    });

    it('should not display the confirmation modal', () => {
      const { container } = renderResult;
      const modal = container.querySelector('#choose-job-profile-confirmation-modal');

      expect(modal).not.toBeInTheDocument();
    });

    it('should display correct data for the first row', () => {
      const { container } = renderResult;
      const row = container.querySelector('.mclRow');
      const cells = row.querySelectorAll('.mclCell');

      expect(getByText(cells[0], 'A Lorem ipsum 1')).toBeVisible();
      expect(getByText(cells[1], 'Description 1')).toBeVisible();
      expect(getByText(cells[2], '12/4/2018')).toBeVisible();
      expect(getByText(cells[3], 'Donald S')).toBeVisible();
    });

    describe('clicking on row', () => {
      beforeEach(() => {
        const { container } = renderResult;
        const row = container.querySelector('.mclRow');

        userEvent.click(row);
      });

      it('should display modal with proper header', () => {
        expect(screen.getByText('Are you sure you want to run this job?')).toBeInTheDocument();
      });

      it('should display modal profile name in the body', () => {
        expect(screen.getByTestId('choose-job-select')).toBeVisible();
      });

      it('should display modal with proper wording for buttons', () => {
        const modal = document.querySelector('#choose-job-profile-confirmation-modal');

        expect(getByRole(modal, 'button', { name: 'Run' })).toBeVisible();
        expect(getByRole(modal, 'button', { name: 'Cancel' })).toBeVisible();
      });

      it('clicking on cancel button should close the modal', () => {
        const modal = document.querySelector('#choose-job-profile-confirmation-modal');

        userEvent.click(getByRole(modal, 'button', { name: 'Cancel' }));

        return waitForElementToBeRemoved(() => document.querySelector('#choose-job-profile-confirmation-modal'));
      });

      describe('clicking on confirm button - success case', () => {
        beforeEach(async () => {
          const modal = document.querySelector('#choose-job-profile-confirmation-modal');

          await userEvent.selectOptions(getByTestId(modal, 'choose-job-select'), 'Instances');

          userEvent.click(getByRole(modal, 'button', { name: 'Run' }));
        });

        it('should navigate to the landing page', () => {
          expect(pushHistorySpy).toHaveBeenCalledWith('/data-export');
        });
      });

      describe('clicking on confirm button - error case', () => {
        beforeEach(async () => {
          const modal = document.querySelector('#choose-job-profile-confirmation-modal');

          exportProfileSpy.mockImplementationOnce(Promise.reject.bind(Promise));

          await userEvent.selectOptions(getByTestId(modal, 'choose-job-select'), 'Instances');

          userEvent.click(getByRole(modal, 'button', { name: 'Run' }));
          await waitForElementToBeRemoved(() => document.querySelector('#choose-job-profile-confirmation-modal'));
        });

        it('should not navigate to the landing page', () => {
          expect(pushHistorySpy).not.toHaveBeenCalled();
        });
      });
    });
  });
});