> The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.
>
> \- [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

The DOM is the interface between our CSS/HTML and javascript. It allows us to change things with the use of javascript. Everything lives inside of one object, the "document".

Selecting an element is easily accomplished using `document.querySelector()`, which will select the given input, say a `<p>` tag. From there, we have the ability to manipulate it by first saving the selection to a variable and then using dot notation to call on styles like so: `p.style.color = "red";` which takes a variable `p` that we assigned with `document.querySelector("p")` and changes the CSS style "color" to red.

### First Five Methods

`document.getElementById()`
: returns an element by its ID.

`document.getElementsByClassName()`
: returns all elements matching a given class name

`document.getElementsByTagName()`
: returns all elements of the matching tag name.

`document.querySelector()`
: returns the first matching occurrence of the given CSS selector

`document.querySelectorAll()`
: returns all matching occurrences of the given CSS selector

### Manipulating Styles, Text/Content, Attributes

#### Styles

We have access to the style property through the DOM, which allows us to add, change or remove the style properties of a given element. A few easy examples of changing styles:

```javascript
var name = document.getElementById("name");

name.style.color = "red";
name.style.border = "1px solid black";
name.style.fontSize = "16px";
name.style.background = "black";
```

classList gives us the ability to add, delete or toggle a new class onto an element. We could create a new class in our CSS that sets the text size to 50 with a black background and white text, and through javascript, add that unassigned CSS class to any element we would like.

```css
/* CSS FILE */

.standOut {
  font-size: 50px;
  color: white;
  background: black;
}
```

```javascript
// JAVASCRIPT FILE

var so = docutment.getElementById("name");

// add the class .standOut to the item with ID of "name"
so.classList.add("standOut");
// removes class standOut to the item with the ID of "name"
so.classList.remove("standOut");
// add a class if it does not exist or remove if the class exists
so.classList.toggle("standOut");
```

#### Text and Content

The `.textContent` method allows us to change the text inside an element. We, for example, can select a `<p>` with `querySelector("p")` and store it in a var that gives us access to the text contained inside from which we can read the existing text or replace it with new text. Caution needs to be used as setting new text with `.textContent` will not preserve any HTML or content within the selected element. Adding content through this method will also not allow the input of HTML elements, they will be escaped.

`.innerHTML` is like `.textContent` except it will return a string with all the HTML contained in the provided element. Setting content this way provides the same problem we have with `.textContent`, no inner HTML content will be preserved when we add new content. When adding new content through this method, we have the ability to use HTML in the new content, unlike `.textContent`.

#### Attributes

`.getAttribute()` and `.setAttribute()` allow us to read and write attributes like `href` or `src` .

```html
<a href="www.google.com">I'm a link</a> <img src="logo.png" />
```

```javascript
var link = document.querySelector("a");
link.getAttribute("href"); // www.google.com

// change href
link.setAttribute("href", "http://yahoo.com");
```

### Events

> DOM Events are sent to notify the code of interesting things that have taken place. Each event is represented by an object based on the Event interface and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.
>
> \- [MDN](https://developer.mozilla.org/en-US/docs/Web/Events)

Events are notifications sent with key clicks, mouse clicks, button clicks, etc. We use them by attaching an event listener to a set element, and from there, we can launch other processes through javascript once the event notification has been triggered. A common listener is `element.addEventListener(type, functionToCall);` .

```javascript
var button = document.querySelector("button");
button.addEventListener("click", function () {
  console.log("THE BUTTON HAS BEEN CLICKED!");
});
```

The above code sends a console message once the selected button has been clicked. Named functions can also be used in place of an anonymous function, most of the time, an anonymous function will be preferred, but some situations may arise where there is a function used in multiple places where a named function would be preferred over an anonymous one.

Some common addEventListener types:

- click
- mouseover
- mouseout
- keydown
- keypress
- keyup
- focus
- blur
- change
- submit
- scroll
- resize
- load

The DOM is the interface between our CSS/HTML and javascript. It allows us to change things with the use of javascript. Everything lives inside of one object, the "document".

An Introduction to the Almighty DOM

Testing a react application using Chakra-UI is reasonably straightforward once you adjust the `render` function of [react-testing-library](https://testing-library.com/). So we'll start by testing a basic card example grabbed from the Chakra [docs](https://chakra-ui.com/box).

```javascript
import { Box, Image, Badge, Icon } from '@chakra-ui/core';
import PropTypes from 'prop-types';

const RecipeCard = (props) => {
  const { description, title, rating } = props;
  return (
    <Box
      maxW="sm"
      borderWidth="1px"
      rounded="lg"
      background="white"
      overflow="hidden"
    >
      <Image src="ourImage.png" alt={title} />
      <Box p="6">
        <Box d="flex" alignItems="baseline">
          <Badge rounded="full" px="2" mr="1" variantColor="purple">
            type
          </Badge>
          <Badge rounded="full" px="2" mr="1" variantColor="green">
            tags
          </Badge>
        </Box>
        <Box
          mt="1"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          {title}
        </Box>
        <Box> {description} </Box>
        <Box d="flex" mt="2" alignItems="center">
          {Array(5)
            .fill('')
            .map((_, i) => (
              <Icon
                name="star"
                key={i}
                color={i < rating ? 'teal.500' : 'gray.300'}
              />
            ))}
          <Box as="span" ml="2" color="gray.600" fontSize="sm">
            {title} reviews
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

RecipeCard.defaultProps = {
  rating: 0,
};

RecipeCard.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  rating: PropTypes.number,
};

export default RecipeCard;
```

We're also passing along a `ThemeProvider` in our `app.jsx` that has the following theme:

```javascript
// theme.js
import { theme as chakraTheme } from '@chakra-ui/core';

const fonts = {
  ...chakraTheme.fonts,
  mono: `'Menlo', monospace`,
};

const breakpoints = ['360px', '768px', '1024px', '1440px'];
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];

const theme = {
  ...chakraTheme,
  colors: { ...chakraTheme.colors, black: '#16161D' },
  fonts,
  breakpoints,
  icons: { ...chakraTheme.icons },
};

export default theme;
```

As far as I've been able to work out, the problem getting the `render` function to work comes from the passing of theme down from parent components, causing siblings not to render correctly or at all. The solution to this was found in the [testing-library](https://testing-library.com/docs/react-testing-library/setup#custom-render) docs under setting up a custom `render` . The only changes I needed to implement were passing down my theme file and the `CSSReset` just for consistency.

```javascript
// /tests/test-utils.js
/* eslint-disable react/jsx-filename-extension */
import React from 'react';
import { render } from '@testing-library/react';
import { ThemeProvider, CSSReset } from '@chakra-ui/core';
import theme from '../src/theme';

const AllTheProviders = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <CSSReset /> {children}
    </ThemeProvider>
  );
};

const customRender = (ui, options) =>
  render(ui, {
    wrapper: AllTheProviders,
    ...options,
  });

// re-export everything
export * from '@testing-library/react';

// override render method
export { customRender as render };
```

Now that we have extended the `render` component, we can import it directly from our `test-utils.js` file and proceed to test as usual. Everything should be rendering now, and we should be able to test our components to our hearts' desire.

```javascript
import React from 'react';
import { screen } from '@testing-library/react';
import { render } from './test-utils';
import RecipeCard from '../src/components/card';

it('renders a card', () => {
  const title = 'heyoooo';
  const desc = 'basic card example';
  const rating = 4;
  render(<RecipeCard title={title} description={desc} rating={rating} />);

  expect(screen.getByText(title)).toBeInTheDocument();
  expect(screen.getByText(desc)).toBeInTheDocument();
});
```

Testing in applications that use Chakra-UI and react testing library

chris bailey

Recent Posts

An Introduction to the Almighty DOM

Testing Chakra-UI by way of React Testing Library