Lelith

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('validates an E-Mail address', async () => {
  const user = userEvent.setup();
  render(<LoginForm />);
  
  const emailInput = screen.getByLabelText('E-Mail', {selector: 'input'});
  await user.type(emailInput, 'Homer.Simpson@mail.com');
  expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();

Lelith

// use title as glossary
<div>
  <abbr title="Hypertext Markup Language">HTML</abbr> is a language to write websites.
</div>

// use title to describe link destinations
<a href='./profile' title="Edit or delete your profile"><svg>....</svg></a>

Lelith

// image with a descriptive alternative text, helps users to understand what is on the picture
<img src='cat.jpg' alt="a cat playful laying on its back" />

// image for decorative purpose which adds unnecessary information
// Screenreaders will read this as "image, Dashboard Logo, My Dashboard"
<div>
  <img src="dashboard_black_24dp.svg" alt="Dashboard Logo" />My Dashboard
</div>

// just removing the alt-tag is not helpful either

Lelith

// container with on click handler used for direct interaction or routing
<div onClick={action('clicked')}>clickable div</div>

Lelith

// use button tags for interactive elements with clickHandlers
<button onClick={action('clicked'}>i trigger an immediate action</button>

// use a tags for interactive elements that route a user to another view or web application
<a href=".">i move to anther view</a>

// Native form elements are always better in accessibility, even if they are harder to style
// Make them even more accessible by using proper label tags for selectable
<label for="myChoice">My Coice</label><input type="radio" id="myChoice">

Lelith

// by adding appropriate aria-role the element becomes accessible.
<div tabindex="0" role="button" onClick={action('clicked')}>accessible clickable div</div>

Lelith

/* src/setupTests.js */
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
import { configure } from "enzyme"
import Adapter from "enzyme-adapter-react-16"
configure({ adapter: new Adapter() })

Lelith

.counter {
  margin: 15px;
}
.counterComponent__input {
  border: 0;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  width: 60px;
}

Lelith

/* src/components/Counter/index.js */
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import './index.css';

class Counter extends React.Component {
  constructor(props) {
    super(props);

Lelith

function solution(K, A) {
    let ropes = 0;
    let length = 0;
    
    A.forEach(rope => {
        length += rope;
        
        if(length >=K){
            ropes +=1;
            length = 0;