@testing-library/react#getByTestId JavaScript Examples

The following examples show how to use @testing-library/react#getByTestId. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: getTransformationFieldGroups.js    From ui-data-export with Apache License 2.0 6 votes vote down vote up
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),
  }));
}
Example #2
Source File: toggle.tests.js    From js-code with ISC License 6 votes vote down vote up
//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");
  });
Example #3
Source File: registrationLogin.js    From shopping-cart-fe with MIT License 5 votes vote down vote up
// 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();
  });
  
});
Example #4
Source File: ChooseJobProfilePage.test.js    From ui-data-export with Apache License 2.0 4 votes vote down vote up
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();
        });
      });
    });
  });
});