Skip to content

Instantly share code, notes, and snippets.

@Lelith
Lelith / testinglibrary_email_test.test.js
Created October 11, 2022 07:38
react testing library userEvent
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
Lelith / accessibility_titles.html
Last active May 31, 2021 08:11
tile attribute
// 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
Lelith / accessible_images.html
Created May 7, 2021 08:26
How to make images accessible.
// 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
Lelith / inaccessible_divs.html
Created May 7, 2021 07:54
inaccessible divs
// container with on click handler used for direct interaction or routing
<div onClick={action('clicked')}>clickable div</div>
@Lelith
Lelith / accessible_divs.html
Last active May 7, 2021 07:49
acccessible divs
// by adding appropriate aria-role the element becomes accessible.
<div tabindex="0" role="button" onClick={action('clicked')}>accessible clickable div</div>
// 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
Lelith / MissingNumber.js
Last active May 12, 2020 11:47
Find missing number runtime: O(N) or O(n*long(n))
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;
@Lelith
Lelith / CounterWrapper.test.js
Last active April 21, 2020 13:27
Test for CounterWrapper to demonstrate mount
/* 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());
@Lelith
Lelith / Counter.test.js
Last active April 21, 2020 13:26
Counter Shallow Render
/** 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())
})
@Lelith
Lelith / setupTests.js
Created April 21, 2020 13:20
Jest Setup File
/* 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() })