This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// container with on click handler used for direct interaction or routing | |
<div onClick={action('clicked')}>clickable div</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// by adding appropriate aria-role the element becomes accessible. | |
<div tabindex="0" role="button" onClick={action('clicked')}>accessible clickable div</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function solution(A) { | |
// write your code in JavaScript (Node.js 8.9.4) | |
// set solution and index to 0 | |
let solution = 0; | |
// sort array ascending to make finding the missing one easier | |
A.sort((a,b)=>a-b); | |
let index = 0; | |
while(solution === 0 && index <= A.length ){ | |
solution = (A[index] !== (index+1) )? index+1 : 0; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* src/components/Counter/test/CounterWrapperTest.js */ | |
import React from 'react' | |
import CounterWrapper from '../CounterWrapper'; | |
import { shallow } from 'enzyme'; | |
const counterWrapper = shallow(<CounterWrapper />); | |
console.log(counterWrapper.debug()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** src/components/Counter/test/Counter.test.js **/ | |
import React from 'react' | |
import Counter from '../Counter' | |
import { shallow } from 'enzyme' | |
describe('Counter', () => { | |
const wrapper = shallow(<Counter />) | |
it('renders successfully', () => { | |
console.log(wrapper.debug()) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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() }) |
NewerOlder