OlaoluwaM

test('should do.....', () => {
    /*Rest of the test*/

    act(() => {
        // Event will cause state update and rerender in controlled input component
        fireEvent.input(inputElement, {target: {value: '123'}})
        // 'act' will make sure updates are applied to the DOM
    })

    // So our assertion work with with updated UI

OlaoluwaM

test('should...', async () => {
	await act(async () => {
		fireEvent.input(inputElement, {target: {value: 123}})
	})
})

OlaoluwaM

test('should let user know their input was invalid or incorrect', async () => {
	const {findByPlaceholderText, findByTestId} = render(<AuthComp />) // Or whatever you call you authentication component

	const inputElement = await findByPlaceholderText('Age') // any query function prefixed with findBy* is asynchronous

	await act(async () => {
		fireEvent.input(inputElement, {target: {value: 12}})
	})

	const validationErrorElement = await findByTestId('validation-error');

OlaoluwaM

jest.useFakeTimers()

test('should inform user of task completion', () => {
    const { getByRole } = render(<App />) 

    jest.advanceTimersByTime(1000); // You can vary the time depending on how long you have set the toast in question to be visible for
    const toast = getByRole('alert') // Toasts generated by the library have a role of alert

    expect(toast).toBeInTheDocument();
})

OlaoluwaM

#!/usr/bin/env node

import fsPromise from 'fs/promises';

import { exec } from 'child_process';
import { promisify } from 'util';

const promisifiedExec = promisify(exec);

const normalize = str => (str === '' ? false : true);

OlaoluwaM

const FakeComponent = () => {
  return (
      <AnimatedRoutes exitBeforeEnter initial={false}>
        <RouteTransition exact path="/some-route">
          <NewUsers />
        </RouteTransition>
        <RouteTransition exact path="/yo" >
          <Users />
        </RouteTransition>
      </AnimatedRoutes>

OlaoluwaM

# vim:fileencoding=utf-8:ft=conf:foldmethod=marker

#: Fonts {{{

#: kitty has very powerful font management. You can configure
#: individual font faces and even specify special fonts for particular
#: characters.

font_family      JetBrains Mono Medium
bold_font        JetBrains Mono Bold

OlaoluwaM

GROKKING NOTES

I liked the way Grokking the coding interview organized problems into learnable patterns. However, the course is expensive and the majority of the time the problems are copy-pasted from leetcode. As the explanations on leetcode are usually just as good, the course really boils down to being a glorified curated list of leetcode problems.

So below I made a list of leetcode problems that are as close to grokking problems as possible.

Pattern: Sliding Window

• https://leetcode.com/problems/maximum-subarray/ # Close enough
• https://leetcode.com/problems/minimum-size-subarray-sum/

OlaoluwaM

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

OlaoluwaM

Introduction

• Add your project logo.
• Write a short introduction to the project.
• If you are using badges, add them here.

📒 Index

• About
• Usage
• Installation