describe('Counter', () => { it('should increase count and update UI', () => { const { getByTestId } = render(<Counter />); const button = getByTestId('button'); const counter = getByTestId('counter'); fireEvent.click(button); expect(counter).toHaveTextContent('1'); }); });
test("parameters change updates the result", () => { const { container, getByTestId } = render( <StoreContext.Provider value={store}> <div> <AppendItemButton item={"x"} /> <ShowList /> </div> </StoreContext.Provider>, ); fireEvent.click(getByTestId("append-button")); expect(container).toHaveTextContent("abx:3"); });
it('renders an error with invalid password', () => { const { getByTestId, getByLabelText, getByText } = render(<SignInView />) const passwordField = getByLabelText('Password') const submitButton = getByText('Submit') fireEvent.focus(passwordField) fireEvent.change(passwordField, { target: { value: '1234' } }) fireEvent.blur(passwordField) expect(submitButton).toHaveAttribute('disabled') expect(getByTestId('password-error').textContent).toBe( 'Passwords need between 10 and 128 characters.', ) })
test("parameters change updates the result", () => { const { container, getByTestId } = renderContains(); fireEvent.change(getByTestId("contains-input"), { target: { value: "a" } }); expect(container).toHaveTextContent("present"); });
test("parameters change updates the result", () => { store.dispatch(append("a")); const { container, getByTestId } = renderRepeated(); fireEvent.change(getByTestId("repeated-input"), { target: { value: "b" } }); expect(container).toHaveTextContent("unique"); });
describe('Testing Local Counter', () => { test('clicking decrement and increment changes number', () => { const { getByText, getByTestId } = renderWithRedux(<Redux />); const number = getByTestId('number'); const decrementBtn = getByText(/-1/i); const incrementBtn = getByText(/\+1/i); expect(number.textContent).toEqual('0'); fireEvent.click(decrementBtn); expect(number.textContent).toEqual('-1'); fireEvent.click(decrementBtn); expect(number.textContent).toEqual('-2'); fireEvent.click(incrementBtn); expect(number.textContent).toEqual('-1'); }); });
describe('Loading', () => { it('should show loading and change UI after 3 seconds', async () => { const { getByText, getByTestId } = render(<Loading />); const loading = getByText(/loading/i); expect(loading).toBeVisible(); await waitForElement(() => getByTestId('loading')); expect(getByTestId('loading')).toBeInTheDocument(); }) })
// Unmount the component after each test that runs test(`<Counter />`, () => { const { debug, getByTestId } = render(<Counter />); const counterButton = getByTestId('counter-button'); debug(); // Examine the dom node as a string expect(counterButton.tagName).toBe('BUTTON'); // Assert the counter button is a button expect(counterButton.textContent).toBe('0'); // Assert the counter button starts at 0 fireEvent.click(counterButton); // Assert the counter button's onClick event fires expect(counterButton.textContent).toBe('1'); //Assert the counter updates +1 fireEvent.click(counterButton); // Assert the counter button's onClick event fires expect(counterButton.textContent).toBe('2'); //Assert the counter updates +1 debug(); // Examine the dom node as a string });
test('<FormSection>', () => { const { debug, getByTestId, queryByTestId, container, getByText } = render( <FormSection /> ); expect(getByTestId('page-title').textContent).toBe('New Form'); expect(queryByTestId('form')).toBeTruthy(); debug(); expect(container.firstChild).toMatchSnapshot(); });
test('entering a todo in form adds a todo', async () => { const { getByText, getByPlaceholderText, getByTestId, container } = render(<App />); // enter todo text in textbox getByPlaceholderText('Enter todo text').value = 'My new todo'; // click Add Simulate.click(getByText('Add')); // wait for Todo to show up await wait(() => getByText('My new todo')); // make sure form is cleared expect(getByTestId('TodoForm-input').value).toEqual(''); // make sure todo was added expect(getByText('My new todo')).toBeDefined(); });
it("is a ClassCounter with an increment button. It 0 then 1.", () => { // Arrange const { getByTestId } = render(<ClassCounter />) const count = getByTestId('count') const plusButton = getByTestId('plus') // Asserting that it starts at 0 expect(count.textContent).toBe('0') // Act fireEvent.click(plusButton) // Asserting that it now is 1 expect(count.textContent).toBe('1') })
describe('Modal', () => { it('should open and close modal', () => { const { container, getByText, queryByTestId, getByTestId } = render(<Modal />); const open = getByText('Open'); expect(queryByTestId('modal')).not.toBeInTheDocument(); fireEvent.click(open); expect(getByTestId('modal')).toBeInTheDocument(); expect(container).toMatchSnapshot(); }) })
it("has two inputs that I can change to see if it works", () => { // Arrange const { getByTestId, getByPlaceholderText, getByLabelText } = render(<Problem total={30}/>) const checkResult = getByTestId('check') const input_one = getByPlaceholderText('Place the first number here!') const input_two = getByLabelText('Number 2') const result = getByTestId('result') // Act fireEvent.change(input_one, { target: { value: 10 } }) fireEvent.change(input_two, { target: { value: 20 } }) fireEvent.click(checkResult) // Asserting that it was correct expect(result.textContent).toBe('Good') })
test("DrakeButtons has the same amount of buttons as drakes passed in", () => { const { getByTestId } = render( <DrakeButtons drakes={[{ one: 1 }, { two: 2 }]} onClick={x => x} /> ); const { length } = getByTestId(TEST_ID).querySelectorAll("button"); expect(length).toBe(2); });
it("is a HooksCounter with an increment button. It is 0 then 1", () => { // Arrange const { getByTestId } = render(<HooksCounter />) const count = getByTestId('count') const plusButton = getByTestId('plus') // Asserting that it starts at 0 expect(count.textContent).toBe('0') // Act fireEvent.click(plusButton) // Asserting that it now is 1 expect(count.textContent).toBe('1') })