Weeknotes 108

After writing about white noise apps last week, Scott pointed out iOS 15 and iPadOS 15 have ambient noises built-in.
E’s cousin, her husband and young daughter stayed with us from Thursday. During their stay, it has become clear that C is a serial nuzzler.

I couldn’t upgrade a legacy JavaScript application to React v17.0 as its test suite was written with Enzyme (which doesn’t officially support the latest version of React). We decided to replace Enzyme with a combination of React Test Renderer and React Testing Library with jest-dom.

We ported any snapshot tests like the following:

it('matches its snapshot', () => {
    const wrapper = mount(<Component />)

    expect(wrapper).toMatchSnapshot()
})

To use React Test Renderer instead:

import { create } from 'react-test-renderer'

it('matches its snapshot', () => {
    const wrapper = create(<Component />)

    expect(wrapper.toJSON()).toMatchSnapshot()
})

Any tests that asserted the presence of specific components went from:

it('contains a child component', () => {
    const wrapper = mount(<Component />)

    expect(wrapper.find(ChildComponent)).toExist()
})

To:

import { create } from 'react-test-renderer'

it('contains a child component', () => {
    const wrapper = create(<Component />)

    expect(wrapper.root.findByType(ChildComponent)).toBeTruthy()
})

We rewrote tests that asserted on various attributes of elements with ARIA roles from:

it('adds the specified class name to the image', () => {
    const wrapper = mount(<Component className="another-class-name" />)

    expect(wrapper.find('.some-img-class')).toHaveClassName('another-class-name')
})

To:

import { render, screen } from '@testing-library/react'

it('adds the specified class name to the image', () => {
    render(<Component className="another-class-name" />)

    expect(screen.getByRole('img')).toHaveClass('another-class-name')
})

The remaining tests all used CSS selectors to assert attributes of elements without ARIA roles so we went from:

it('adds the specified class name to the container', () => {
    const wrapper = mount(<Component className="another-class-name" />)

    expect(wrapper.find('.some-div-class')).toHaveClassName('another-class-name')
})

To use querySelector though this is not recommended:

import { render } from '@testing-library/react'

it('adds the specified class name to the container', () => {
    const { container } = render(<Component className="another-class-name" />)

    expect(container.querySelector('.some-div-class')).toHaveClassName('another-class-name')
})

Since improving my CSS knowledge, I’ve been using Tailwind CSS for all new projects that require custom design work, e.g. implementing a design from a mock-up or wireframes.

At first, I mistook it for something like Bootstrap: an entire framework of pre-written styled components that I could reuse with little thought. However, it made much more sense when I saw it as an alternate way of writing CSS. Instead of writing CSS declarations in classes, you use Tailwind’s utility classes directly on your elements.

While I initially balked at all the inline classes, in reality I’m replacing code like this:

.bubble {
  position: relative;
  padding: 1rem;
  background: #fff;
  border-radius: 1.5rem;
}
.arrow {
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.arrow img {
  width: 1rem;
  height: 1rem;
}

<div class="bubble">
  <div class="arrow"><img src="arrow.svg" width="16" height="16" alt="" /></div>
  <p>I want to turn people into dinosaurs.</p>
</div>

With this:

<div class="relative p-4 bg-white rounded-3xl">
  <div class="absolute inset-x-0 -top-4 mx-auto"><img class="w-4 h-4" src="arrow.svg" width="16" height="16" alt="" /></div>
  <p>I want to turn people into dinosaurs.</p>
</div>

The corresponding CSS classes still exist but I can delegate their maintenance to Tailwind’s authors.

Our current television-watching rotation is as follows: