1 of 100

DUKE

Site Navigation

Navigate my docs

📖 Storybook

Storybook is an open source tool for developing UI components in isolation. It essentially gives us a sandbox to showcase and test the components we'll use throughout our app.

It allows us to develop more efficiently (we can develop our components in isolation within Storybook, rather than developing on the page of the app), and also allows the design and UI teams to interact with our components as we build them. They can also change the values of the component's props to see how the component will react as it receives different data.

To get it up and running navigate to the app repo and, from the command line, enter:

Let's first discuss some of the core principles of Storybook (we'll use examples from our own app where possible), before then diving into the anatomy of a typical story.

Stories

A story, much like a React component, is a function that describes how to render a component.

You can have multiple stories per component, meaning Storybook gives us the power to describe multiple rendered states.

For a very simple example using the PushDownPanel component from our own app, we might first describe the component with it's default state, but then add a story that describes a different rendered state.

So here's how the initial default PushDownPanel might look:

And then we can add variations based on different states, for example a version that uses icons:

And the new stories will show up in the sidebar navigation, like so:

Args

Story definitions can be further improved to take advantage of Storybook's "args" concept.

A story is a component with a set of arguments (props), and these arguments can be altered and composed dynamically. This gives Storybook its power (they even refer to this as a superpower in their docs!), allowing us essentially to live edit our components.

Most of the time the type of arg will be [inferred automatically](https: //storybook.js.org/docs/react/api/argtypes#automatic-argtype-inference), however we can use ArgTypes to further configure the behavior of our args, constraining the values they can take and generating relevant UI controls.

Controls

Controls allow designers and developers to explore component behavior by mucking about with its arguments.

Storybook feeds the given args property into the story during render. Each of the args from the story function will now be live editable using Storybook's Controls panel, so we can dynamically change components in Storybook to see how they look with different settings and data:

This essentially evolves Storybook into an interactive documentation tool, allowing developers and stakeholders to stress test components, for example by adding huge strings of text that might help expose UI problems.

Controls can be configured to use UI elements that we deem most appropriate according to the data that we're trying to manipulate; some examples from our own components include a radio button for manipulating background color:

A select menu to control the number of items that render:

And for our Hero component, a mixture of text inputs, boolean switch and radio group (screen shot of how these controls render follows the code):

Addons are plugins that extend Storybook's core functionality, packaged as NPM modules. Once [installed and registered](https: //storybook.js.org/docs/react/addons/install-addons) they will appear in the addons panel, a reserved place in the Storybook UI below the main component.

One such addon we use is the Accessibility addon, which helps to make our UI components more accessible. Simply select the Accessibility tab from the aforementioned addons panel, and there you will see any Violations, Passes and Incomplete requirements pertaining to accessibility.

We also use the Viewport [toolbar](https: //storybook.js.org/docs/react/get-started/browse-stories#toolbar) item, which allows us to adjust the dimensions of the iframe our stories are rendered in, making it nice to test responsive UIs.

Anatomy of a Story

Stories exist alongside the other component files as stories.js.

Here's an example of how a typical story might take shape:

Let's break this down line by line:

Component Setup: So we start off with your normal component setup, standard stuff: importing React, importing your component and (if your component gets data from Sitecore) importing any data that might be required.

Data Composition: After the component setup, we next move on to the process of essentially distilling the data recieved from Sitecore into only the parts we need - you can read more about this process in not only one spot of our docs, but two! Here and here.

Exporting Stories: After composing the data, we move on to one of the key ingredients of a story: the default export that describes the component. It's a function that returns a component's state given a set of arguments; it describes how to render a component.

It's a story! Behold. Don't get them wet, don't expose them to bright light, and most importantly don't feed them after midnight!

Were we to add any other stories beyond the default, we would then add named exports that would describe the additional stories.

We can also add ArgTypes here if we need to configure our args beyond Storybook's automatically-generated UI controls.

In the example above, we're setting backgroundColor as a radio button so the user can choose between different background colors, and setting the default as white.

Template Definition: Now that our stories are exported, we move on to defining a master template (Template) for our component's stories, and passing in our args.

We can then reuse this template across stories. Template.bind({}) makes a copy of the function, reducing code duplication. This is a [standard JavaScript technique](https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) for making a copy of a function, and allows each exported story to set its own properties.

And finally we spread in our component's props (...props), making data available to our component as it would be in the regular app.

storybookCustomArgs

The way in which Storybook automatically infers a set of argTypes based on each component's props can often lead to a lot of unnecessary UI controls rendering.

We have a function for that! In the lib/helpers/index.ts file you can find a very cool function called storybookCustomArgs, which allows us to configure which props we would like to render controls for in the Storybook Controls panel.

createStoryOptions

Oftentimes our component data will come through to us a single array, but in order for Storybook to render the controls in our desired way, we need that data to be a multi-dimenstional array.

Again we have a nifty function for that! Here's an example of both storybookCustomArgs and createStoryOptions Storybook helper functions at work:

Resources

[Learn Storybook](https: //www.learnstorybook.com) - a guided tutorial through building a simple application with Storybook
[Component Driven User Interfaces](https: //www.componentdriven.org) - learn more about the component-driven approach that Storybook enables
[Storybook Addons](https: //storybook.js.org/addons) - supercharge Storybook with advanced features and new workflows

Self Link

Duke Training:

query

searches

hits

pageHits

sectionHits

Website Navigation

General Info

Sitecore

Udemy

https://www.udemy.com/course/react-and-typescript-build-a-portfolio-project

DNT-2843 EVCalculator

Controls:

Name

Description

Default

Control

inputs*

DNT-2423 Throttle scroll event listeners

See: src/components/SecondaryNav/index.tsx - L:99

We probably don't need event fired for every single scroll.

Secondary Nav

//Calculator/index.tsx

import React from "react";
import Input from "./inputComponents/Input";
import Stepper from "./inputComponents/Stepper";
import Slider from "./inputComponents/Slider";

const Calculator = () => (
  <section className="px-16 md:px-24 py-32 md:py-48">
    <div className="mb-48 items-center flex">
      <Slider
        prompt="Prompt goes here"
        defaultVal="88888"
        min="0"
        max="100000"
        label="Number Slider Title"
      />
    </div>
    <div className="flex flex-1">
      <Stepper prompt="Prompt goes here" defaultVal="1" />
      <Input
        prompt="Prompt goes here"
        defaultVal="500"
        label="per month"
        isInDollars={true}
      />
    </div>
  </section>
);

export default Calculator;

//src/components/Calculator/outputComponents/YearlySavings.tsx

import { YearlyOutputProps } from "../types";

const avgDaysInMonth = 30.437;
const avgDaysInYear = 365.25;

const formatMoney = (money: number) => {
  const roundedNum = Math.round(money * 100) / 100;
  const arr = roundedNum.toLocaleString().split(".");
  const cents = `${arr[1] || ""}00`.slice(0, 2);
  const dollars = arr[0];
  return {
    dollars,
    cents,
    full: `$${dollars}.${cents}`,
  };
};

const YearlySavings = ({
  dailySavings = 0,
  headline = "Total Yearly Savings",
  monthlyText = "Monthly Savings",
  dailyText = "Daily Savings",
  description,
}: YearlyOutputProps) => {
  const annual = formatMoney(dailySavings * avgDaysInYear);
  const monthly = formatMoney(dailySavings * avgDaysInMonth);
  const daily = formatMoney(dailySavings);

  return (
    <div>
      <h4 className="text-blue text-xl-fixed">{headline}</h4>
      {/* need to adjust line height to vertically top align */}
      <p
        className="text-blue my-12 text-2xl-fixed align-top"
        style={{ lineHeight: "55px" }}
      >
        $
        <span className="text-3xl-fixed align-top leading-none">
          {annual.dollars}
        </span>
        {`.${annual.cents}`}
      </p>
      <div className="flex flex-row justify-center">
        <div className="border-r px-32 border-gray">
          <p
            className="text-blue align-top text-lg-fixed"
            style={{ lineHeight: "25px" }}
          >
            $<span className="text-xl-fixed align-top">{daily.dollars}</span>
            {`.${daily.cents}`}
          </p>
          <p className="text-gray-dark text-xs">{dailyText}</p>
        </div>
        <div className="px-32">
          <p
            className="text-blue align-top text-lg-fixed"
            style={{ lineHeight: "25px" }}
          >
            $<span className="text-xl-fixed align-top">{monthly.dollars}</span>
            {`.${monthly.cents}`}
          </p>
          <p className="text-gray-dark text-xs">{monthlyText}</p>
        </div>
      </div>
      {description && (
        <p className="mt-32 text-gray-dark text-md">{description}</p>
      )}
    </div>
  );
};

export default YearlySavings;

//src/components/Calculator/test.tsx

import "@testing-library/jest-dom";
import Input from "src/components/Calculator/inputComponents/Input";
import Slider from "src/components/Calculator/inputComponents/Slider";
import YearlySavings from "./outputComponents/YearlySavings";
import { renderWithCTX, screen, fireEvent } from "src/lib/testWrappers";

const props: Parameters<typeof Input>[0] = {
  prompt: "Current Gas Price",
  defaultVal: "3.12",
  label: "per gallon",
  isInDollars: true,
};

describe("calculator input", () => {
  it("should render", () => {
    renderWithCTX(<Input {...props} />);
    const input = screen.getByRole("textbox", {
      name: `${props?.prompt} ${props?.label}`,
    });
    expect(input).toBeInTheDocument();
    expect(input).toHaveAttribute("value", props.defaultVal);
  });
  it("should prefix with $ if applicable", () => {
    const { rerender } = renderWithCTX(<Input {...props} />);
    let currency: HTMLElement | null = screen.getByText(/\$/i);
    expect(currency).toBeInTheDocument();
    rerender(<Input {...props} isInDollars={false} />);
    currency = screen.queryByText(/\$/i);
    expect(currency).not.toBeInTheDocument();
  });
});

describe("calculator slider input", () => {
  const props = {
    prompt: "How many miles do you drive daily?",
    defaultVal: "160",
    label: "Daily Miles",
    min: "0",
    max: "320",
    step: "1",
  };
  it("should render", () => {
    renderWithCTX(<Slider {...props} />);
    const slider = screen.getByRole("slider", {
      name: `${props.prompt} ${props.label}`,
    });
    const input = screen.getByRole("textbox", {
      name: `${props.prompt} ${props.label}`,
    });
    const label = screen.getByText(/daily miles/i);
    const heading = screen.getByRole("heading", {
      name: /how many miles do you drive daily\?/i,
    });
    expect(slider).toBeInTheDocument();
    expect(input).toBeInTheDocument();
    expect(label).toBeInTheDocument();
    expect(heading).toBeInTheDocument();
  });
  it("should default to midpoint between min and max when defaultVal is missing", () => {
    renderWithCTX(<Slider {...props} defaultVal="" min="100" max="300" />);
    const slider = screen.getByRole("slider", {
      name: `${props.prompt} ${props.label}`,
    });
    expect(slider).toHaveAttribute("value", "200");
  });
  it("should keep the same slider and text input values", () => {
    renderWithCTX(<Slider {...props} />);
    const slider = screen.getByRole("slider", {
      name: `${props.prompt} ${props.label}`,
    });
    const input = screen.getByRole("textbox", {
      name: `${props.prompt} ${props.label}`,
    });
    // slider changes input
    fireEvent.change(slider, { target: { value: 28 } });
    expect(input).toHaveAttribute("value", "28");
    // input changes slider
    fireEvent.change(input, { target: { value: 140 } });
    expect(slider).toHaveAttribute("value", "140");
  });
});

describe("yearly savings output", () => {
  const props = {
    headline: "Yearly Savings",
    monthlyText: "Monthly Savings",
    dailyText: "Daily Savings",
    dailySavings: 2.22,
  };
  it("should render", () => {
    renderWithCTX(<YearlySavings {...props} />);
    const heading = screen.getByRole("heading", { name: props.headline });
    const daily = screen.getByText(props.dailyText);
    const monthly = screen.getByText(props.monthlyText);
    expect(heading).toBeInTheDocument();
    expect(daily).toBeInTheDocument();
    expect(monthly).toBeInTheDocument();
  });
  it("should properly display rounded monetary amounts", () => {
    renderWithCTX(<YearlySavings dailySavings={7.998} />);
    const dollars = screen.getByText("8");
    const cents = screen.getByText(/\$\.00/i);
    expect(dollars).toBeInTheDocument();
    expect(cents).toBeInTheDocument();
  });
});

// Stepper Test.tsx



import '@testing-library/jest-dom';
import Input from 'src/components/Calculator/inputComponents/Input';
import Slider from 'src/components/Calculator/inputComponents/Slider';
import YearlySavings from './outputComponents/YearlySavings';
import { renderWithCTX, screen, fireEvent } from 'src/lib/testWrappers';

const props: Parameters<typeof Input>[0] = {
  prompt: 'Current Gas Price',
  defaultVal: '3.12',
  label: 'per gallon',
  isInDollars: true,
};

describe('calculator input', () => {
  it('should render', () => {
    renderWithCTX(<Input {...props} />);
    const input = screen.getByRole('textbox', {
      name: `${props?.prompt} ${props?.label}`,
    });
    expect(input).toBeInTheDocument();
    expect(input).toHaveAttribute('value', props.defaultVal);
  });
  it('should prefix with $ if applicable', () => {
    const { rerender } = renderWithCTX(<Input {...props} />);
    let currency: HTMLElement | null = screen.getByText(/\$/i);
    expect(currency).toBeInTheDocument();
    rerender(<Input {...props} isInDollars={false} />);
    currency = screen.queryByText(/\$/i);
    expect(currency).not.toBeInTheDocument();
  });
});

describe('calculator slider input', () => {
  const props = {
    prompt: 'How many miles do you drive daily?',
    defaultVal: '160',
    label: 'Daily Miles',
    min: '0',
    max: '320',
    step: '1',
  };
  it('should render', () => {
    renderWithCTX(<Slider {...props} />);
    const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
    const input = screen.getByRole('textbox', { name: `${props.prompt} ${props.label}` });
    const label = screen.getByText(/daily miles/i);
    const heading = screen.getByRole('heading', { name: /how many miles do you drive daily\?/i });
    expect(slider).toBeInTheDocument();
    expect(input).toBeInTheDocument();
    expect(label).toBeInTheDocument();
    expect(heading).toBeInTheDocument();
  });
  it('should default to midpoint between min and max when defaultVal is missing', () => {
    renderWithCTX(<Slider {...props} defaultVal="" min="100" max="300" />);
    const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
    expect(slider).toHaveAttribute('value', '200');
  });
  it('should keep the same slider and text input values', () => {
    renderWithCTX(<Slider {...props} />);
    const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
    const input = screen.getByRole('textbox', { name: `${props.prompt} ${props.label}` });
    // slider changes input
    fireEvent.change(slider, { target: { value: 28 } });
    expect(input).toHaveAttribute('value', '28');
    // input changes slider
    fireEvent.change(input, { target: { value: 140 } });
    expect(slider).toHaveAttribute('value', '140');
  });
});

describe('yearly savings output', () => {
  const props = {
    headline: 'Yearly Savings',
    monthlyText: 'Monthly Savings',
    dailyText: 'Daily Savings',
    dailySavings: 2.22,
  };
  it('should render', () => {
    renderWithCTX(<YearlySavings {...props} />);
    const heading = screen.getByRole('heading', { name: props.headline });
    const daily = screen.getByText(props.dailyText);
    const monthly = screen.getByText(props.monthlyText);
    expect(heading).toBeInTheDocument();
    expect(daily).toBeInTheDocument();
    expect(monthly).toBeInTheDocument();
  });
  it('should properly display rounded monetary amounts', () => {
    renderWithCTX(<YearlySavings dailySavings={7.998} />);
    const dollars = screen.getByText('8');
    const cents = screen.getByText(/\$\.00/i);
    expect(dollars).toBeInTheDocument();
    expect(cents).toBeInTheDocument();
  });
});



describe('calculator slider input', () => {
  const props = {
    prompt: 'How many miles do you drive daily?',
    defaultVal: '160',
    label: 'Daily Miles',
    min: '0',
    max: '320',
    step: '1',
  };
  it('should render', () => {
    renderWithCTX(<Slider {...props} />);
    const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
    const input = screen.getByRole('textbox', { name: `${props.prompt} ${props.label}` });
    const label = screen.getByText(/daily miles/i);
    const heading = screen.getByRole('heading', { name: /how many miles do you drive daily\?/i });
    expect(slider).toBeInTheDocument();
    expect(input).toBeInTheDocument();
    expect(label).toBeInTheDocument();
    expect(heading).toBeInTheDocument();
  });
  it('should default to midpoint between min and max when defaultVal is missing', () => {
    renderWithCTX(<Slider {...props} defaultVal="" min="100" max="300" />);
    const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
    expect(slider).toHaveAttribute('value', '200');
  });
  it('should keep the same slider and text input values', () => {
    renderWithCTX(<Slider {...props} />);
    const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
    const input = screen.getByRole('textbox', { name: `${props.prompt} ${props.label}` });
    // slider changes input
    fireEvent.change(slider, { target: { value: 28 } });
    expect(input).toHaveAttribute('value', '28');
    // input changes slider
    fireEvent.change(input, { target: { value: 140 } });
    expect(slider).toHaveAttribute('value', '140');
  });
});

describe('yearly savings output', () => {
  const props = {
    headline: 'Yearly Savings',
    monthlyText: 'Monthly Savings',
    dailyText: 'Daily Savings',
    dailySavings: 2.22,
  };
  it('should render', () => {
    renderWithCTX(<YearlySavings {...props} />);
    const heading = screen.getByRole('heading', { name: props.headline });
    const daily = screen.getByText(props.dailyText);
    const monthly = screen.getByText(props.monthlyText);
    expect(heading).toBeInTheDocument();
    expect(daily).toBeInTheDocument();
    expect(monthly).toBeInTheDocument();
  });
  it('should properly display rounded monetary amounts', () => {
    renderWithCTX(<YearlySavings dailySavings={7.998} />);
    const dollars = screen.getByText('8');
    const cents = screen.getByText(/\$\.00/i);
    expect(dollars).toBeInTheDocument();
    expect(cents).toBeInTheDocument();
  });
});

export default {
  title: "Components/Accordion",
  component: AccordionComponent,
  argTypes: {
    theme: {
      name: "Theme",
    },
    closeOthers: {
      name: "One Panel Open At A Time",
    },
  },
};

const Template = (args) => <AccordionComponent {...args} />;

export const Primary = Template.bind({});

Primary.args = {
  ...props,
};

argTypes: {
  title: {
    control: {
      type: 'text',
    },
  },
  subtitle: {
    control: {
      type: 'text',
    },
  },
  link: {
    control: 'boolean',
  },
  ctaType: {
    control: {
      type: 'inline-radio',
      options: ['ImageSlide', 'VideoSlide'],
    },
  },
},

import React from "react";
import MyComponent from "./index";
import { Data } from "./data";
import { MyComponent as MyComponentComposition } from "../../lib/composition";

const props = MyComponentComposition({ fields: Data });

export default {
  title: "Components/MyComponent",
  component: MyComponent,
  argTypes: {
    backgroundColor: {
      control: {
        type: "radio",
        options: ["white", "gray"],
      },
      defaultValue: "white",
    },
  },
};

const Template = (args) => <MyComponent {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  ...props,
};

...

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
  argTypes: {
    backgroundColor: {
      control: {
        type: 'radio',
        options: ['white', 'gray'],
      },
      defaultValue: 'white',
    },
  },
};

...

...

import { storybookCustomArgs, createStoryOptions } from 'src/lib/helpers';


const props = BulletedOverviewComposition(Data);

const itemsToShow = createStoryOptions(props.items);

export default {
  title: 'Components/Bulleted Overview',
  component: BulletedOverview,
  argTypes: {
    ...storybookCustomArgs(props, BulletedOverview, [], false),
    items: {
      name: 'How many items?',
      control: {
        type: 'select',
        options: {
          ...itemsToShow,
        },
      },
    },
  },
};

...

/* eslint-disable complexity */
/* eslint-disable max-lines */
import React, { useState, useRef, useEffect } from "react";
import { SecondaryNavType } from "./types";
import { NavItem } from "./components/NavItem";
import { DropDownMenu } from "./components/DropDownMenu";
import { useLocation } from "react-router-dom";

const SecondaryNav = ({ items, suppressNav }: SecondaryNavType) => {
  const currentItems = items[0];
  const [active, setActive] = useState(-1);
  let { pathname } = useLocation();
  pathname = pathname?.split(" ").join("-").toLowerCase

  const isItemActive = (index: number) => active === index;
  // Need to check if the current page is the route of a top level page or any subpages or subpages' subpages so we can display the glorious teal bar
  const selectedIndex: Array<number> = [];
  let topLevelSelected: number;
  if (currentItems) {
    // check if the current page is one of the top level navItems in the blue bar
    topLevelSelected = currentItems.subpages.findIndex(
      (x) => x.route.toLowerCase() === pathname
    );
    // check if the current page is in any of the subpages
    for (let i = 0; i < currentItems.subpages?.length; 
      const select = currentItems.subpages[i]?.subpages?.findIndex(
        (x) => x.route.toLowerCase() === pathname
      );
      if (select !== -1) {
        selectedIndex.push(i);
        break;
      } else {
        for (
          let ii = 0;
          ii < currentItems.subpages[i]?.subpages[ii]?.subpages?.length;
          ii++
        ) {
          const select = currentItems.subpages[i]?.subpages[
            ii
          ]?.subpages?.findIndex((x) => x.route.toLowerCase() === pathname)
          if (select !== -1) {
            selectedIndex.push(i);
            break;
          }
        }
      }
    }
  }

  const isItemSelected = (index: number) => selectedIndex.indexOf(index) !==

  const hasSubPages = currentItems?.subpages.length > 0;

  const getNumberOfCols = (index: number) => {
    if (currentItems?.subpages[index].subpages[0]?.subpages?.length) {
      return currentItems.subpages[index].subpages.length;
    }
    return 1;
  };

  const dropdownDirection = (index: number) => {
    const navItemsLength = currentItems?.subpages.length;
    const numberOfCols = getNumberOfCols(index);
    const placeInNav = index + 1;
    const displayToRight = navItemsLength - placeInNav >= numberOfCols;
    const displayToLeft = placeInNav > numberOfCols;
    const leftSide = placeInNav <= navItemsLength / 2;

    if (displayToRight) {
      return { side: "left-0", position: "relative", cols:
    } else if (displayToLeft) {
      return { side: "right-0", position: "relative", cols:
    } else if (leftSide) {
      return { side: "left-0", position: "", cols: numberOfCols
    } else {
      return { side: "right-0", position: "", cols: numberOfCols
    }
  };

  const rootElement = useRef<HTMLDivElement | null>(null);
  const activeButton = useRef<HTMLButtonElement>(null);
  useEffect(() => {
    const handleClick = (event: Event) => {
      const cTarget = event.target as Element;
      if (
        (cTarget instanceof HTMLElement &&
          !rootElement.current?.contains(cTarget)) ||
        cTarget.tagName === "A" ||
        cTarget.tagName === "SPAN"
      ) {
        setActive(-1);
      }
    };
    window.addEventListener("click", handleClick);

    return () => {
      window.removeEventListener("click", handleClick);
    };
  }, []);

  useEffect(() => {
    const handlePress = (event: KeyboardEvent) => {
      const { key } = event;
      if (key === "Escape") {
        activeButton?.current?.focus();
        setActive(-1);
      }
    };
    window.addEventListener("keyup", handlePress);

    return () => {
      window.removeEventListener("keyup", handlePress);
    };
  }, []);

  // Close menu when scrolled off screen
  useEffect(() => {
    const handleScroll = ({ currentTarget }: Event) => {
      if (!rootElement.current) {
        return;
      }

      const headerDimensions = rootElement.current.getBoundingClientRect();

      const headerDistanceFromTop = headerDimensions.top;
      const headerHeight = headerDimensions.height;

      const scrollingDown = (currentTarget as Window).scrollY > 0;
      const headerOutOfView = headerDistanceFromTop + headerHeight < 0;

      // offScreen
      const offScreen = headerOutOfView && scrollingDown;
      if (offScreen) {
        // Close menu
        setActive(-1);
      }
    };

    // TODO Throttle event listeners
    window.addEventListener("scroll", handleScroll, { passive: true });

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  if (suppressNav || !hasSubPages) {
    return null;
  }

  return (
    <div
      className="hidden xl:block xl:-mt-px px-16 md:px-24 bg-blue text-white"
      ref={rootElement}
    >
      <nav className="relative container-4xl h-full" aria-label="Secondary">
        <ul className="flex justify-between -mx-16 h-full">
          {currentItems.subpages.map(({ subpages, ...rest }, index) => {
            const isActive = isItemActive(index);
            const isSelected =
              isItemSelected(index) || topLevelSelected === index;
            return (
              <li className={dropdownDirection(index).position} key={index}>
                <NavItem
                  {...rest}
                  currentRef={isActive ? activeButton : null}
                  isActive={isActive}
                  isSelected={isSelected}
                  onClick={() => setActive(isActive ? -1 : index)}
                  type={subpages.length ? "button" : "link"}
                />
                <DropDownMenu
                  {...{
                    subpages,
                    ...{
                      ...rest,
                      isActive,
                      dropdownDirection: dropdownDirection(index),
                    },
                  }}
                />
              </li>
            );
          })}
        </ul>
      </nav>
    </div>
  );
};

export default SecondaryNav;

    // TODO Throttle event listeners
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  if (suppressNav || !hasSubPages) {
    return null;
  }

TechnicalOverview

Component Creation - Technical Overview

Table of Contents:

Intro
Technical Overview
Practical Overview
Definition of Done
Sitecore

A Technical Overview

Generate Component Factory

The Generate Component Factory (scripts/generate-component-factory.js) generates the /src/temp/componentFactory.js file which maps React components to JSS components.

The component factory is a mapping between a string name and a React component instance. When the Sitecore Layout service returns a layout definition, it returns named components. This mapping is used to construct the component hierarchy for the layout.

The default convention uses the parent folder name as the component name, but it is customizable in generateComponentFactory().

Sometimes Sitecore references a component in a way that is different from what we want the component to be called within the application. In this case, we can provide an alias to map the Sitecore name to our component upon import:

In this case, we are telling our app that if it receives a string called HeroCarousel or HeroCarouselNocache, use the 'Hero' component. Likewise, if a string of JssAccordion is encountered, use the 'Accordion' component, and so on.

If the name of your component and its Sitecore counterpart are the same, there is no need to include an alias.

Passing Down Data Via Composition

At its simplest, the goal of the composition file is to transform the data being passed to your component from accessing deeply nested properties like this:

into this:

What does that entail exactly?

The composition file also exists in the your component directory. Sitecore sends a wealth of information down to the page related to each component. Not all of this information is needed or even useful. So the purpose of each of these functions is to strip away the unneeded data, giving our component only what it needs to render properly.

To illustrate this, in the following example, the QuickLinks component will get a single items prop returned to it, which will consist of an array of objects:

As a developer, you will be responsible for writing the composition function for your component. Since the data from Sitecore comes in all sizes and shapes, there is no "one-size-fits-all" solution, but most likely you can take a cue from the composition functions that have been written before to get a feel for how to approach a new one.

Adding files for your component

Now that you know how components are implemented within our app, how is a component actually created within the app?

Generally, each component you create will consist of at least one of the following items:

an - your React file.
a file for transforming incoming data into more concise props
a - a file for your unit tests.

Read on for more detail.

`Index.tsx`

The index file will be your main component React file, using Typescript. At a minimum, your component will require this file. Since our project uses Tailwind, your styles will mainly exist here as well. for more info.

`Test.tsx`

The test file is where your unit tests live. Tests are written in React with Typescript, using [Jest](https: //jestjs.io/en/) and [Enzyme](https: //enzymejs.github.io/enzyme/).

Jest is a popular testing library and Enzyme adds some sugar on top to make writing the tests a little easier.

You should be testing the basic functionality of your component. This may be as simple as validating that your component is rendering to mocking data and checking to make sure your component is outputting it correctly.

In all likelihood, you will need a test for every component you write, even if it is a very small test to confirm that the component is properly mounted.

`Types.ts`

This file is for type definitions and interfaces for [Typescript](https: //www.typescriptlang.org). You can store your component-specific definitions in this file and export them to your index file.

For more information on writing Typescript within our app, please check out our Typescript Style Guide.

`Stories.js`

The stories.js file creates a component. To be honest, the paradigm of writing in Storybook can be a little bit tricky to grasp at first if you don't have experience with it. And to be frank, their docs could use some work. So you are encouraged to .

In essence, however, consider your Storybook file something like an environment for your React component that enables you to run it in isolation from the rest of the app. This makes it easy to preview the functionality and, as a result, developers and designers can easily access the React component without having to navigate to a route to interact with it. This also enables you to view and manipulate it in ways that would be difficult in the context of an entire app.

If your component is extremely simple and self-contained, a Storybook file may not be necessary, or perhaps even possible. But in general, all components should have a Storybook file.

Unlike most of our other component files, we are not using Typescript in Storybook, so it is not necessary to provide types within your story file.

`Data.js`

The data.js file is meant to provide mock data to your unit tests and Storybook files. It is ignored by Webpack, so don't include any objects or functions your component needs in order to render properly.

The data file does not use Typescript since it is generally only used to provide mock JSON data.

Perhaps the most frequent use case for this file is that you can copy/paste the data exactly as it comes from Sitecore. Since Storybook files and unit tests exist in isolation, they won't receive Sitecore data. But your React component will be relying on data to render correctly. So the dummy data placed within the data file ensures your React component will still have similar data in the same shape as the Sitecore data it would have in real-world conditions. Thus, even in isolation, you can ensure your component looks and behaves in a consistent and predictable manner.

On occasion, you may encounter a situation where you have a hard-coded object or map that is used for reference within your app. While these can be useful, sometimes they may clutter up your main index.tsx file. In this case, you may be tempted to house those values in the data.js file and import them into your React component from there. But as was mentioned above, these files are ignored by Webpack, so any necessary additional data you would want to exist in a file should be added to a file named something other than data.js.

Depending on the complexity of your component, this file may not be necessary. For example, if your React component doesn't get called from Sitecore, doesn't have JSS fields, or it doesn't require any extra hard-coded data, then you will not need a data file.

The folder

Of course, all of these files must live somewhere, and that place is in a folder. This folder should of course be named after your component and added to the /components directory. Resist the temptaion to take creative liberties with the name of the folder, as this will be the folder that will be imported into the Component Factory (see /src/temp/componentFactory.js) and importing a folder named TheGreatestComponentYouHaveEverFeastedYourMiserableEyeballsOn for the Modal component won't make a lot of sense out of context, no matter how fitting it seemed in the moment.

< Previous Next >

Installing Citrix Workspace on Chrome OS Devices

Installing, Configuring, and Uninstalling Citrix Workspace on Chrome OS Devices

Contents

****

Installing Citrix Workspace on Chrome OS Devices ............................................................. 2

Configuring Citrix Workspace on Chrome OS Devices.......................................................... 3

Secondary configuration of Citrix Workspace on Chrome OS Devices…………………. 6

Uninstalling Citrix Workspace on Chrome OS Devices ......................................................... 9

Installing Citrix Workspace on Chrome OS Devices

1. On the Chrome OS device, open the Chrome Web Store and search for ‘Citrix Workspace’. Select ‘Citrix Workspace for Chrome OS’. Click Add to Chrome and Add App When prompted.

****

Configuring Citrix Workspace on Chrome OS Devices

****

1. Upon installation, click the Launcher Icon and then click the Citrix Workspace icon. You may need to click on All Apps to see the Citrix Workspace icon.

****

2. You will be prompted to enter a server address: Enter

****

3. Next, enter your Username, Password and your Passcode when prompted. Click Log On once you’ve finished entering your information.

NOTE:

• When using a physical key fob, your Passcode is your unique PIN + RSA token ID.

• When using a soft token, the PIN is not included as part of the Passcode.

4. The available Citrix applications and desktops should now appear as icons. You have successfully installed the Citrix Workspace software on your computer.

5. To launch a virtual desktop, select the Desktops tab at the bottom of the screen and select the assigned desktop. And to launch a virtual application, select the Apps tab at the bottom of the screen and select the application.

****

Secondary configuration of Citrix Workspace on Chrome OS Devices

****

NOTE: If you have not set up an authentication method in O365, by using this job aid , please do so BEFORE adding the Multifactor Authentication Citrix Portal URL

****

- Be sure you set up a primary authentication method and a secondary authentication method.

****

o Choose your preferred primary authentication method from the drop-down box under “what’s your preferred option?”

****

1. Upon installation, click the Launcher Icon and then click the Citrix Workspace icon. You may need to click on All Apps to see the Citrix Workspace icon.

2. You will be prompted to enter a server address: Enter in order to setup the Citrix Portal that utilizes Multifactor Authentication. Afterwards, select Connect.

3. Next, enter your Username and Password when prompted. Click Log On once you’ve finished entering your information.

****

NOTE: You will be prompted to authenticate via the method that you setup within your Office 365 Authentication Profile:

· Via a call to a phone number you provided during setup (e.g., mobile phone number, secondary mobile phone number, or home phone number where you will be working)

· The Microsoft Authenticator application

****

4. To access your assigned virtual desktops or virtual applications, click either the DESKTOPS or APPS buttons at the top of the page.

****

Uninstalling Citrix Workspace on Chrome OS Devices

1. Open the Launcher (Magnifying glass) on your taskbar. Click the upward arrow to show all installed apps and locate the Citrix Workspace icon.

2. Right-click the Citrix Workspace Icon. If you are not using a mouse, then press the Alt key when you click on the Citrix Workspace icon to bring up the ‘right click’ menu options

3. Click Uninstall. Click Remove when asked to confirm removal.

****

Code Review:

Code Reviews

Created by Anonymous, last modified on Oct 08, 2020

"Everybody is junior at something", or so they say. You may be fairly early on in your career but have some experience working in a large enterprise or business where structured Code Reviews were the order of the day. Or you may have many years experience on a loose team that didn't really take Code Review very seriously. Thus, you may find that while you are a senior developer, you are "junior" (I honestly hate that term) when it comes to Code Reviews, and vice versa. Whatever the case, Ninja Turtles values Code Review. Let's talk about it.

The purpose of this document is to create a discussion from which we may create a kind of Working Agreement around Code Review on Ninja Turtles. It sets out to do so by addressing the following:

The current state of our code review process
Suggestions about moving forward
How to improve at Code Reviews and PRs in general

State of the Code Review

The way that Ninja Turtles does Code Review is pretty much exclusively via Pull Requests; if you are a developer on Ninja Turtles, this is where most of your feedback will come from. At present, the most experienced of our team does most of the Code Review, and indeed it sometimes seems as though every PR is reviewed by 1 or 2 people, one of whom approves the PR before it is merged. Put simply, it's sort of the exemplification of the in action. For the purposes of this conversation, I will refer to the ones doing most of the reviewing as "the 20%" (following the adage that 80% of the work is done by 20% of the team) and the devs that are doing less of the reviewing as "the 80%". Obviously this is not exact, but you get the idea.

The goal should be to get all developers to the point where they're contributing (and receiving) a more equitable share of Code Review, rather than the current 80/20 divide.

Why Improve Code Review?

As noted above, Ninja Turtles is a team that benefits from a diversity of experience levels, but the natural consequence of this is that the developers with the most knowledge and experience with code review (the 20%) end up doing most of the code review. This stands to reason, and is actually quite normal, and probably beneficial. But it can be taxing for those devs doing the lion's share of the reviewing. It is a knife that cuts both ways; while those experienced devs may begin to feel resentment that the responsibility rests on them, the other devs feel inadequate, that they're not pulling their weight, or that they aren't given a fair chance to review before the stuff in their wheelhouse is "taken". Thus, everyone gets further entrenched in their respective roles. This is not great, but it's a problem that won't solve itself. It will require action as a team (more on this later).

But beyond that, there are several compelling reasons for us to improve on our Code Reviews.

From a development standpoint, Code Review is the least expensive way to catch mistakes.
Code Review provides opportunities to spread domain knowledge across the team, thereby preventing a complete reliance on trickle-down economics, er, knowledge.
Code Reviews can provide opportunities to learn, mentor, and teach.

"Effectiveness of code review for determining faults in software is between 30% and 35% more effective than standard unit testing"
Steve McConnell, Code Complete

So, we understand the value of Code Review and we see a need to improve, but exactly how do we improve them?

Going Forward

I did a lot of reading and consulted some mentors to arrive at some of these conclusions. I will provide the resources I consulted below; I found them to be quite useful, and I encourage all who are interested to review them. After this, I propose a few changes. I will lay them out here and my hope is we can have a conversation about which changes we would like to adopt going forward and thus create something of a "Working Agreement" surrounding Code Reviews. Doing so obviously won't cause a miraculous change overnight, but I think implementing some of these suggestions is a good first step toward moving away from the 80/20 divide described above and getting everyone on the same level.

General suggestions:

With two approvals now required to on a PR, perhaps it would make sense to rotate a more senior reviewer with a less senior reviewer or two (this would fall inline with guidelines I've seen) and let them tackle it independently. Ideally, they are both able to approve or provide feedback to the dev until they are ready to approve, but if not, after a certain period of time, the devs could come together and talk about why they are not feeling comfortable approving the PR.
Maybe we should define our a little bit more clearly (currently, it has exactly one entry ) and we should definitely set up linting to enforce some of the simple things, such as consistent formatting. Devs should not be pushing up code that has completely preventable errors and reviewers should not be wasting precious cognitive energy on simple errors that can be caught by computers

Things to think about and maybe discuss:

Expecting someone to get better at code reviews by simply looking at someone else's code just isn't a very good or efficient methodology. (See Jim Bird's article below). What can we do bridge that gap in a more proactive way? Perhaps some kind of structured "pair reviewing"?
I touched on this above but another thing that Jim Bird suggests is keeping the number of reviewers small. In the long run, I see the value in having all the devs swarm it and knocking out a PR, but in the shorter term, it might make sense to slow down and focus on the quality over quantity and getting all devs up to around the same contribution level?

For the 20% currently doing 80% of the reviewing:

Consider alternating PRs. Maybe everyone doesn't need to look at every PR, but a few people look at different ones?
- Not sure what this would look like, but I'm sure it's doable.
Step back. Don't be the first to review. Give some space to let some of the other devs (the 80%) step up. This will hopefully take a bit of the pressure off of you and lets the 80% leave the kind of feedback that may be easier for them to recognize as they level up their Code Review game.

For the 80%:

for things you want to review. Below you'll find an overview of the kinds of things to look for.
Step up.
If we implement the changes suggested above, you will have some room to make some suggestions early on. But having the 20% step back only works if the 80% step up.

Sources:

Duke Company

Portal Guide - Home

Excerpt

The Modern Portal Project Is Complete! »

LAN IDs, Employee IDs, and Responsibility Codes do not currently show in modern search on a person's profile card. Please use our specialized People Search Page or access the information in Delve.

The Portal is your default home page when you launch the Internet on your Duke Energy workstation. You can also access the Portal from your personal laptop or mobile device.

The Portal is a robust communication tool designed to be informative and engaging. On the home page, top company stories and employee features are posted frequently. The home page also contains media articles, company events, and personnel announcements. You are encouraged to add comments to articles and submit company-sponsored events and accomplishments.

The Portal also provides access to key transactional items such as company facts and branding, HR information (e.g., benefits and pay), policies, services (e.g., mail service and expense management), departments, operations, and other tools and applications.

Portal Site Managers

Brand, Creative & Digital

Contact & Personal Information

Contingent Worker Actions

COVID-19 Employee Resources

COVID-19 Manager Resources

Customer Experience & Services

PORTAL GUIDE

Manage Your Information

Delve profile pages exist for everyone with a LAN ID who is an employee of or contingent worker for Duke Energy.

Where did my profile information come from?

The organizational and location information in your Delve Portal profile comes from Active Directory.

This section of your Delve Profile is optional. You can choose to enter additional information about yourself, including:

About me
Home phone
Projects

Filling in this information will help others find you when they're looking for someone with knowledge or experience about your areas of expertise, or it can help you connect with others who share your interests.

To edit this information, go to your and click the Update Profile button.

Manage Your Photo in Workday

Manage Your Photo in O365

Instructions for O365 Photos

When you go to Delve, click Me in the left navigation. Use the camera icon over your photo to change your picture. This will change it throughout the O365 environment, including Outlook, Teams, and SharePoint. Changing your photo here will not push it to Workday. Work is underway to enable the Workforce Photo Tool to integrate with O365.

Photo Guidelines

Your photo must be business-appropriate. That would be:

A forward-facing, head-and-shoulders shot of you without sunglasses, ball cap, kids or family dog serves as a good starting point. Consider the limited space that will display your face when you select a photo. The goal is to see what you look like!
Please follow copyright rules when selecting a photo to update. You must own rights to any image you post.

PORTAL GUIDE

Accessing the Portal Remotely

You can access the Portal from any computer or mobile device. You do not need to be on the Duke Energy network, and you do not need to use a Duke Energy computer or device that is in the Personal Mobile Device program.

From the SharePoint App

You can download the SharePoint app from an app store. The home icon in the app takes you to the Portal homepage.

From a Mobile Browser

Open your web browser (i.e., Edge, Chrome or a similar Web browser)
Type in the address bar at the top of your Web browser and press Enter.
If you are not on the network or on a device managed through the Personal Mobile Device program, you will need to log into your Office 365 account.

Keep in mind that some Duke Energy applications, are not available when you are off the network, and you will experience errors if you click links to them.

PORTAL GUIDE

Intranet Design Awards

The top ten intranets in the world, published annually by the Nielsen Norman Group. We purchase and publish these reports so that we can get a glimpse behind firewalls into the best practices with other companies. Duke Energy is a two-time winner.

PORTAL GUIDE

Personal

Two External Monitors (Macbook Air)

Hi, I have a macbook air... is it at all possible for me to find a workaround that allows f

Incident ID: INC000032293420 Last Modified Date: 11 Mar 2022 18:59:06 UTC Assignee:

https://dukeenergy-vchat.onbmc.com/eschat/chat.jsp#/chat

Hi ,

Welcome to Support Chat. Please enter a question and a chat technician will soon be with you. Just type in a question, keyword or phrase below and I’ll take you to the information you’re looking for.

Bryan1:59 PM

Hi, I have a macbook air... is it at all possible for me to find a workaround that allows for me to run two external monitors in addition to the builtin one?

System1:59 PM

The following associated data has been added:

Customer Information
Incident: INC000032293420

System1:59 PM

The following associated data has been modified:

Customer Information
Incident: INC000032293420

System1:59 PM

System Message: Jamal Clair is online and ready to chat.

Jamal Clair1:59 PM

Hello my name is Jamal. Can you please provide your employee id, contact number, Computer serial number, and current location please?

System2:02 PM

System Message: undefined has rejoined the session

2:03 PM

Contact number: 551-254-5505... Serial Number is: FVFGX02PQ6L8 and my current location is NY,NY. I am not sure what my employee number is or how to access it but I am going to try to look into it.

2:04 PM

Could it be this: CW-Professional 47146?

Jamal Clair2:04 PM

Thank you

Jamal Clair2:04 PM

Do you have a dockingstation

Jamal Clair2:04 PM

docking station

2:08 PM

Yes two actually, but unfortunately the macbook air was the m1 chip was the one model apple made that doesn'‌t nativley support multiple screens. This is one of my first weeks, I think my manager said it was an accident and that I was supposed to be sent a macbook pro but I have no idea if that is still in the works. Various sources on the internet claim to have found workarounds but so far I have not been able to successfully replicate these '‌hacks'‌. If the firewall allowed me to cast via airplay then I think I could connect to my external displays wirelessly. As I speak this computer is driving three large external screens but all three are a mirror of each other with the only distinction being the builtin display which is not mirroring the other three screens.

Jamal Clair2:09 PM

is this your personal device

2:09 PM

no it is my duke device

2:10 PM

My personal computer is a pc which has no issue with this

Jamal Clair2:10 PM

so you want to be able to control multiple screens with airplay

2:10 PM

As a last resort

Jamal Clair2:10 PM

but duke firewall blocks that

2:11 PM

ideally I would be able to drive two or three external screens in the (extend... (as opposed to mirror))-display mode

2:13 PM

I don'‌t have much expertice but I figured someone else may have had this issue and found some other solution... like for instance an external gpu that can drive the extra screens ? idk tbh but prior to this job I got very comfortable with a three screen workflow and it isn'‌t the end of the world but going back down to two or one screens is a pretty significant inconvenience considering one is usually dedicated to a microsoft teams call / screen share

2:15 PM

I feel like I may be blowing this out of proportion... this is just a matter of preference that I have grown accustomed to and is not actually a necessity. I have a creeping fear that it may just not be possible with this computer.

BitLocker keys for LAPTOP-9LGJ3JGS

OPERATING SYSTEM DRIVEKey ID:\ f035f7c1-b011-4a97-ad86-a1e2b994037d\ Recovery key:\ 277827-520718-692857-678557-601997-238381-127116-121748

clone the project from https: //bitbucketp.duke-energy.com/projects/DUKCOM/repos/dxt-jss-public/browse 1. In your terminal (command line), run git clone https: //bitbucketp.duke-energy.com/scm/dukcom/dxt-jss-public.git

const { compositionFunction, component } = Composition(NavCard)(({ fields, params }) => {

const items = fields?.items.reduce(
    (acc: Parameters<typeof NavCard>[0]['items'], curr: typeof fields) => {
      return [
        {
          ...
          analytics: {
            category: 'nav-card_rectangular',
            label: title?.value || '',
            action: [cta?.text?.value, cta?.href].filter(Boolean).join(' | '),
            guid: link?.value?.id || '',
            event: 'event-click',
          },
        },
      ];
    },
    []
  );

  1. Add:

     ```
     {
       "sitecore": {
         "instancePath": "",
         "apiKey": "{9F777224-3275-4D56-BD29-371FB3C00821}",
         "deploySecret": "",
         "deployUrl": "",
         "layoutServiceHost": "https:

// composition/index.js

const QuickLinks = ({ fields }) => {
  const items = fields?.QuickLinkItems?.reduce(
    (acc, curr) => [
      ...acc,
      {
        image: { ...curr.Icon?.value },
        link: curr.Link?.value?.href,
        title: curr.Title?.value,
        id: curr.Id,
      },
    ],
    []
  );
  return { items };
};

// components/QuickLinks/index.tsx

const QuickLinks = ({ items }: { items: Array<ComponentTypes> }) => (
  <QuickLinksWrapper>
    {items?.map(({ id, ...rest }, index) => (
      <QuickLinksItem index={index} length={items.length} key={id} {...rest} />
    ))}
  </QuickLinksWrapper>
);

import track from 'src/lib/Analytics';
...

const ComponentName = ({
  ...
  analytics,
}: PropsType) => {

...
  <Button
    ...
    onClick={() => track.component(analytics)}
  >
    Click Me!
  </Button>

// MyComponent/index.tsx

/** technically, you would want to provide types in a Typescript file,
 * but we're just trying to get some data here.
 */

const MyComponent = (scData) => {
  console.log(scData);
  return <div>{JSON.stringify(scData)}</div>;
};

// Now you can copy the payload from your browser and paste it into your brand new data file!

// story.js
import React from "react";
import MyComponent from "./index";
import { MyComponent as MyComponentComposition } from "../../lib/composition";
import Data from "./data";

/**
 * create a variable with data that is in the shape that your component will be
 * expecting, as it would be from your composition file.
 * Again, this is necessary since the composition function is not called by Storybook.
 */

const props = MyComponentComposition(Data);

const Template = (args) => <MyComponent {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  /* here you can spread those props into your Storybook file, making data
   * available to your component as it would be on the actual live page.
   */
  ...props,
};

Typescript Interfaces

When we talk about a type in TypeScript, we mean a collection of things that you can do with a variable (or expression). You might be able to read or write a given property, call a function, use the expression as a constructor, or index into the object. Some objects (like Date) in JavaScript can do nearly all of those! In TypeScript, interfaces are the most flexible way of describing types.

You'll see interfaces used to describe existing JavaScript APIs, create shorthand names for commonly-used types, constrain class implementations, describe array types, and more. While they don't generate any code (and thus have no runtime cost!), they are often the key point of contact between any two pieces of TypeScript code, especially when working with existing JavaScript code or built-in JavaScript objects.

The only job of an interface in TypeScript is to describe a type. While class and function deal with implementation, interface helps us keep our programs error-free by providing information about the shape of the data we work with. Because the type information is erased from a TypeScript program during compilation, we can freely add type data using interfaces without worrying about the runtime overhead.

While that sounds like a simple, one-purpose task, interfaces role in describing types becomes manifest in a large variety of ways. Let's look at some of them and how they can be used in TypeScript programs.

Basics

To define an interface in TypeScript, use the interface keyword:

This defines a type, Greetable, that has a member function called greet that takes a string argument. You can use this type in all the usual positions; for example in a parameter type annotation. Here we use that type annotation to get type safety on the g parameter:

When this code compiles, you won't see any mention of Greetable in the JavaScript code. Interfaces are only a compile-time construct and have no effect on the generated code.

Interfaces: TypeScript's Swiss Army Knife

Interfaces get to play a lot of roles in TypeScript code. We'll go into more detail on these after a quick overview.

Describing an Object

Many JavaScript functions take a "settings object". For example, jQuery's $.ajax takes an object that can have up to several dozen members that control its behavior, but you're only likely to pass a few of those in any given instance. TypeScript interfaces allow optional properties to help you use these sorts of objects correctly.

Describing an Indexable Object

JavaScript freely mixes members (foo.x) with indexers (foo['x']), but most programmers use one or the other as a semantic hint about what kind of access is taking place. TypeScript interfaces can be used to represent what the expected type of an indexing operation is.

Ensuring Class Instance Shape

Often, you'll want to make sure that a class you're writing matches some existing surface area. This is how interfaces are used in more traditional OOP languages like C# and Java, and we'll see that TypeScript interfaces behave very similarly when used in this role.

Ensuring the Static Shape of a Class or constructor Object

Interfaces normally describe the shape of an instance of a class, but we can also use them to describe the static shape of the class (including its constructor function). We'll cover this in a later post.

Describing an Object

You can also use interfaces to define the shape of objects that will typically be expressed in an object literal. Here's an example:

Describing Simple Types

Note the use of the ? symbol after some of the names. This marks a member as being optional. This lets callers of createButton supply only the members they care about, while maintaining the constraint that the required parts of the object are present:

You typically won't use optional members when defining interfaces that are going to be implemented by classes.

Here's another example that shows an interesting feature of types in TypeScript:

Note that we didn't annotate pt in any way to indicate that it's of type Point. We don't need to, because type checking in TypeScript is structural: types are considered identical if they have the same surface area. Because pt has at least the same members as Point, it's suitable for use wherever a Point is expected.

Describing External Types

Interfaces are also used to describe code that is present at runtime, but not implemented in the current TypeScript project. For example, if you open the lib.d.ts file that all TypeScript projects implicitly reference, you'll see an interface declaration for Number:

Now if we have an expression of type Number, the compiler knows that it's valid to call toPrecision on that expression.

Extending Existing Types

Moreover, interfaces in TypeScript are open, meaning you can add your own members to an interface by simply writing another interface block. If you have an external script that adds members to Date, for example, you simply need to write interface Date { /*...*/ } and declare the additional members.*

* Note: There are some known issues with the Visual Studio editor that currently prevent this scenario from working as intended. We'll be fixing this limitation in a later release.

Describing an Indexable Object

A common pattern in JavaScript is to use an object (e.g. {}) as way to map from a set of strings to a set of values. When those values are of the same type, you can use an interface to describe that indexing into an object always produces values of a certain type (in this case, Widget).

Ensuring Class Instance Shape

Let's extend the Greetable example above:

We can implement this interface in a class using the implements keyword:

Now we can use an instance of Person wherever a Greetable is expected:

var g: Greetable = new Person();

Similarly, we can take advantage of the structural typing of TypeScript to implement Greetable in an object literal:

Tailwind CSS

Tailwind CSS is a utility-based styling library. In order to streamline and standardize things like colors and spacing within our application, an Electron theme has been created to extend Tailwind's functionality, thus making it easy for us to access some standard Duke colors, fonts, etc. As a result, you will get most of the magic of Tailwind, but with most of the colors, text, and sizing options overwritten to reflect Duke's design system.

We won't talk too much about the decisions behind why we are using this implementation here, but Chris Greufe has already done an incredible job documenting the ins-and-outs of it [here](https: //electron.duke-energy.com/foundation/utilities/utility-first). If you want to know more of the granular aspects and philosophy to our approach, you are encouraged to give it a read.

Instead, this doc will mostly focus on how the dev team actually uses this implementation and a bit about our approach, as well as a proposed style guide.

Philosophy and Approach

Tailwind CSS is our primary way of styling within the DXT-JSS-Public React App. A lot of effort and resources have been put into making Tailwind and Electron do as much of the heavy lifting for us as possible, so for maintainability's sake, every effort should be made to find a solution to style your work with Tailwind. If you're hitting a wall trying to figure out an approach that works within Tailwind, don't hesitate to reach out to a teammate. If you find yourself in the rare situation where you encounter something that simply cannot be resolved using Tailwind, we use [Styled Components](https: //styled-components.com) as our fallback. If you find that you are creating a styled component often to deal with an edge case, it's probably worth documenting [here](https: //confluence.duke-energy.com/display/DEPW/Tailwind+requests).

Tooling

There's not a lot of tooling required for Tailwind but [the Tailwind CSS Intellisense VSCode plugin](https: //marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) can be pretty helpful. Once installed, it gives suggestions for Tailwind classes as well as Electron-specific ones. It also shows a preview of the CSS rules that the utility class utilizes.

Enabling Tailwind Properties

Although Tailwind provides the flexibility to apply a wide range of modifiers (called variants in Tailwind) to a variety of CSS rules, you may occasionally find that a Tailwind class is not behaving the way you expect in a responsive context, or upon hover. This may mean that you will need to edit the Tailwind config. [You can find more info about that here.](https: //tailwindcss.com/docs/configuring-variants) Please be careful to [extend the values](https: //v1.tailwindcss.com/docs/configuring-variants), rather than simply adding them to the variant object, which will overwrite all the defaults.

Key Differences

The main difference you'll find between Tailwind's approach and Electron's is that Duke doesn't need an extensive color library. As a result, you'll find that something like text-blue-800 or bg-yellow-200 does not behave as you'd expect. Most likely you will be looking for something like text-blue-dark or bg-yellow. So the color palette will be limited, and rather than a number to modify the color, there will either be no modifier, or a modifier of -light, -lighter, -dark, or -darker.

Style Guide

Because almost all of our styles exist within utility classes, there is often no need for traditional CSS classes to style a block. It's fairly unusual to need to add a class like wrapper or large BEM classes. Occasionally, you may need to add a class to make it easier for unit tests to search for a selector. In such a case, we suggest that you use a js- prefix, and that you place it at the beginning of your utility classes.

example:

Often, the amount of classes you need to style a complex element can be rather long. In this case, it is suggested that you group your classes conceptually. Since Tailwind is a mobile-first framework, it makes sense to start with "base" styles that will be present across all sizes of the component, immediately followed by the responsive counterparts, in ascending order (md, lg, xl, etc).

Of the base styles, start with sizing (height, width, padding, margin) and other fiddly rules so that they are easily accessible to you and anyone who may need to maintain your code in the future. Utility classes that represent rules that are easily identifiable at a glance, such as text color or background color, should come secondary.

That was a lot of words, so let's look at an example.

🚫 Bad

✅ Good

That may seem a lot to unpack, so let's examine that for a second. Note that the classes start with the width property and then are immediately followed by the responsive variant. This pattern follows as we move through the margin and into the padding, which is then followed by the display types, and onto more obvious styles like font and background colors, which don't require a check of the code in order to verify the values. Finally, the rules end with the transition and duration properties, which are often "set and forget" rules.

Resources

[Styled Components](https: //styled-components.com) - documentation in case you need to step outside the Tailwind garden
[Tailwind Requests](https: //confluence.duke-energy.com/display/DEPW/Tailwind+requests) - add to the Tailwind/Electron wishlist!
[Electron Docs](https: //electron.duke-energy.com/foundation/utilities/utility-first)

React | Typescript | Tailwind | Forms | Unit Tests

Forms

Dynamically generating forms with React and Sitecore JSS

Creating the FormField

Navigate to page http: //local.duke-energy.com:3000/home/products/outdoor-lighting/contact
- This page calls the <SingleStepForm /> component in the layout json from Sitecore which have fields that look like this
<SingleStepForm /> gets rendered via its composition file converts this JSS fields object as its props.
<SingleStepForm /> checks to make sure that modelJson.value exists before parsing it from a string to actual json, creating the variable formModel.
- fields.ModelJson ie: formModel contains data for every field and their props. It's an array of objects where each object contains information about that field. After parsing the JSS, formModel
formModel then gets passed into createFormInit() to process all of this data into something more concise and manageable

const createdFields = useMemo(() => createFormInit(formModel, false), []);

The formModel array will get passed into parseFields()
parseFields() will then run each of the form objects that are inside the formModel through yet another and final parser, createForm(). It will then save these objects to a new array and filter out any nulls generated by createForm()

Side note: Important info

Since there is a lot of very important information missing from the fields.ModelJson, (input type, hidden fields, etc) from Sitecore we need a way to dynamically figure all of this out the best we can, with what we've been given. This is where mapping.ts comes in. This file contains 3 sections:
- inputMap

const inputMap: CFMappingType["inputMap"] = { alternatephone: "phone", "alternate_phone_#": "phone", captcha: "recaptcha", checkbox: "checkbox", checkbox_list: "checkboxGroup",

// ... };

regexMap
- regexMap is an object with either a validationPattern name or input type as the key with the value being an object containing an error message and RegEx pattern to be used in validation

const regexMap: CFMappingType["regexMap"] = { email: { message: "Not a valid email format", value: /^[^\s@]+@[^\s@]+.[^\s@]{2,}$/, }, lettersWhiteSpace: { message: "Can only be letters and spaces", value: /^[a-zA-ZáéíóúüÁÉÍÓÚÜñÑ-]+(\s+[a-zA-ZáéíóúüÁÉÍÓÚÜñÑ]+)*$/, }, notSameDigits: { message: "Can only contain numbers", value: /^(\d)\d*(?!\1)\d+$/, },

// ... };

const { file, props } = dataMap[inputType];

const Component = loadable(() => import(src/components/Form/${file}));

Component: The React component that was dynamically imported
data: An object containing details about the field such as maxLength, minLength, placeholder, required, etc..

file: The name of the component that was dynamically imported
id: A unique id for each field since sitecore doesn't return usable id's
props: The props returned from the dataMap lookup along with the column width for each field

<SingleStepForm /> then iterates through the createdFields array and will:
- pass the props.columns value to <FieldWrapper /> to determine how wide the field should be in CSS

Inside the FormField

Inside the /components/Form folder are all of the FormField components. These components are the default exports from each of these files such as <FormInput />
- The purpose of these components is to take the createForm() generated props that were passed in via the <SingleStepForm /> and to 'normalize' them into simpler generic props for the <Input />

const FormInput = ({ data, errors, name, props, register, validations, }: FormInputProps) => {

const { mask, type } = props || {};

const { label = "", maxLength, required, toolTipText } = data;

const propData = { error: { hasError: Boolean(errors[name]?.message), errorMessage: errors[name]?.message, }, id: label, label, mask, maxLength, name, register, required, type, validations, };

MultiStepForm

The <MultiStepForm /> is nearly identical to <SingleStepForm /> except that it has multiple steps to the form. Like <SingleStepForm />, the fields data will also get pushed to createFormInit() and from there to multiStepFormFields(). It's here that the fields will be parsed through parsedFields() and then afterwards they will be separated into an array that contains the <FormStepper /> fields first and then the fields for the first screen, second screen and so on. This array will look something like this:

When this array is finally returned back to <MultiStepForm>, the form stepper data is parsed out and passed into the <FormStepper /> component and the first array of field objects in the remaining array will be rendered out.

We need to map through the outer array first and then loop through each of the inner array's to render each of the fields. The fields that are not shown on the current step will get a class added to FieldWrapper as hidden, all of the other fields will get the class, block. Since react-hook-form tracks our inputs via a ref, its much easier to just build out all of the steps of the form at once and just hide/show the active fields via CSS. This way we don't lose the ref when the fields get mounted/unmounted from the DOM.

We also need to account for required fields that are now 'hidden' due to not being contained in the activeStep. This will cause an error in the browser saying that a required field is not focusable. We get around that by toggling the 'required' prop for that field depending on whether or not its currently in the activeStep

React | Typescript | Tailwind | Forms | Unit Tests

React

Folder and File Structure

Each component should have its own folder nested inside the /components folder. The name of this folder should match the name of the component itself. Inside this folder you should have the following files:

data.js
- contains a copy of the JSS fields object for this component. This will get imported in unit tests and Storybook stories. If the component doesn't get called from Sitecore and doesn't have JSS fields, then this file isn't needed.
index.tsx
- main React component
stories.js
- Storybook stories
styles.ts(x) (optional)
- if you use Styled Components for the component, they will live here
test.tsx
- Jest unit tests
types.ts
- Typescript types and interfaces the component

Composition File

Before working on the React component itself we first need to compose simpler props for it instead of parsing through the JSS fields object directly. The goal is to turn something like this:

into this:

The composition file is located at lib/composition/index.js and contains an exported function for each of the React components. The JSS fields object (and sometimes placeholder object) from Sitecore is passed in and destructured. Using the ComponentTypes global Typescript type both as a reference and consistent naming convention amongst all of the components, you will use these as keys to build your return object which will be passed in as the final props object to your component.

In the following example, the QuickLinks component will get a single items prop returned to it, which will consist of an array of objects

Optional Chaining

An important thing to note and best practice is to use optional chaining when reaching into an object. The (?.) operator allows you to reach as far down into a nested object without first having to validate that the previous step in the chain is valid and exists first.

[MDN - Optional Chaining](https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)

Function Components

We should always use function components with hooks over class components. Function components are 'stateless' and simple as they don't track state or have lifecycle and render methods like class components do. If you need to track state in your component, import the useState hook.

Use Short Syntax Over React Fragments

If your return content doesn't have a wrapping div you will need to create a fragment by using a short syntax element <> rather than a React <Fragment>. The only exception is if you need to use a key when using a map. In these instances you will need to use a <Fragment> [React Short Syntax](https: //reactjs.org/docs/fragments.html#short-syntax)

🚫 Bad

✅ Good

Use Implicit Returns

With ES6 and arrow functions you can omit the curly braces and the return keyword if your component is immediately returning something.

🚫 Bad

✅ Good

Use PascalCase and Export At The End Of The File

Component names should always be PascalCased and exported at the bottom of the file. If there is more than one component to export you need to declare which one is the default export:

Spread and Destructure

Where possible always destructure props and other objects/arrays where used. This will help in typing and keeping things clear and not hidden behind a root object. If you don't need to destructure out all of the properties of an object, use the ...rest keyword and pass that in instead like so:

🚫 Bad

✅ Good

If you're not transforming the props names from the parent to the child, then you can omit setting them directly on the child and instead just spread them in with the {...rest} property.

Small, Focused and DRY

Our components should be broken down into small, reusable functions instead of one gigantic component.

🚫 Bad

✅ Good

Each component should do only one thing and only be responsible for the logic for that one thing. If your function is growing in size, it's probably time to refactor it into smaller, more focused components. This will also help in making our components more reusable, consistent and TESTABLE.

React | Typescript | Tailwind | Forms | Unit Tests

Typescript

`Global types`

In typescript global types can be declared in a .d.ts file and used anywhere without explicitly importing them. Our project's .d.ts file is named project.d.ts.

project.d.ts

It contains:

Some library types in the form of [triple slash directives](https: //www.typescriptlang.org/docs/handbook/triple-slash-directives.html). These need to be placed at the top of the file.
Some library module declarations (usually these are included because these libs don't have typings but we still need to use them).
Our own global types.

Typescript provides many [Utility Types](https: //www.typescriptlang.org/docs/handbook/utility-types.html) which are useful for manipulating the base types in the global ComponentTypes interface.

Utility Types

TypeScript: Documentation - Utility Types

Excerpt

Types which are globally included in TypeScript

TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally.

A few basic ones to know:

`Pick<Type, Keys>`

Only use the specified Keys from the Type.

`Partial<Type>`

Allows the type to be optional (undefined)

`Required<Type>`

Opposite of Partial, the type must be defined

Using the stategies above you can select types from the global source and compose them to create a representation of the props in a specific component. While the global types live in project.d.ts, component level types should generally be placed in a types.ts file within the component directory and imported for use.

Although ComponentTypes is a ✅ _Good starting place, some components may require a type that is more specific and not usefully included in the global declaration._

`Naming`

`class`

🧑‍🔬 PascalCase

🚫 Bad

✅ Good

For memebers/methods use 🐪 camelCase

🚫 Bad

✅ Good

`enum`

🧑‍🔬 PascalCase

🚫 Bad

✅ Good

`interface`

🧑‍🔬 PascalCase

🚫 Bad

✅ Good

For memebers use 🐪 camelCase

🚫 Bad

✅ Good

`namespace`

🧑‍🔬 PascalCase

🚫 Bad

✅ Good

`type`

🧑‍🔬 PascalCase

🚫 Bad

✅ ✅ Good

`variable and function`

🐪 camelCase

🚫 Bad

✅ Good

React | Typescript | Tailwind | Forms | Unit Tests

Prior to TypeScript version 4.2, type alias names [may appear in error messages](https: //www.typescriptlang.org/play?#code/PTAEGEHsFsAcEsA2BTATqNrLusgzngIYDm+oA7koqIYuYQJ56gCueyoAUCKAC4AWHAHaFcoSADMaQ0PCG80EwgGNkALk6c5C1EtWgAsqOi1QAb06groEbjWg8vVHOKcAvpokshy3vEgyyMr8kEbQJogAFND2YREAlOaW1soBeJAoAHSIkMTRmbbI8e6aPMiZxJmgACqCGKhY6ABGyDnkFFQ0dIzMbBwCwqIccabcYLyQoKjIEmh8kwN8DLAc5PzwwbLMyAAeK77IACYaQSEjUWZWhfYAjABMAMwALA+gbsVjoADqgjKESytQPxCHghAByXigYgBfr8LAsYj8aQMUASbDQcRSExCeCwFiIQh+AKfAYyBiQFgOPyIaikSGLQo0Zj-aazaY+dSaXjLDgAGXgAC9CKhDqAALxJaw2Ib2RzOISuDycLw+ImBYKQflCkWRRD2LXCw6JCxS1JCdJZHJ5RAFIbFJU8ADKC3WzEcnVZaGYE1ABpFnFOmsFhsil2uoHuzwArO9SmAAEIsSFrZB-GgAjjA5gtVN8VCEc1o1C4Q4AGlR2AwO1EsBQoAAbvB-gJ4HhPgB5aDwem-Ph1TCV3AEEirTp4ELtRbTPD4vwKjOfAuioSQHuDXBcnmgACC+eCONFEs73YAPGGZVT5cRyyhiHh7AAON7lsG3vBggB8XGV3l8-nVISOgghxoLq9i7io-AHsayRWGaFrlFauq2rg9qaIGQHwCBqChtKdgRo8TxRjeyB3o+7xAA), sometimes in place of the equivalent anonymous type (which may or may not be desirable). Interfaces will always be named in error messages.
Type aliases may not participate [in declaration merging, but interfaces can](https: //www.typescriptlang.org/play?#code/PTAEEEDtQS0gXApgJwGYEMDGjSfdAIx2UQFoB7AB0UkQBMAoEUfO0Wgd1ADd0AbAK6IAzizp16ALgYM4SNFhwBZdAFtV-UAG8GoPaADmNAcMmhh8ZHAMMAvjLkoM2UCvWad+0ARL0A-GYWVpA29gyY5JAWLJAwGnxmbvGgALzauvpGkCZmAEQAjABMAMwALLkANBl6zABi6DB8okR4Jjg+iPSgABboovDk3jjo5pbW1d6+dGb5djLwAJ7UoABKiJTwjThpnpnGpqPBoTLMAJrkArj4kOTwYmycPOhW6AR8IrDQ8N04wmo4HHQCwYi2Waw2W1S6S8HX8gTGITsQA).
Interfaces may only be used to [declare the shapes of objects, not rename primitives](https: //www.typescriptlang.org/play?#code/PTAEAkFMCdIcgM6gC4HcD2pIA8CGBbABwBtIl0AzUAKBFAFcEBLAOwHMUBPQs0XFgCahWyGBVwBjMrTDJMAshOhMARpD4tQ6FQCtIE5DWoixk9QEEWAeV37kARlABvaqDegAbrmL1IALlAEZGV2agBfampkbgtrWwMAJlAAXmdXdy8ff0Dg1jZwyLoAVWZ2Lh5QVHUJflAlSFxROsY5fFAWAmk6CnRoLGwmILzQQmV8JmQmDzI-SOiKgGV+CaYAL0gBBdyy1KCQ-Pn1AFFplgA5enw1PtSWS+vCsAAVAAtB4QQWOEMKBuYVUiVCYvYQsUTQcRSBDGMGmKSgAAa-VEgiQe2GLgKQA).
Interface names will [always appear in their original form](https: //www.typescriptlang.org/play?#code/PTAEGEHsFsAcEsA2BTATqNrLusgzngIYDm+oA7koqIYuYQJ56gCueyoAUCKAC4AWHAHaFcoSADMaQ0PCG80EwgGNkALk6c5C1EtWgAsqOi1QAb06groEbjWg8vVHOKcAvpokshy3vEgyyMr8kEbQJogAFND2YREAlOaW1soBeJAoAHSIkMTRmbbI8e6aPMiZxJmgACqCGKhY6ABGyDnkFFQ0dIzMbBwCwqIccabcYLyQoKjIEmh8kwN8DLAc5PzwwbLMyAAeK77IACYaQSEjUWY2Q-YAjABMAMwALA+gbsVjNXW8yxySoAADaAA0CCaZbPh1XYqXgOIY0ZgmcK0AA0nyaLFhhGY8F4AHJmEJILCWsgZId4NNfIgGFdcIcUTVfgBlZTOWC8T7kAJ42G4eT+GS42QyRaYbCgXAEEguTzeXyCjDBSAAQSE8Ai0Xsl0K9kcziExDeiQs1lAqSE6SyOTy0AKQ2KHk4p1V6s1OuuoHuzwArMagA) in error messages, but only when they are used by name.

createButton({ text: "Submit" });
// OKcreateButton({ text: 'Submit', size: { width: 70, height: 30 }});
// OKcreateButton({ text: 'Submit', color: 43);
// Not OK: 43 isn't a stringcreateButton({ text: 'Submit', size: { width: 70 });
// Not OK: size needs a height as wellcreateButton({ color: 'Blue'});
// Not OK: 'text' member is required

/** Represents an object that can be greeted */interface Greetable {    /** Used to welcome someone */    greet(message: string): void;    /** The preferred language of this object */    language: string;}

// composition/index.js

const QuickLinks = ({ fields }) => {
  const items = fields?.QuickLinkItems?.reduce(
    (acc, curr) => [
      ...acc,
      {
        image: { ...curr.Icon?.value },
        link: curr.Link?.value?.href,
        title: curr.Title?.value,
        id: curr.Id,
      },
    ],
    []
  );
  return { items };
};

// components/QuickLinks/index.tsx

const QuickLinks = ({ items }: { items: Array<ComponentTypes> }) => (
  <QuickLinksWrapper>
    {items?.map(({ id, ...rest }, index) => (
      <QuickLinksItem index={index} length={items.length} key={id} {...rest} />
    ))}
  </QuickLinksWrapper>
);

const Component = ({ items }: { items: Array<ComponentTypes> }) =>
  items?.map(({ id, ...rest }, index) => (
    <Fragment key={id}>
      <div>The title</div>
      <InnerComponent index={id} length={items.length} {...rest} />
    </Fragment>
  ));

const ChildComponent = () => <div>The child</div>;

const ParentComponent = () => (
  <>
    <h1>The Title</h1>
    <ChildComponent />
  </>
);

export { ChildComponent };
export default ParentComponent;

const QuickLinks = ({ items }: { items: Array<ComponentTypes> }) => (
  <QuickLinksWrapper>
    {items?.map(({ image, link, title, id }, index) => (
      <QuickLinksItem
        image={image}
        index={index}
        length={items.length}
        link={link}
        title={title}
        key={id}
      />
    ))}
  </QuickLinksWrapper>
);

const QuickLinks = ({ items }: { items: Array<ComponentTypes> }) => (
  <QuickLinksWrapper>
    {items?.map(({ id, ...rest }, index) => (
      <QuickLinksItem index={index} length={items.length} key={id} {...rest} />
    ))}
  </QuickLinksWrapper>
);

const DataReport = ({ items }: { items: Array<string> }) => (
  <table>
    <tr className="bg-teal-dark text-lg text-white">
      <td className="cell-class">NAME</td>
      <td className="cell-class">HOURS</td>
    </tr>
    {items.map(({ hours, name }, index) => (
      <tr className="bg-transparent text-lg text-teal-dark" key={index}>
        <td className="cell-class">{name}</td>
        <td className="cell-class">{hours}</td>
      </tr>
    ))}
  </table>
);

const TableCell = ({ children }) => (
  <td className="cell-class">{children}</td>
);


const TableRow = ({ children, isHeader }) => {

const class = isHeader ? 'bg-teal-dark text-white' : 'bg-transparent text-teal-dark'
  return <tr className={`${class} text-lg`}>{children}</td>
};


const DataReport = ({ items }: { items: Array<string> }) => (
  <table>
    <TableRow isHeader={true}>
      <TableCell>NAME</TableCell>
      <TableCell>HOURS</TableCell>
    </TableRow>
    {items.map(({ hours, name }, index) => (
      <TableRow key={index}>
        <TableCell>{name}</TableCell>
        <TableCell>{hours}</TableCell>
      </TableRow>
    ))}
  </table>
);

let obj: any = { x: 0 };
// None of the following lines of code will throw compiler errors.
// Using `any` disables all further type checking, and it is assumed
// you know the environment better than TypeScript.obj.foo();obj();obj.bar = 100;obj = "hello";
const n: number = obj;Try

// Would be a runtime error if executed!greet(42);Argument of type 'number' is not assignable to parameter of type 'string'.Argument of type 'number' is not assignable to parameter of type 'string'.Try

// No type annotations here, but TypeScript can spot the bug
const names = ["Alice", "Bob", "Eve"];
// Contextual typing for functionnames.forEach(function (s) {  console.log(s.toUppercase());Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?});
// Contextual typing also applies to arrow functionsnames.forEach((s) => {  console.log(s.toUppercase());Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?});Try

// The parameter's type annotation is an object typefunction printCoord(pt: { x: number; y: number }) {  console.log("The coordinate's x value is " + pt.x);  console.log("The coordinate's y value is " + pt.y);}printCoord({ x: 3, y: 7 });Try

function printName(obj: { first: string; last?: string }) {
// Error - might crash if 'obj.last' wasn't provided!  console.log(obj.last.toUpperCase());Object is possibly 'undefined'.Object is possibly 'undefined'.  if (obj.last !== undefined) {
// OK    console.log(obj.last.toUpperCase());  }
// A safe alternative using modern JavaScript syntax:  console.log(obj.last?.toUpperCase());}Try

function printId(id: number | string) {  console.log("Your ID is: " + id);}
// OKprintId(101);
// OKprintId("202");
// ErrorprintId({ myID: 22342 });Argument of type '{ myID: number; }' is not assignable to parameter of type 'string | number'.
  Type '{ myID: number; }' is not assignable to type 'number'.Argument of type '{ myID: number; }' is not assignable to parameter of type 'string | number'.
  Type '{ myID: number; }' is not assignable to type 'number'.Try

function printId(id: number | string) {  console.log(id.toUpperCase());Property 'toUpperCase' does not exist on type 'string | number'.
  Property 'toUpperCase' does not exist on type 'number'.Property 'toUpperCase' does not exist on type 'string | number'.
  Property 'toUpperCase' does not exist on type 'number'.}Try

function printId(id: number | string) {  if (typeof id === "string") {
// In this branch, id is of type 'string'    console.log(id.toUpperCase());  } else {
// Here, id is of type 'number'    console.log(id);  }}Try

function welcomePeople(x: string[] | string) {  if (Array.isArray(x)) {
// Here: 'x' is 'string[]'    console.log("Hello, " + x.join(" and "));  } else {
// Here: 'x' is 'string'    console.log("Welcome lone traveler " + x);  }}Try

type Point = {  x: number;  y: number;};
// Exactly the same as the earlier examplefunction printCoord(pt: Point) {  console.log("The coordinate's x value is " + pt.x);  console.log("The coordinate's y value is " + pt.y);} printCoord({ x: 100, y: 100 });Try

type UserInputSanitizedString = string; function sanitizeInput(str: string): UserInputSanitizedString {  return sanitize(str);}
// Create a sanitized inputlet userInput = sanitizeInput(getInput());
// Can still be re-assigned with a string thoughuserInput = "new input";Try

interface Point {  x: number;  y: number;} function printCoord(pt: Point) {  console.log("The coordinate's x value is " + pt.x);  console.log("The coordinate's y value is " + pt.y);} printCoord({ x: 100, y: 100 });Try

const x = "hello" as number;Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.Try

let changingString = "Hello World";changingString = "Olá Mundo";
// Because `changingString` can represent any possible string, that
// is how TypeScript describes it in the type systemchangingString;      let changingString: string
const
constantString = "Hello World";
// Because `
constantString` can only represent 1 possible string, it
// has a literal type representation
constantString;
const
constantString: "Hello World"Try

function printText(s: string, alignment: "left" | "right" | "center") {
// ...}printText("Hello, world", "left");printText("G'day, mate", "centre");Argument of type '"centre"' is not assignable to parameter of type '"left" | "right" | "center"'.Argument of type '"centre"' is not assignable to parameter of type '"left" | "right" | "center"'.Try

interface Options {  width: number;}function configure(x: Options | "auto") {
// ...}configure({ width: 100 });configure("auto");configure("automatic");Argument of type '"automatic"' is not assignable to parameter of type 'Options | "auto"'.Argument of type '"automatic"' is not assignable to parameter of type 'Options | "auto"'.Try

const req = { url: "https:
//example.com", method: "GET" };handleRequest(req.url, req.method);Argument of type 'string' is not assignable to parameter of type '"GET" | "POST"'.Argument of type 'string' is not assignable to parameter of type '"GET" | "POST"'.Try

    Change 1 means "I intend for `req.method` to always have the _literal type_ `"GET"`", preventing the possible assignment of `"GUESS"` to that field after. Change 2 means "I know for other reasons that `req.method` has the value `"GET"`".

2.  You can use `as const` to convert the entire object to be type literals:

        ```

const req = { url: "https:
//example.com", method: "GET" } as
const;handleRequest(req.url, req.method);Try

const firstName = Symbol("name");
const secondName = Symbol("name"); if (firstName === secondName) {This condition will always return 'false' since the types 'typeof firstName' and 'typeof secondName' have no overlap.This condition will always return 'false' since the types 'typeof firstName' and 'typeof secondName' have no overlap.
// Can't ever happen}Try

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName) {
    if (props[propName] != null) {
      const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName);
  };
}

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName, ...rest) {
    // Note ...rest here
    if (props[propName] != null) {
      const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName, ...rest); // and here
  };
}

// Find the progress bar <div> in the DOM.
var progressBar = document.getElementById("percent-loaded");

// Set its ARIA roles and states,
// so that assistive technologies know what kind of widget it is.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// Create a function that can be called at any time to update
// the value of the progress bar.
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

<SingleStepForm />

Partial<Type>

enum GlobalConfigKey {
  ApigeeServiceHost,
  ApigeeServiceHostCC,
  ApiHost,
  AppInsightsKey,
  SITECORE_API_KEY,
  GoogleTagManagerId,
}

type GlobalConfig = {
  [key in keyof typeof GlobalConfigKey]?: string;
};

interface Window {
  globalConfig: GlobalConfig;
  angular?: any;
}

declare let globalConfig: GlobalConfig;

declare namespace JSS {
  import("@sitecore-jss/sitecore-jss-react");
  import { Text } from "@sitecore-jss/sitecore-jss-react";

  type Field<
    Component extends (...args: any) => any,
    Key extends Parameters<Component>[0] = "field"
  > = Pick<Parameters<Component>[0], Key>[Key];

  export type LinkField = {
    value: {
      [K in
        | "href"
        | "id"
        | "querystring"
        | "text"
        | "title"
        | "target"
        | "class"
        | "url"
        | "linktype"]?: string;
    };
    editable?: string;
    editableFirstPart?: string;
    editableLastPart?: string;
  };

  type ImageField = {
    value?: {
      [K in "alt" | "height" | "src" | 
    };
    editable?: string;
  };

  type TextField = Field<typeof Text>;

  export type { LinkField, ImageField, TextField };
}

tsinterface Todo {  title: string;  description: string;}function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {  return { ...todo, ...fieldsToUpdate };}
const todo1 = {  title: "organize desk",  description: "clear clutter",};
const todo2 = updateTodo(todo1, {  description: "throw out trash",});Try

tsinterface Props {  a?: number;  b?: string;}
const obj: Props = { a: 5 };
const obj2: Required<Props> = { a: 5 };Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.2741Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.Try

tsinterface Todo {  title: string;}
const todo: Readonly<Todo> = {  title: "Delete inactive users",};todo.title = "Hello";Cannot assign to 'title' because it is a read-only property.2540Cannot assign to 'title' because it is a read-only property.Try

tsinterface CatInfo {  age: number;  breed: string;}type CatName = "miffy" | "boris" | "mordred";
const cats: Record<CatName, CatInfo> = {  miffy: { age: 10, breed: "Persian" },  boris: { age: 5, breed: "Maine Coon" },  mordred: { age: 16, breed: "British Shorthair" },};cats.boris;
const cats: Record<CatName, CatInfo>Try

tsinterface Todo {  title: string;  description: string;  completed: boolean;}type TodoPreview = Pick<Todo, "title" | "completed">;
const todo: TodoPreview = {  title: "Clean room",  completed: false,};todo;
const todo: TodoPreviewTry

tsinterface Todo {  title: string;  description: string;  completed: boolean;  createdAt: number;}type TodoPreview = Omit<Todo, "description">;
const todo: TodoPreview = {  title: "Clean room",  completed: false,  createdAt: 1615544252770,};todo;
const todo: TodoPreviewtype TodoInfo = Omit<Todo, "completed" | "createdAt">;
const todoInfo: TodoInfo = {  title: "Pick up kids",  description: "Kindergarten closes at 5pm",};todoInfo;
const todoInfo: TodoInfoTry

tstype T0 = Exclude<"a" | "b" | "c", "a">;     type T0 = "b" | "c"type T1 = Exclude<"a" | "b" | "c", "a" | "b">;     type T1 = "c"type T2 = Exclude<string | number | (() => void), Function>;     type T2 = string | numberTry

tsdeclare function f1(arg: { a: number; b: string }): void;type T0 = Parameters<() => string>;     type T0 = []type T1 = Parameters<(s: string) => void>;     type T1 = [s: string]type T2 = Parameters<<T>(arg: T) => T>;     type T2 = [arg: unknown]type T3 = Parameters<typeof f1>;     type T3 = [arg: {
    a: number;
    b: string;
}]type T4 = Parameters<any>;     type T4 = unknown[]type T5 = Parameters<never>;     type T5 = nevertype T6 = Parameters<string>;Type 'string' does not satisfy the
constraint '(...args: any) => any'.2344Type 'string' does not satisfy the
constraint '(...args: any) => any'.     type T6 = nevertype T7 = Parameters<Function>;Type 'Function' does not satisfy the
constraint '(...args: any) => any'.
  Type 'Function' provides no match for the signature '(...args: any): any'.2344Type 'Function' does not satisfy the
constraint '(...args: any) => any'.
  Type 'Function' provides no match for the signature '(...args: any): any'.     type T7 = neverTry

tstype T0 =
constructorParameters<Error
constructor>;     type T0 = [message?: string]type T1 =
constructorParameters<Function
constructor>;     type T1 = string[]type T2 =
constructorParameters<RegExp
constructor>;     type T2 = [pattern: string | RegExp, flags?: string]type T3 =
constructorParameters<any>;     type T3 = unknown[]type T4 =
constructorParameters<Function>;Type 'Function' does not satisfy the
constraint 'abstract new (...args: any) => any'.
  Type 'Function' provides no match for the signature 'new (...args: any): any'.2344Type 'Function' does not satisfy the
constraint 'abstract new (...args: any) => any'.

tsdeclare function f1(): { a: number; b: string };type T0 = ReturnType<() => string>;     type T0 = stringtype T1 = ReturnType<(s: string) => void>;     type T1 = voidtype T2 = ReturnType<<T>() => T>;     type T2 = unknowntype T3 = ReturnType<<T extends U, U extends number[]>() => T>;     type T3 = number[]type T4 = ReturnType<typeof f1>;     type T4 = {
    a: number;
    b: string;
}type T5 = ReturnType<any>;     type T5 = anytype T6 = ReturnType<never>;     type T6 = nevertype T7 = ReturnType<string>;Type 'string' does not satisfy the
constraint '(...args: any) => any'.2344Type 'string' does not satisfy the
constraint '(...args: any) => any'.     type T7 = anytype T8 = ReturnType<Function>;Type 'Function' does not satisfy the
constraint '(...args: any) => any'.
  Type 'Function' provides no match for the signature '(...args: any): any'.2344Type 'Function' does not satisfy the
constraint '(...args: any) => any'.
  Type 'Function' provides no match for the signature '(...args: any): any'.     type T8 = anyTry

tsclass C {  x = 0;  y = 0;}type T0 = InstanceType<typeof C>;     type T0 = Ctype T1 = InstanceType<any>;     type T1 = anytype T2 = InstanceType<never>;     type T2 = nevertype T3 = InstanceType<string>;Type 'string' does not satisfy the
constraint 'abstract new (...args: any) => any'.2344Type 'string' does not satisfy the
constraint 'abstract new (...args: any) => any'.     type T3 = anytype T4 = InstanceType<Function>;Type 'Function' does not satisfy the
constraint 'abstract new (...args: any) => any'.
  Type 'Function' provides no match for the signature 'new (...args: any): any'.2344Type 'Function' does not satisfy the
constraint 'abstract new (...args: any) => any'.
  Type 'Function' provides no match for the signature 'new (...args: any): any'.     type T4 = anyTry

tstype ObjectDescriptor<D, M> = {  data?: D;  methods?: M & ThisType<D & M>;
// Type of 'this' in methods is D & M};function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {  let data: object = desc.data || {};  let methods: object = desc.methods || {};  return { ...data, ...methods } as D & M;}let obj = makeObject({  data: { x: 0, y: 0 },  methods: {    moveBy(dx: number, dy: number) {      this.x += dx;
// Strongly typed this      this.y += dy;
// Strongly typed this    },  },});obj.x = 10;obj.y = 20;obj.moveBy(5, 5);Try

autocomplete

element that the element is a descendant of, or the <form> whose id is specified by the

On a web page that contains a tree of interactive controls, the user can use the up and down arrow keys to move from tree node to tree node. Pressing the right arrow key expands a node, then using the down arrow key moves into the newly expanded nodes.
A Web page implements modeless dialogs via scripting. When the trigger button is activated, a dialog opens. The interactive elements in the dialog are inserted in the focus order immediately after the button. When the dialog is open, the focus order goes from the button to the elements of the dialog, then to the interactive element following the button. When the dialog is closed, the focus order goes from the button to the following element.
A Web page implements modal dialogs via scripting. When the trigger button is activated, a dialog opens and focus is set to the first interactive element in the dialog. As long as the dialog is open, focus is limited to the elements of the dialog. When the dialog is dismissed, focus returns to the button or the element following the button.
An HTML Web page is created with the left hand navigation occurring in the HTML after the main body content, and styled with CSS to appear on the left hand side of the page. This is done to allow focus to move to the main body content first without requiring tabIndex attributes or JavaScript.
Note
While this example passes the Success Criterion, it is not necessarily true that all CSS positioning would. More complex positioning examples may or may not preserve meaning and operability
The following example fails to meet the Success Criterion:
A company's Web site includes a form that collects marketing data and allows users to subscribe to several newsletters published by the company. The section of the form for collecting marketing data includes fields such as name, street address, city, state or province, and postal code. Another section of the form includes several checkboxes so that users can indicate newsletters they want to receive. However, the tab order for the form skips between fields in different sections of the form, so that focus moves from the name field to a checkbox, then to the street address, then to another checkbox.

JEST

The problem

You want to use [jest][] to write tests that assert various things about the state of a DOM. As part of that goal, you want to avoid all the repetitive patterns that arise in doing so. Checking for an element's attributes, its text content, its css classes, you name it.

This solution

The @testing-library/jest-dom library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain.

Installation
Usage
- With TypeScript

Installation

This module is distributed via [npm][npm] which is bundled with [node][node] and should be installed as one of your project's devDependencies:

for installation with package manager.

Note: We also recommend installing the jest-dom eslint plugin which provides auto-fixable lint rules that prevent false positive tests and improve test readability by ensuring you are using the right matchers in your tests. More details can be found at .

Usage

Import @testing-library/jest-dom once (for instance in your ) and you're good to go:

With TypeScript

If you're using TypeScript, make sure your setup file is a .ts and not a .js to include the necessary types.

You will also need to include your setup file in your tsconfig.json if you haven't already:

Custom matchers

@testing-library/jest-dom can work with any library or framework that returns DOM elements from queries. The custom matcher examples below are written using matchers from @testing-library's suite of libraries (e.g. getByTestId, queryByTestId, getByText, etc.)

`toBeDisabled`

This allows you to check whether an element is disabled from the user's perspective. According to the specification, the following elements can be : button, input, select, textarea, optgroup, option, fieldset, and custom elements.

This custom matcher considers an element as disabled if the element is among the types of elements that can be disabled (listed above), and the disabled attribute is present. It will also consider the element as disabled if it's inside a parent form element that supports being disabled and has the disabled attribute present.

Examples

This custom matcher does not take into account the presence or absence of the aria-disabled attribute. For more on why this is the case, check .

`toBeEnabled`

This allows you to check whether an element is not disabled from the user's perspective.

It works like not.toBeDisabled(). Use this matcher to avoid double negation in your tests.

This custom matcher does not take into account the presence or absence of the aria-disabled attribute. For more on why this is the case, check .

`toBeEmptyDOMElement`

This allows you to assert whether an element has no visible content for the user. It ignores comments but will fail if the element contains white-space.

Examples

`toBeInTheDocument`

This allows you to assert whether an element is present in the document or not.

Examples

Note: This matcher does not find detached elements. The element must be added to the document to be found by toBeInTheDocument. If you desire to search in a detached element please use: toContainElement

`toBeInvalid`

This allows you to check if an element, is currently invalid.

An element is invalid if it has an with no value or a value of "true", or if the result of is false.

Examples

`toBeRequired`

This allows you to check if a form element is currently required.

An element is required if it is having a required or aria-required="true" attribute.

Examples

`toBeValid`

This allows you to check if the value of an element, is currently valid.

An element is valid if it has no s or an attribute value of "false". The result of must also be true if it's a form element.

Examples

`toBeVisible`

This allows you to check if an element is currently visible to the user.

An element is visible if all the following conditions are met:

it is present in the document
it does not have its css property display set to none
it does not have its css property visibility

Examples

`toContainElement`

This allows you to assert whether an element contains another element as a descendant or not.

Examples

`toContainHTML`

Assert whether a string representing a HTML element is contained in another element. The string should contain valid html, and not any incomplete html.

Examples

Chances are you probably do not need to use this matcher. We encourage testing from the perspective of how the user perceives the app in a browser. That's why testing against a specific DOM structure is not advised.
It could be useful in situations where the code being tested renders html that was obtained from an external source, and you want to validate that that html code was used as intended.
It should not be used to check DOM structure that you control. Please use toContainElement instead.

`toHaveAccessibleDescription`

This allows you to assert that an element has the expected .

You can pass the exact string of the expected accessible description, or you can make a partial match passing a regular expression, or by using /.

Examples

`toHaveAccessibleName`

This allows you to assert that an element has the expected . It is useful, for instance, to assert that form elements and buttons are properly labelled.

You can pass the exact string of the expected accessible name, or you can make a partial match passing a regular expression, or by using /.

Examples

`toHaveAttribute`

This allows you to check whether the given element has an attribute or not. You can also optionally check that the attribute has a specific expected value or partial match using /

Examples

`toHaveClass`

This allows you to check whether the given element has certain classes within its class attribute.

You must provide at least one class, unless you are asserting that an element does not have any classes.

Examples

`toHaveFocus`

This allows you to assert whether an element has focus or not.

Examples

`toHaveFormValues`

This allows you to check if a form or fieldset contains form controls for each given name, and having the specified value.

It is important to stress that this matcher can only be invoked on a or a element.
This allows it to take advantage of the property in form and fieldset to reliably fetch all form controls within them.
This also avoids the possibility that users provide a container that contains more than one form, thereby intermixing form controls that are not related, and could even conflict with one another.

This matcher abstracts away the particularities with which a form control value is obtained depending on the type of form control. For instance, <input> elements have a value attribute, but <select> elements do not. Here's a list of all cases covered:

<input type="number"> elements return the value as a number, instead of a string.
<input type="checkbox"> elements:

The above rules make it easy, for instance, to switch from using a single select control to using a group of radio buttons. Or to switch from a multi select control, to using a group of checkboxes. The resulting set of form values used by this matcher to compare against would be the same.

Examples

`toHaveStyle`

This allows you to check if a certain element has some specific css properties with specific values applied. It matches only if the element has all the expected properties applied, not just some of them.

Examples

This also works with rules that are applied to the element via a class name for which some rules are defined in a stylesheet currently active in the document. The usual rules of css precedence apply.

`toHaveTextContent`

This allows you to check whether the given node has a text content or not. This supports elements, but also text nodes and fragments.

When a string argument is passed through, it will perform a partial case-sensitive match to the node content.

To perform a case-insensitive match, you can use a RegExp with the /i modifier.

If you want to match the whole content, you can use a RegExp to do it.

Examples

`toHaveValue`

This allows you to check whether the given form element has the specified value. It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox"> and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues.

For all other form elements, the value is matched using the same algorithm as in toHaveFormValues does.

Examples

Using DOM Testing Library

`toHaveDisplayValue`

This allows you to check whether the given form element has the specified displayed value (the one the end user will see). It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox"> and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues.

Examples

Using DOM Testing Library

`toBeChecked`

This allows you to check whether the given element is checked. It accepts an input of type checkbox or radio and elements with a role of checkbox, radio or switch with a valid aria-checked attribute of "true" or "false".

Examples

`toBePartiallyChecked`

This allows you to check whether the given element is partially checked. It accepts an input of type checkbox and elements with a role of checkbox with a aria-checked="mixed", or input of type checkbox with indeterminate set to true

Examples

`toHaveErrorMessage`

This allows you to check whether the given element has an or not.

Use the aria-errormessage attribute to reference another element that contains custom error message text. Multiple ids is NOT allowed. Authors MUST use aria-invalid in conjunction with aria-errormessage. Learn more from .

Whitespace is normalized.

When a string argument is passed through, it will perform a whole case-sensitive match to the error message text.

To perform a case-insensitive match, you can use a RegExp with the /i modifier.

To perform a partial match, you can pass a RegExp or use expect.stringContaining("partial string").

Examples

Deprecated matchers

`toBeEmpty`

Note: This matcher is being deprecated due to a name clash with jest-extended. See more info in #216. In the future, please use only toBeEmptyDOMElement

This allows you to assert whether an element has content or not.

Examples

`toBeInTheDOM`

This custom matcher is deprecated. Prefer toBeInTheDocument instead.

This allows you to check whether a value is a DOM element, or not.

Contrary to what its name implies, this matcher only checks that you passed to it a valid DOM element. It does not have a clear definition of what "the DOM" is. Therefore, it does not check whether that element is contained anywhere.

This is the main reason why this matcher is deprecated, and will be removed in the next major release. You can follow the discussion around this decision in more detail .

As an alternative, you can use toBeInTheDocument or toContainElement. Or if you just want to check if a value is indeed an HTMLElement you can always use some of :

Note: The differences between toBeInTheDOM and toBeInTheDocument are significant. Replacing all uses of toBeInTheDOM with toBeInTheDocument will likely cause unintended consequences in your tests. Please make sure when replacing toBeInTheDOM to read through the documentation of the proposed alternatives to see which use case works better for your needs.

`toHaveDescription`

This custom matcher is deprecated. Prefer toHaveAccessibleDescription instead, which is more comprehensive in implementing the official spec.

This allows you to check whether the given element has a description or not.

An element gets its description via the . Set this to the id of one or more other elements. These elements may be nested inside, be outside, or a sibling of the passed in element.

Whitespace is normalized. Using multiple ids will .

When a string argument is passed through, it will perform a whole case-sensitive match to the description text.

To perform a case-insensitive match, you can use a RegExp with the /i modifier.

To perform a partial match, you can pass a RegExp or use expect.stringContaining("partial string").

Examples

Inspiration

This whole library was extracted out of Kent C. Dodds' [DOM Testing Library][dom-testing-library], which was in turn extracted out of [React Testing Library][react-testing-library].

The intention is to make this available to be used independently of these other libraries, and also to make it more clear that these other libraries are independent from jest, and can be used with other tests runners as well.

Guiding Principles

[The more your tests resemble the way your software is used, the more confidence they can give you.][guiding-principle]

This library follows the same guiding principles as its mother library [DOM Testing Library][dom-testing-library]. Go [check them out][guiding-principle] for more details.

Additionally, with respect to custom DOM matchers, this library aims to maintain a minimal but useful set of them, while avoiding bloating itself with merely convenient ones that can be easily achieved with other APIs. In general, the overall criteria for what is considered a useful custom matcher to add to this library, is that doing the equivalent assertion on our own makes the test code more verbose, less clear in its intent, and/or harder to read.

ByTitle

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

getByTitle, queryByTitle, getAllByTitle, queryAllByTitle, findByTitle, findAllByTitle

API

getByTitle(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  title: TextMatch,
  options?: {
    exact?: boolean = true,
    normalizer?: NormalizerFn,
  }): HTMLElement

Returns the element that has the matching title attribute.

Will also find a title element within an SVG.

Options

TextMatch options

Migrate from Enzyme

This page is intended for developers who have experience with Enzyme and are trying to understand how to migrate to React Testing Library. It does not go into great detail about how to migrate all types of tests, but it does have some helpful information for those who are comparing Enzyme with React Testing Library.

What is React Testing Library?

React Testing Library is part of an open-source project named Testing Library. There are several other helpful tools and libraries in the Testing Library project which you can use to write more concise and useful tests. Besides React Testing Library, here are some of the project's other libraries that can help you along the way:

: jest-dom provides a set of custom Jest matchers that you can use to extend Jest. These make your tests more declarative, clearer to read, and easier to maintain.
: user-event tries to simulate the real events that happen in the browser as the user interacts with elements on the page. For example, userEvent.click(checkbox) would change the state of the checkbox.

Why should I use React Testing Library?

Enzyme is a powerful test library, and its contributors did a lot for the JavaScript community. In fact, many of the React Testing Library maintainers used and contributed to Enzyme for years before developing and working on React Testing Library. So we want to say thank you to the contributors of Enzyme!

The primary purpose of React Testing Library is to increase confidence in your tests by testing your components in the way a user would use them. Users don't care what happens behind the scenes, they just see and interact with the output. Instead of accessing the components' internal APIs or evaluating their state, you'll get more confidence by writing your tests based on the component output.

React Testing Library aims to solve the problem that many developers face when writing tests with Enzyme, which allows (and encourages) developers to test . Tests which do this ultimately prevent you from modifying and refactoring the component without changing its tests. As a result, the tests slow down development speed and productivity. Every small change may require rewriting some part of your tests, even if the change does not affect the component's output.

Rewriting your tests in React Testing library is worthwhile because you'll be trading tests that slow you down for tests that give you more confidence and increase your productivity in the long run.

How to migrate from Enzyme to React Testing Library?

To ensure a successful migration, we recommend doing it incrementally by running the two test libraries side by side in the same application, porting your Enzyme tests to React Testing Library one by one. That makes it possible to migrate even large and complex applications without disrupting other business because the work can be done collaboratively and spread out over time.

Install React Testing Library

First, install React Testing Library and the jest-dom helper library (you can check this page for the complete installation and setup guide).

Import React Testing Library to your test

If you're using Jest (you can use other test frameworks), then you only need to import the following modules into your test file:

The test structure can be the same as you would write with Enzyme:

Note: you can also use describe and it blocks with React Testing Library. React Testing Library doesn't replace Jest, just Enzyme. We recommend test because it helps with this: .

Basic Enzyme to React Testing Library migration examples

One thing to keep in mind is that there's not a one-to-one mapping of Enzyme features to React Testing Library features. Many Enzyme features result in inefficient tests anyway, so some of the features you're accustomed to with Enzyme need to be left behind (no more need for a wrapper variable or wrapper.update() calls, etc.).

React Testing Library has helpful queries which let you access your component's elements and their properties. We'll show some typical Enzyme tests along with alternatives using React Testing Library.

Let's say we have a Welcome component which shows a welcome message. We will have a look at both Enzyme and React Testing Library tests to learn how we can test this component:

React Component

The following component gets a name from props and shows a welcome message in an h1 element. It also has a text input which users can change to a different name, and the template updates accordingly. Check the live version on .

Test 1: Render the component, and check if the `h1` value is correct

Enzyme test

React Testing library

As you can see, the tests are pretty similar. Enzyme's shallow renderer doesn't render sub-components, so React Testing Library's render method is more similar to Enzyme's mount method.

In React Testing Library, you don't need to assign the render result to a variable (i.e. wrapper). You can simply access the rendered output by calling functions on the screen object. The other good thing to know is that React Testing Library automatically cleans up the environment after each test so you don't need to call cleanup in an afterEach or beforeEach function.

The other thing that you might notice is getByRole which has 'heading' as its argument. 'heading' is the accessible role of the h1 element. You can learn more about them on the queries documentation page. One of the things people quickly learn to love about Testing Library is how it encourages you to write more accessible applications (because if it's not accessible, then it's harder to test).

Test 2: Input texts must have correct value

In the component above, the input values are initialized with the props.firstName and props.lastName values. We need to check whether the value is correct or not.

Enzyme

React Testing Library

Cool! It's pretty simple and handy, and the tests are clear enough that we don't need to talk much about them. Something that you might notice is that the <form> has a role="form" attribute, but what is it?

role is one of the accessibility-related attributes that is recommended to use to improve your web application for people with disabilities. Some elements have default role values and you don't need to set one for them, but some others like <div> do not have default role values. You can use different approaches to access the <div> element, but we recommend trying to access elements by their implicit role to make sure your component is accessible by people with disabilities and those using screen readers. This section of the query documentation might help you understand the concepts better.

A <form> element must have a name attribute in order to have an implicit role of 'form' (as required by the specification).

React Testing Library aims to test the components how users use them. Users see buttons, headings, forms and other elements by their role, not by their id, class, or element tag name. Therefore, when you use React Testing Library you should avoid accessing the DOM with the document.querySelector API. (You can use it in your tests, but it's not recommended for the reasons stated in this paragraph.)

React Testing Library exposes some handy query APIs which help you access the component elements efficiently. You can see the list of available queries here. If you're not sure which query you should use in a given situation, we have a great page which explains which query to use, so check it out!

If you still have a question about which of React Testing Library's queries to use, then check out and the accompanying Chrome extension which aims to enable developers to find the best query when writing tests. It also helps you find the best queries to select elements. It allows you to inspect the element hierarchies in the Chrome Developer Tools and provides you with suggestions on how to select them, all while encouraging good testing practices.

Using act() and wrapper.update()

When testing asynchronous code in Enzyme, you usually need to call act() to run your tests correctly. When using React Testing Library, you don't need to explicitly call act() most of the time because it wraps API calls with act() by default.

update() syncs the Enzyme component tree snapshot with the React component tree, so you may see wrapper.update() in Enzyme tests. React Testing Library does not have (or need) a similar method, which is good for you since you need to handle fewer things!

Simulate user events

There are two ways to simulate user events with React Testing Library. One way is to use the user-event library, and the other way is to use fireEvent which is included in React Testing Library. user-event is actually built on top of fireEvent (which simply calls dispatchEvent on the given element). user-event is generally recommended because it ensures that all the events are fired in the correct order for typical user interactions. This helps ensure your tests resemble the way your software is actually used.

To use the @testing-library/user-event module, first install it:

Now you can import it into your test:

To demonstrate how to use the user-event library, imagine we have a Checkbox component which shows a checkbox input and an associated label. We want to simulate the event of a user clicking the checkbox:

We want to test that when a user clicks on the checkbox's associated label, the input's "checked" property is properly set. Let's see how we might write a test for that case:

Nice!

Triggering class methods in tests (`wrapper.instance()`)

As we already discussed, we recommend against testing implementation details and things that users will not be aware of. We aim to test and interact with the component more like how our users would.

If your test uses `instance()` or `state()`, know that you're testing things that the user couldn't possibly know about or even care about, which will take your tests further from giving you confidence that things will work when your user uses them. —

If you're unsure how to test something internal to your component, then take a step back and consider: "What would the user do to trigger this code to run?" Then make your test do that.

How to `shallow` render a component?

In general, you should avoid mocking out components. However, if you need to, then try using . For more information, see the FAQ.

Testing Input

🎹 Testing Input

Input Event

Note
If you want to simulate a more natural typing behaviour while testing your component, consider the companion library [user-event](https: //testing-library.com/docs/ecosystem-user-event)

📖 Storybook

Storybook is an open source tool for developing UI components in isolation. It essentially gives us a sandbox to showcase and test the components we'll use throughout our app.

To get it up and running navigate to the app repo and, from the command line, enter:

Let's first discuss some of the core principles of Storybook (we'll use examples from our own app where possible), before then diving into the anatomy of a typical story.

Stories

A story, much like a React component, is a function that describes how to render a component.

You can have multiple stories per component, meaning Storybook gives us the power to describe multiple rendered states.

So here's how the initial default PushDownPanel might look:

And then we can add variations based on different states, for example a version that uses icons:

And the new stories will show up in the sidebar navigation, like so:

Args

Story definitions can be further improved to take advantage of Storybook's "args" concept.

Controls

Controls allow designers and developers to explore component behavior by mucking about with its arguments.

A select menu to control the number of items that render:

And for our Hero component, a mixture of text inputs, boolean switch and radio group (screen shot of how these controls render follows the code):

Anatomy of a Story

Stories exist alongside the other component files as stories.js.

Here's an example of how a typical story might take shape:

Let's break this down line by line:

It's a story! Behold. Don't get them wet, don't expose them to bright light, and most importantly don't feed them after midnight!

Were we to add any other stories beyond the default, we would then add named exports that would describe the additional stories.

We can also add ArgTypes here if we need to configure our args beyond Storybook's automatically-generated UI controls.

In the example above, we're setting backgroundColor as a radio button so the user can choose between different background colors, and setting the default as white.

Template Definition: Now that our stories are exported, we move on to defining a master template (Template) for our component's stories, and passing in our args.

And finally we spread in our component's props (...props), making data available to our component as it would be in the regular app.

storybookCustomArgs

The way in which Storybook automatically infers a set of argTypes based on each component's props can often lead to a lot of unnecessary UI controls rendering.

createStoryOptions

Oftentimes our component data will come through to us a single array, but in order for Storybook to render the controls in our desired way, we need that data to be a multi-dimenstional array.

Again we have a nifty function for that! Here's an example of both storybookCustomArgs and createStoryOptions Storybook helper functions at work:

Resources

[Learn Storybook](https: //www.learnstorybook.com) - a guided tutorial through building a simple application with Storybook
[Component Driven User Interfaces](https: //www.componentdriven.org) - learn more about the component-driven approach that Storybook enables
[Storybook Addons](https: //storybook.js.org/addons) - supercharge Storybook with advanced features and new workflows

Self Link

Duke Training

Website Navigation

Table of contents

General Info

Sitecore

Enums

Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.

Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

Numeric enums

We'll first start off with numeric enums, which are probably more familiar if you're coming from other languages. An enum can be defined using the enum keyword.

Above, we have a numeric enum where Up is initialized with 1 . All of the following members are auto-incremented from that point on. In other words, Direction.Up has the value 1 , Down has 2 , Left has 3 , and Right has 4 .

If we wanted, we could leave off the initializers entirely:

Here, Up would have the value 0 , Down would have 1 , etc. This auto-incrementing behavior is useful for cases where we might not care about the member values themselves, but do care that each value is distinct from other values in the same enum.

Using an enum is simple: just access any member as a property off of the enum itself, and declare types using the name of the enum:

Numeric enums can be mixed in [computed and constant members (see below)](https: //www.typescriptlang.org/docs/handbook/enums.html#computed-and- constant-members). The short story is, enums without initializers either need to be first, or have to come after numeric enums initialized with numeric constants or other constant enum members. In other words, the following isn't allowed:

String enums

String enums are a similar concept, but have some subtle [runtime differences](https: //www.typescriptlang.org/docs/handbook/enums.html#enums-at-runtime) as documented below. In a string enum, each member has to be constant-initialized with a string literal, or with another string enum member.

While string enums don't have auto-incrementing behavior, string enums have the benefit that they "serialize" well. In other words, if you were debugging and had to read the runtime value of a numeric enum, the value is often opaque - it doesn't convey any useful meaning on its own (though [reverse mapping](https: //www.typescriptlang.org/docs/handbook/enums.html#reverse-mappings) can often help). String enums allow you to give a meaningful and readable value when your code runs, independent of the name of the enum member itself.

Heterogeneous enums

Technically enums can be mixed with string and numeric members, but it's not clear why you would ever want to do so:

Unless you're really trying to take advantage of JavaScript's runtime behavior in a clever way, it's advised that you don't do this.

Computed and

constant members

Each enum member has a value associated with it which can be either _ constant_ or computed. An enum member is considered constant if:

It is the first member in the enum and it has no initializer, in which case it's assigned the value 0:

The enum member is initialized with a constant enum expression. A constant enum expression is a subset of TypeScript expressions that can be fully evaluated at compile time. An expression is a constant enum expression if it is:
1. a literal enum expression (basically a string literal or a numeric literal)
2. a reference to previously defined constant enum member (which can originate from a different enum)

In all other cases enum member is considered computed.

Union enums and enum member types

There is a special subset of constant enum members that aren't calculated: literal enum members. A literal enum member is a constant enum member with no initialized value, or with values that are initialized to

any string literal (e.g. "foo", "bar, "baz")
any numeric literal (e.g. 1, 100)

When all members in an enum have literal enum values, some special semantics come into play.

The first is that enum members also become types as well! For example, we can say that certain members can only have the value of an enum member:

The other change is that enum types themselves effectively become a union of each enum member. With union enums, the type system is able to leverage the fact that it knows the exact set of values that exist in the enum itself. Because of that, TypeScript can catch bugs where we might be comparing values incorrectly. For example:

In that example, we first checked whether x was not E.Foo . If that check succeeds, then our || will short-circuit, and the body of the ‘if' will run. However, if the check didn't succeed, then x can only be E.Foo , so it doesn't make sense to see whether it's equal to E.Bar .

Enums at runtime

Enums are real objects that exist at runtime. For example, the following enum

can actually be passed around to functions

Enums at compile time

Even though Enums are real objects that exist at runtime, the keyof keyword works differently than you might expect for typical objects. Instead, use keyof typeof to get a Type that represents all Enum keys as strings.

Reverse mappings

In addition to creating an object with property names for members, numeric enums members also get a reverse mapping from enum values to enum names. For example, in this example:

TypeScript compiles this down to the following JavaScript:

In this generated code, an enum is compiled into an object that stores both forward ( name -> value ) and reverse ( value -> name ) mappings. References to other enum members are always emitted as property accesses and never inlined.

Keep in mind that string enum members do not get a reverse mapping generated at all.

`

const` enums

In most cases, enums are a perfectly valid solution. However sometimes requirements are tighter. To avoid paying the cost of extra generated code and additional indirection when accessing enum values, it's possible to use const enums. const enums are defined using the const modifier on our enums:

const enums can only use constant enum expressions and unlike regular enums they are completely removed during compilation. const enum members are inlined at use sites. This is possible since const enums cannot have computed members.

in generated code will become

** const enum pitfalls**

Inlining enum values is straightforward at first, but comes with subtle implications. These pitfalls pertain to ambient const enums only (basically const enums in .d.ts files) and sharing them between projects, but if you are publishing or consuming .d.ts files, these pitfalls likely apply to you, because tsc --declaration transforms .ts files into .d.ts files.

For the reasons laid out in the [isolatedModules documentation](https: //www.typescriptlang.org/tsconfig#references-to- const-enum-members), that mode is fundamentally incompatible with ambient const enums. This means if you publish ambient const enums, downstream consumers will not be able to use [isolatedModules](https: //www.typescriptlang.org/tsconfig#isolatedModules) and those enum values at the same time.
You can easily inline values from version A of a dependency at compile time, and import version B at runtime. Version A and B's enums can have different values, if you are not very careful, resulting in [surprising bugs](https: //github.com/microsoft/TypeScript/issues/5219#issue-110947903), like taking the wrong branches of if statements. These bugs are especially pernicious because it is common to run automated tests at roughly the same time as projects are built, with the same dependency versions, which misses these bugs completely.

Here are two approaches to avoiding these pitfalls:

A. Do not use const enums at all. You can easily [ban const enums](https: //github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#how-can-i-ban-specific-language-feature) with the help of a linter. Obviously this avoids any issues with const enums, but prevents your project from inlining its own enums. Unlike inlining enums from other projects, inlining a project's own enums is not problematic and has performance implications. B. Do not publish ambient const enums, by de constifying them with the help of [preserve constEnums ](https: //www.typescriptlang.org/tsconfig#preserve constEnums). This is the approach taken internally by the [TypeScript project itself](https: //github.com/microsoft/TypeScript/pull/5422). [preserve constEnums ](https: //www.typescriptlang.org/tsconfig#preserve constEnums)emits the same JavaScript for const enums as plain enums. You can then safely strip the const modifier from .d.ts files [in a build step](https: //github.com/microsoft/TypeScript/blob/1a981d1df1810c868a66b3828497f049a944951c/Gulpfile.js#L144).

This way downstream consumers will not inline enums from your project, avoiding the pitfalls above, but a project can still inline its own enums, unlike banning const enums entirely.

Ambient enums

Ambient enums are used to describe the shape of already existing enum types.

One important difference between ambient and non-ambient enums is that, in regular enums, members that don't have an initializer will be considered constant if its preceding enum member is considered constant. By contrast, an ambient (and non- const) enum member that does not have an initializer is always considered computed.

Objects vs Enums

In modern TypeScript, you may not need an enum when an object with as const could suffice:

ACCESSIBILITY

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people wit

ARIA - Accessibility

Excerpt
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism. For example, ARIA enables accessible JavaScript widgets, form hints and error messages, live content updates, and more.

Warning: Many of these widgets were later incorporated into HTML5, and developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists. For instance, native elements have built-in , roles and states. However, if you choose to use ARIA, you are responsible for mimicking the equivalent browser behavior in script.

use is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

Note: There is a saying "No ARIA is better than bad ARIA." In , they found that Home pages with ARIA present averaged 41% more detected errors than those without ARIA. While ARIA is designed to make web pages more accessible, if used incorrectly, it can do more harm than good.

Here's the markup for a progress bar widget:

This progress bar is built using a , which has no meaning. We include ARIA roles and properties to add meaning. In this example, the attribute informs the browser that this element is actually a JavaScript-powered progress bar widget. The and attributes specify the minimum and maximum values for the progress bar, and the describes the current state of it and therefore must be kept updated with JavaScript.

Along with placing them directly in the markup, ARIA attributes can be added to the element and updated dynamically using JavaScript code like this:

All content that is available to non-assistive technology users must be made available to assistive technologies. Similarly, no features should be included targeting assistive technology users that aren't also accessible to those not using assistive technologies. The above progressbar needs to be styled to make it look like a progressbar.

It would have been much simpler to use the native element instead:

Note: The min attribute is not allowed for the element; its minimum value is always 0.

Note: HTML landmark elements (, , etc.) have built-in implicit ARIA roles, so there is no need to duplicate them.

Like any other web technology, there are varying degrees of support for ARIA. Support is based on the operating system and browser being used, as well as the kind of assistive technology interfacing with it. In addition, the version of the operating system, browser, and assistive technology are contributing factors. Older software versions may not support certain ARIA roles, have only partial support, or misreport its functionality.

It is also important to acknowledge that some people who rely on assistive technology are reluctant to upgrade their software, for fear of losing the ability to interact with their computer and browser. Because of this, it is important to whenever possible, as semantic HTML has far better support for assistive technology.

It is also important to test your authored ARIA with actual assistive technology. Much as how browser emulators and simulators are not an effective solution for testing full support, proxy assistive technology solutions aren't sufficient to fully guarantee functionality.

{
  componentName: 'ContentMain',
  content: [{
      uid: '',
      componentName: 'Single Step Form',
      dataSource: '',
      fields: {
          ModelJson: {
              value: '[ { "title":"Form Name", "fields":{ "Name":{ "label":"Form Name", "type":"input", "value":"Form Name", "name":"Name" }, "Id":{ "label":"Id", "type":"hidden", "value":"", "name":"Id" } }, "fresh":true }, { "title":"Text Input", "fields":{ "FormId":{ "label":"FormId", "type":"hidden", "value":"stepOne", "name":"FormId" }, "Name":{ "label":"Name", "type":"hidden", "value":"textinput", "name":"Name" }, "Id":{ "label":"Id", "type":"input", "value":"fixtureName", "name":"Id" }, "Label":{ "label":"Label", "type":"input", "value":"Fixture Selection", "name":"Label" }, "BackEndLabel":{ "label":"BackEnd Label", "type":"input", "value":"Fixture Selection", "name":"BackEndLabel" }, "Value":{ "label":"Default Value", "type":"input", "value":"", "name":"Value" }, "DefaultValueSource":{ "label":"Default Value Source", "type":"select", "value":[ { "value":"None", "selected":false, "label":"None" }, { "value":"cookie", "selected":true, "label":"Cookie" } ], "name":"DefaultValueSource" }, "DefaultValueKey":{ "label":"Default Value Source Key", "type":"input", "value":"fixtureName", "name":"DefaultValueKey"}]
          }
      }
  }]
}

- `createdFields` is memoized to cache the original value and keep it from re-rendering each cycle
- The `false` parameter signifies that its not to return a multidimensional array, just a single array

5. `createFormInit()` is a 'factory' for both `<SingleStepForm />` and `<MultiStepForm />`. We will focus on what happens if this is called from `<SingleStepForm />`.

```typescript

const createFormInit: {
  (arr: Array<ParsedFormModel>, multi: true): CFReturnType[][];
  (arr: Array<ParsedFormModel>, multi: false): CFReturnType[];
} = (arr: Array<ParsedFormModel>, multi: boolean): any => {
  return multi ? multiStepFormFields(arr) : parseFields(arr);
};

const parseFields = (arr: Array<ParsedFormModel>) => {

const items = arr.reduce((acc: Array<CFReturnType | null>, curr) => {

const formField = createForm(curr);
    return [...acc, formField];
  }, []);

// filter out any null values due to early returns from hidden fields
  return items.filter(Boolean) as Array<CFReturnType>;
};

- `dataMap`

  - `dataMap` is an object with `inputMap` values as the key and related props as the value. All of these will contain a 'file' value. This is the name of the React component that will be dynamically imported, and some of them will contain a 'props' value. Props is an object that contains more details for that particular input type such as type, icon, masking function etc..

    ```javascript

    ```

const dataMap: CFMappingType["dataMap"] = {

// ...
input: {
file: "Input",
props: { type: "text" },
},
phone: {
file: "Input",
props: {
type: "tel",
icon: "phone",
mask: masks.tel,
},
},
radio: {
file: "RadioGroup",
},

// ...
};

2. Inside `createForm()` it will take the incoming field name and use it to index `inputMap`. At this point one of three things will happen:
   - It will find a match and return that input type
   - It will return a null value (these are currently hidden fields or unimportant fields)
   - It will return undefined\
     \
     If it returns a type we will continue, if it returns a null we return a null out of createForm(), if its undefined we then assume and assign this field with a type 'input'
3. Now that we have the field type (the `inputType` value), we use this to index `dataMap` and return the file and or props from that

   - We take this file name and dynamically import that component (ie: 'Input', 'Heading', 'RadioGroup', 'Tabs', etc..)

   ```javascript

4. We then now build our return object which gets added to the array in `parseFields()` and gets sent back to `<SingleStepForm />`

```javascript
return {
  Component,
  data: getData(fields, title),
  file,
  formName: fields?.FormId?.value,
  id: uid(32),
  props: {
    columns: getColumnWidth(fields.ColumnWidth?.value),
    ...props,
  },
  validations: getValidations(file, fields, props?.type),
};

const getData: GetDataProps = ({ fields, title }) => ({
  customValidationErrorMsg:
    fields?.CustomValidationErrorMsg?.value || "field is required",
  items: parseItems(fields?.InputItems?.value),
  label: fields?.Label?.value || "",
  maxLength: parseInt(fields?.MaximumLength?.value) || 524288,
  minLength: parseInt(fields?.MinimumLength?.value) || 0,
  name: fields?.Name?.value,
  placeholder: fields?.PlaceholderText?.value,
  required: fields?.Required?.value || false,
  tabs: fields?.Tabs?.value.split("\n") || [],
  title,
  toolTipText: fields?.TooltipText?.value,
});

const getValidations: GetValidationProps = (file, fields, regex = "") => {
  const skipValidation = ["Heading", "Recaptcha", "Tabs"];
  let pattern;

  if (file && skipValidation.includes(file)) return null;

  // Validations will usually come through as a string value from sitecore

  // but can also come through as an array of objects, these have the type 'select'

  // We first need to parse through this array and grab the value of the selected validation pattern
  if (fields?.ValidationPattern?.type === "select") {
    pattern = getSelectedValue(fields.ValidationPattern.value);
  } else {
    pattern = fields?.ValidationPattern?.value;
  }

  return {
    shouldConfirm: fields?.AppearsOnFormConfirmation?.value,
    validationPattern:
      // 1. by regex in mapping props (phone, ssn)

      // 2. by named regex pattern coming from Sitecore
      regexMap[regex] || regexMap[pattern],
  };
};

   return (
     <div className="relative">
       <InputText {...propData} />
       <div className="hidden lg:block absolute top-0 right-0 mt-4 lg:-mr-48">
         <Tooltip error={Boolean(errors[name])} message={toolTipText} />
       </div>
     </div>
   );
 };
 ```

const formModel: Array<ParsedFormModel> = JSON.parse(modelJson.value);

const createdFields = useMemo(() => createFormInit(formModel, true), []);

const createdFieldsWithoutTabs = [...createdFields.slice(1), []];

const createdFieldsOnlyTabFields = [
  ...createdFields[0][0].data.tabs,
  "Confirmation",
];

// ... return
<FormComponent onSubmit={handleFormSubmit}>
  <FormStepper activeIndex={activeIndex} content={createdFieldsOnlyTabFields} />
  {createdFieldsWithoutTabs.map((innerArray, index) =>
    innerArray.map(
      ({ Component, data, id, props, validations, ...rest }: CFReturnType) => {
        return (
          <FieldWrapper
            className={index === activeIndex ? "block" : "hidden"}
            columns={props?.columns}
            key={id}
          >
            <Component
              register={register({
                pattern: regexPattern(validations),
                required: isRequired(data),
                validate: {
                  match: (value: string) =>
                    matchingEmails(
                      name.toLowerCase(),
                      value,
                      getValues(["email", "emailconf"])
                    ),
                },
              })}
              {...{ data, errors, name, props, ...rest }}
            />
          </FieldWrapper>
        );
      }
    )
  )}
  {isLastStep && <ConfirmationStep data={confirmedValues} {...{ fields }} />}
  <ButtonWrapper />
</FormComponent>;

[
  {
    "title": "Radio List",
    "fields": {
      "FormId": {
        "label": "FormId",
        "type": "hidden",
        "value": "stepOne",
        "name": "FormId"
      },
      "Name": {
        "label": "Name",
        "type": "input",
        "value": "Are you a customer requesting a single light for your yard or property?",
        "name": "Name"
      },
      "Label": {
        "label": "Label",
        "type": "input",
        "value": "Are you a customer requesting a single light for your yard or property?",
        "name": "Label"
      },
      "BackEndLabel": {
        "label": "BackEnd Label",
        "type": "input",
        "value": "Are you a customer requesting a single light for your yard or property?",
        "name": "BackEndLabel"
      },
      "GroupName": {
        "label": "Group Name",
        "type": "input",
        "value": "GroupName",
        "name": "GroupName"
      },
      "Value": {
        "label": "Default Value",
        "type": "input",
        "value": "",
        "name": "Value"
      },
      "Id": {
        "label": "Id",
        "type": "input",
        "value": "radiolist",
        "name": "Id"
      },
      "TooltipText": {
        "label": "Tooltip Text",
        "type": "input",
        "value": "",
        "name": "TooltipText"
      },
      "CustomValidationErrorMsg": {
        "label": "Custom Validation Err. Msg.",
        "type": "input",
        "value": "Please pick an option.",
        "name": "CustomValidationErrorMsg"
      },
      "AppearsOnFormConfirmation": {
        "label": "Appear on Confirmation",
        "type": "checkbox",
        "value": true,
        "name": "AppearsOnFormConfirmation"
      },
      "Required": {
        "label": "Required",
        "type": "checkbox",
        "value": true,
        "name": "Required"
      },
      "InputItems": {
        "label": "Items",
        "type": "radiolist",
        "value": "[{\"text\":\"Yes\",\"value\":\"Yes\"},{\"text\":\"No\",\"value\":\"No\"}]",
        "name": "InputItems"
      }
    },
    "fresh": true
  },
  {
    "title": "Section Header",
    "fields": {
      "FormId": {
        "label": "FormId",
        "type": "hidden",
        "value": "stepOne",
        "name": "FormId"
      },
      "Name": {
        "label": "Name",
        "type": "hidden",
        "value": "sectionhdr",
        "name": "Name"
      },
      "Label": {
        "label": "Label",
        "type": "input",
        "value": "Name & Address",
        "name": "Label"
      },
      "BackEndLabel": {
        "label": "BackEnd Label",
        "type": "input",
        "value": "Name & Address",
        "name": "BackEndLabel"
      },
      "Id": {
        "label": "Id",
        "type": "hidden",
        "value": "sectionhdr",
        "name": "Id"
      }
    },
    "fresh": true
  },
  {
    "title": "First Name",
    "fields": {
      "FormId": {
        "label": "FormId",
        "type": "hidden",
        "value": "stepOne",
        "name": "FormId"
      },
      "Name": {
        "label": "Name",
        "type": "hidden",
        "value": "FirstName",
        "name": "Name"
      },
      "Id": {
        "label": "Id",
        "type": "hidden",
        "value": "FirstName",
        "name": "Id"
      },
      "Label": {
        "label": "Label",
        "type": "hidden",
        "value": "First Name",
        "name": "Label"
      },
      "BackEndLabel": {
        "label": "BackEnd Label",
        "type": "hidden",
        "value": "First Name",
        "name": "BackEndLabel"
      },
      "Value": {
        "label": "Default Value",
        "type": "hidden",
        "value": "",
        "name": "Value"
      },
      "ValidationPattern": {
        "label": "Validation Rule",
        "type": "hidden",
        "value": "lettersWhiteSpace",
        "name": "ValidationPattern"
      },
      "TooltipText": {
        "label": "Tooltip Text",
        "type": "input",
        "value": "",
        "name": "TooltipText"
      },
      "CustomValidationErrorMsg": {
        "label": "Custom Validation Err. Msg.",
        "type": "hidden",
        "value": "Please enter a first name.",
        "name": "CustomValidationErrorMsg"
      },
      "AppearsOnFormConfirmation": {
        "label": "Appear on Confirmation",
        "type": "checkbox",
        "value": false,
        "name": "AppearsOnFormConfirmation"
      },
      "Required": {
        "label": "Required",
        "type": "checkbox",
        "value": true,
        "name": "Required"
      },
      "MinimumLength": {
        "label": "Min. Length",
        "type": "hidden",
        "value": "",
        "name": "MinimumLength"
      },
      "MaximumLength": {
        "label": "Max. Length",
        "type": "hidden",
        "value": "40",
        "name": "MaximumLength"
      },
      "Predefined": {
        "label": "Predefined",
        "type": "hidden",
        "value": "true",
        "name": "Predefined"
      },
      "ColumnWidth": {
        "label": "Column Width",
        "type": "select",
        "value": [
          {
            "value": "2",
            "selected": false,
            "label": "2"
          },
          {
            "value": "3",
            "selected": true,
            "label": "3"
          },
          {
            "value": "4",
            "selected": false,
            "label": "4"
          },
          {
            "value": "5",
            "selected": false,
            "label": "5"
          },
          {
            "value": "6",
            "selected": false,
            "label": "6"
          }
        ],
        "name": "ColumnWidth"
      }
    },
    "fresh": true
  }
]

<FormComponent onSubmit={handleSubmit(onSubmit)}>
  {createdFields.map(
    ({
      Component,
      data,
      id,
      props,
      validations,
      ...rest
    }: CFReturnType) => {
      return (
        <FieldWrapper columns={props?.columns} key={id}>
          <Component
            register={register({
              pattern: regexPattern(validations),
              required: isRequired(data),
              validate: {
                match: (value: string) =>
                  matchingEmails(
                    name.toLowerCase(),
                    value,
                    getValues(["email", "emailconf"])
                  ),
              },
            })}
            {...{ data, errors, name, props, ...rest }}
          />
        </FieldWrapper>
      );
    }
  )}
  <Button type="submit" variant="primary">
    submit
  </Button>
</FormComponent>

import React from "react";
import { rest } from "msw";
import { setupServer } from "msw/node";
import { render, fireEvent, waitFor, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import Fetch from "../fetch";

const server = setupServer(
  rest.get("/greeting", (req, res, ctx) => {
    return res(ctx.json({ greeting: "hello there" }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test("loads and displays greeting", async () => {
  render(<Fetch url="/greeting" />);

  fireEvent.click(screen.getByText("Load Greeting"));

  await waitFor(() => screen.getByRole("heading"));

  expect(screen.getByRole("heading")).toHaveTextContent("hello there");
  expect(screen.getByRole("button")).toBeDisabled();
});

test("handles server error", async () => {
  server.use(
    rest.get("/greeting", (req, res, ctx) => {
      return res(ctx.status(500));
    })
  );

  render(<Fetch url="/greeting" />);

  fireEvent.click(screen.getByText("Load Greeting"));

  await waitFor(() => screen.getByRole("alert"));

  expect(screen.getByRole("alert")).toHaveTextContent("Oops, failed to fetch!");
  expect(screen.getByRole("button")).not.toBeDisabled();
});

fireEvent.click(node)

cleanup clears the DOM (use with afterEach to reset DOM between tests)

hidden

collapse

if there's a single one with the given name attribute, it is treated as a boolean, returning true if the checkbox is checked, false if unchecked.

import { render, fireEvent, screen } from "@testing-library/react";

test("loads items eventually", async () => {
  render(<Page />);

  // Click button
  fireEvent.click(screen.getByText("Load"));

  // Wait for page to update with query text
  const items = await screen.findAllByText(/Item #[0-9]: /);
  expect(items).toHaveLength(10);
});

// Matching a string:
getByText("Hello World"); // full string match
getByText("llo Worl", { exact: false }); // substring match
getByText("hello world", { exact: false }); // ignore case

// Matching a regex:
getByText(/World/); // substring match
getByText(/world/i); // substring match, ignore case
getByText(/^hello world$/i); // full string match, ignore case
getByText(/Hello W?oRlD/i); // advanced regex

// Matching with a custom function:
getByText((content, element) => content.startsWith("Hello"));

// import dependencies
import React from "react";

// import API mocking utilities from Mock Service Worker
import { rest } from "msw";
import { setupServer } from "msw/node";

// import react-testing methods
import { render, fireEvent, waitFor, screen } from "@testing-library/react";

// add custom jest matchers from jest-dom
import "@testing-library/jest-dom";
// the component to test
import Fetch from "../fetch";

// declare which API requests to mock
const server = setupServer(
  // capture "GET /greeting" requests
  rest.get("/greeting", (req, res, ctx) => {
    // respond using a mocked JSON body
    return res(ctx.json({ greeting: "hello there" }));
  })
);

// establish API mocking before all tests
beforeAll(() => server.listen());
// reset any request handlers that are declared as a part of our tests
// (i.e. for testing one-time error scenarios)
afterEach(() => server.resetHandlers());
// clean up once the tests are done
afterAll(() => server.close());

// ...

test("handles server error", async () => {
  server.use(
    // override the initial "GET /greeting" request handler
    // to return a 500 Server Error
    rest.get("/greeting", (req, res, ctx) => {
      return res(ctx.status(500));
    })
  );

  // ...
});

fireEvent.click(screen.getByText("Load Greeting"));

// wait until the `get` request promise resolves and
// the component calls setState and re-renders.
// `waitFor` waits until the callback doesn't throw an error

await waitFor(() =>
  // getByRole throws an error if it cannot find an element
  screen.getByRole("heading")
);

// assert that the alert message is correct using
// toHaveTextContent, a custom matcher from jest-dom.
expect(screen.getByRole("alert")).toHaveTextContent("Oops, failed to fetch!");

// assert that the button is not disabled using
// toBeDisabled, a custom matcher from jest-dom.
expect(screen.getByRole("button")).not.toBeDisabled();

import React, { useState, useReducer } from "react";
import axios from "axios";

const initialState = {
  error: null,
  greeting: null,
};

function greetingReducer(state, action) {
  switch (action.type) {
    case "SUCCESS": {
      return {
        error: null,
        greeting: action.greeting,
      };
    }
    case "ERROR": {
      return {
        error: action.error,
        greeting: null,
      };
    }
    default: {
      return state;
    }
  }
}

export default function Fetch({ url }) {
  const [{ error, greeting }, dispatch] = useReducer(
    greetingReducer,
    initialState
  );
  const [buttonClicked, setButtonClicked] = useState(false);

  const fetchGreeting = async (url) =>
    axios
      .get(url)
      .then((response) => {
        const { data } = response;
        const { greeting } = data;
        dispatch({ type: "SUCCESS", greeting });
        setButtonClicked(true);
      })
      .catch((error) => {
        dispatch({ type: "ERROR", error });
      });

  const buttonText = buttonClicked ? "Ok" : "Load Greeting";

  return (
    <div>
      <button onClick={() => fetchGreeting(url)} disabled={buttonClicked}>
        {buttonText}
      </button>
      {greeting && <h1>{greeting}</h1>}
      {error && <p role="alert">Oops, failed to fetch!</p>}
    </div>
  );
}

expect(
  getByTestId(document.documentElement, "html-element")
).toBeInTheDocument();
expect(
  getByTestId(document.documentElement, "svg-element")
).toBeInTheDocument();
expect(
  queryByTestId(document.documentElement, "does-not-exist")
).not.toBeInTheDocument();

<input data-testid="no-aria-invalid" />
<input data-testid="aria-invalid" aria-invalid />
<input data-testid="aria-invalid-value" aria-invalid="true" />
<input data-testid="aria-invalid-false" aria-invalid="false" />

<form data-testid="valid-form">
  <input />
</form>

<form data-testid="invalid-form">
  <input required />
</form>

expect(getByTestId("no-aria-invalid")).not.toBeInvalid();
expect(getByTestId("aria-invalid")).toBeInvalid();
expect(getByTestId("aria-invalid-value")).toBeInvalid();
expect(getByTestId("aria-invalid-false")).not.toBeInvalid();

expect(getByTestId("valid-form")).not.toBeInvalid();
expect(getByTestId("invalid-form")).toBeInvalid();

<input data-testid="required-input" required />
<input data-testid="aria-required-input" aria-required="true" />
<input data-testid="conflicted-input" required aria-required="false" />
<input data-testid="aria-not-required-input" aria-required="false" />
<input data-testid="optional-input" />
<input data-testid="unsupported-type" type="image" required />
<select data-testid="select" required></select>
<textarea data-testid="textarea" required></textarea>
<div data-testid="supported-role" role="tree" required></div>
<div data-testid="supported-role-aria" role="tree" aria-required="true"></div>

expect(getByTestId("required-input")).toBeRequired();
expect(getByTestId("aria-required-input")).toBeRequired();
expect(getByTestId("conflicted-input")).toBeRequired();
expect(getByTestId("aria-not-required-input")).not.toBeRequired();
expect(getByTestId("optional-input")).not.toBeRequired();
expect(getByTestId("unsupported-type")).not.toBeRequired();
expect(getByTestId("select")).toBeRequired();
expect(getByTestId("textarea")).toBeRequired();
expect(getByTestId("supported-role")).not.toBeRequired();
expect(getByTestId("supported-role-aria")).toBeRequired();

<input data-testid="no-aria-invalid" />
<input data-testid="aria-invalid" aria-invalid />
<input data-testid="aria-invalid-value" aria-invalid="true" />
<input data-testid="aria-invalid-false" aria-invalid="false" />

<form data-testid="valid-form">
  <input />
</form>

<form data-testid="invalid-form">
  <input required />
</form>

expect(getByTestId("no-aria-invalid")).toBeValid();
expect(getByTestId("aria-invalid")).not.toBeValid();
expect(getByTestId("aria-invalid-value")).not.toBeValid();
expect(getByTestId("aria-invalid-false")).toBeValid();

expect(getByTestId("valid-form")).toBeValid();
expect(getByTestId("invalid-form")).not.toBeValid();

<div data-testid="zero-opacity" style="opacity: 0">Zero Opacity Example</div>
<div data-testid="visibility-hidden" style="visibility: hidden">
  Visibility Hidden Example
</div>
<div data-testid="display-none" style="display: none">Display None Example</div>
<div style="opacity: 0">
  <span data-testid="hidden-parent">Hidden Parent Example</span>
</div>
<div data-testid="visible">Visible Example</div>
<div data-testid="hidden-attribute" hidden>Hidden Attribute Example</div>

expect(getByText("Zero Opacity Example")).not.toBeVisible();
expect(getByText("Visibility Hidden Example")).not.toBeVisible();
expect(getByText("Display None Example")).not.toBeVisible();
expect(getByText("Hidden Parent Example")).not.toBeVisible();
expect(getByText("Visible Example")).toBeVisible();
expect(getByText("Hidden Attribute Example")).not.toBeVisible();

const ancestor = getByTestId("ancestor");
const descendant = getByTestId("descendant");
const nonExistantElement = getByTestId("does-not-exist");

expect(ancestor).toContainElement(descendant);
expect(descendant).not.toContainElement(ancestor);
expect(ancestor).not.toContainElement(nonExistantElement);

// These are valid uses
expect(getByTestId("parent")).toContainHTML(
  '<span data-testid="child"></span>'
);
expect(getByTestId("parent")).toContainHTML('<span data-testid="child" />');
expect(getByTestId("parent")).not.toContainHTML("<br />");

// These won't work
expect(getByTestId("parent")).toContainHTML('data-testid="child"');
expect(getByTestId("parent")).toContainHTML("data-testid");
expect(getByTestId("parent")).toContainHTML("</span>");

<a
  data-testid="link"
  href="/"
  aria-label="Home page"
  title="A link to start over"
  >Start</a
>
<a data-testid="extra-link" href="/about" aria-label="About page">About</a>
<img src="avatar.jpg" data-testid="avatar" alt="User profile pic" />
<img
  src="logo.jpg"
  data-testid="logo"
  alt="Company logo"
  aria-describedby="t1"
/>
<span id="t1" role="presentation">The logo of Our Company</span>

expect(getByTestId("link")).toHaveAccessibleDescription();
expect(getByTestId("link")).toHaveAccessibleDescription("A link to start over");
expect(getByTestId("link")).not.toHaveAccessibleDescription("Home page");
expect(getByTestId("extra-link")).not.toHaveAccessibleDescription();
expect(getByTestId("avatar")).not.toHaveAccessibleDescription();
expect(getByTestId("logo")).not.toHaveAccessibleDescription("Company logo");
expect(getByTestId("logo")).toHaveAccessibleDescription(
  "The logo of Our Company"
);

<img data-testid="img-alt" src="" alt="Test alt" />
<img data-testid="img-empty-alt" src="" alt="" />
<svg data-testid="svg-title"><title>Test title</title></svg>
<button data-testid="button-img-alt"><img src="" alt="Test" /></button>
<p><img data-testid="img-paragraph" src="" alt="" /> Test content</p>
<button data-testid="svg-button"><svg><title>Test</title></svg></p>
<div><svg data-testid="svg-without-title"></svg></div>
<input data-testid="input-title" title="test" />

expect(getByTestId("img-alt")).toHaveAccessibleName("Test alt");
expect(getByTestId("img-empty-alt")).not.toHaveAccessibleName();
expect(getByTestId("svg-title")).toHaveAccessibleName("Test title");
expect(getByTestId("button-img-alt")).toHaveAccessibleName();
expect(getByTestId("img-paragraph")).not.toHaveAccessibleName();
expect(getByTestId("svg-button")).toHaveAccessibleName();
expect(getByTestId("svg-without-title")).not.toHaveAccessibleName();
expect(getByTestId("input-title")).toHaveAccessibleName();

const button = getByTestId("ok-button");

expect(button).toHaveAttribute("disabled");
expect(button).toHaveAttribute("type", "submit");
expect(button).not.toHaveAttribute("type", "button");

expect(button).toHaveAttribute("type", expect.stringContaining("sub"));
expect(button).toHaveAttribute("type", expect.not.stringContaining("but"));

const deleteButton = getByTestId("delete-button");
const noClasses = getByTestId("no-classes");

expect(deleteButton).toHaveClass("extra");
expect(deleteButton).toHaveClass("btn-danger btn");
expect(deleteButton).toHaveClass("btn-danger", "btn");
expect(deleteButton).not.toHaveClass("btn-link");

expect(deleteButton).toHaveClass("btn-danger extra btn", { exact: true }); // to check if the element has EXACTLY a set of classes
expect(deleteButton).not.toHaveClass("btn-danger extra", { exact: true }); // if it has more than expected it is going to fail

expect(noClasses).not.toHaveClass();

<form data-testid="login-form">
  <input type="text" name="username" value="jane.doe" />
  <input type="password" name="password" value="12345678" />
  <input type="checkbox" name="rememberMe" checked />
  <button type="submit">Sign in</button>
</form>

const button = getByTestId("delete-button");

expect(button).toHaveStyle("display: none");
expect(button).toHaveStyle({ display: "none" });
expect(button).toHaveStyle(`
  background-color: red;
  display: none;
`);
expect(button).toHaveStyle({
  backgroundColor: "red",
  display: "none",
});
expect(button).not.toHaveStyle(`
  background-color: blue;
  display: none;
`);
expect(button).not.toHaveStyle({
  backgroundColor: "blue",
  display: "none",
});

const element = getByTestId("text-content");

expect(element).toHaveTextContent("Content");
expect(element).toHaveTextContent(/^Text Content$/); // to match the whole content
expect(element).toHaveTextContent(/content$/i); // to use case-insensitive match
expect(element).not.toHaveTextContent("content");

<input type="text" value="text" data-testid="input-text" />
<input type="number" value="5" data-testid="input-number" />
<input type="text" data-testid="input-empty" />
<select multiple data-testid="select-number">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third" selected>Third Value</option>
</select>

const textInput = getByTestId("input-text");
const numberInput = getByTestId("input-number");
const emptyInput = getByTestId("input-empty");
const selectInput = getByTestId("select-number");

expect(textInput).toHaveValue("text");
expect(numberInput).toHaveValue(5);
expect(emptyInput).not.toHaveValue();
expect(selectInput).toHaveValue(["second", "third"]);

<label for="input-example">First name</label>
<input type="text" id="input-example" value="Luca" />

<label for="textarea-example">Description</label>
<textarea id="textarea-example">An example description here.</textarea>

<label for="single-select-example">Fruit</label>
<select id="single-select-example">
  <option value="">Select a fruit...</option>
  <option value="banana">Banana</option>
  <option value="ananas">Ananas</option>
  <option value="avocado">Avocado</option>
</select>

<label for="multiple-select-example">Fruits</label>
<select id="multiple-select-example" multiple>
  <option value="">Select a fruit...</option>
  <option value="banana" selected>Banana</option>
  <option value="ananas">Ananas</option>
  <option value="avocado" selected>Avocado</option>
</select>

const input = screen.getByLabelText("First name");
const textarea = screen.getByLabelText("Description");
const selectSingle = screen.getByLabelText("Fruit");
const selectMultiple = screen.getByLabelText("Fruits");

expect(input).toHaveDisplayValue("Luca");
expect(input).toHaveDisplayValue(/Luc/);
expect(textarea).toHaveDisplayValue("An example description here.");
expect(textarea).toHaveDisplayValue(/example/);
expect(selectSingle).toHaveDisplayValue("Select a fruit...");
expect(selectSingle).toHaveDisplayValue(/Select/);
expect(selectMultiple).toHaveDisplayValue([/Avocado/, "Banana"]);

<input type="checkbox" checked data-testid="input-checkbox-checked" />
<input type="checkbox" data-testid="input-checkbox-unchecked" />
<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
<div
  role="checkbox"
  aria-checked="false"
  data-testid="aria-checkbox-unchecked"
/>

<input type="radio" checked value="foo" data-testid="input-radio-checked" />
<input type="radio" value="foo" data-testid="input-radio-unchecked" />
<div role="radio" aria-checked="true" data-testid="aria-radio-checked" />
<div role="radio" aria-checked="false" data-testid="aria-radio-unchecked" />
<div role="switch" aria-checked="true" data-testid="aria-switch-checked" />
<div role="switch" aria-checked="false" data-testid="aria-switch-unchecked" />

const inputCheckboxChecked = getByTestId("input-checkbox-checked");
const inputCheckboxUnchecked = getByTestId("input-checkbox-unchecked");
const ariaCheckboxChecked = getByTestId("aria-checkbox-checked");
const ariaCheckboxUnchecked = getByTestId("aria-checkbox-unchecked");
expect(inputCheckboxChecked).toBeChecked();
expect(inputCheckboxUnchecked).not.toBeChecked();
expect(ariaCheckboxChecked).toBeChecked();
expect(ariaCheckboxUnchecked).not.toBeChecked();

const inputRadioChecked = getByTestId("input-radio-checked");
const inputRadioUnchecked = getByTestId("input-radio-unchecked");
const ariaRadioChecked = getByTestId("aria-radio-checked");
const ariaRadioUnchecked = getByTestId("aria-radio-unchecked");
expect(inputRadioChecked).toBeChecked();
expect(inputRadioUnchecked).not.toBeChecked();
expect(ariaRadioChecked).toBeChecked();
expect(ariaRadioUnchecked).not.toBeChecked();

const ariaSwitchChecked = getByTestId("aria-switch-checked");
const ariaSwitchUnchecked = getByTestId("aria-switch-unchecked");
expect(ariaSwitchChecked).toBeChecked();
expect(ariaSwitchUnchecked).not.toBeChecked();

<input type="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" />
<input type="checkbox" checked data-testid="input-checkbox-checked" />
<input type="checkbox" data-testid="input-checkbox-unchecked" />
<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
<div
  role="checkbox"
  aria-checked="false"
  data-testid="aria-checkbox-unchecked"
/>
<input type="checkbox" data-testid="input-checkbox-indeterminate" />

const ariaCheckboxMixed = getByTestId("aria-checkbox-mixed");
const inputCheckboxChecked = getByTestId("input-checkbox-checked");
const inputCheckboxUnchecked = getByTestId("input-checkbox-unchecked");
const ariaCheckboxChecked = getByTestId("aria-checkbox-checked");
const ariaCheckboxUnchecked = getByTestId("aria-checkbox-unchecked");
const inputCheckboxIndeterminate = getByTestId("input-checkbox-indeterminate");

expect(ariaCheckboxMixed).toBePartiallyChecked();
expect(inputCheckboxChecked).not.toBePartiallyChecked();
expect(inputCheckboxUnchecked).not.toBePartiallyChecked();
expect(ariaCheckboxChecked).not.toBePartiallyChecked();
expect(ariaCheckboxUnchecked).not.toBePartiallyChecked();

inputCheckboxIndeterminate.indeterminate = true;
expect(inputCheckboxIndeterminate).toBePartiallyChecked();

<label for="startTime"> Please enter a start time for the meeting: </label>
<input
  id="startTime"
  type="text"
  aria-errormessage="msgID"
  aria-invalid="true"
  value="11:30 PM"
/>
<span id="msgID" aria-live="assertive" style="visibility:visible">
  Invalid time: the time must be between 9:00 AM and 5:00 PM
</span>

const timeInput = getByLabel("startTime");

expect(timeInput).toHaveErrorMessage(
  "Invalid time: the time must be between 9:00 AM and 5:00 PM"
);
expect(timeInput).toHaveErrorMessage(/invalid time/i); // to partially match
expect(timeInput).toHaveErrorMessage(expect.stringContaining("Invalid time")); // to partially match
expect(timeInput).not.toHaveErrorMessage("Pikachu!");

const closeButton = getByRole("button", { name: "Close" });

expect(closeButton).toHaveDescription("Closing will discard any changes");
expect(closeButton).toHaveDescription(/will discard/); // to partially match
expect(closeButton).toHaveDescription(expect.stringContaining("will discard")); // to partially match
expect(closeButton).toHaveDescription(/^closing/i); // to use case-insensitive match
expect(closeButton).not.toHaveDescription("Other description");

const deleteButton = getByRole("button", { name: "Delete" });
expect(deleteButton).not.toHaveDescription();
expect(deleteButton).toHaveDescription(""); // Missing or empty description always becomes a blank string

// import React so you can use JSX (React.createElement) in your test
import React from "react";

/**
 * render: lets us render the component as React would
 * screen: a utility for finding elements the same way the user does
 */
import { render, screen } from "@testing-library/react";

const Welcome = (props) => {
  const [values, setValues] = useState({
    firstName: props.firstName,
    lastName: props.lastName,
  });

  const handleChange = (event) => {
    setValues({ ...values, [event.target.name]: event.target.value });
  };

  return (
    <div>
      <h1>
        Welcome, {values.firstName} {values.lastName}
      </h1>

      <form name="userName">
        <label>
          First Name
          <input
            value={values.firstName}
            name="firstName"
            onChange={handleChange}
          />
        </label>

        <label>
          Last Name
          <input
            value={values.lastName}
            name="lastName"
            onChange={handleChange}
          />
        </label>
      </form>
    </div>
  );
};

export default Welcome;

test("has correct input value", () => {
  const wrapper = shallow(<Welcome firstName="John" lastName="Doe" />);
  expect(wrapper.find('input[name="firstName"]').value).toEqual("John");
  expect(wrapper.find('input[name="lastName"]').value).toEqual("Doe");
});

test("has correct input value", () => {
  render(<Welcome firstName="John" lastName="Doe" />);
  expect(screen.getByRole("form")).toHaveFormValues({
    firstName: "John",
    lastName: "Doe",
  });
});

import React from "react";

const Checkbox = () => {
  return (
    <div>
      <label htmlFor="checkbox">Check</label>
      <input id="checkbox" type="checkbox" />
    </div>
  );
};

export default Checkbox;

test("handles click correctly", async () => {
  render(<Checkbox />);
  const user = userEvent.setup();

  // You can also call this method directly on userEvent,
  // but using the methods from `.setup()` is recommended.
  await user.click(screen.getByText("Check"));

  expect(screen.getByLabelText("Check")).toBeChecked();
});

// E.X is
constant:enum E {  X,}Try
    ```

*   It does not have an initializer and the preceding enum member was a _numeric_
constant. In this case the value of the current enum member will be the value of the preceding enum member plus one.

enum ShapeKind {  Circle,  Square,} interface Circle {  kind: ShapeKind.Circle;  radius: number;} interface Square {  kind: ShapeKind.Square;  sideLength: number;} let c: Circle = {  kind: ShapeKind.Square,Type 'ShapeKind.Square' is not assignable to type 'ShapeKind.Circle'.Type 'ShapeKind.Square' is not assignable to type 'ShapeKind.Circle'.  radius: 100,};Try

enum E {  Foo,  Bar,} function f(x: E) {  if (x !== E.Foo || x !== E.Bar) {This condition will always return 'true' since the types 'E.Foo' and 'E.Bar' have no overlap.This condition will always return 'true' since the types 'E.Foo' and 'E.Bar' have no overlap.
//  }}Try

enum LogLevel {  ERROR,  WARN,  INFO,  DEBUG,} /** * This is equivalent to: * type LogLevelStrings = 'ERROR' | 'WARN' | 'INFO' | 'DEBUG'; */type LogLevelStrings = keyof typeof LogLevel; function printImportant(key: LogLevelStrings, message: string) {
const num = LogLevel[key];  if (num <= LogLevel.WARN) {    console.log("Log level key is:", key);    console.log("Log level value is:", num);    console.log("Log level message is:", message);  }}printImportant("ERROR", "This is a message");Try

const enum EDirection {  Up,  Down,  Left,  Right,}
const ODirection = {  Up: 0,  Down: 1,  Left: 2,  Right: 3,} as
const; EDirection.Up;           (enum member) EDirection.Up = 0 ODirection.Up;           (property) Up: 0
// Using the enum as a parameterfunction walk(dir: EDirection) {}
// It requires an extra line to pull out the valuestype Direction = typeof ODirection[keyof typeof ODirection];function run(dir: Direction) {} walk(EDirection.Left);run(ODirection.Right);Try

// Find the progress bar <div> in the DOM.
var progressBar = document.getElementById("percent-loaded");

// Set its ARIA roles and states,
// so that assistive technologies know what kind of widget it is.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// Create a function that can be called at any time to update
// the value of the progress bar.
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

getByLabelText(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  text: TextMatch,
  options?: {
    selector?: string = '*',
    exact?: boolean = true,
    normalizer?: NormalizerFn,
  }): HTMLElement

// for/htmlFor relationship between label and form element id
<label for="username-input">Username</label>
<input id="username-input" />

// The aria-labelledby attribute with form elements
<label id="username-label">Username</label>
<input aria-labelledby="username-label" />

// Wrapper labels
<label>Username <input /></label>

// Wrapper labels where the label text is in another child element
<label>
  <span>Username</span>
  <input />
</label>

// aria-label attributes
// Take care because this is not a label that users can see on the page,
// so the purpose of your input must be obvious to visual users.
<input aria-label="Username" />

// Multiple elements labelled via aria-labelledby
<label id="username">Username</label>
<input aria-labelledby="username" />
<span aria-labelledby="username">Please enter your username</span>

// Multiple labels with the same text
<label>
  Username
  <input />
</label>
<label>
  Username
  <textarea></textarea>
</label>

fireEvent.change(getByLabelText(/username/i), { target: { value: "a" } });
// note: attempting to manually set the files property of an HTMLInputElement
// results in an error as the files property is read-only.
// this feature works around that by using Object.defineProperty.fireEvent.change(getByLabelText(/picture/i), {  target: {    files: [new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})],  },})
// Note: The 'value' attribute must use ISO 8601 format when firing a
// change event on an input of type "date". Otherwise the element will not
// reflect the changed value.
// Invalid:fireEvent.change(input, {target: {value: '24/05/2020'}})
// Valid:fireEvent.change(input, {target: {value: '2020-05-24'}})

const myEvent = createEvent.click(node, {button: 2})fireEvent(node, myEvent)
// myEvent.timeStamp can be accessed just like any other properties from myEvent
// note: The access to the events created by `createEvent` is based on the native event API,
// Therefore, native properties of HTMLEvent object (e.g. `timeStamp`, `cancelable`, `type`) should be set using Object.defineProperty
// For more info see: https:
//developer.mozilla.org/en-US/docs/Web/API/Event

import {render, screen, fireEvent} from '@testing-library/react'
const Button = ({onClick, children}) => (
<button onClick={onClick}>{children}</button>)test('calls onClick prop when clicked', () => {
const handleClick = jest.fn()  render(<Button onClick={handleClick}>Click Me</Button>)  fireEvent.click(screen.getByText(/click me/i))  expect(handleClick).toHaveBeenCalledTimes(1)})

Enter: Accepts the currently selected suggested value by closing the popup and placing the selected value in the textbox with the input cursor at the end of the value.
Escape: Closes the popup and returns focus to the textbox. Optionally, clears the contents of the textbox.
Any printable character: Returns the focus to the textbox without closing the popup and types the character.
Backspace (Optional): Returns focus to the textbox and deletes the character prior to the cursor.
Delete (Optional): Returns focus to the textbox, removes the selected state if a suggestion was selected, and removes the inline autocomplete string if present.
Right Arrow: Moves focus one cell to the right. Optionally, if focus is on the right-most cell in the row, focus may move to the first cell in the following row. If focus is on the last cell in the grid, either does nothing or returns focus to the textbox.
Left Arrow: Moves focus one cell to the left. Optionally, if focus is on the left-most cell in the row, focus may move to the last cell in the previous row. If focus is on the first cell in the grid, either does nothing or returns focus to the textbox.
Down Arrow: Moves focus one cell down. If focus is in the last row of the grid, either does nothing or returns focus to the textbox.
Up Arrow: Moves focus one cell up. If focus is in the first row of the grid, either does nothing or returns focus to the textbox.
Page Down (Optional): Moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row of the grid, focus does not move.
Page Up (Optional): Moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row of the grid, focus does not move.
Home (Optional): Either:
- Moves focus to the first cell in the row that contains focus. Or, if the grid has fewer than three cells per row or multiple suggested values per row, focus may move to the first cell in the grid.
- Returns focus to the textbox and places the cursor on the first character.
End (Optional): Either:
- Moves focus to the last cell in the row that contains focus. Or, if the grid has fewer than three cells per row or multiple suggested values per row, focus may move to the last cell in the grid.
- Returns focus to the textbox and places the cursor after the last character.
Control + Home (optional): moves focus to the first row.
Control + End (Optional): moves focus to the last row.

In a combobox implementing the ARIA 1.1 pattern:
- The element that serves as the combobox container has role combobox.
- The element with role combobox contains or owns a textbox element that has either role or role .
- When the combobox popup is visible, the combobox element contains or owns an element that has role , , , or .
- If the combobox popup has a role other than listbox, the element with role combobox has set to a value that corresponds to the popup type. That is, aria-haspopup is set to grid, tree, or dialog. Note that elements with role combobox have an implicit aria-haspopup value of listbox.
- When the combobox popup is visible, the textbox element has set to a value that refers to the combobox popup element.
In a combobox implementing the ARIA 1.0 pattern:
- The element that serves as the textbox has role .
- When the combobox popup is visible, the element with role combobox has set to a value that refers to an element with role .
The textbox element has a value for of false. Note that the default value of aria-multiline is false.
When the combobox popup is not visible, the element with role combobox has set to false. When the popup element is visible, aria-expanded is set to true. Note that elements with role combobox have a default value for aria-expanded of false.
When a combobox receives focus, DOM focus is placed on the textbox element.
When a descendant of a listbox, grid, or tree popup is focused, DOM focus remains on the textbox and the textbox has set to a value that refers to the focused element within the popup.
In a combobox with a listbox, grid, or tree popup, when a suggested value is visually indicated as the currently selected value, the option, gridcell, row, or treeitem containing that value has set to true.
If the combobox has a visible label, the element with role combobox has set to a value that refers to the labelling element. Otherwise, the combobox element has a label provided by .
The textbox element has set to a value that corresponds to its autocomplete behavior:
- none: When the popup is displayed, the suggested values it contains are the same regardless of the characters typed in the textbox.
- list

The grid container has role grid.
Each row container has role row and is either a DOM descendant of or owned by the grid element or an element with role rowgroup.
Each cell is either a DOM descendant of or owned by a row element and has one of the following roles:
- if the cell contains a title or header information for the column.
- if the cell contains title or header information for the row.
- if the cell does not contain column or row header information.
If there is an element in the user interface that serves as a label for the grid, is set on the grid element with a value that refers to the labelling element. Otherwise, a label is specified for the grid element using .
If the grid has a caption or description, is set on the grid element with a value referring to the element containing the description.
If the grid provides sort functions, is set to an appropriate value on the header cell element for the sorted column or row as described in the section on .
If the grid supports selection, when a cell or row is selected, the selected element has set true. If the grid supports column selection and a column is selected, all cells in the column have aria-selected set to true.
If the grid provides content editing functionality and contains cells that may have edit capabilities disabled in certain conditions, may be set true on cells where editing is disabled. If edit functions are disabled for all cells, aria-readonly may be set true on the grid element. Grids that do not provide editing functions do not include the aria-readonly attribute on any of their elements.
If there are conditions where some rows or columns are hidden or not present in the DOM, e.g., data is dynamically loaded when scrolling or the grid provides functions for hiding rows or columns, the following properties are applied as described in the section on .
- or is set to the total number of columns or rows, respectively.
- or
If the grid includes cells that span multiple rows or multiple columns, and if the grid role is NOT applied to an HTML table element, then or is applied as described in .

When a single-select listbox receives focus:
- If none of the options are selected before the listbox receives focus, the first option receives focus. Optionally, the first option may be automatically selected.
- If an option is selected before the listbox receives focus, focus is set on the selected option.
When a multi-select listbox receives focus:
- If none of the options are selected before the listbox receives focus, focus is set on the first option and there is no automatic change in the selection state.
- If one or more options are selected before the listbox receives focus, focus is set on the first option in the list that is selected.
Down Arrow: Moves focus to the next option. Optionally, in a single-select listbox, selection may also move with focus.
Up Arrow: Moves focus to the previous option. Optionally, in a single-select listbox, selection may also move with focus.
Home (Optional): Moves focus to first option. Optionally, in a single-select listbox, selection may also move with focus. Supporting this key is strongly recommended for lists with more than five options.
End (Optional): Moves focus to last option. Optionally, in a single-select listbox, selection may also move with focus. Supporting this key is strongly recommended for lists with more than five options.
Type-ahead is recommended for all listboxes, especially those with more than seven options:
- Type a character: focus moves to the next item with a name that starts with the typed character.
- Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.
Multiple Selection: Authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as Shift or Control, while navigating the list or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states.
- Recommended selection model -- holding modifier keys is not necessary:

When a single-select tree receives focus:
- If none of the nodes are selected before the tree receives focus, focus is set on the first node.
- If a node is selected before the tree receives focus, focus is set on the selected node.
When a multi-select tree receives focus:
- If none of the nodes are selected before the tree receives focus, focus is set on the first node.
- If one or more nodes are selected before the tree receives focus, focus is set on the first selected node.
Right arrow:
- When focus is on a closed node, opens the node; focus does not move.
- When focus is on a open node, moves focus to the first child node.
Left arrow:
- When focus is on an open node, closes the node.
- When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
Down Arrow: Moves focus to the next node that is focusable without opening or closing a node.
Up Arrow: Moves focus to the previous node that is focusable without opening or closing a node.
Home: Moves focus to the first node in the tree without opening or closing a node.
End: Moves focus to the last node in the tree that is focusable without opening a node.
Enter: activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
Type-ahead is recommended for all trees, especially for trees with more than 7 root nodes:
- Type a character: focus moves to the next node with a name that starts with the typed character.
- Type multiple characters in rapid succession: focus moves to the next node with a name that starts with the string of characters typed.
* (Optional): Expands all siblings that are at the same level as the current node.
Selection in multi-select trees: Authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as Shift or Control, while navigating the list or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states.
- Recommended selection model -- holding a modifier key while moving focus is not necessary:

Enter: If cell-only focus is enabled and focus is on the first cell with the aria-expanded property, opens or closes the child rows.,Otherwise, performs the default action for the cell.
Tab: If the row containing focus contains focusable elements (e.g., inputs, buttons, links, etc.), moves focus to the next input in the row. If focus is on the last focusable element in the row, moves focus out of the treegrid widget to the next focusable element.
Right Arrow:
- If focus is on a collapsed row, expands the row.
- If focus is on an expanded row or is on a row that does not have child rows, moves focus to the first cell in the row.
- If focus is on the right-most cell in a row, focus does not move.
Left Arrow:
- If focus is on an expanded row, collapses the row.
- If focus is on a collapsed row or on a row that does not have child rows, focus does not move.
Down Arrow:
- If focus is on a row, moves focus one row down. If focus is on the last row, focus does not move.
- If focus is on a cell, moves focus one cell down. If focus is on the bottom cell in the column, focus does not move.
Up Arrow:
- If focus is on a row, moves focus one row up. If focus is on the first row, focus does not move.
- If focus is on a cell, moves focus one cell up. If focus is on the top cell in the column, focus does not move.
Page Down:
- If focus is on a row, moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row, focus does not move.
- If focus is on a cell, moves focus down an author-determined number of cells, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row, focus does not move.
Page Up:
- If focus is on a row, moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row, focus does not move.
- If focus is on a cell, moves focus up an author-determined number of cells, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row, focus does not move.
Home:
- If focus is on a row, moves focus to the first row. If focus is in the first row, focus does not move.
- If focus is on a cell, moves focus to the first cell in the row. If focus is in the first cell of the row, focus does not move.
End:
- If focus is on a row, moves focus to the last row. If focus is in the last row, focus does not move.
- If focus is on a cell, moves focus to the last cell in the row. If focus is in the last cell of the row, focus does not move.
Control + Home:
- If focus is on a row, moves focus to the first row. If focus is in the first row, focus does not move.
- If focus is on a cell, moves focus to the first cell in the column. If focus is in the first row, focus does not move.
Control + End:
- If focus is on a row, moves focus to the last row. If focus is in the last row, focus does not move.
- If focus is on a cell, moves focus to the last cell in the column. If focus is in the last row, focus does not move.

The treegrid container has role treegrid.
Each row container has role row and is either a DOM descendant of or owned by the treegrid element or an element with role rowgroup.
Each cell is either a DOM descendant of or owned by a row element and has one of the following roles:
- if the cell contains a title or header information for the column.
- if the cell contains title or header information for the row.
- if the cell does not contain column or row header information.
A row that can be expanded or collapsed to show or hide a set of child rows is a parent row. Each parent row has the state set on either the row element or on a cell contained in therow. The aria-expanded state is set to false when the child rows are not displayed and set to true when the child rows are displayed. Rows that do not control display of child rows do not have the aria-expanded attribute because, if they were to have it, they would be incorrectly described to assistive technologies as parent rows.
If the treegrid supports selection of more than one row or cell, it is a multi-select treegrid and the element with role treegrid has set to true. Otherwise, it is a single-select treegrid, and aria-multiselectable is either set to false or the default value of false is implied.
If the treegrid is a single-select treegrid, is set to true on the selected row or cell, and it is not present on any other row or cell in the treegrid.
if the treegrid is a multi-select treegrid:
- All selected rows or cells have set to true.
- All rows and cells that are not selected have set to false
If there is an element in the user interface that serves as a label for the treegrid, is set on the grid element with a value that refers to the labelling element. Otherwise, a label is specified for the grid element using .
If the treegrid has a caption or description, is set on the grid element with a value referring to the element containing the description.
If the treegrid provides sort functions, is set to an appropriate value on the header cell element for the sorted column or row as described in the section on .
If the treegrid provides content editing functionality and contains cells that may have edit capabilities disabled in certain conditions, is set to true on cells where editing is disabled. If edit functions are disabled for all cells, instead of setting aria-readonly to true on every cell, aria-readonly may be set to true on the treegrid element. Treegrids that do not provide cell content editing functions do not include the aria-readonly attribute on any of their elements.
If there are conditions where some rows or columns are hidden or not present in the DOM, e.g., data is dynamically loaded when scrolling or the grid provides functions for hiding rows or columns, the following properties are applied as described in the section on .
- or is set to the total number of columns or rows, respectively.
- or
If the treegrid includes cells that span multiple rows or multiple columns, and if the treegrid role is NOT applied to an HTML table element, then or is applied as described in .

Visibility of the focus indicator: Users need to be able to easily distinguish the keyboard focus indicator from other features of the visual design. Just as a mouse user may move the mouse to help find the mouse pointer, a keyboard user may press a navigation key to watch for movement. If visual changes in response to focus movement are subtle, many users will lose track of focus and be unable to operate. Authors are advised to rely on the default focus indicators provided by browsers. If overriding the default, consider:
- something about ... Colors and gradients can disappear in high contrast modes.
- Users need to be able to easily distinguish between focus and selection as described in , especially when a component that contains selected elements does not contain the focus.
- ... other considerations to be added ...
Persistence of focus: It is essential that there is always a component within the user interface that is active (document.activeElement is not null or is not the body element) and that the active element has a visual focus indicator. Authors need to manage events that effect the currently active element so focus remains visible and moves logically. For example, if the user closes a dialog or performs a destructive operation like deleting an item from a list, the active element may be hidden or removed from the DOM. If such events are not managed to set focus on the button that triggered the dialog or on the list item following the deleted item, browsers move focus to the body element, effectively causing a loss of focus within the user interface.
Predictability of movement: Usability of a keyboard interface is heavily influenced by how readily users can guess where focus will land after a navigation key is pressed. Some possible approaches to optimizing predictability include:
- Move focus in a pattern that matches the reading order of the page's language. In left to right languages, for example, create a tab sequence that moves focus left to right and then top to bottom.
- Incorporate all elements of a section of the page in the tab sequence before moving focus to another section. For instance, in a page with multiple columns that has content in a left side bar, center region, and right side bar, build a tab sequence that covers all elements in the left sidebar before focus moves to the first focusable element in the center column.

deleteTask()

id

newName

import React, {
    useState
} from 'react'
import {
    render,
    fireEvent
} from '@testing-library/react'
function CostInput() {

const [ value, setValue ] = useState( '' ) removeDollarSign = value => ( value[ 0 ] === '$' ? value.slice( 1 ) : value ) getReturnValue = value => ( value === '' ? '' : `$${value}` ) handleChange = ev => {
        ev.preventDefault()
const inputtedValue = ev.currentTarget.value

const noDollarSign = removeDollarSign( inputtedValue ) if ( isNaN( noDollarSign ) ) return setValue( getReturnValue( noDollarSign ) )
    }
    return <input value = {
        value
    }
    aria - label = "cost-input"
    onChange = {
        handleChange
    }
    />}
const setup = () => {
const utils = render(<CostInput / > )
const input = utils.getByLabelText( 'cost-input' ) return {
    input,
    ...utils,
}
}
test( 'It should keep a $ in front of the input', () => {

const {
            input
        } = setup() fireEvent.change( input, {
            target: {
                value: '23'
            }
        } ) expect( input.value ).toBe( '$23' )
    } ) test( 'It should allow a $ to be in the input when the value is changed', () => {

const {
            input
        } = setup() fireEvent.change( input, {
            target: {
                value: '$23.0'
            }
        } ) expect( input.value ).toBe( '$23.0' )
    } ) test( 'It should not allow letters to be inputted', () => {

const {
                input
            } = setup() expect( input.value ).toBe( '' )
// empty before  fireEvent.change(input, {target: {value: 'Good Day'}})  expect(input.value).toBe('')
//empty after})test('It should allow the $ to be deleted', () => {
const {input} = setup()  fireEvent.change(input, {target: {value: '23'}})  expect(input.value).toBe('$23')
// need to make a change so React registers "" as a change  fireEvent.change(input, {target: {value: ''}})  expect(input.value).toBe('')})

export default {
  title: "Components/Accordion",
  component: AccordionComponent,
  argTypes: {
    theme: {
      name: "Theme",
    },
    closeOthers: {
      name: "One Panel Open At A Time",
    },
  },
};

const Template = (args) => <AccordionComponent {...args} />;

export const Primary = Template.bind({});

Primary.args = {
  ...props,
};

argTypes: {
  title: {
    control: {
      type: 'text',
    },
  },
  subtitle: {
    control: {
      type: 'text',
    },
  },
  link: {
    control: 'boolean',
  },
  ctaType: {
    control: {
      type: 'inline-radio',
      options: ['ImageSlide', 'VideoSlide'],
    },
  },
},

import React from "react";
import MyComponent from "./index";
import { Data } from "./data";
import { MyComponent as MyComponentComposition } from "../../lib/composition";

const props = MyComponentComposition({ fields: Data });

export default {
  title: "Components/MyComponent",
  component: MyComponent,
  argTypes: {
    backgroundColor: {
      control: {
        type: "radio",
        options: ["white", "gray"],
      },
      defaultValue: "white",
    },
  },
};

const Template = (args) => <MyComponent {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  ...props,
};

...

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
  argTypes: {
    backgroundColor: {
      control: {
        type: 'radio',
        options: ['white', 'gray'],
      },
      defaultValue: 'white',
    },
  },
};

...

...

import { storybookCustomArgs, createStoryOptions } from 'src/lib/helpers';


const props = BulletedOverviewComposition(Data);

const itemsToShow = createStoryOptions(props.items);

export default {
  title: 'Components/Bulleted Overview',
  component: BulletedOverview,
  argTypes: {
    ...storybookCustomArgs(props, BulletedOverview, [], false),
    items: {
      name: 'How many items?',
      control: {
        type: 'select',
        options: {
          ...itemsToShow,
        },
      },
    },
  },
};

...

import {render, screen} from '@testing-library/react' // (or /dom, /vue, ...)test('should show login form', () => {  render(<Login />)  const input = screen.getByLabelText('Username')  // Events and assertions...})

import {screen, getByLabelText} from '@testing-library/dom'// With screen:const inputNode1 = screen.getByLabelText('Username')// Without screen, you need to provide a container:const container = document.querySelector('#app')const inputNode2 = getByLabelText(container, 'Username')

// Matching a string:screen.getByText('Hello World') // full string matchscreen.getByText('llo Worl', {exact: false}) // substring matchscreen.getByText('hello world', {exact: false}) // ignore case// Matching a regex:screen.getByText(/World/) // substring matchscreen.getByText(/world/i) // substring match, ignore casescreen.getByText(/^hello world$/i) // full string match, ignore casescreen.getByText(/Hello W?oRlD/i) // substring match, ignore case, searches for "hello world" or "hello orld"// Matching with a custom function:screen.getByText((content, element) => content.startsWith('Hello'))

// full string does not matchscreen.getByText('Goodbye World')// case-sensitive regex with different casescreen.getByText(/hello world/)// function looking for a span when it's actually a div:screen.getByText((content, element) => {  return element.tagName.toLowerCase() === 'span' && content.startsWith('Hello')})

import {screen} from '@testing-library/dom'document.body.innerHTML = `  <button>test</button>  <span>multi-test</span>  <div>multi-test</div>`// debug documentscreen.debug()// debug single elementscreen.debug(screen.getByText('test'))// debug multiple elementsscreen.debug(screen.getAllByText('multi-test'))

import {screen} from '@testing-library/dom'document.body.innerHTML = `  <button>test</button>  <span>multi-test</span>  <div>multi-test</div>`// log entire document to testing-playgroundscreen.logTestingPlaygroundURL()// log a single elementscreen.logTestingPlaygroundURL(screen.getByText('test'))

        <a role="menuitem">Assistive tech users perceive this element as an item in a menu, not a link.</a>
        <a aria-label="Assistive tech users can only perceive the contents of this aria-label, not the link text">Link Text</a>

  <table role="log">
    <!--
      Table that assistive technology users will not perceive as a table.
      The log role tells browser this is a log, not a table.
    -->
  </table>
  <ul role="navigation">
    <!-- This is a navigation region, not a list. -->
    <li><a href="uri1">nav link 1</li>
    <li><a href="uri2">nav link 2</li>
    <!-- ERROR! Previous list items are not in a list! -->
  </ul>

<ul role="tree">
  <li role="treeitem">Fruits
    <ul role="group">
      <li role="treeitem">Apples</li>
      <li role="treeitem">Bananas</li>
      <li role="treeitem">Oranges</li>
    </ul>
  </li>
</ul>

<h2 id="bees-heading">7 ways you can help save the bees</h2>
<p>Bees are disappearing rapidly. Here are seven things you can do to help.</p>
<p><a id="bees-read-more" aria-labelledby="bees-read-more bees-heading">Read more...</a></p>

<table>
 <caption>Table 1. Traditional dietary intake of Okinawans and other Japanese circa 1950</caption>
 <thead>
  <tr>
   <th>
   <th>Okinawa, 1949
   <th>Japan, 1950
 <tbody>
  <tr>
   <th>Total calories
   <td>1785
   <td>2068

  [...]

</table>

<fieldset title="Select your starter class">
  <label><input type="radio" name="starter-class" value="green"> Green</label>
  <label><input type="radio" name="starter-class" value="red"> Red</label>
  <label><input type="radio" name="starter-class" value="blue"> Blue</label>
</fieldset>

<ul role="tree">
  <li role="treeitem">Fruits
    <ul role="group">
      <li role="treeitem">Apples</li>
      <li role="treeitem">Bananas</li>
      <li role="treeitem">Oranges</li>
    </ul>
  </li>
</ul>

<ul role="menu">
  <li role="menuitem">Fruits
    <ul role="menu">
      <li role="menuitem">Apples</li>
      <li role="menuitem">Bananas</li>
      <li role="menuitem">Oranges</li>
    </ul>
  </li>
</ul>

<p>Please fill in your <span id="code-label">one-time code</span> to log in.</p>
<p>
 <label>Code
  <input name="code"
         aria-labelledby="code-label"
         aria-label="This is ignored"
         placeholder="123456"
         title="Get your code from the app.">
 </label>
</p>

<button aria-describedby="trash-desc"> Move to <img src="bin.svg" alt="trash"></button>
...
<p id="trash-desc">Items in <img src="bin.svg" alt="the trash"> will be permanently removed after 30 days.</p>

<label for="username">Username</label>
<input id="username" name="username" aria-describedby="username-desc">
<button aria-expanded="false" aria-controls="username-desc" aria-label="Help about username">?</button>
<p id="username-desc" hidden>
  Your username is the name that you use to log in to this service.
</p>

<h2 id="events-heading">Upcoming events</h2>
<table aria-labelledby="events-heading">
 <caption>
  Calendar of upcoming events, weeks 27 through 31, with each week starting with
  Monday. The first column is the week number.
 </caption>
 <tr><th>Week<th>Monday<th>Tuesday<th>Wednesday<th>Thursday<th>Friday<th>Saturday<th>Sunday
 <tr><td>27<td><td><td><td><td><td><td>
 <tr><td>28<td><td><td><td><td><td><td><a href="/events/9856">Crown Princess's birthday</a>
 <tr><td>29<td><td><td><td><td><td><td>
 <tr><td>30<td><td><td><td><td><td><td>
 <tr><td>31<td><td><td><td><td><td><td>
</table>

<h2 id="neutron">Neutron</h2>
<figure aria-labelledby="neutron" aria-describedby="neutron-caption">
 <img src="neutron.svg" alt="Within the neutron are three quarks (blue 'u',
 red 'd', green 'd') that are interconnected.">
 <figcaption id="neutron-caption">
  The quark content of the neutron. The color assignment of individual quarks is
  arbitrary, but all three colors must be present. Forces between quarks are
  mediated by gluons.
 </figcaption>
</figure>

  <!--
    aria-rowcount tells assistive technologies the actual size of the grid
    is 463 rows even though only 4 rows are present in the markup.
  -->
  <table role="grid" aria-rowcount="463">
    aria-label="Student roster for history 101"
    <thead>
      <tr aria-rowindex="1">
        <th>Last Name</th>
        <th>First Name</th>
        <th>E-mail</th>
        <th>Major</th>
        <th>Minor</th>
        <th>Standing</th>
      </tr>
    </thead>
    <tbody>
        <!--
          aria-rowindex tells assistive technologies that this
          row is row 51 in the grid of 463 rows.
        -->
      <tr aria-rowindex="51">
        <td>Henderson</td>
        <td>Alan</td>
        <td>ahederson56@myuniveristy.edu</td>
        <td>Business</td>
        <td>Spanish</td>
        <td>Junior</td>
      </tr>
        <!--
          aria-rowindex tells assistive technologies that this
          row is row 52 in the grid of 463 rows.
        -->
      <tr aria-rowindex="52">
        <td>Henderson</td>
        <td>Alice</td>
        <td>ahederson345@myuniveristy.edu</td>
        <td>Engineering</td>
        <td>none</td>
        <td>Sophomore</td>
      </tr>
        <!--
          aria-rowindex tells assistive technologies that this
          row is row 53 in the grid of 463 rows.
        -->
      <tr aria-rowindex="53">
        <td>Henderson</td>
        <td>Andrew</td>
        <td>ahederson75@myuniveristy.edu</td>
        <td>General Studies</td>
        <td>none</td>
        <td>Freshman</td>
      </tr>
    </tbody>
  </table>

<div role="grid" aria-colcount="16">
  <div role="rowgroup">
    <div role="row" aria-colindex="2">
      <span role="columnheader">First Name</span>
      <span role="columnheader">Last Name</span>
      <span role="columnheader">Company</span>
      <span role="columnheader">Address</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-colindex="2">
      <span role="gridcell">Fred</span>
      <span role="gridcell">Jackson</span>
      <span role="gridcell">Acme, Inc.</span>
      <span role="gridcell">123 Broad St.</span>
    </div>
    <div role="row" aria-colindex="2">
      <span role="gridcell">Sara</span>
      <span role="gridcell">James</span>
      <span role="gridcell">Acme, Inc.</span>
      <span role="gridcell">123 Broad St.</span>
    </div>
   …
  </div>
</div>

  <table role="grid" aria-rowcount="463" aria-colcount="13">
    aria-label="Student grades for history 101"
    <!--
      aria-rowcount and aria-colcount tell assistive technologies
      the actual size of the grid is 463 rows by 13 columns,
      which is not the number rows and columns found in the markup.
    -->
    <thead>
      <tr aria-rowindex="1">
        <!--
          aria-colindex tells assistive technologies that the
          following columns represent columns 1 and 2 of the total data set.
        -->
        <th aria-colindex="1">Last Name</th>
        <th aria-colindex="2">First Name</th>
        <!--
          aria-colindex tells users of assistive technologies that the
          following columns represent columns 10, 11, 12, and 13 of
          the overall data set of grades.
        -->
        <th aria-colindex="10">Homework 4</th>
        <th aria-colindex="11">Quiz 2</th>
        <th aria-colindex="12">Homework 5</th>
        <th aria-colindex="13">Homework 6</th>
      </tr>
    </thead>
    <tbody>
      <tr aria-rowindex="50">
        <!--
          every cell needs to define the aria-colindex attribute
        -->
        <td aria-colindex="1">Henderson</td>
        <td aria-colindex="2">Alan</td>
        <td aria-colindex="10">8</td>
        <td aria-colindex="11">25</td>
        <td aria-colindex="12">9</td>
        <td aria-colindex="13">9</td>
      </tr>
      <tr aria-rowindex="51">
        <td aria-colindex="1">Henderson</td>
        <td aria-colindex="2">Alice</td>
        <td aria-colindex="10">10</td>
        <td aria-colindex="11">27</td>
        <td aria-colindex="12">10</td>
        <td aria-colindex="13">8</td>
      </tr>
      <tr aria-rowindex="52">
        <td aria-colindex="1">Henderson</td>
        <td aria-colindex="2">Andrew</td>
        <td aria-colindex="10">9</td>
        <td aria-colindex="11">0</td>
        <td aria-colindex="12">29</td>
        <td aria-colindex="13">8</td>
      </tr>
    </tbody>
  </table>

  <div role="grid" aria-rowcount="463">
    aria-label="Student grades for history 101"
    <div role="rowgroup">
      <div role="row" aria-rowindex="1">
          <!--
            aria-rowspan and aria-colspan provide
            assistive technologies with the correct data cell header information
            when header cells span more than one row or column.
          -->
          <span role="columnheader" aria-rowspan="2">Last Name</span>
          <span role="columnheader" aria-rowspan="2">First Name</span>
          <span role="columnheader" aria-colspan="2">Test 1</span>
          <span role="columnheader" aria-colspan="2">Test 2</span>
          <span role="columnheader" aria-colspan="2">Final</span>
      </div>
      <div role="row" aria-rowindex="2">
          <span role="columnheader">Score</span>
          <span role="columnheader">Grade</span>
          <span role="columnheader">Score</span>
          <span role="columnheader">Grade</span>
          <span role="columnheader">Total</span>
          <span role="columnheader">Grade</span>
      </div>
    </div>
    <div role="rowgroup">
      <div role="row" aria-rowindex="50">
        <span role="cell">Henderson</span>
        <span role="cell">Alan</span>
        <span role="cell">89</span>
        <span role="cell">B+</span>
        <span role="cell">72</span>
        <span role="cell">C</span>
        <span role="cell">161</span>
        <span role="cell">B-</span>
      </div>
      <div role="row"  aria-rowindex="51">
        <span role="cell">Henderson</span>
        <span role="cell">Alice</span>
        <span role="cell">94</span>
        <span role="cell">A</span>
        <span role="cell">86</span>
        <span role="cell">B</span>
        <span role="cell">180</span>
        <span role="cell">A-</span>
      </div>
      <div role="row"  aria-rowindex="52">
        <span role="cell">Henderson</span>
        <span role="cell">Andrew</span>
        <span role="cell">82</span>
        <span role="cell">B-</span>
        <span role="cell">95</span>
        <span role="cell">A</span>
        <span role="cell">177</span>
        <span role="cell">B+</span>
      </div>
    </div>
  </div>

  <table role="grid" aria-rowcount="463" aria-colcount="13"
    aria-label="Student grades for history 101">
    <thead>
      <tr aria-colindex="10" aria-rowindex="1">
        <th>Homework 4</th>
        <!--
          aria-sort indicates the column with the heading
          "Quiz 2" has been used to sort the rows of the grid.
        -->
        <th aria-sort="descending">Quiz 2</th>
        <th>Homework 5</th>
        <th>Homework 6</th>
      </tr>
    </thead>
    <tbody>
      <tr aria-colindex="10" aria-rowindex="50">
        <td>8</td>
        <td>30</td>
        <td>9</td>
        <td>9</td>
      </tr>
      <tr aria-colindex="10"  aria-rowindex="51">
        <td>10</td>
        <td>29</td>
        <td>10</td>
        <td>8</td>
      </tr>
      <tr aria-colindex="10"  aria-rowindex="52">
        <td>9</td>
        <td>9</td>
        <td>27</td>
        <td>6</td>
      </tr>
      <tr aria-colindex="10"  aria-rowindex="53">
        <td>9</td>
        <td>10</td>
        <td>26</td>
        <td>8</td>
      </tr>
      <tr aria-colindex="10"  aria-rowindex="54">
        <td>9</td>
        <td>7</td>
        <td>24</td>
        <td>6</td>
      </tr>
    </tbody>
  </table>

<ul role="tablist">
  <li role="presentation">
    <a role="tab" href="#">Tab 1</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#">Tab 2</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#">Tab 3</a>
  </li>
</ul>

function editTask(id, newName) {
  const editedTaskList = tasks.map(task => {
  // if this task has the same ID as the edited task
    if (id === task.id) {
      //
      return {...task, name: newName}
    }
    return task;
  });
  setTasks(editedTaskList);
}

const taskList = tasks.map(task => (
  <Todo
    id={task.id}
    name={task.name}
    completed={task.completed}
    key={task.id}
    toggleTaskCompleted={toggleTaskCompleted}
    deleteTask={deleteTask}
    editTask={editTask}
  />
));

const editingTemplate = (
  <form className="stack-small">
    <div className="form-group">
      <label className="todo-label" htmlFor={props.id}>
        New name for {props.name}
      </label>
      <input id={props.id} className="todo-text" type="text" />
    </div>
    <div className="btn-group">
      <button type="button" className="btn todo-cancel">
        Cancel
        <span className="visually-hidden">renaming {props.name}</span>
      </button>
      <button type="submit" className="btn btn__primary todo-edit">
        Save
        <span className="visually-hidden">new name for {props.name}</span>
      </button>
    </div>
  </form>
);
const viewTemplate = (
  <div className="stack-small">
    <div className="c-cb">
        <input
          id={props.id}
          type="checkbox"
          defaultChecked={props.completed}
          onChange={() => props.toggleTaskCompleted(props.id)}
        />
        <label className="todo-label" htmlFor={props.id}>
          {props.name}
        </label>
      </div>
      <div className="btn-group">
        <button type="button" className="btn">
          Edit <span className="visually-hidden">{props.name}</span>
        </button>
        <button
          type="button"
          className="btn btn__danger"
          onClick={() => props.deleteTask(props.id)}
        >
          Delete <span className="visually-hidden">{props.name}</span>
        </button>
      </div>
  </div>
);

function FilterButton(props) {
  return (
    <button
      type="button"
      className="btn toggle-btn"
      aria-pressed={props.isPressed}
      onClick={() => props.setFilter(props.name)}
    >
      <span className="visually-hidden">Show </span>
      <span>{props.name}</span>
      <span className="visually-hidden"> tasks</span>
    </button>
  );
}

const taskList = tasks
.filter(FILTER_MAP[filter])
.map(task => (
  <Todo
    id={task.id}
    name={task.name}
    completed={task.completed}
    key={task.id}
    toggleTaskCompleted={toggleTaskCompleted}
    deleteTask={deleteTask}
    editTask={editTask}
  />
));

[]

This example renders a different greeting depending on the value of isLoggedIn prop.

<input>

<textarea>

<select>

setState()

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Essay:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

class Button extends React.Component {
  render() {
    return (
      <button style={{ background: this.props.color }}>
        {this.props.children}
      </button>
    );
  }
}

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button color={this.props.color}>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  render() {
    const color = "purple";
    const children = this.props.messages.map((message) => (
      <Message text={message.text} color={color} />
    ));
    return <div>{children}</div>;
  }
}

import PropTypes from 'prop-types';

class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}

Button.contextTypes = {
  color: PropTypes.string
};

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  getChildContext() {
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

MessageList.childContextTypes = {
  color: PropTypes.string
};

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

import PropTypes from "prop-types";

const Button = ({ children }, context) => (
  <button style={{ background: context.color }}>{children}</button>
);

Button.contextTypes = { color: PropTypes.string };

import PropTypes from "prop-types";

class MediaQuery extends React.Component {
  constructor(props) {
    super(props);
    this.state = { type: "desktop" };
  }

  getChildContext() {
    return { type: this.state.type };
  }

  componentDidMount() {
    const checkMediaQuery = () => {
      const type = window.matchMedia("(min-width: 1025px)").matches
        ? "desktop"
        : "mobile";
      if (type !== this.state.type) {
        this.setState({ type });
      }
    };

    window.addEventListener("resize", checkMediaQuery);
    checkMediaQuery();
  }

  render() {
    return this.props.children;
  }
}

MediaQuery.childContextTypes = {
  type: PropTypes.string,
};

Role region is especially helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion.

polite

true

Getting Started

This page is an overview of the React documentation and related resources.

React is a JavaScript library for building user interfaces. Learn what React is all about on our homepage or in the tutorial.

Try React

Try React

React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.

Online Playgrounds

If you're interested in playing around with React, you can use an online code playground. Try a Hello World template on , , or .

If you prefer to use your own text editor, you can also , edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we'd only recommend using this for simple demos.

Add React to a Website

You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.

Create a New React App

When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute to set up!

As your application grows, you might want to consider a more integrated setup. There are several JavaScript toolchains we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem. Learn how.

Learn React

People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you'll find this section helpful.

If you prefer to learn by doing, start with our practical tutorial.
If you prefer to learn concepts step by step, start with our guide to main concepts.

Like any unfamiliar technology, React does have a learning curve. With practice and some patience, you will get the hang of it.

First Examples

The React homepage contains a few small React examples with a live editor. Even if you don't know anything about React yet, try changing their code and see how it affects the result.

React for Beginners

If you feel that the React documentation goes at a faster pace than you're comfortable with, check out . It introduces the most important React concepts in a detailed, beginner-friendly way. Once you're done, give the documentation another try!

React for Designers

If you're coming from a design background, are a great place to get started.

JavaScript Resources

The React documentation assumes some familiarity with programming in the JavaScript language. You don't have to be an expert, but it's harder to learn both React and JavaScript at the same time.

We recommend going through to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.

Tip
Whenever you get confused by something in JavaScript, and are great websites to check. There are also community support forums where you can ask for help.

Practical Tutorial

If you prefer to learn by doing, check out our practical tutorial. In this tutorial, we build a tic-tac-toe game in React. You might be tempted to skip it because you're not into building games -- but give it a chance. The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a much deeper understanding.

Step-by-Step Guide

If you prefer to learn concepts step by step, our guide to main concepts is the best place to start. Every next chapter in it builds on the knowledge introduced in the previous chapters so you won't miss anything as you go along.

Thinking in React

Many React users credit reading Thinking in React as the moment React finally "clicked" for them. It's probably the oldest React walkthrough but it's still just as relevant.

Recommended Courses

Sometimes people find third-party books and video courses more helpful than the official documentation. We maintain a list of commonly recommended resources, some of which are free.

Advanced Concepts

Once you're comfortable with the main concepts and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like context and refs.

API Reference

This documentation section is useful when you want to learn more details about a particular React API. For example, React.Component API reference can provide you with details on how setState() works, and what different lifecycle methods are useful for.

Glossary and FAQ

The glossary contains an overview of the most common terms you'll see in the React documentation. There is also a FAQ section dedicated to short questions and answers about common topics, including making AJAX requests, component state, and file structure.

Staying Informed

The React blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted there first.

You can also follow the on Twitter, but you won't miss anything essential if you only read the blog.

Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the , as well as on the page.

Versioned Documentation

This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation on a separate page. Note that documentation for past versions is snapshotted at the time of the release, and isn't being continuously updated.

Something Missing?

If something is missing in the documentation or if you found some part confusing, please with your suggestions for improvement, or tweet at the . We love hearing from you!

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount((prevCount) => prevCount - 1)}>-</button>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>
    </>
  );
}

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ...

  // Show a label in DevTools next to this Hook
  // e.g. "FriendStatus: Online"
  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}

import React, { useRef, PropsWithChildren } from 'react';
import { createPortal } from 'react-dom';
import { a11yAction } from 'src/lib/helpers';
import { Placeholder } from '@sitecore-jss/sitecore-jss-react';
import SvgLoader from 'src/components/SvgLoader';
import Transition from 'src/lib/Transition';
import { useBodyContext } from 'src/components/ContentWrapper/context';
import { useExperienceEditor } from 'src/lib/useExperienceEditor';
import useMediaQuery from 'src/lib/useMediaQuery';
import usePreventBodyScroll from 'src/lib/usePreventBodyScroll';
import { ModalComponentTypes, ModalTypes } from './types';
import { useFocusTrap } from 'src/lib/useFocusTrap';

const Portal = ({ children }: PropsWithChildren<{}>) => {
  if (typeof window === 'undefined') return null;
  // Create the root element that content is rendered into
  // Used for "Portal" or other functionality that querySelectors for the '#root'
  let portalRoot = document.getElementById('root');
  if (!portalRoot) {
    portalRoot = document.createElement('div');
    portalRoot.setAttribute('id', 'root');
    portalRoot = document.body.appendChild(portalRoot);
  }

  return createPortal(children, portalRoot);
};

const Modal = ({ id, rendering }: ModalTypes) => {
  const { dispatch, state } = useBodyContext();
  const { activeId, isOpen } = state.modal;
  const { isEEActive } = useExperienceEditor();
  const shouldDisplayModal = activeId === id && isOpen;

  return isEEActive ? (
    <div className="border">
      The Modal Container
      <Placeholder name="jss-public-modal-container" rendering={rendering} />
    </div>
  ) : (
    <ModalComponent
      isActive={shouldDisplayModal}
      onCloseHandler={() => dispatch({ type: 'modalClose' })}
      {...{ id }}
    >
      <Placeholder name="jss-public-modal-container" rendering={rendering} />
    </ModalComponent>
  );
};

const ModalComponent = ({
  children,
  controls,
  isActive,
  onCloseHandler = () => {},
}: React.PropsWithChildren<ModalComponentTypes>) => {
  const modalBackgroundRef = useRef<HTMLDivElement>(null);
  const modalContainerRef = useRef<HTMLDivElement>(null);
  const isMobile = !useMediaQuery('md');

  // when the modal is active, do not allow the body to scroll
  usePreventBodyScroll(isActive);

  // classes for the modal 'background' div
  const activeClass = isActive ? 'bg-black bg-opacity-80 pointer-events-auto z-modal' : '';

  // classes for the modal 'container' div
  const containerBackgroundClass = controls?.isTransparent ? '' : 'border border-gray bg-white';
  const containerScrollClass = controls?.preventScroll ? '' : 'overflow-auto';
  const containerClass = `${containerBackgroundClass} ${containerScrollClass}`;

  // closes the modal when clicking outside of the modal
  const handleClose = (event: React.MouseEvent<HTMLDivElement>) => {
    if (
      event &&
      event.target &&
      event.target instanceof Element &&
      event.target.contains(modalBackgroundRef.current) &&
      isActive
    ) {
      onCloseHandler();
    }
  };

  useFocusTrap({
    shouldTrap: isActive,
    container: modalBackgroundRef.current,
    onExit: () => onCloseHandler(),
    onEnter: ([first]) => first?.focus(),
  });

  return (
    <Portal>
      <div
        className={`js-modal fixed h-screen w-full top-0 left-0 flex flex-col items-center p-12 pointer-events-none ${activeClass}`}
        ref={modalBackgroundRef}
        {...a11yAction(handleClose)}
        role="dialog"
        aria-hidden={!isActive}
        tabIndex={-1}
      >
        <Transition.RevealDown
          active={isActive}
          className={`relative px-24 pt-32 pb-24 m-auto w-full max-w-3xl ${containerClass}`}
        >
          <div ref={modalContainerRef}>
            <button
              aria-label="close"
              className="visible absolute right-0 top-0 mr-24 md:mt-16 mt-0 z-overlay"
              onClick={onCloseHandler}
            >
              <SvgLoader
                aria-hidden={true}
                focusable={false}
                color={controls?.isTransparent ? 'text-white' : 'text-teal-dark'}
                name="X"
                size={isMobile ? 20 : 24}
              />
            </button>
            {children}
          </div>
        </Transition.RevealDown>
      </div>
    </Portal>
  );
};

export { Modal as default, ModalComponent };

/

/count

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/count">Count</Link>
            </li>
          </ul>
        </nav>
        <Switch>

function Count() {
  const [count, setCount] = useState(1);
  useEffect(() => {
    window.addEventListener('scroll', increaseCount);
    return () => window.removeEventListener('scroll', increaseCount);
  }, []);
  const increaseCount = () => {
    setCount(count => count + 1);
  }
  return <h2 style={{marginBottom: 1200}}>Count {count}</h2>;
}

function Count() {
  const [count, setCount] = useState(1);
  useEffect(() => {
    window.addEventListener('scroll', _.throttle(increaseCount, 100));
    return () => window.removeEventListener('scroll', _.throttle(increaseCount, 100));
  }, []);
  const increaseCount = () => {
    setCount(count => count + 1);
  }
  return <h2 style={{marginBottom: 1200}}>Count {count}</h2>;
}

const throttledCount = _.throttle(increaseCount, 100);
useEffect(() => {
    window.addEventListener('scroll', throttledCount);
    return () => window.removeEventListener('scroll', throttledCount);
  }, []);

useEffect(() => {
    const throttledCount = _.throttle(increaseCount, 100);
    window.addEventListener('scroll', throttledCount);
    return () => window.removeEventListener('scroll', throttledCount);
  }, []);

function Count() {
  const [count, setCount] = useState(1);
  const [text, setText] = useState("");
  const increaseCount = () => {
    setCount(count => count + 1);
  }
  const debouncedCount = _.debounce(increaseCount, 1000);
  const handleChange = (e) => {
    setText(e.target.value);
    debouncedCount();
  }
  return <>
    <h2>Count {count}</h2>
    <h3>Text {text}</h3>

Description Lists

Using description lists

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

HTML and XHTML

This technique relates to (Sufficient when used with ).

Description

The objective of this technique is to provide the description of names or terms by presenting them in a description list. The list is marked up using the dl element. Within the list, each term is put in a separate dt element, and its description goes in the dd element directly following it. Multiple terms can be associated with a single description, as can a single term with multiple descriptions, provided that semantic sequence is maintained. The title attribute can be used to provide additional information about the description list. Usage of description lists ensures that terms and their descriptions are semantically related even as presentation format changes, as well as ensuring that these terms and descriptions are semantically grouped as a unit.

Description lists are easiest to use when the descriptions are ordered alphabetically. A common use for description lists is a glossary of terms.

NOTE

In HTML5 the name "Description list" was introduced. In previous versions these lists were referred to as "Definition lists".

Examples

Example 1

A list of descriptions of nautical terms used on a Website about sailing.

Resources

Resources are for information purposes only, no endorsement implied.

Related Techniques

Tests

Procedure

For any set of terms and their associated descriptions:

Check that the list is contained within a dl element.
Check that each term in the list being described is contained within a dt element.
Check that when there is more than one term that shares the same decription that the dt

Expected Results

All checks above are true.

Storybook

Storybook is an open source tool for developing UI components in isolation. It essentially gives us a sandbox to showcase and test the components we'll use throughout our app.

To get it up and running navigate to the app repo and, from the command line, enter:

Let's first discuss some of the core principles of Storybook (we'll use examples from our own app where possible), before then diving into the anatomy of a typical story.

Stories

A story, much like a React component, is a function that describes how to render a component.

You can have multiple stories per component, meaning Storybook gives us the power to describe multiple rendered states.

So here's how the initial default PushDownPanel might look:

And then we can add variations based on different states, for example a version that uses icons:

And the new stories will show up in the sidebar navigation, like so:

Args

Story definitions can be further improved to take advantage of Storybook's "args" concept.

Controls

Controls allow designers and developers to explore component behavior by mucking about with its arguments.

A select menu to control the number of items that render:

And for our Hero component, a mixture of text inputs, boolean switch and radio group (screen shot of how these controls render follows the code):

Anatomy of a Story

Stories exist alongside the other component files as stories.js.

Here's an example of how a typical story might take shape:

Let's break this down line by line:

It's a story! Behold. Don't get them wet, don't expose them to bright light, and most importantly don't feed them after midnight!

Were we to add any other stories beyond the default, we would then add named exports that would describe the additional stories.

We can also add ArgTypes here if we need to configure our args beyond Storybook's automatically-generated UI controls.

In the example above, we're setting backgroundColor as a radio button so the user can choose between different background colors, and setting the default as white.

Template Definition: Now that our stories are exported, we move on to defining a master template (Template) for our component's stories, and passing in our args.

And finally we spread in our component's props (...props), making data available to our component as it would be in the regular app.

storybookCustomArgs

The way in which Storybook automatically infers a set of argTypes based on each component's props can often lead to a lot of unnecessary UI controls rendering.

createStoryOptions

Oftentimes our component data will come through to us a single array, but in order for Storybook to render the controls in our desired way, we need that data to be a multi-dimenstional array.

Again we have a nifty function for that! Here's an example of both storybookCustomArgs and createStoryOptions Storybook helper functions at work:

Resources

[Learn Storybook](https: //www.learnstorybook.com) - a guided tutorial through building a simple application with Storybook
[Component Driven User Interfaces](https: //www.componentdriven.org) - learn more about the component-driven approach that Storybook enables
[Storybook Addons](https: //storybook.js.org/addons) - supercharge Storybook with advanced features and new workflows

DNT-2724 Accordion Testing

5 Things You Didn't Know About React Testing Library

Excerpt

I've just sold myself to the gods of click-baiting by making an "x things you didn't know about y" post. But hey, at least there no subtitle that says "number three will blow your mind!"

Jokes aside the items in this list are concepts that I usually see beginners struggling with. At the same time, learning these concepts will vastyly improve your testing game. I know it did with mine.

1. Everything is a DOM node

This is usually the first misconception that beginners have when they start approaching Testing Library. It is especially true for those developers like me that came from .

Many think that getByText and other helper methods return some special wrapper around the React component. People even ask how to implement a getByReactComponent helper.

When you work with Testing Library you are dealing with . This is made clear by the first :

If it relates to rendering components, then it should deal with DOM nodes rather than component instances, and it should not encourage dealing with component instances.

If you want to check for yourself, it's as simple as this:

Once you realize that you're dealing with DOM nodes you can start taking advantage of all the DOM APIs like or 👍

2. debug's optional parameter

Since we now know that we're dealing with a DOM structure, it would be helpful to be able to "see" it. This is what is meant for:

ometimes thought debug's output can be very long and difficult to navigate. In those cases, you might want to isolate a subtree of your whole structure. You can do this easily by passing a node to debug:

3. Restrict your queries with within

Imagine you're testing a component that renders this structure:

You want to test that each ID gets its correct value. You can't use getByText('Apples') because there are two nodes with that value. Even if that wasn't the case you have no guarantee that the text is in the correct row.

What you want to do is to run getByText only inside the row you're considering at the moment. This is exactly what is for:

4. Queries accept functions too

You have probably seen an error like this one:

Usually, it happens because your HTML looks like this:

The solution is contained inside the error message: "[...] you can provide a function for your text matcher [...]".

What's that all about? It turns out matchers accept strings, regular expressions or functions.

The function gets called for each node you're rendering. It receives two arguments: the node's content and the node itself. All you have to do is to return true or false depending on if the node is the one you want.

An example will clarify it:

We're ignoring the content argument because in this case, it will either be "Hello", "world" or an empty string.

What we are checking instead is that the current node has the right . hasText is a little helper function to do that. I declared it to keep things clean.

That's not all though. Our div is not the only node with the text we're looking for. For example, body in this case has the same text. To avoid returning more nodes than needed we are making sure that none of the children has the same text as its parent. In this way we're making sure that the node we're returning is the smallest—in other words the one closes to the bottom of our DOM tree.

5. You can simulate browsers events with user-event

Ok, this one is a shameless plug since I'm the author of user-event. Still, people—myself included—find it useful. Maybe you will too.

All user-event tries to do is to simulate the events a real user would do while interacting with your application. What does it mean? Imagine you have an input field, and in your tests, you want to enter some text in it. You would probably do something like this:

It works but it doesn't simulate what happens in the browser. A real user would most likely move the mouse to select the input field and then start typing one character at the time. This, in turns, fires many events (blur, focus, mouseEnter, keyDown, keyUp...). user-event simulates all those events for you:

Types VS Interfaces

Object Types

In JavaScript, the fundamental way that we group and pass around data is through objects. In TypeScript, we represent those through object types.

As we've seen, they can be anonymous:

or they can be named by using either an interface

or a type alias.

In all three examples above, we've written functions that take objects that contain the property name (which must be a string) and age (which must be a number).

Property Modifiers

Each property in an object type can specify a couple of things: the type, whether the property is optional, and whether the property can be written to.

Optional Properties

Much of the time, we'll find ourselves dealing with objects that might have a property set. In those cases, we can mark those properties as optional by adding a question mark (?) to the end of their names.

In this example, both xPos and yPos are considered optional. We can choose to provide either of them, so every call above to paintShape is valid. All optionality really says is that if the property is set, it better have a specific type.

We can also read from those properties - but when we do under [strictNullChecks](https: //www.typescriptlang.org/tsconfig#strictNullChecks), TypeScript will tell us they're potentially undefined.

In JavaScript, even if the property has never been set, we can still access it - it's just going to give us the value undefined. We can just handle undefined specially.

Note that this pattern of setting defaults for unspecified values is so common that JavaScript has syntax to support it.

Here we used [a destructuring pattern](https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) for paintShape's parameter, and provided [default values](https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Default_values) for xPos and yPos. Now xPos and yPos are both definitely present within the body of paintShape, but optional for any callers to paintShape.

Note that there is currently no way to place type annotations within destructuring patterns. This is because the following syntax already means something different in JavaScript.

In an object destructuring pattern, shape: Shape means "grab the property shape and redefine it locally as a variable named Shape. Likewise xPos: number creates a variable named number whose value is based on the parameter's xPos.

Using [mapping modifiers](https: //www.typescriptlang.org/docs/handbook/2/mapped-types.html#mapping-modifiers), you can remove optional attributes.

`readonly`Properties

Properties can also be marked as readonly for TypeScript. While it won't change any behavior at runtime, a property marked as readonly can't be written to during type-checking.

Using the readonly modifier doesn't necessarily imply that a value is totally immutable - or in other words, that its internal contents can't be changed. It just means the property itself can't be re-written to.

It's important to manage expectations of what readonly implies. It's useful to signal intent during development time for TypeScript on how an object should be used. TypeScript doesn't factor in whether properties on two types are readonly when checking whether those types are compatible, so readonly properties can also change via aliasing.

Using [mapping modifiers](https: //www.typescriptlang.org/docs/handbook/2/mapped-types.html#mapping-modifiers), you can remove readonly attributes.

Index Signatures

Sometimes you don't know all the names of a type's properties ahead of time, but you do know the shape of the values.

In those cases you can use an index signature to describe the types of possible values, for example:

Above, we have a StringArray interface which has an index signature. This index signature states that when a StringArray is indexed with a number, it will return a string.

An index signature property type must be either ‘string' or ‘number'.

It is possible to support both types of indexers...

While string index signatures are a powerful way to describe the "dictionary" pattern, they also enforce that all properties match their return type. This is because a string index declares that obj.property is also available as obj["property"]. In the following example, name's type does not match the string index's type, and the type checker gives an error:

However, properties of different types are acceptable if the index signature is a union of the property types:

Finally, you can make index signatures readonly in order to prevent assignment to their indices:

You can't set myArray[2] because the index signature is readonly.

Extending Types

It's pretty common to have types that might be more specific versions of other types. For example, we might have a BasicAddress type that describes the fields necessary for sending letters and packages in the U.S.

In some situations that's enough, but addresses often have a unit number associated with them if the building at an address has multiple units. We can then describe an AddressWithUnit.

This does the job, but the downside here is that we had to repeat all the other fields from BasicAddress when our changes were purely additive. Instead, we can extend the original BasicAddress type and just add the new fields that are unique to AddressWithUnit.

The extends keyword on an interface allows us to effectively copy members from other named types, and add whatever new members we want. This can be useful for cutting down the amount of type declaration boilerplate we have to write, and for signaling intent that several different declarations of the same property might be related. For example, AddressWithUnit didn't need to repeat the street property, and because street originates from BasicAddress, a reader will know that those two types are related in some way.

interfaces can also extend from multiple types.

Intersection Types

interfaces allowed us to build up new types from other types by extending them. TypeScript provides another construct called intersection types that is mainly used to combine existing object types.

An intersection type is defined using the & operator.

Here, we've intersected Colorful and Circle to produce a new type that has all the members of Colorful and Circle.

Interfaces vs. Intersections

We just looked at two ways to combine types which are similar, but are actually subtly different. With interfaces, we could use an extends clause to extend from other types, and we were able to do something similar with intersections and name the result with a type alias. The principle difference between the two is how conflicts are handled, and that difference is typically one of the main reasons why you'd pick one over the other between an interface and a type alias of an intersection type.

Generic Object Types

Let's imagine a Box type that can contain any value - strings, numbers, Giraffes, whatever.

Right now, the contents property is typed as any, which works, but can lead to accidents down the line.

We could instead use unknown, but that would mean that in cases where we already know the type of contents, we'd need to do precautionary checks, or use error-prone type assertions.

One type safe approach would be to instead scaffold out different Box types for every type of contents.

But that means we'll have to create different functions, or overloads of functions, to operate on these types.

That's a lot of boilerplate. Moreover, we might later need to introduce new types and overloads. This is frustrating, since our box types and overloads are all effectively the same.

Instead, we can make a generic Box type which declares a type parameter.

You might read this as "A Box of Type is something whose contents have type Type". Later on, when we refer to Box, we have to give a type argument in place of Type.

Think of Box as a template for a real type, where Type is a placeholder that will get replaced with some other type. When TypeScript sees Box<string>, it will replace every instance of Type in Box<Type> with string, and end up working with something like { contents: string }. In other words, Box<string> and our earlier StringBox work identically.

Box is reusable in that Type can be substituted with anything. That means that when we need a box for a new type, we don't need to declare a new Box type at all (though we certainly could if we wanted to).

This also means that we can avoid overloads entirely by instead using [generic functions](https: //www.typescriptlang.org/docs/handbook/2/functions.html#generic-functions).

It is worth noting that type aliases can also be generic. We could have defined our new Box<Type> interface, which was:

by using a type alias instead:

Since type aliases, unlike interfaces, can describe more than just object types, we can also use them to write other kinds of generic helper types.

We'll circle back to type aliases in just a little bit.

The`Array`Type

Generic object types are often some sort of container type that work independently of the type of elements they contain. It's ideal for data structures to work this way so that they're re-usable across different data types.

It turns out we've been working with a type just like that throughout this handbook: the Array type. Whenever we write out types like number[] or string[], that's really just a shorthand for Array<number> and Array<string>.

Much like the Box type above, Array itself is a generic type.

Modern JavaScript also provides other data structures which are generic, like Map<K, V>, Set<T>, and Promise<T>. All this really means is that because of how Map, Set, and Promise behave, they can work with any sets of types.

The`ReadonlyArray`Type

The ReadonlyArray is a special type that describes arrays that shouldn't be changed.

Much like the readonly modifier for properties, it's mainly a tool we can use for intent. When we see a function that returns ReadonlyArrays, it tells us we're not meant to change the contents at all, and when we see a function that consumes ReadonlyArrays, it tells us that we can pass any array into that function without worrying that it will change its contents.

Unlike Array, there isn't a ReadonlyArray constructor that we can use.

Instead, we can assign regular Arrays to ReadonlyArrays.

Just as TypeScript provides a shorthand syntax for Array<Type> with Type[], it also provides a shorthand syntax for ReadonlyArray<Type> with readonly Type[].

One last thing to note is that unlike the readonly property modifier, assignability isn't bidirectional between regular Arrays and ReadonlyArrays.

Tuple Types

A tuple type is another sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions.

Here, StringNumberPair is a tuple type of string and number. Like ReadonlyArray, it has no representation at runtime, but is significant to TypeScript. To the type system, StringNumberPair describes arrays whose 0 index contains a string and whose 1 index contains a number.

If we try to index past the number of elements, we'll get an error.

We can also [destructure tuples](https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) using JavaScript's array destructuring.

Tuple types are useful in heavily convention-based APIs, where each element's meaning is "obvious". This gives us flexibility in whatever we want to name our variables when we destructure them. In the above example, we were able to name elements 0 and 1 to whatever we wanted.
However, since not every user holds the same view of what's obvious, it may be worth reconsidering whether using objects with descriptive property names may be better for your API.

Other than those length checks, simple tuple types like these are equivalent to types which are versions of Arrays that declare properties for specific indexes, and that declare length with a numeric literal type.

Another thing you may be interested in is that tuples can have optional properties by writing out a question mark (? after an element's type). Optional tuple elements can only come at the end, and also affect the type of length.

Tuples can also have rest elements, which have to be an array/tuple type.

StringNumberBooleans describes a tuple whose first two elements are string and number respectively, but which may have any number of booleans following.
StringBooleansNumber describes a tuple whose first element is string and then any number of

A tuple with a rest element has no set "length" - it only has a set of well-known elements in different positions.

Why might optional and rest elements be useful? Well, it allows TypeScript to correspond tuples with parameter lists. Tuples types can be used in [rest parameters and arguments](https: //www.typescriptlang.org/docs/handbook/2/functions.html#rest-parameters-and-arguments), so that the following:

is basically equivalent to:

This is handy when you want to take a variable number of arguments with a rest parameter, and you need a minimum number of elements, but you don't want to introduce intermediate variables.

`readonly`Tuple Types

One final note about tuple types - tuples types have readonly variants, and can be specified by sticking a readonly modifier in front of them - just like with array shorthand syntax.

As you might expect, writing to any property of a readonly tuple isn't allowed in TypeScript.

Tuples tend to be created and left un-modified in most code, so annotating types as readonly tuples when possible is a good default. This is also important given that array literals with const assertions will be inferred with readonly tuple types.

Here, distanceFromOrigin never modifies its elements, but expects a mutable tuple. Since point's type was inferred as readonly [3, 4], it won't be compatible with [number, number] since that type can't guarantee point's elements won't be mutated.

<!--
  Hero Section wrapper
  - Component below hero is required to use a white background color
-->

<section class="relative 2xl:px-24 2xl:pt-24">

  <!--
    Hero Container
  -->

  <div class="relative container-5xl flex flex-col justify-center aspect-16/12 sm:aspect-16/9 md:aspect-16/7 lg:aspect-16/6 xl:aspect-16/5 px-24 sm:px-32 md:px-48 py-64 md:py-48">

    <!--
      - Leave alt attribute empty
      - Use 'srcset' and 'sizes' attributes to optimize the hero image
    -->

    <img
      class="absolute top-0 left-0 object-cover object-right w-full h-full 2xl:rounded-lg bg-gray-light"
      src="image.jpg?w=800&as=1&bc=ffffff"
      srcset="image.jpg?w=800&as=1&bc=ffffff 800w,
              image.jpg?w=1600&as=1&bc=ffffff 1600w"
      sizes="(min-width: 768px) 1600px, 800px"
      alt=""
      width="1600"
      height="500"
      loading="lazy"
    >

    <!--
      Overlay
      - Change background gradient colors based on theme of hero
      - Default - "from-blue-dark to-blue sm:via-blue"
    -->

    <div
      class="absolute top-0 left-0 h-full w-full 2xl:rounded-l-lg md:w-3/4 bg-gradient-to-tr md:bg-gradient-to-r md:to-transparent opacity-80"
      aria-hidden="true"
    ></div>

    <!--
      Content Container
    -->

    <div class="relative w-full container-xs md:container-4xl">

      <!--
        If dark theme/gradient, text is white
          - Use "text-white"
        If light theme/gradient, text can be gray or blue
          - Use "text-gray-dark" -or- "text-blue"
        Default
          - "text-white"
      -->

      <div class="w-full md:w-1/2 text-center md:text-left">

        <!-- Hero Title
          - If this is the page title, you should use an <h1> element
          - Use an <h2> element if you already have a page title on the page
        -->
        <h2
          class="text-3xl md:text-2xl-fixed xl:text-3xl"
          id="hero-title"
        >
          Hero Title
        </h2>

        <!-- Hero Short Description-->
        <p class="text-lg xl:text-xl mt-12 lg:mt-16">
          Description goes here.
        </p>

        <!-- Hero Actions -->
        <div class="flex justify-center md:justify-start gap-16 lg:gap-24 mt-16 lg:mt-24">
          <!--
            If dark theme/gradient
              - Use "btn-primary-reversed"
            If light theme/gradient
              - Use "btn-primary"
            Default
              - "btn-primary-reversed"
          -->
          <a
            class="btn btn-primary-reversed btn-md"
            href="#"
            id="hero-primary-action"
            aria-labelledby="hero-primary-action hero-title"
          >
            Primary Action
          </a>
          <!--
            If dark theme/gradient
              - Use "btn-secondary-reversed"
            If light theme/gradient
              - Use "btn-secondary"
            Default
              - "btn-secondary-reversed"
          -->
          <a
            class="btn btn-secondary-reversed btn-sm lg:btn-md"
            href="#"
            id="hero-secondary-action"
            aria-labelledby="hero-secondary-action hero-title"
          >
            Secondary Action
          </a>
        </div>
      </div>

    </div>

  </div>

</section>

<dl title="Nautical terms">
  <dt>Knot</dt>
  <dd>
    <p>A <em>knot</em> is a unit of speed equaling 1
      nautical mile per hour (1.15 miles per hour or 1.852
      kilometers per hour).</p>
  </dd>
  <dt>Port</dt>
  <dd>
    <p><em>Port</em> is the nautical term (used on
      boats and ships) that refers to the left side
      of a ship, as perceived by a person facing towards
      the bow (the front of the vessel).</p>
  </dd>
  <dt>Starboard</dt>
  <dd>
    <p><em>Starboard</em> is the nautical term (used
      on boats and ships) that refers to the right
      side of a vessel, as perceived by a person
      facing towards the bow (the front of the vessel).</p>
  </dd>
</dl>

function MyDiv(props) {
  if (props.layout === "horizontal") {
    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
    return <div {...props} style={getHorizontalStyle()} />;
  } else {
    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
    return <div {...props} style={getVerticalStyle()} />;
  }
}

boolean

number

export default {
  title: "Components/Accordion",
  component: AccordionComponent,
  argTypes: {
    theme: {
      name: "Theme",
    },
    closeOthers: {
      name: "One Panel Open At A Time",
    },
  },
};

const Template = (args) => <AccordionComponent {...args} />;

export const Primary = Template.bind({});

Primary.args = {
  ...props,
};

argTypes: {
  title: {
    control: {
      type: 'text',
    },
  },
  subtitle: {
    control: {
      type: 'text',
    },
  },
  link: {
    control: 'boolean',
  },
  ctaType: {
    control: {
      type: 'inline-radio',
      options: ['ImageSlide', 'VideoSlide'],
    },
  },
},

import React from "react";
import MyComponent from "./index";
import { Data } from "./data";
import { MyComponent as MyComponentComposition } from "../../lib/composition";

const props = MyComponentComposition({ fields: Data });

export default {
  title: "Components/MyComponent",
  component: MyComponent,
  argTypes: {
    backgroundColor: {
      control: {
        type: "radio",
        options: ["white", "gray"],
      },
      defaultValue: "white",
    },
  },
};

const Template = (args) => <MyComponent {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  ...props,
};

...

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
  argTypes: {
    backgroundColor: {
      control: {
        type: 'radio',
        options: ['white', 'gray'],
      },
      defaultValue: 'white',
    },
  },
};

...

...

import { storybookCustomArgs, createStoryOptions } from 'src/lib/helpers';


const props = BulletedOverviewComposition(Data);

const itemsToShow = createStoryOptions(props.items);

export default {
  title: 'Components/Bulleted Overview',
  component: BulletedOverview,
  argTypes: {
    ...storybookCustomArgs(props, BulletedOverview, [], false),
    items: {
      name: 'How many items?',
      control: {
        type: 'select',
        options: {
          ...itemsToShow,
        },
      },
    },
  },
};

...

function MyDiv(props) {
  const { layout, ...rest } = props;
  if (layout === "horizontal") {
    return <div {...rest} style={getHorizontalStyle()} />;
  } else {
    return <div {...rest} style={getVerticalStyle()} />;
  }
}

function MyDiv(props) {
  const divProps = Object.assign({}, props);
  delete divProps.layout;

  if (props.layout === "horizontal") {
    return <div {...divProps} style={getHorizontalStyle()} />;
  } else {
    return <div {...divProps} style={getVerticalStyle()} />;
  }
}

interface PaintOptions {  shape: Shape;  xPos?: number;  yPos?: number;} function paintShape(opts: PaintOptions) {
// ...}
const shape = getShape();paintShape({ shape });paintShape({ shape, xPos: 100 });paintShape({ shape, yPos: 100 });paintShape({ shape, xPos: 100, yPos: 100 });Try

function paintShape(opts: PaintOptions) {  let xPos = opts.xPos;                   (property) PaintOptions.xPos?: number | undefined  let yPos = opts.yPos;                   (property) PaintOptions.yPos?: number | undefined
// ...}Try

function paintShape(opts: PaintOptions) {  let xPos = opts.xPos === undefined ? 0 : opts.xPos;       let xPos: number  let yPos = opts.yPos === undefined ? 0 : opts.yPos;       let yPos: number
// ...}Try

function paintShape({ shape, xPos = 0, yPos = 0 }: PaintOptions) {  console.log("x coordinate at", xPos);                                  (parameter) xPos: number  console.log("y coordinate at", yPos);                                  (parameter) yPos: number
// ...}Try

function draw({ shape: Shape, xPos: number = 100 /*...*/ }) {  render(shape);Cannot find name 'shape'. Did you mean 'Shape'?Cannot find name 'shape'. Did you mean 'Shape'?  render(xPos);Cannot find name 'xPos'.Cannot find name 'xPos'.}Try

interface SomeType {  readonly prop: string;} function doSomething(obj: SomeType) {
// We can read from 'obj.prop'.  console.log(`prop has the value '${obj.prop}'.`);
// But we can't re-assign it.  obj.prop = "hello";Cannot assign to 'prop' because it is a read-only property.Cannot assign to 'prop' because it is a read-only property.}Try

interface Home {  readonly resident: { name: string; age: number };} function visitForBirthday(home: Home) {
// We can read and update properties from 'home.resident'.  console.log(`Happy birthday ${home.resident.name}!`);  home.resident.age++;} function evict(home: Home) {
// But we can't write to the 'resident' property itself on a 'Home'.  home.resident = {Cannot assign to 'resident' because it is a read-only property.Cannot assign to 'resident' because it is a read-only property.    name: "Victor the Evictor",    age: 42,  };}Try

interface Person {  name: string;  age: number;} interface ReadonlyPerson {  readonly name: string;  readonly age: number;} let writablePerson: Person = {  name: "Person McPersonface",  age: 42,};
// workslet readonlyPerson: ReadonlyPerson = writablePerson; console.log(readonlyPerson.age);
// prints '42'writablePerson.age++;console.log(readonlyPerson.age);
// prints '43'Try

interface NumberDictionary {  [index: string]: number;   length: number;
// ok  name: string;Property 'name' of type 'string' is not assignable to 'string' index type 'number'.Property 'name' of type 'string' is not assignable to 'string' index type 'number'.}Try

interface ReadonlyStringArray {  readonly [index: number]: string;} let myArray: ReadonlyStringArray = getReadOnlyStringArray();myArray[2] = "Mallory";Index signature in type 'ReadonlyStringArray' only permits reading.Index signature in type 'ReadonlyStringArray' only permits reading.Try

function draw(circle: Colorful & Circle) {  console.log(`Color was ${circle.color}`);  console.log(`Radius was ${circle.radius}`);}
// okaydraw({ color: "blue", radius: 42 });
// oopsdraw({ color: "red", raidus: 42 });Argument of type '{ color: string; raidus: number; }' is not assignable to parameter of type 'Colorful & Circle'.
  Object literal may only specify known properties, but 'raidus' does not exist in type 'Colorful & Circle'. Did you mean to write 'radius'?Argument of type '{ color: string; raidus: number; }' is not assignable to parameter of type 'Colorful & Circle'.
  Object literal may only specify known properties, but 'raidus' does not exist in type 'Colorful & Circle'. Did you mean to write 'radius'?Try

interface Box {  contents: unknown;} let x: Box = {  contents: "hello world",};
// we could check 'x.contents'if (typeof x.contents === "string") {  console.log(x.contents.toLowerCase());}
// or we could use a type assertionconsole.log((x.contents as string).toLowerCase());Try

function setContents(box: StringBox, newContents: string): void;function setContents(box: NumberBox, newContents: number): void;function setContents(box: BooleanBox, newContents: boolean): void;function setContents(box: { contents: any }, newContents: any) {  box.contents = newContents;}Try

interface Box<Type> {  contents: Type;}interface StringBox {  contents: string;} let boxA: Box<string> = { contents: "hello" };boxA.contents;        (property) Box<string>.contents: string let boxB: StringBox = { contents: "world" };boxB.contents;        (property) StringBox.contents: stringTry

type OrNull<Type> = Type | null; type OneOrMany<Type> = Type | Type[]; type OneOrManyOrNull<Type> = OrNull<OneOrMany<Type>>;           type OneOrManyOrNull<Type> = OneOrMany<Type> | null type OneOrManyOrNullStrings = OneOrManyOrNull<string>;               type OneOrManyOrNullStrings = OneOrMany<string> | nullTry

interface Array<Type> {  /**   * Gets or sets the length of the array.   */  length: number;   /**   * Removes the last element from an array and returns it.   */  pop(): Type | undefined;   /**   * Appends new elements to an array, and returns the new length of the array.   */  push(...items: Type[]): number;
// ...}Try

function doStuff(values: ReadonlyArray<string>) {
// We can read from 'values'...
const copy = values.slice();  console.log(`The first value is ${values[0]}`);
// ...but we can't mutate 'values'.  values.push("hello!");Property 'push' does not exist on type 'readonly string[]'.Property 'push' does not exist on type 'readonly string[]'.}Try

function doStuff(values: readonly string[]) {
// We can read from 'values'...
const copy = values.slice();  console.log(`The first value is ${values[0]}`);
// ...but we can't mutate 'values'.  values.push("hello!");Property 'push' does not exist on type 'readonly string[]'.Property 'push' does not exist on type 'readonly string[]'.}Try

let x: readonly string[] = [];let y: string[] = []; x = y;y = x;The type 'readonly string[]' is 'readonly' and cannot be assigned to the mutable type 'string[]'.The type 'readonly string[]' is 'readonly' and cannot be assigned to the mutable type 'string[]'.Try

function doSomething(pair: [string, number]) {
// ...
const c = pair[2];Tuple type '[string, number]' of length '2' has no element at index '2'.Tuple type '[string, number]' of length '2' has no element at index '2'.}Try

interface StringNumberPair {
// specialized properties  length: 2;  0: string;  1: number;
// Other 'Array<string | number>' members...  slice(start?: number, end?: number): Array<string | number>;}Try

type Either2dOr3d = [number, number, number?]; function setCoordinate(coord: Either2dOr3d) {
const [x, y, z] = coord;
const z: number | undefined   console.log(`Provided coordinates had ${coord.length} dimensions`);                                                  (property) length: 2 | 3}Try

let point = [3, 4] as
const; function distanceFromOrigin([x, y]: [number, number]) {  return Math.sqrt(x ** 2 + y ** 2);} distanceFromOrigin(point);Argument of type 'readonly [3, 4]' is not assignable to parameter of type '[number, number]'.
  The type 'readonly [3, 4]' is 'readonly' and cannot be assigned to the mutable type '[number, number]'.Argument of type 'readonly [3, 4]' is not assignable to parameter of type '[number, number]'.
  The type 'readonly [3, 4]' is 'readonly' and cannot be assigned to the mutable type '[number, number]'.Try

Unable to find an element with the text: Hello world.
This could be because the text is broken up by multiple elements.
In this case, you can provide a function for your text
matcher to make your matcher more flexible.

import React from "react";
import { render, screen } from "@testing-library/react";

test("everything is a node", () => {
  const Foo = () => <div>Hello</div>;
  render(<Foo />);
  expect(screen.getByText("Hello")).toBeInstanceOf(Node);
});

import React from "react";
import { render, screen } from "@testing-library/react";

test("the button has type of reset", () => {
  const ResetButton = () => (
    <button type="reset">
      <div>Reset</div>
    </button>
  );
  render(<ResetButton />);
  const node = screen.getByText("Reset");

  // This won't work because `node` is the `<div>`
  // expect(node).toHaveProperty("type", "reset");

  expect(node.closest("button")).toHaveProperty("type", "reset"
});

import React from "react";
import { render, screen, within } from "@testing-library/react"; // highlight-line
import "jest-dom/extend-expect";

test("the values are in the table", () => {
  const MyTable = ({ values }) => (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Fruits</th>
        </tr>
      </thead>
      <tbody>
        {values.map(([id, fruit]) => (
          <tr key={id}>
            <td>{id}</td>
            <td>{fruit}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
  const values = [
    ["1", "Apples"],
    ["2", "Oranges"],
    ["3", "Apples"],
  ];
  render(<MyTable values={values} />);

  values.forEach(([id, fruit]) => {
    const row = screen.getByText(id).closest("tr");
    // highlight-start
    const utils = within(row);
    expect(utils.getByText(id)).toBeInTheDocument();
    expect(utils.getByText(fruit)).toBeInTheDocument();
    // highlight-end
  });
});
j;

import { render, screen, within } from "@testing-library/react";
import "jest-dom/extend-expect";

test("pass functions to matchers", () => {
  const Hello = () => (
    <div>
      Hello <span>world</span>
    </div>
  );
  render(<Hello />);

  // These won't match
  // getByText("Hello world");
  // getByText(/Hello world/);

  screen.getByText((content, node) => {
    const hasText = (node) => node.textContent === "Hello world";
    const nodeHasText = hasText(node);
    const childrenDontHaveText = Array.from(node.children).every(
      (child) => !hasText(child)
    );

    return nodeHasText && childrenDontHaveText;
  });
});

// # TextMatch type accenpts function: https://testing-library.com/docs/queries/about/#textmatch
import { renderWithCTX, screen, Matcher } from "src/lib/testWrappers";
import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom";
import { Accordion, themeMap } from "./index";
import { compositionFunction } from "./composition";
import data from "./data";
import { stripHTMLTags } from "src/lib/helpers";
jest.mock("src/lib/useIntersection");
describe("Accordion", () => {
  const props = compositionFunction(data);
  it.skip("should render the correct items", () => {
    renderWithCTX(<Accordion {...props} />);
    for (let i = 0; i < props.items.length - 1; i++) {
      const accordionTitle = screen.getByText(
        props?.items[0]?.title?.value as string
      );
      expect(accordionTitle).toBeTruthy();
    }
  });
  it.skip("should render Accordion Component with image", () => {
    renderWithCTX(<Accordion {...props} />);
    const img = screen.getByRole("img", { name: /facebook/i });
    expect(img).toBeInTheDocument();
  });
  it("should reveal text when user clicks", async () => {
    renderWithCTX(<Accordion {...props} />);
    const accordionButton = screen.getByRole("button", {
      name: props.items[0].title?.value,
    });
    // # Full Manual Query:
    // (This is actually not good - getByText won't respect eg aria- attrs like getByRole so we aren't actually testing anything)
    // These are [not exposed to a11y tree](https://testing-library.com/docs/queries/about/#priority)
    // 👉
    // screen.getByText(
    //   /proin laoreet mauris vel urna tempor ultricies\. duis rhoncus lorem sed tellus egestas bibendum\. in aliquam mauris est, vel condimentum metus aliquet a\. nunc volutpat tincidunt nisl luctus pretium\. sagittis elit non, vestibulum metus\. mauris maximus vitae magna in mattis\. integer interdum maximus felis sed placerat\. nam lobortis tellus non felis fermentum, vitae venenatis ligula congue\. donec sit amet luctus odio\. magna commodo, sodales convallis ante scelerisque\. etiam ipsum lorem, rhoncus a sapien id, placerat consequat nunc\. curabitur in orci libero\. morbi tincidunt ante vel sem rutrum tempor\. cras ac purus quis urna maximus volutpat\./i
    // );
    // # We can still do a findByText,
    // but we need to check ourselves whether it is accessible:
    // 👉
    const hiddenText = await screen.findByText((content, element) => {
      const hasTextContent =
        element?.innerHTML === props?.items[0]?.text?.value;
      return hasTextContent;
    });
    expect(hiddenText).toBeInTheDocument();
    expect(hiddenText).toHaveAttribute("aria-hidden", "true");
    await userEvent.click(accordionButton);
    // # Compare against textContent stripHTMLTags:
    // (similar to https://polvara.me/posts/five-things-you-didnt-know-about-testing-library)
    // 👉
    // const noTag = stripHTMLTags(props?.items?.[0]?.text?.value as string);
    // const [revealedText] = await screen.findAllByText(
    //   // @ts-ignore
    //   // eslint-disable-next-line
    //   (content, element) => element?.textContent === noTag
    //   // ?  console.log('🔥', content) || true : false
    // );
    // expect(revealedText).toBeInTheDocument();
    // console.log('😳', noTag);
    // 😳 Proin laoreet mauris vel urna tempor ultricies. Duis rhoncus lorem sed tellus egestas bibendum. In aliquam mauris est, vel condimentum metus aliquet a. Nunc volutpat tincidunt nisl luctus pretium. Duis et ligula semper, sagittis elit non, vestibulum metus. Mauris maximus vitae magna in mattis. Integer interdum maximus felis sed placerat. Nam lobortis tellus non felis fermentum, vitae venenatis ligula congue. Donec sit amet luctus odio. Nam convallis justo vitae magna commodo, sodales convallis ante scelerisque. Etiam ipsum lorem, rhoncus a sapien id, placerat consequat nunc. Curabitur in orci libero. Morbi tincidunt ante vel sem rutrum tempor. Cras ac purus quis urna maximus volutpat.
    // # Find by innerHTML:
    // 👉
    const revealedText = await screen.findByText((content, element) => {
      const hasTextContent =
        element?.innerHTML === props?.items[0]?.text?.value;
      return hasTextContent;
    });
    expect(revealedText).toBeInTheDocument();
    expect(revealedText).toHaveAttribute("aria-hidden", "false");
  });
  // Overall, probably ultimately more durable / less error prone to use a testid and check aria- attrs
  it.skip("renders the correct default style", () => {
    const { rerender } = renderWithCTX(<Accordion {...props} />);
    const button = screen.getByRole("button", {
      name: /accordion trigger one/i,
    });
    expect(button).toHaveClass(themeMap.default.button);
    const altThemeProp = { ...props, theme: "footer" } as const;
    rerender(<Accordion {...altThemeProp} />);
    expect(button).toHaveClass(themeMap?.footer?.button);
  });
});

ByRole

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

getByRole, queryByRole, getAllByRole, queryAllByRole, findByRole, findAllByRole

API

Queries for elements with the given role (and it also accepts a TextMatch). Default roles are taken into consideration e.g. <button /> has the button role without explicitly setting the role attribute. Here you can see .

Please note that setting a role and/or aria-* attribute that matches the implicit ARIA semantics is unnecessary and is not recommended as these properties are already set by the browser, and we must not use the role and aria-* attributes in a manner that conflicts with the semantics described. For example, a button element can't have the role attribute of heading, because the button element has default characteristics that conflict with the heading role.

Roles are matched literally by string equality, without inheriting from the ARIA role hierarchy. As a result, querying a superclass role like checkbox will not include elements with a subclass role like switch.

You can query the returned element(s) by their . The accessible name is for simple cases equal to e.g. the label of a form element, or the text content of a button, or the value of the aria-label attribute. It can be used to query a specific element if multiple elements with the same role are present on the rendered content. For an in-depth guide check out . If you only query for a single element with getByText('The name') it's oftentimes better to use getByRole(expectedRole, { name: 'The name' }). The accessible name query does not replace other queries such as *ByAlt or *ByTitle. While the accessible name can be equal to these attributes, it does not replace the functionality of these attributes. For example <img aria-label="fancy image" src="fancy.jpg" /> will be returned for both getByAltText('fancy image') and getByRole('img', { name: 'fancy image' }). However, the image will not display its description if fancy.jpg

Options

`hidden`

If you set hidden to true elements that are normally excluded from the accessibility tree are considered for the query as well. The default behavior follows https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion with the exception of role="none" and role="presentation" which are considered in the query in any case. For example in

getByRole('button') would only return the Close dialog-button. To make assertions about the Open dialog-button you would need to use getAllByRole('button', { hidden: true }).

The default value for hidden can be configured.

`selected`

You can filter the returned elements by their selected state by setting selected: true or selected: false.

For example in

you can get the "Native"-tab by calling getByRole('tab', { selected: true }). To learn more about the selected state and which elements can have this state see .

`checked`

You can filter the returned elements by their checked state by setting checked: true or checked: false.

For example in

you can get the "Sugar" option by calling getByRole('checkbox', { checked: true }). To learn more about the checked state and which elements can have this state see .

Note
Checkboxes have a "mixed" state, which is considered neither checked nor unchecked (details ).

`current`

You can filter the returned elements by their current state by setting current: boolean | string. Note that no aria-current attribute will match current: false since false is the default value for aria-current.

For example in

you can get the "👍" link by calling getByRole('link', { current: true }) and the "👎" by calling getByRole('link', { current: false }). To learn more about the current state see .

`pressed`

Buttons can have a pressed state. You can filter the returned elements by their pressed state by setting pressed: true or pressed: false.

For example in

you can get the "👍" button by calling getByRole('button', { pressed: true }). To learn more about the pressed state see .

`expanded`

You can filter the returned elements by their expanded state by setting expanded: true or expanded: false.

For example in

you can get the "Expandable Menu Item" link by calling getByRole('link', { expanded: false }). To learn more about the expanded state and which elements can have this state see .

`queryFallbacks`

By default, it's assumed that the first role of each element is supported, so only the first role can be queried. If you need to query an element by any of its fallback roles instead, you can use queryFallbacks: true.

For example, getByRole('switch') would always match <div role="switch checkbox" /> because it's the first role, while getByRole('checkbox') would not. However, getByRole('checkbox', { queryFallbacks: true }) would enable all fallback roles and therefore match the same element.

An element doesn't have multiple roles in a given environment. It has a single one. Multiple roles in the attribute are evaluated from left to right until the environment finds the first role it understands. This is useful when new roles get introduced and you want to start supporting those as well as older environments that don't understand that role (yet).

`level`

An element with the heading role can be queried by any heading level getByRole('heading') or by a specific heading level using the level option getByRole('heading', { level: 2 }).

The level option queries the element(s) with the heading role matching the indicated level determined by the semantic HTML heading elements <h1>-<h6> or matching the aria-level attribute.

Given the example below,

you can query the Heading Level Three heading using getByRole('heading', { level: 3 }).

While it is possible to explicitly set role="heading" and aria-level attribute on an element, it is strongly encouraged to use the semantic HTML headings <h1>-<h6>.

To learn more about the aria-level property, see .

The level option is only applicable to the heading role. An error will be thrown when used with any other role.

`description`

You can filter the returned elements by their for those cases where you have several elements with the same role and they don't have an accessible name but they do have a description. This would be the case for elements with role, where the aria-describedby attribute is used to describe the element's content.

For example in

You can query a specific element like this

Setup

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

React Testing Library does not require any configuration to be used. However, there are some things you can do when configuring your testing framework to reduce some boilerplate. In these docs we'll demonstrate configuring Jest, but you should be able to do similar things with any testing framework (React Testing Library does not require that you use Jest).

Global Config

Adding options to your global test config can simplify the setup and teardown of tests in individual files.

Custom Render

It's often useful to define a custom render method that includes things like global context providers, data stores, etc. To make this available globally, one approach is to define a utility file that re-exports everything from React Testing Library. You can replace React Testing Library with this file in all your imports. See for a way to make your test util file accessible without using relative paths.

The example below sets up data providers using the wrapper option to render.

Note
Babel versions lower than 7 throw an error when trying to override the named export in the example above. See and the workaround below.

Workaround for Babel 6

You can use CommonJS modules instead of ES modules, which should work in Node:

Add custom queries

Note
Generally you should not need to create custom queries for react-testing-library. Where you do use it, you should consider whether your new queries encourage you to test in a user-centric way, without testing implementation details.

You can define your own custom queries as described in the Custom Queries documentation, or via the buildQueries helper. Then you can use them in any render call using the queries option. To make the custom queries available globally, you can add them to your custom render method as shown below.

In the example below, a new set of query variants are created for getting elements by data-cy, a "test ID" convention mentioned in the documentation.

You can then override and append the new queries via the render function by passing a queries option.

If you want to add custom queries globally, you can do this by defining a custom render method:

You can then use your custom queries as you would any other query:

Configuring Jest with Test Utils

To make your custom test file accessible in your Jest test files without using relative imports (../../test-utils), add the folder containing the file to the Jest moduleDirectories option.

This will make all the .js files in the test-utils directory importable without ../.

If you're using TypeScript, merge this into your tsconfig.json. If you're using Create React App without TypeScript, save this to jsconfig.json instead.

Jest 28

If you're using Jest 28 or later, jest-environment-jsdom package now must be installed separately.

jsdom is also no longer the default environment. You can enable jsdom globally by editing jest.config.js:

Or if you only need jsdom in some of your tests, you can enable it as and when needed using :

Jest 27

If you're using a recent version of Jest (27), jsdom is no longer the default environment. You can enable jsdom globally by editing jest.config.js:

Or if you only need jsdom in some of your tests, you can enable it as and when needed using :

Jest 24 (or lower) and defaults

If you're using the Jest testing framework version 24 or lower with the default configuration, it's recommended to use jest-environment-jsdom-fifteen package as Jest uses a version of the jsdom environment that misses some features and fixes, required by React Testing Library.

First, install jest-environment-jsdom-fifteen.

Then specify jest-environment-jsdom-fifteen as the testEnvironment:

Using without Jest

If you're running your tests in the browser bundled with webpack (or similar) then React Testing Library should work out of the box for you. However, most people using React Testing Library are using it with the Jest testing framework with the testEnvironment set to jest-environment-jsdom (which is the default configuration with Jest 26 and earlier).

jsdom is a pure JavaScript implementation of the DOM and browser APIs that runs in Node. If you're not using Jest and you would like to run your tests in Node, then you must install jsdom yourself. There's also a package called global-jsdom which can be used to setup the global environment to simulate the browser APIs.

First, install jsdom and global-jsdom.

With mocha, the test command would look something like this:

Skipping Auto Cleanup

Cleanup is called after each test automatically by default if the testing framework you're using supports the afterEach global (like mocha, Jest, and Jasmine). However, you may choose to skip the auto cleanup by setting the RTL_SKIP_AUTO_CLEANUP env variable to 'true'. You can do this with like so:

To make this even easier, you can also simply import @testing-library/react/dont-cleanup-after-each which will do the same thing. Just make sure you do this before importing @testing-library/react. You could do this with Jest's setupFiles configuration:

Or with mocha's -r flag:

Alternatively, you could import @testing-library/react/pure in all your tests that you don't want the cleanup to run and the afterEach won't be setup automatically.

Auto Cleanup in Mocha's watch mode

When using Mocha in watch mode, the globally registered cleanup is run only the first time after each test. Therefore, subsequent runs will most likely fail with a TestingLibraryElementError: Found multiple elements error.

To enable automatic cleanup in Mocha's watch mode, add a cleanup . Create a mocha-watch-cleanup-after-each.js file with the following contents:

And register it using mocha's -r flag:

Common Mistakes With RTL

Not using Testing Library ESLint plugins

Importance: medium

If you'd like to avoid several of these common mistakes, then the official ESLint plugins could help out a lot:

Note: If you are using create-react-app, eslint-plugin-testing-library is already included as a dependency.

Advice: Install and use the ESLint plugin for Testing Library.

Importance: low

The name wrapper is old cruft from enzyme and we don't need that here. The return value from render is not "wrapping" anything. It's simply a collection of utilities that (thanks to the next thing) you should actually not often need anyway.

Advice: destructure what you need from render or call it view.

Importance: medium

For a long time now cleanup happens automatically (supported for most major testing frameworks) and you no longer need to worry about it. .

Advice: don't use cleanup

Importance: medium

screen (which means you should have access to it in @testing-library/react@>=9). It comes from the same import statement you get render from:

The benefit of using screen is you no longer need to keep the render call destructure up-to-date as you add/remove the queries you need. You only need to type screen. and let your editor's magic autocomplete take care of the rest.

The only exception to this is if you're setting the container or baseElement which you probably should avoid doing (I honestly can't think of a legitimate use case for those options anymore and they only exist for historical reasons at this point).

You can also call instead of debug

Advice: use screen for querying and debugging.

Importance: high

That toBeDisabled assertion comes from . It's strongly recommended to use jest-dom because the error messages you get with it are much better.

Advice: install and use **

Importance: medium

I see people wrapping things in act like this because they see these "act" warnings all the time and are just desperately trying anything they can to get them to go away, but what they don't know is that render and fireEvent are already wrapped in act! So those are doing nothing useful.

Most of the time, if you're seeing an act warning, it's not just something to be silenced, but it's actually telling you that something unexpected is happening in your test. You can learn more about this from my blog post (and videos): .

Advice: Learn when act is necessary and don't wrap things in act unnecessarily.

Importance: high

We maintain a page called of the queries you should attempt to use in the order you should attempt to use them. If your goal is aligned with ours of having tests that give you confidence that your app will work when your users use them, then you'll want to query the DOM as closely to the way your end-users do so as possible. The queries we provide will help you to do this, but not all queries are created equally.

As a sub-section of "Using the wrong query" I want to talk about querying on the container directly.

We want to ensure that your users can interact with your UI and if you query around using querySelector we lose a lot of that confidence, the test is harder to read, and it will break more frequently. This goes hand-in-hand with the next sub-section:

As a sub-section of "Using the wrong query", I want to talk about why I recommend you query by the actual text (in the case of localization, I recommend the default locale), rather than using test IDs or other mechanisms everywhere.

If you don't query by the actual text, then you have to do extra work to make sure that your translations are getting applied correctly. The biggest complaint I hear about this is that it leads to content writers breaking your tests. My rebuttal to that is that first, if a content writer changes "Username" to "Email" that's a change I definitely want to know about (because I'll need to change my implementation). Also, if there is a situation where they break something, fixing that issue takes no time at all. It's easy to triage and easy to fix.

So the cost is pretty low, and the benefit is you get increased confidence that your translations are applied correctly and your tests are easier to write and read.

I should mention that not everyone agrees with me on this, feel free to read more about it .

As a sub-section of "Using the wrong query" I want to talk about *ByRole. In recent versions, the *ByRole queries have been seriously improved (primarily thanks to great work by ) and are now the number one recommended approach to query your component's output. Here are some of my favorite features.

The name option allows you to query elements by their which is what screen readers will read for the element and it works even if your element has its text content split up by different elements. For example:

One reason people don't use *ByRole queries is because they're not familiar with the implicit roles placed on elements. . So another one of my favorite features of the *ByRole queries is that if we're unable to find an element with the role you've specified, not only will we log the entire DOM to you like we do with normal get* or find* variants, but we also log all the available roles you can query by!

This will fail with the following error message:

Notice that we didn't have to add the role=button to our button for it to have the role of button. That's an implicit role, which leads us perfectly into our next one...

Advice: Read and follow the recommendations .**

Importance: high

Slapping accessibility attributes willy nilly is not only unnecessary (as in the case above), but it can also confuse screen readers and their users. The accessibility attributes should really only be used when semantic HTML doesn't satisfy your use case (like if you're building a non-native UI that you want to make accessible ). If that's what you're building, be sure to use an existing library that does this accessibly or follow the WAI-ARIA practices. They often have .

Note: to make inputs accessible via a "role" you'll want to specify the type attribute!

Advice: Avoid adding unnecessary or incorrect accessibility attributes.

Importance: medium

is a package that's built on top of fireEvent, but it provides several methods that resemble the user interactions more closely. In the example above, fireEvent.change will simply trigger a single change event on the input. However the type call, will trigger keyDown, keyPress, and keyUp events for each character as well. It's much closer to the user's actual interactions. This has the benefit of working well with libraries that you may use which don't actually listen for the change event.

We're still working on @testing-library/user-event to ensure that it delivers what it promises: firing all the same events the user would fire when performing a specific action. I don't think we're quite there yet and this is why it's not baked-into @testing-library/dom (though it may be at some point in the future). However, I'm confident enough in it to recommend you give it a look and use it's utilities over fireEvent.

Advice: Use @testing-library/user-event over fireEvent where possible.

Importance: high

The only reason the query* variant of the queries is exposed is for you to have a function you can call which does not throw an error if no element is found to match the query (it returns null if no element is found). The only reason this is useful is to verify that an element is not rendered to the page. The reason this is so important is because the get* and find* variants will throw an extremely helpful error if no element is found–it prints out the whole document so you can see what's rendered and maybe why your query failed to find what you were looking for. Whereas query* will only return null and the best toBeInTheDocument can do is say: "null isn't in the document" which is not very helpful.

Advice: Only use the query* variants for asserting that an element cannot be found.

Importance: high

Those two bits of code are basically equivalent (find* queries use waitFor under the hood), but the second is simpler and the error message you get will be better.

Advice: use find* any time you want to query for something that may not be available right away.

Importance: high

The purpose of waitFor is to allow you to wait for a specific thing to happen. If you pass an empty callback it might work today because all you need to wait for is "one tick of the event loop" thanks to the way your mocks work. But you'll be left with a fragile test which could easily fail if you refactor your async logic.

Advice: wait for a specific assertion inside waitFor.

Importance: low

Let's say that for the example above, window.fetch was called twice. So the waitFor call will fail, however, we'll have to wait for the timeout before we see that test failure. By putting a single assertion in there, we can both wait for the UI to settle to the state we want to assert on, and also fail faster if one of the assertions do end up failing.

Advice: only put one assertion in a callback.

Importance: high

waitFor is intended for things that have a non-deterministic amount of time between the action you performed and the assertion passing. Because of this, the callback can be called (or checked for errors) a non-deterministic number of times and frequency (it's called both on an interval as well as when there are DOM mutations). So this means that your side-effect could run multiple times!

This also means that you can't use snapshot assertions within waitFor. If you do want to use a snapshot assertion, then first wait for a specific assertion, and then after that you can take your snapshot.

Advice: put side-effects outside waitFor callbacks and reserve the callback for assertions only.

Importance: low

This one's not really a big deal actually, but I thought I'd mention it and give my opinion on it. If get* queries are unsuccessful in finding the element, they'll throw a really helpful error message that shows you the full DOM structure (with syntax highlighting) which will help you during debugging. Because of this, the assertion could never possibly fail (because the query will throw before the assertion has a chance to).

For this reason, many people skip the assertion. This really is fine honestly, but I personally normally keep the assertion in there just to communicate to readers of the code that it's not just an old query hanging around after a refactor but that I'm explicitly asserting that it exists.

Advice: If you want to assert that something exists, make that assertion explicit.

Accessibility in React

Including keyboard users

At this point, we've accomplished all of the features we set out to implement. A user can add a new task, check and uncheck tasks, delete tasks, or edit task names. And they can filter their task list by all, active, or completed tasks.

Or, at least: they can do all of these things with a mouse. Unfortunately, these features are not very accessible to keyboard-only users. Let's explore this now.

Start by clicking on the input at the top of our app, as if you're going to add a new task. You'll see a thick, dashed outline around that input. This outline is your visual indicator that the browser is currently focused on this element. Press the Tab key, and you will see the outline appear around the "Add" button beneath the input. This shows you that the browser's focus has moved.

Press Tab a few more times, and you will see this dashed focus indicator move between each of the filter buttons. Keep going until the focus indicator is around the first "Edit" button. Press Enter.

The <Todo /> component will switch templates, as we designed, and you'll see a form that lets us edit the name of the task.

But where did our focus indicator go?

When we switch between templates in our <Todo /> component, we completely remove the elements that were there before to replace them with something else. That means the element that we were focused on vanishes, and nothing is in focus at all. This could confuse a wide variety of users — particularly users who rely on the keyboard, or users who use a screen reader.

To improve the experience for keyboard and screen-reader users, we should manage the browser's focus ourselves.

When a user toggles a <Todo/> template from viewing to editing, we should focus on the <input> used to rename it; when they toggle back from editing to viewing, we should move focus back to the "Edit" button.

In order to focus on an element in our DOM, we need to tell React which element we want to focus on and how to find it. React's hook creates an object with a single property: current. This property can be a reference to anything we want and look that reference up later. It's particularly useful for referring to DOM elements.

Change the import statement at the top of Todo.js so that it includes useRef:

Then, create two new constants beneath the hooks in your Todo() function. Each should be a ref – one for the "Edit" button in the view template and one for the edit field in the editing template.

These refs have a default value of null because they will not have value until we attach them to their respective elements. To do that, we'll add an attribute of ref to each element, and set their values to the appropriately named ref objects.

The textbox <input> in your editing template should be updated like this:

The "Edit" button in your view template should read like this:

To use our refs for their intended purpose, we need to import another React hook: . useEffect() is so named because it runs after React renders a given component, and will run any side-effects that we'd like to add to the render process, which we can't run inside the main function body. useEffect() is useful in the current situation because we cannot focus on an element until after the <Todo /> component renders and React knows where our refs are.

Change the import statement of Todo.js again to add useEffect:

useEffect() takes a function as an argument; this function is executed after the component renders. Let's see this in action; put the following useEffect() call just above the return statement in the body of Todo(), and pass into it a function that logs the words "side effect" to your console:

To illustrate the difference between the main render process and code run inside useEffect(), add another log – put this one below the previous addition:

Now, open the app in your browser. You should see both messages in your console, with each one repeating three times. Note how "main render" logged first, and "side effect" logged second, even though the "side effect" log appears first in the code.

That's it for our experimentation for now. Delete console.log("main render") now, and lets move on to implementing our focus management.

Now that we know our useEffect() hook works, we can manage focus with it. As a reminder, we want to focus on the editing field when we switch to the editing template.

Update your existing useEffect() hook so that it reads like this:

These changes make it so that, if isEditing is true, React reads the current value of the editFieldRef and moves browser focus to it. We also pass an array into useEffect() as a second argument. This array is a list of values useEffect() should depend on. With these values included, useEffect() will only run when one of those values changes. We only want to change focus when the value of isEditing changes.

Try it now, and you'll see that when you click an "Edit" button, focus moves to the corresponding edit <input>!

At first glance, getting React to move focus back to our "Edit" button when the edit is saved or cancelled appears deceptively easy. Surely we could add a condition to our useEffect to focus on the edit button if isEditing is false? Let's try it now — update your useEffect() call like so:

This kind of mostly works. Head back to your browser and you'll see that your focus moves between Edit <input> and "Edit" button as you start and end an edit. However, you may have noticed a new problem — the "Edit" button in the final <Todo /> component is focussed immediately on page load, before we even interact with the app!

Our useEffect() hook is behaving exactly as we designed it: it runs as soon as the component renders, sees that isEditing is false, and focuses the "Edit" button. Because there are three instances of <Todo />, we see focus on the last "Edit" button.

We need to refactor our approach so that focus changes only when isEditing changes from one value to another.

In order to meet our refined criteria, we need to know not just the value of isEditing, but also when that value has changed. In order to do that, we need to be able to read the previous value of the isEditing constant. Using pseudocode, our logic should be something like this:

The React team had discussed , and has provided an example custom hook we can use for the job.

Paste the following code near the top of Todo.js, above your Todo() function.

Now we'll define a wasEditing constant beneath the hooks at the top of Todo(). We want this constant to track the previous value of isEditing, so we call usePrevious with isEditing as an argument:

With this constant, we can update our useEffect() hook to implement the pseudocode we discussed before — update it as follows:

Note that the logic of useEffect() now depends on wasEditing, so we provide it in the array of dependencies.

Again try using the "Edit" and "Cancel" buttons to toggle between the templates of your <Todo /> component; you'll see the browser focus indicator move appropriately, without the problem we discussed at the start of this section.

There's one last keyboard experience gap: when a user deletes a task from the list, the focus vanishes. We're going to follow a pattern similar to our previous changes: we'll make a new ref, and utilize our usePrevious() hook, so that we can focus on the list heading whenever a user deletes a task.

Sometimes, the place we want to send our focus to is obvious: when we toggled our <Todo /> templates, we had an origin point to "go back" to — the "Edit" button. In this case however, since we're completely removing elements from the DOM, we have no place to go back to. The next best thing is an intuitive location somewhere nearby. The list heading is our best choice because it's close to the list item the user will delete, and focusing on it will tell the user how many tasks are left.

Import the useRef() and useEffect() hooks into App.js — you'll need them both below:

Then declare a new ref inside the App() function. Just above the return statement is a good place:

Heading elements like our <h2> are not usually focusable. This isn't a problem — we can make any element programmatically focusable by adding the attribute to it. This means only focusable with JavaScript. You can't press Tab to focus on an element with a tabindex of -1 the same way you could do with a or element (this can be done using tabindex="0", but that's not really appropriate in this case).

Let's add the tabindex attribute — written as tabIndex in JSX — to the heading above our list of tasks, along with our headingRef:

Note: The tabindex attribute is great for accessibility edge-cases, but you should take great care to not overuse it. Only apply a tabindex to an element when you're absolutely sure that making it focusable will benefit your user in some way. In most cases, you should be utilizing elements that can naturally take focus, such as buttons, anchors, and inputs. Irresponsible usage of tabindex could have a profoundly negative impact on keyboard and screen-reader users!

We want to focus on the element associated with our ref (via the ref attribute) only when our user deletes a task from their list. That's going to require the usePrevious() hook we already used earlier on. Add it to the top of your App.js file, just below the imports:

Now add the following, above the return statement inside the App() function:

Here we are invoking usePrevious() to track the length of the tasks state, like so:

Note: Since we're now utilizing usePrevious() in two files, a good efficiency refactor would be to move the usePrevious() function into its own file, export it from that file, and import it where you need it. Try doing this as an exercise once you've got to the end.

Now that we've stored how many tasks we previously had, we can set up a useEffect() hook to run when our number of tasks changes, which will focus the heading if the number of tasks we have now is less than with it previously was — i.e. we deleted a task!

Add the following into the body of your App() function, just below your previous additions:

We only try to focus on our list heading if we have fewer tasks now than we did before. The dependencies passed into this hook ensure it will only try to re-run when either of those values (the number of current tasks, or the number of previous tasks) changes.

Now, when you delete a task in your browser, you will see our dashed focus outline appear around the heading above the list.

ByPlaceholderText

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

getByPlaceholderText, queryByPlaceholderText, getAllByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText

API

getByPlaceholderText(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  text: TextMatch,
  options?: {
    exact?: boolean = true,
    normalizer?: NormalizerFn,
  }): HTMLElement

This will search for all elements with a placeholder attribute and find one that matches the given TextMatch.

Note
A placeholder is not a good substitute for a label so you should generally use getByLabelText instead.

Options

TextMatch options

getByRole(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  role: TextMatch,
  options?: {
    exact?: boolean = true,
    hidden?: boolean = false,
    name?: TextMatch,
    description?: TextMatch,
    normalizer?: NormalizerFn,
    selected?: boolean,
    checked?: boolean,
    pressed?: boolean,
    current?: boolean | string,
    expanded?: boolean,
    queryFallbacks?: boolean,
    level?: number,
  }): HTMLElement

<script
  crossorigin
  src="https://unpkg.com/react@17/umd/react.production.min.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
></script>

<body>
  <div role="tablist">
    <button role="tab" aria-selected="true">Native</button>
    <button role="tab" aria-selected="false">React</button>
    <button role="tab" aria-selected="false">Cypress</button>
  </div>
</body>

<body>
  <section>
    <button role="checkbox" aria-checked="true">Sugar</button>
    <button role="checkbox" aria-checked="false">Gummy bears</button>
    <button role="checkbox" aria-checked="false">Whipped cream</button>
  </section>
</body>

<body>
  <nav>
    <ul>
      <li>
        <a aria-expanded="false" aria-haspopup="true" href="..."
          >Expandable Menu Item</a
        >
        <ul>
          <li><a href="#">Submenu Item 1</a></li>
          <li><a href="#">Submenu Item 1</a></li>
        </ul>
      </li>
      <li><a href="#">Regular Menu Item</a></li>
    </ul>
  </nav>
</body>

<body>
  <section>
    <h1>Heading Level One</h1>
    <h2>First Heading Level Two</h2>
    <h3>Heading Level Three</h3>
    <div role="heading" aria-level="2">Second Heading Level Two</div>
  </section>
</body>

getByRole("heading", { level: 1 });
// <h1>Heading Level One</h1>

getAllByRole("heading", { level: 2 });
// [
//   <h2>First Heading Level Two</h2>,
//   <div role="heading" aria-level="2">Second Heading Level Two</div>
// ]

<body>
  <ul>
    <li role="alertdialog" aria-describedby="notification-id-1">
      <div><button>Close</button></div>
      <div id="notification-id-1">You have unread emails</div>
    </li>
    <li role="alertdialog" aria-describedby="notification-id-2">
      <div><button>Close</button></div>
      <div id="notification-id-2">Your session is about to expire</div>
    </li>
  </ul>
</body>

import React from "react";
import { render } from "@testing-library/react";
import { ThemeProvider } from "my-ui-lib";
import { TranslationProvider } from "my-i18n-lib";
import defaultStrings from "i18n/en-x-default";

const AllTheProviders = ({ children }) => {
  return (
    <ThemeProvider theme="light">
      <TranslationProvider messages={defaultStrings}>
        {children}
      </TranslationProvider>
    </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 };

import React, { FC, ReactElement } from "react";
import { render, RenderOptions } from "@testing-library/react";
import { ThemeProvider } from "my-ui-lib";
import { TranslationProvider } from "my-i18n-lib";
import defaultStrings from "i18n/en-x-default";

const AllTheProviders: FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <ThemeProvider theme="light">
      <TranslationProvider messages={defaultStrings}>
        {children}
      </TranslationProvider>
    </ThemeProvider>
  );
};

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, "wrapper">
) => render(ui, { wrapper: AllTheProviders, ...options });

export * from "@testing-library/react";
export { customRender as render };

const rtl = require("@testing-library/react");

const customRender = (ui, options) =>
  rtl.render(ui, {
    myDefaultOption: "something",
    ...options,
  });

module.exports = {
  ...rtl,
  render: customRender,
};

import { queryHelpers, buildQueries } from "@testing-library/react";

// The queryAllByAttribute is a shortcut for attribute-based matchers
// You can also use document.querySelector or a combination of existing
// testing library utilities to find matching nodes for your query
const queryAllByDataCy = (...args) =>
  queryHelpers.queryAllByAttribute("data-cy", ...args);

const getMultipleError = (c, dataCyValue) =>
  `Found multiple elements with the data-cy attribute of: ${dataCyValue}`;
const getMissingError = (c, dataCyValue) =>
  `Unable to find an element with the data-cy attribute of: ${dataCyValue}`;

const [
  queryByDataCy,
  getAllByDataCy,
  getByDataCy,
  findAllByDataCy,
  findByDataCy,
] = buildQueries(queryAllByDataCy, getMultipleError, getMissingError);

export {
  queryByDataCy,
  queryAllByDataCy,
  getByDataCy,
  getAllByDataCy,
  findAllByDataCy,
  findByDataCy,
};

import { render, queries } from "@testing-library/react";
import * as customQueries from "./custom-queries";

const customRender = (ui, options) =>
  render(ui, { queries: { ...queries, ...customQueries }, ...options });

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

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

import { render, queries, RenderOptions } from "@testing-library/react";
import * as customQueries from "./custom-queries";
import { ReactElement } from "react";

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, "queries">
) => render(ui, { queries: { ...queries, ...customQueries }, ...options });

export * from "@testing-library/react";
export { customRender as render };

module.exports = {
  moduleDirectories: [
    'node_modules',
+   // add the directory with the test-utils.js file, for example:
+   'utils', // a utility folder
+    __dirname, // the root directory
  ],
  // ... other options ...
}

const button = screen.getByRole('button', {name: /disabled button/i})

// ❌
expect(button.disabled).toBe(true)
// error message:
//  expect(received).toBe(expected) // Object.is equality
//
//  Expected: true
//  Received: false

// ✅
expect(button).toBeDisabled()
// error message:
//   Received element is not disabled:
//     <button />

// ❌
act(() => {
  render(<Example />)
})

const input = screen.getByRole('textbox', {name: /choose a fruit/i})
act(() => {
  fireEvent.keyDown(input, {key: 'ArrowDown'})
})

// ✅
render(<Example />)
const input = screen.getByRole('textbox', {name: /choose a fruit/i})
fireEvent.keyDown(input, {key: 'ArrowDown'})

// ❌
// assuming you've got this DOM to work with:
// <label>Username</label><input data-testid="username" />
screen.getByTestId('username')

// ✅
// change the DOM to be accessible by associating the label and setting the type
// <label for="username">Username</label><input id="username" type="text" />
screen.getByRole('textbox', {name: /username/i})

// ❌
const {container} = render(<Example />)
const button = container.querySelector('.btn-primary')
expect(button).toHaveTextContent(/click me/i)

// ✅
render(<Example />)
screen.getByRole('button', {name: /click me/i})

// assuming we've got this DOM structure to work with
// <button><span>Hello</span> <span>World</span></button>

screen.getByText(/hello world/i)
// ❌ fails with the following error:
// Unable to find an element with the text: /hello world/i. This could be
// because the text is broken up by multiple elements. In this case, you can
// provide a function for your text matcher to make your matcher more flexible.

screen.getByRole('button', {name: /hello world/i})
// ✅ works!

TestingLibraryElementError: Unable to find an accessible element with the role "blah"

Here are the accessible roles:

  button:

  Name "Hello World":
  <button />

  --------------------------------------------------

<body>
  <div>
    <button>
      <span>
        Hello
      </span>

      <span>
        World
      </span>
    </button>
  </div>
</body>

// ❌
await waitFor(() => {})
expect(window.fetch).toHaveBeenCalledWith('foo')
expect(window.fetch).toHaveBeenCalledTimes(1)

// ✅
await waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo'))
expect(window.fetch).toHaveBeenCalledTimes(1)

// ❌
await waitFor(() => {
  expect(window.fetch).toHaveBeenCalledWith('foo')
  expect(window.fetch).toHaveBeenCalledTimes(1)
})

// ✅
await waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo'))
expect(window.fetch).toHaveBeenCalledTimes(1)

// ❌
await waitFor(() => {
  fireEvent.keyDown(input, {key: 'ArrowDown'})
  expect(screen.getAllByRole('listitem')).toHaveLength(3)
})

// ✅
fireEvent.keyDown(input, {key: 'ArrowDown'})
await waitFor(() => {
  expect(screen.getAllByRole('listitem')).toHaveLength(3)
})

const createReactClass = require("create-react-class");

createReactClass({
  mixins: [PureRenderMixin],

  render: function () {
    return <div className={this.props.className}>foo</div>;
  },
});

DNT-2577Secondary Nav Updates
DNT-2609
Testing

DNT-2636a11y audit - Nav Cards
DNT-2679
Execute test cases

DNT-2639a11y audit - Icon List
Execute test cases

DNT-2689a11y audit - NewsBanner
Execute test cases

DNT-2690a11y audit - Search
Execute test cases

DNT-2807a11y audit - NewsAndResources
Execute test cases

DNT-2814a11y audit - GlobalAlert
Execute test cases

DNT-2226Component Conversion: Additional Resources
FED

Send _ga cookie in DESSA Request
Open Prod Issues / Hypercare

R8 Hypercare - PROD - Sitecore - Need additional datalayer push on successful sign in from /home
Open Prod Issues / Hypercare

Water Access Alert content connection to Lake View app broken
Open Prod Issues / Hypercare

scprod-cms all iframes throwing component error
Open Prod Issues / Hypercare

Sticky header should include nav bar (On hold need UX)
Open Prod Issues / Hypercare

DNT-2654a11y audit - Form
Execute test cases

DNT-2569Add updated classes to Rich Text Editor in Sitecore CMS
Add new rich text classes to electron/tailwind

Sitecore - update rich text editor classes and elements

Testing

Secondary Nav for sub-sections
JSS Application Component Conversion

DNT-666Prod Issue: SOLR Search: Investigate our ability to jurisdictionally filter SOLR results
Testing

DNT-670Prod Issue: SOLR: Define how SOLR orders/prioritizes it's results
Testing

DNT-2209UX Review of JSS Test
Sticky header should include nav bar

DNT-2860Simple Calculator
Develop test cases

Sitecore Template and Rendering TDS Sync and Push

DNT-2649a11y audit - Modal
Labels provided for controls/elements are sufficiently descriptive

Develop test cases

Execute test cases

DNT-2811a11y audit - MoreInfo
Execute test cases

DNT-2350JSS My Account Regression Testing
In AUthenticated flow Confirmation page under Manage your new Account online module instead of ADD ACCOUNT text +ADD MORE text is displaying

JSS - Dashboard Tiles (Explore New Ways To Save) giving error page

JSS-Sign in-Remember Username/Email with check box is not displaying under the password field

JSS-Unlock Additional Options- UAO not working from Products and Services page

JSS-Authenticated Products and Service not being displayed

JSS-Business Customer service page-Residential Customer Service page link is not underlined and Tree trimming displaying twice

JSS-Forgot Username and Forgot Password Flows-Duke Logo on top of the page is missing

JSS-Registration-After completing the Registration signing in for the first time, Password field displaying both the eye icon and Show button

JSS- Products & Services - Online Savings Store page is not loading

JSS- Customer Service - Authenticated page displays extra icons

JSS- CARE Tiles & SSO Tile - Tiles displayed in SCQA and JSS test not matching for the same user

JSS- Start, Stop & Move - Authenticated page Start, Stop & Move select moving Resources

JSS-Sign in-Username/Email and Password fields not displaying error message when tabbed out blank

Personalization Issues with Push down panel

sccloudcachedev-wa.azurewebsites.net page when click on logo

Cancel Button not working - find-it-duke/testing

DNT-1271 Jurisdiction Selector Leverage Location Services
CLONE - Jurisdiction Selector

DNT-1060Stickiness for primary nav + Shrinking (animation)
Testing

DNT-548Jurisdiction Selector Intercept
JURIS Intercept: FED

JURIS Intercept: Sitecore

JURIS Intercept: Testing

DNT-1189Render Modal Video component on a page
CLONE - Latest News: FED Conversion

CLONE - Latest News: Sitecore Tempate

CLONE - Latest News: Content Migration

CLONE - Latest News: Functional Testing

DNT-1366Component Conversion: Search Results Page
Create route and call component on the page

DNT-421choice-calculator (Convert to React Component)
Setup Ohio Choice Calculator in CMS

Accessibility updates to components

Navigation Redesign

Jurisdiction Selector Redesign

Analytics Support for Modernization

Forms Redesign

Search Redesign

JSS Code Base Maintenance

JSS-Connect Intersection

Integrate components and tooling from current app into the JSS Starter App

JSS Governance and Standards

Visual design reviews of components

JSS Content Tasks

DNT-1426Call to Action component button will not open in new window
Testing

JSS Spanish

DNT-1725Merge Street Number and Street Address into a single field
Testing

Data Fetching

State Management

Monorepos / Micro Front-Ends

Provide ability to toggle features on/off dynamically

Post-migration Testing

JSS Go-live activities

DNT-2369Pre-migration Tasks
Start/Stop/Move

Originally a JSS 'Issue Type' = 'Bug'

Track CMS Changes

Fast followers after initial JSS release

JSS Application Component Conversion

Throttle scroll event listeners
JSS Code Base Maintenance

Upgrade to CRA 5
JSS Code Base Maintenance

Rename component folder
JSS Code Base Maintenance

Rec Sites & Water Access Phone field not rendering

Enabler: Component Code Splitting
JSS Code Base Maintenance

Post-R8 Approved (Non-Optimization)

Is Duke My Service Provider?

JSS-Modernization: SCQA/SCTEST-Mobile- EV calculator Screen overlaps when scrolling up and down

Test Data Attribution
Is Duke My Service Provider?

Set up Application Component and JSON data file for Upstream Distributor tables in Sitecore

Multi-Step FormBuilder save error
DNT-799Component Conversion: ApplicationComponent
Sitecore Template: ApplicationComponent

DNT-803Component Conversion: Search
DNT-2640a11y audit - Jurisdiction Intercept
Execute test cases

DNT-2755a11y audit - Product Cards
DNT-2654a11y audit - Form
Required and invalid form controls must convey/expose the fact that they are required and invalid

DNT-2209UX Review of JSS Test
SEARCH - Generate new search term event for initial interaction with a pagination button on search results page
Open Prod Issues / Hypercare

DigitalFoundation Release Merge

| # | Issue Description | Modification | STD | Count | PRIO | | -------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- | -------- | --- | | 30.1 | Decorative SVG is not hidden from screen reader users |

| # | Issue Description | Modification | STD | Count | PRIO | | -------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- | -------- | --- | | 43.1 | Headings are not marked up as headings |

Cheatsheet MD

Tailwind CSS Cheat Sheet

Excerpt

Cheat sheet that provides a quick, interactive reference for all utility classes and CSS properties provided by Tailwind CSS, a utility-first CSS framework.

Layout

Breakpoints (screen sizes) that wrap utility classes.
Sets rendering of an element's fragments when broken across multiple lines, columns, or pages.
Sets max-width to match min-width of the current breakpoint.
Sets how the total width and height of an element is calculated.
Sets the display box type of an element.
Sets an element's placement to a side of its container and allows content to wrap around it.
Sets whether an element is moved below preceding floated elements.
Sets whether an element creates a stacking context.
Sets how the content of a replaced element (img or video tag) should be resized.
Sets the alignment of the selected replaced element.
Sets how to handle content that's too big for its container.
Sets browser behavior upon reaching the boundary of a scrolling area.
Sets an element's position.
Sets the placement of a positioned element.
Show or hide without affecting the layout of the document.
Sets the z-order ("stack order") of a positioned element.

Spacing

Controls padding in 0.25rem increments.
Controls margin (and negative margin) in 0.25rem increments.
Sets left or top (x or y) margin between child elements, but skips the first element.

Backgrounds

Sets behavior of background images when scrolling.
Sets where a background extends.
Sets background opacity when used with bg-[color].

Tables

Collapse or separate table borders.
Defines the algorithm used to lay out table cells, rows, and columns.

Transforms

Scales an element that has transform applied.
Rotates an element that has transform applied.
Translates an element that has transform applied.

Effects

Sets the shadow around an element.
Sets the transparency of an element.
Sets how an element blends with the background.

Flexbox

Sets element to be a flex container.
Sets direction of flex items.
Creates how flex items wrap.

Sizing

Sets the width of an element.
Sets the minimum width of an element.
Sets the maxiumum width of an element.

Borders

Sets border width in increments of 1px.
Sets border opacity when used with border-[color].
Sets left or top (x or y) border width between child elements, but skips the first element.

Transitions and Animation

Sets the CSS properties affected by transition animations.
Sets the length of time for a transition animations to complete.
transition-timing-function
Sets the easing function of transition animations.

Interactivity

Disables native styling based on the operating system's theme.
Changes the cursor when hovering over an element.
Sets the outline of the element.

SVG

Sets the color to paint an SVG.
Sets the outline color of an SVG.
Sets the outline width of an SVG.

Grid

Defines columns for grid layout.
Sets a grid item size and location within the grid column.
Defines rows for grid layout.

Box Alignment

Controls how flex items are positioned along container's main axis.
.justify-start
justify-content: flex-start;

Typography

.text-transparent
color: transparent;

Filter

Sets blur filter on elements (use with filter utility).
Sets brightness filter on elements (use with filter utility).
Sets contrast filter on elements (use with filter utility).

Url: https: //nerdcave.com/tailwind-cheat-sheet

Concurrent Mode API Reference (Experimental)

.scary > blockquote { background-color: rgba(237, 51, 21, 0.2); border-left-color: #ed3315; }

Caution:
This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious.
Much of the information on this page is now outdated and exists only for archival purposes. Please refer to the React 18 Alpha announcement post for the up-to-date information.
Before React 18 is released, we will replace this page with stable documentation.

This page is an API reference for the React Concurrent Mode. If you're looking for a guided introduction instead, check out Concurrent UI Patterns.

Note: This is a Community Preview and not the final stable version. There will likely be future changes to these APIs. Use at your own risk!

Enabling Concurrent Mode

`createRoot`

Replaces ReactDOM.render(<App />, rootNode) and enables Concurrent Mode.

For more information on Concurrent Mode, check out the Concurrent Mode documentation.

Suspense API

`Suspense`

Suspense lets your components "wait" for something before they can render, showing a fallback while waiting.

In this example, ProfileDetails is waiting for an asynchronous API call to fetch some data. While we wait for ProfileDetails and ProfilePhoto, we will show the Loading... fallback instead. It is important to note that until all children inside <Suspense> have loaded, we will continue to show the fallback.

Suspense takes two props:

fallback takes a loading indicator. The fallback is shown until all of the children of the Suspense component have finished rendering.
unstable_avoidThisFallback takes a boolean. It tells React whether to "skip" revealing this boundary during the initial load. This API will likely be removed in a future release.

`<SuspenseList>`

SuspenseList helps coordinate many components that can suspend by orchestrating the order in which these components are revealed to the user.

When multiple components need to fetch data, this data may arrive in an unpredictable order. However, if you wrap these items in a SuspenseList, React will not show an item in the list until previous items have been displayed (this behavior is adjustable).

SuspenseList takes two props:

revealOrder (forwards, backwards, together) defines the order in which the SuspenseList children should be revealed.
- together reveals all of them when they're ready instead of one by one.

Note that SuspenseList only operates on the closest Suspense and SuspenseList components below it. It does not search for boundaries deeper than one level. However, it is possible to nest multiple SuspenseList components in each other to build grids.

`useTransition`

useTransition allows components to avoid undesirable loading states by waiting for content to load before transitioning to the next screen. It also allows components to defer slower, data fetching updates until subsequent renders so that more crucial updates can be rendered immediately.

The useTransition hook returns two values in an array.

startTransition is a function that takes a callback. We can use it to tell React which state we want to defer.
isPending is a boolean. It's React's way of informing us whether we're waiting for the transition to finish.

If some state update causes a component to suspend, that state update should be wrapped in a transition.

In this code, we've wrapped our data fetching with startTransition. This allows us to start fetching the profile data right away, while deferring the render of the next profile page and its associated Spinner for 2 seconds (the time shown in timeoutMs).

The isPending boolean lets React know that our component is transitioning, so we are able to let the user know this by showing some loading text on the previous profile page.

For an in-depth look at transitions, you can read Concurrent UI Patterns.

useTransition Config

useTransition accepts an optional Suspense Config with a timeoutMs. This timeout (in milliseconds) tells React how long to wait before showing the next state (the new Profile Page in the above example).

Note: We recommend that you share Suspense Config between different modules.

`useDeferredValue`

Returns a deferred version of the value that may "lag behind" it for at most timeoutMs.

This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch.

A good example of this is a text input.

This allows us to start showing the new text for the input immediately, which allows the webpage to feel responsive. Meanwhile, MySlowList "lags behind" for up to 2 seconds according to the timeoutMs before updating, allowing it to render with the current text in the background.

For an in-depth look at deferring values, you can read Concurrent UI Patterns.

useDeferredValue Config

useDeferredValue accepts an optional Suspense Config with a timeoutMs. This timeout (in milliseconds) tells React how long the deferred value is allowed to lag behind.

React will always try to use a shorter lag when network and device allows it.

Arbitrary Values

Adding Custom Styles - Tailwind CSS

Excerpt
Best practices for adding your own custom styles to Tailwind.

Often the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you.

Tailwind has been designed from the ground up to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework.

This guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins.

Customizing your theme

If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations to the theme section of your tailwind.config.js file:

Learn more about customizing your theme in the documentation.

Using arbitrary values

While you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect.

When you find yourself really needing something like top: 117px to get a background image in just the right spot, use Tailwind’s square bracket notation to generate a class on the fly with any arbitrary value:

This is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like hover and responsive modifiers like lg:

This works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more:

Arbitrary properties

If you ever need to use a CSS property that Tailwind doesn’t include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS:

This is really like inline styles, but again with the benefit that you can use modifiers:

This can be useful for things like CSS variables as well, especially when they need to change under different conditions:

Handling whitespace

When an arbitrary value needs to contain a space, use an underscore (_) instead and Tailwind will automatically convert it to a space at build-time:

In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:

In the rare case that you actually need to use an underscore but it’s ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won’t convert it to a space:

Resolving ambiguities

Many utilities in Tailwind share a common namespace but map to different CSS properties. For example text-lg and text-black both share the text- namespace, but one is for font-size and the other is for color.

When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in:

Sometimes it really is ambiguous though, for example when using CSS variables:

In these situations, you can “hint” the underlying type to Tailwind by adding a before the value:

Using CSS and @layer

When you need to add truly custom CSS rules to a Tailwind project, the easiest approach is to just add the custom CSS to your stylesheet:

For more power, you can also use the @layer directive to add styles to Tailwind’s base, components, and utilities layers:

Why does Tailwind group styles into "layers"?

In CSS, the order of the rules in your stylesheet decides which declaration wins when two selectors have the same specificity:

Here, both buttons will be black since .bg-black comes after .btn in the CSS:

To manage this, Tailwind organizes the styles it generates into three different “layers” — a concept popularized by .

The base layer is for things like reset rules or default styles applied to plain HTML elements.
The components layer is for class-based styles that you want to be able to override with utilities.
The utilities

Being explicit about this makes it easier to understand how your styles will interact with each other, and using the @layer directive lets you control the final declaration order while still organizing your actual code in whatever way you like.

The @layer directive helps you control declaration order by automatically relocating your styles to the corresponding @tailwind directive, and also enables features like and for your own custom CSS.

Adding base styles

If you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the html or body elements:

This keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file.

If you want to add your own default base styles for specific HTML elements, use the @layer directive to add those styles to Tailwind’s base layer:

Use the function or directive when adding custom base styles if you want to refer to any of the values defined in your .

Adding component classes

Use the components layer for any more complicated classes you want to add to your project that you’d still like to be able to override with utility classes.

Traditionally these would be classes like card, btn, badge — that kind of thing.

By defining component classes in the components layer, you can still use utility classes to override them when necessary:

Using Tailwind you probably don’t need these types of classes as often as you think. Read our guide on for our recommendations.

The components layer is also a good place to put custom styles for any third-party components you’re using:

Use the function or directive when adding custom component styles if you want to refer to any of the values defined in your .

Adding custom utilities

Add any of your own custom utility classes to Tailwind’s utilities layer:

This can be useful when there’s a CSS feature you’d like to use in your project that Tailwind doesn’t include utilities for out of the box.

Using modifiers with custom CSS

Any custom styles you add to Tailwind with @layer will automatically support Tailwind’s modifier syntax for handling things like hover states, responsive breakpoints, dark mode, and more.

Learn more about how these modifiers work in the documentation.

Removing unused custom CSS

Any custom styles you add to the base, components, or utilities layers will only be included in your compiled CSS if those styles are actually used in your HTML.

If you want to add some custom CSS that should always be included, add it to your stylesheet without using the @layer directive:

Make sure to put your custom styles where they need to go to get the precedence behavior you want. In the example above, we’ve added the .card class before @tailwind utilities to make sure utilities can still override it.

Using multiple CSS files

If you are writing a lot of CSS and organizing it into multiple files, make sure those files are combined into a single stylesheet before processing them with Tailwind, or you’ll see errors about using @layer without the corresponding @tailwind directive.

The easiest way to do this is using the plugin:

Learn more in our documentation.

Layers and per-component CSS

Component frameworks like Vue and Svelte support adding per-component styles within a <style> block that lives in each component file.

While you can use features like @apply and theme inside component styles like this, the @layer directive will not work and you’ll see an error about @layer being used without a matching @tailwind directive:

Don't use `@layer` in component styles

This is because under-the-hood, frameworks like Vue and Svelte are processing every single <style> block independently, and running your PostCSS plugin chain against each one in isolation.

That means if you have 10 components that each have a <style> block, Tailwind is being run 10 separate times, and each run has zero knowledge about the other runs. Because of this, Tailwind can’t take the styles you define in a @layer and move them to the corresponding @tailwind directive, because as far as Tailwind can tell there is no @tailwind directive to move it to.

One solution to this is to simply not use @layer inside your component styles:

Add your styles without using `@layer`

You lose the ability to control the precedence of your styles, but unfortunately that’s totally out of our control because of how these tools work.

Our recommendation is that you just don’t use component styles like this at all and instead use Tailwind the way it’s intended to be used — as a single global stylesheet where you use the classes directly in your HTML:

Use Tailwind's utilities instead of component styles

Writing plugins

You can also add custom styles to your project using Tailwind’s plugin system instead of using a CSS file:

Learn more about writing your own plugins in the documentation.

Components and Props

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed component API reference here.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

Function and Class Components

The simplest way to define a component is to write a JavaScript function:

This function is a valid React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.

You can also use an to define a component:

The above two components are equivalent from React's point of view.

Function and Class components both have some additional features that we will discuss in the next sections.

Rendering a Component

Previously, we only encountered React elements that represent DOM tags:

However, elements can also represent user-defined components:

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object "props".

For example, this code renders "Hello, Sara" on the page:

Let's recap what happens in this example:

We call ReactDOM.render() with the <Welcome name="Sara" /> element.
React calls the Welcome component with {name: 'Sara'} as the props.

Note: Always start component names with a capital letter.
React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.
To learn more about the reasoning behind this convention, please read JSX In Depth.

Composing Components

Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.

For example, we can create an App component that renders Welcome many times:

Typically, new React apps have a single App component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy.

Extracting Components

Don't be afraid to split components into smaller components.

For example, consider this Comment component:

It accepts author (an object), text (a string), and date (a date) as props, and describes a comment on a social media website.

This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.

First, we will extract Avatar:

The Avatar doesn't need to know that it is being rendered inside a Comment. This is why we have given its prop a more generic name: user rather than author.

We recommend naming props from the component's own point of view rather than the context in which it is being used.

We can now simplify Comment a tiny bit:

Next, we will extract a UserInfo component that renders an Avatar next to the user's name:

This lets us simplify Comment even further:

Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be extracted to a separate component.

Props are Read-Only

Whether you declare a component , it must never modify its own props. Consider this sum function:

Such functions are called because they do not attempt to change their inputs, and always return the same result for the same inputs.

In contrast, this function is impure because it changes its own input:

React is pretty flexible but it has a single strict rule:

All React components must act like pure functions with respect to their props.

Of course, application UIs are dynamic and change over time. In the next section, we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.

Animation Add-Ons

Note:
ReactTransitionGroup and ReactCSSTransitionGroup have been moved to the react-transition-group package that is maintained by the community. Its 1.x branch is completely API-compatible with the existing addons. Please file bugs and feature requests in the new repository.

The ReactTransitionGroup add-on component is a low-level API for animation, and ReactCSSTransitionGroup is an add-on component for easily implementing basic CSS animations and transitions.

High-level API: ReactCSSTransitionGroup

ReactCSSTransitionGroup is a high-level API based on and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent library.

Importing

Note:
You must provide the key attribute for all children of ReactCSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.

In this component, when a new item is added to ReactCSSTransitionGroup it will get the example-enter CSS class and the example-enter-active CSS class added in the next tick. This is a convention based on the transitionName prop.

You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:

You'll notice that animation durations need to be specified in both the CSS and the render method; this tells React when to remove the animation classes from the element and -- if it's leaving -- when to remove the element from the DOM.

Animate Initial Mounting

ReactCSSTransitionGroup provides the optional prop transitionAppear, to add an extra transition phase at the initial mount of the component. There is generally no transition phase at the initial mount as the default value of transitionAppear is false. The following is an example which passes the prop transitionAppear with the value true.

During the initial mount ReactCSSTransitionGroup will get the example-appear CSS class and the example-appear-active CSS class added in the next tick.

At the initial mount, all children of the ReactCSSTransitionGroup will appear but not enter. However, all children later added to an existing ReactCSSTransitionGroup will enter but not appear.

Note:
The prop transitionAppear was added to ReactCSSTransitionGroup in version 0.13. To maintain backwards compatibility, the default value is set to false.
However, the default values of transitionEnter and transitionLeave are true so you must specify transitionEnterTimeout and transitionLeaveTimeout

Custom Classes

It is also possible to use custom class names for each of the steps in your transitions. Instead of passing a string into transitionName you can pass an object containing either the enter and leave class names, or an object containing the enter, enter-active, leave-active, and leave class names. If only the enter and leave classes are provided, the enter-active and leave-active classes will be determined by appending '-active' to the end of the class name. Here are two examples using custom classes:

Animation Group Must Be Mounted To Work

In order for it to apply transitions to its children, the ReactCSSTransitionGroup must already be mounted in the DOM or the prop transitionAppear must be set to true.

The example below would not work, because the ReactCSSTransitionGroup is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the section above to see the difference.

Animating One or Zero Items

In the example above, we rendered a list of items into ReactCSSTransitionGroup. However, the children of ReactCSSTransitionGroup can also be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element. For example, we can implement a simple image carousel like this:

Disabling Animations

You can disable animating enter or leave animations if you want. For example, sometimes you may want an enter animation and no leave animation, but ReactCSSTransitionGroup waits for an animation to complete before removing your DOM node. You can add transitionEnter={false} or transitionLeave={false} props to ReactCSSTransitionGroup to disable these animations.

Note:
When using ReactCSSTransitionGroup, there's no way for your components to be notified when a transition has ended or to perform any more complex logic around animation. If you want more fine-grained control, you can use the lower-level ReactTransitionGroup API which provides the hooks you need to do custom transitions.

Low-level API: ReactTransitionGroup

Importing

ReactTransitionGroup is the basis for animations. When children are declaratively added or removed from it (as in the ), special lifecycle methods are called on them.

Rendering a Different Component

ReactTransitionGroup renders as a span by default. You can change this behavior by providing a component prop. For example, here's how you would render a <ul>:

Any additional, user-defined, properties will become properties of the rendered component. For example, here's how you would render a <ul> with CSS class:

Every DOM component that React can render is available for use. However, component does not need to be a DOM component. It can be any React component you want; even ones you've written yourself! Just write component={List} and your component will receive this.props.children.

Rendering a Single Child

People often use ReactTransitionGroup to animate mounting and unmounting of a single child such as a collapsible panel. Normally ReactTransitionGroup wraps all its children in a span (or a custom component as described above). This is because any React component has to return a single root element, and ReactTransitionGroup is no exception to this rule.

However if you only need to render a single child inside ReactTransitionGroup, you can completely avoid wrapping it in a <span> or any other DOM component. To do this, create a custom component that renders the first child passed to it directly:

Now you can specify FirstChild as the component prop in <ReactTransitionGroup> props and avoid any wrappers in the result DOM:

This only works when you are animating a single child in and out, such as a collapsible panel. This approach wouldn't work when animating multiple children or replacing the single child with another child, such as an image carousel. For an image carousel, while the current image is animating out, another image will animate in, so <ReactTransitionGroup> needs to give them a common DOM parent. You can't avoid the wrapper for multiple children, but you can customize the wrapper with the component prop as described above.

Reference

`componentWillAppear()`

This is called at the same time as componentDidMount() for components that are initially mounted in a TransitionGroup. It will block other animations from occurring until callback is called. It is only called on the initial render of a TransitionGroup.

`componentDidAppear()`

This is called after the callback function that was passed to componentWillAppear is called.

`componentWillEnter()`

This is called at the same time as componentDidMount() for components added to an existing TransitionGroup. It will block other animations from occurring until callback is called. It will not be called on the initial render of a TransitionGroup.

`componentDidEnter()`

This is called after the callback function that was passed to is called.

`componentWillLeave()`

This is called when the child has been removed from the ReactTransitionGroup. Though the child has been removed, ReactTransitionGroup will keep it in the DOM until callback is called.

`componentDidLeave()`

This is called when the willLeave callback is called (at the same time as componentWillUnmount()).

// near the top of the `Form` component
function handleChange(e) {
  console.log("Typing!");
}

// Down in the return statement
<input
  type="text"
  id="new-todo-input"
  className="input input__lg"
  name="text"
  autoComplete="off"
  value={name}
  onChange={handleChange}
/>

import React, { useState } from "react";

function Form(props) {
  const [name, setName] = useState("");

  function handleChange(e) {
    setName(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    props.addTask(name);
    setName("");
  }
  return (
    <form onSubmit={handleSubmit}>
      <h2 className="label-wrapper">
        <label htmlFor="new-todo-input" className="label__lg">
          What needs to be done?
        </label>
      </h2>
      <input
        type="text"
        id="new-todo-input"
        className="input input__lg"
        name="text"
        autoComplete="off"
        value={name}
        onChange={handleChange}
      />
      <button type="submit" className="btn btn__primary btn__lg">
        Add
      </button>
    </form>
  );
}

export default Form;

const taskList = tasks.map(task => (
  <Todo
      id={task.id}
      name={task.name}
      completed={task.completed}
      key={task.id}
      toggleTaskCompleted={toggleTaskCompleted}
  />
));

function toggleTaskCompleted(id) {
  const updatedTasks = tasks.map(task => {
    // if this task has the same ID as the edited task
    if (id === task.id) {
      // use object spread to make a new object
      // whose `completed` prop has been inverted
      return {...task, completed: !task.completed}
    }
    return task;
  });
  setTasks(updatedTasks);
}

const taskList = tasks.map(task => (
  <Todo
    id={task.id}
    name={task.name}
    completed={task.completed}
    key={task.id}
    toggleTaskCompleted={toggleTaskCompleted}
    deleteTask={deleteTask}
  />
));

* Ensure that the content obscured by the modal dialog is properly hidden from assistive technologies. Apply `aria-hidden="true"` to the inactive page content behind the dialog. This hides it from the reading order as perceived by assistive technology, while allowing it to remain slightly visible behind the dialog. Be sure to remove the `aria-hidden` attribute from page content when the dialog is closed.

* Ensure that the content obscured by the modal dialog is properly hidden from assistive technologies. Apply `aria-hidden="true"` to the inactive page content behind the dialog. This hides it from the reading order as perceived by assistive technology, while allowing it to remain slightly visible behind the dialog. Be sure to remove the `aria-hidden` attribute from page content when the dialog is closed.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }
  handleClick() {
    this.setState((state) => ({
      count: state.count + 1,
    }));
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import Counter from './Counter';

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

it('can render and update a counter', () => {
  // Test first render and componentDidMount
  act(() => {
    ReactDOM.render(<Counter />, container);
  });
  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('You clicked 0 times');
  expect(document.title).toBe('You clicked 0 times');

  // Test second render and componentDidUpdate
  act(() => {
    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
  });
  expect(label.textContent).toBe('You clicked 1 times');
  expect(document.title).toBe('You clicked 1 times');
});

// <input ref={(node) => this.textInput = node} />
const node = this.textInput;
node.value = "giraffe";
ReactTestUtils.Simulate.change(node);
ReactTestUtils.Simulate.keyDown(node, { key: "Enter", keyCode: 13, which: 13 });

tail (collapsed, hidden) dictates how unloaded items in a SuspenseList is shown.

Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.

transitionEnter={false}

transitionLeave={false}

<SuspenseList revealOrder="forwards">
  <Suspense fallback={"Loading..."}>
    <ProfilePicture id={1} />
  </Suspense>
  <Suspense fallback={"Loading..."}>
    <ProfilePicture id={2} />
  </Suspense>
  <Suspense fallback={"Loading..."}>
    <ProfilePicture id={3} />
  </Suspense>
  ...
</SuspenseList>

const SUSPENSE_CONFIG = { timeoutMs: 2000 };

function App() {
  const [resource, setResource] = useState(initialResource);
  const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
  return (
    <>
      <button
        disabled={isPending}
        onClick={() => {
          startTransition(() => {
            const nextUserId = getNextId(resource.userId);
            setResource(fetchProfileData(nextUserId));
          });
        }}
      >
        Next
      </button>
      {isPending ? " Loading..." : null}
      <Suspense fallback={<Spinner />}>
        <ProfilePage resource={resource} />
      </Suspense>
    </>
  );
}

function App() {
  const [text, setText] = useState("hello");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 });

  return (
    <div className="App">
      {/* Keep passing the current text to the input */}
      <input value={text} onChange={handleChange} />
      ...
      {/* But the list is allowed to "lag behind" when necessary */}
      <MySlowList text={deferredText} />
    </div>
  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map((item) => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img
          className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">{props.author.name}</div>
      </div>
      <div className="Comment-text">{props.text}</div>
      <div className="Comment-date">{formatDate(props.date)}</div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: ['hello', 'world', 'click', 'me']};
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd() {
    const newItems = this.state.items.concat([
      prompt('Enter some text')
    ]);
    this.setState({items: newItems});
  }

  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
  }

  render() {
    const items = this.state.items.map((item, i) => (
      <div key={i} onClick={() => this.handleRemove(i)}>
        {item}
      </div>
    ));

    return (
      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

render() {
  return (
    <ReactCSSTransitionGroup
      transitionName="example"
      transitionAppear={true}
      transitionAppearTimeout={500}
      transitionEnter={false}
      transitionLeave={false}>
      <h1>Fading at Initial Mount</h1>
    </ReactCSSTransitionGroup>
  );
}

// ...
<ReactCSSTransitionGroup
  transitionName={ {
    enter: 'enter',
    enterActive: 'enterActive',
    leave: 'leave',
    leaveActive: 'leaveActive',
    appear: 'appear',
    appearActive: 'appearActive'
  } }>
  {item}
</ReactCSSTransitionGroup>

<ReactCSSTransitionGroup
  transitionName={ {
    enter: 'enter',
    leave: 'leave',
    appear: 'appear'
  } }>
  {item2}
</ReactCSSTransitionGroup>
// ...

render() {
  const items = this.state.items.map((item, i) => (
    <div key={item} onClick={() => this.handleRemove(i)}>
      <ReactCSSTransitionGroup transitionName="example">
        {item}
      </ReactCSSTransitionGroup>
    </div>
  ));

  return (
    <div>
      <button onClick={this.handleAdd}>Add Item</button>
      {items}
    </div>
  );
}

import ReactCSSTransitionGroup from 'react-transition-group';

function ImageCarousel(props) {
  return (
    <div>
      <ReactCSSTransitionGroup
        transitionName="carousel"
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}>
        <img src={props.imageSrc} key={props.imageSrc} />
      </ReactCSSTransitionGroup>
    </div>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! There is no need to specify the key here:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Wrong! The key should have been specified here:
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return <CustomButton color="red" />;
}

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

import React from 'react';

// Wrong! This is a component and should have been capitalized:
function hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}

import React from 'react';

// Correct! This is a component and should be capitalized:
function Hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Correct! React knows <Hello /> is a component because it's capitalized.
  return <Hello toWhat="World" />;
}

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Wrong! JSX type can't be an expression.
  return <components[props.storyType] story={props.story} />;
}

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

function NumberDescriber(props) {
  let description;
  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  return <div>{props.number} is an {description} number</div>;
}

const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  );
};

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

18.5px

<a href="https://desitecoredev92-cd.azureedge.net/_/media/pdfs/our-company/ash-management/212492-asheville-3q21-monitoring-results.pdf?la=en&rev=009ac748bbac49149c7676ac52d343f7">

alt=""

aria-hidden

<img>

Code example using the alt attribute:

role="img"

aria-labelledby

<label for="address">Address</label>

Lack of the expected dialog role.

aria-label

<svg version="1.1" role="img" aria-labelledby="logo-title"

SVG with the aria-hidden attribute

If you're familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

class FriendStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }

  render() {
    if (this.state.isOnline === null) {
      return 'Loading...';
    }
    return this.state.isOnline ? 'Online' : 'Offline';
  }
}

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
});

class FriendStatusWithCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0, isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }
  // ...

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate(prevProps) {
    // Unsubscribe from the previous friend.id
    ChatAPI.unsubscribeFromFriendStatus(
      prevProps.friend.id,
      this.handleStatusChange
    );
    // Subscribe to the next friend.id
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

function FriendStatus(props) {
  // ...
  useEffect(() => {
    // ...
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

// Mount with { friend: { id: 100 } } props
ChatAPI.subscribeToFriendStatus(100, handleStatusChange); // Run first effect

// Update with { friend: { id: 200 } } props
ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // Clean up previous effect
ChatAPI.subscribeToFriendStatus(200, handleStatusChange); // Run next effect

// Update with { friend: { id: 300 } } props
ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // Clean up previous effect
ChatAPI.subscribeToFriendStatus(300, handleStatusChange); // Run next effect

// Unmount
ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // Clean up last effect

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]); // Only re-subscribe if props.friend.id changes

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

// These two containers are siblings in the DOM
const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root');

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    // The portal element is inserted in the DOM tree after
    // the Modal's children are mounted, meaning that children
    // will be mounted on a detached DOM node. If a child
    // component requires to be attached to the DOM tree
    // immediately when mounted, for example to measure a
    // DOM node, or uses 'autoFocus' in a descendant, add
    // state to Modal and only render the children when Modal
    // is inserted in the DOM tree.
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {clicks: 0};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // This will fire when the button in Child is clicked,
    // updating Parent's state, even though button
    // is not direct descendant in the DOM.
    this.setState(state => ({
      clicks: state.clicks + 1
    }));
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        <p>Number of clicks: {this.state.clicks}</p>
        <p>
          Open up the browser DevTools
          to observe that the button
          is not a child of the div
          with the onClick handler.
        </p>
        <Modal>
          <Child />
        </Modal>
      </div>
    );
  }
}

function Child() {
  // The click event on this button will bubble up to parent,
  // because there is no 'onClick' attribute defined
  return (
    <div className="modal">
      <button>Click</button>
    </div>
  );
}

ReactDOM.render(<Parent />, appRoot);

role="dialog"

</html>

Use the <th> element for row and column headers. To indicate what dimension the header applies to, the scope=col and scope=row attributes for row headers are implied by user agents assistive technology so are generally not needed. For ARIA based tables, use the columnheader and rowheader roles.

<td>412-212-5400</td>

<td>Pittsburgh</td>

</tr>

<tr>

<td>2.</td>

<th>Clive Lloyd</th>

<td>410-306-1420</td>

<td>410-306-5400</td>

<td>Baltimore</td>

</tr>

<tr>

<td>3.</td>

<th>Gordon Greenidge</th>

<td>281-564-6720</td>

<td>281-511-6600</td>

<td>Houston</td>

</tr>

</table>

Add JavaScript event handlers to accept SPACE (in addition to ENTER) to activate the button.

Add aria-expanded attribute to the control and toggle its value to reflect whether the content it controls is collapsed or expanded.

Add the role dialog to the search panel container.

Add the role dialog to the containing element.

role="dialog"

DUKE

Site Navigation

hashtag🗺 Site Navigation

hashtag📖 Storybook

hashtagStories

hashtagArgs

hashtagControls

hashtagA11y and Other Addons

hashtagAnatomy of a Story

hashtagstorybookCustomArgs

hashtagcreateStoryOptions

hashtagResources

hashtagDuke Training:

hashtagTable of contents

hashtagGeneral Info

hashtagSitecore

Udemy

DNT-2843 EVCalculator

hashtagControls:

DNT-2423 Throttle scroll event listeners

Site Navigation

hashtag🗺 Site Navigation

hashtag📖 Storybook

hashtagStories

hashtagArgs

hashtagControls

hashtagA11y and Other Addons

hashtagAnatomy of a Story

hashtagstorybookCustomArgs

hashtagcreateStoryOptions

hashtagResources

hashtagDuke Training:

hashtagTable of contents

hashtagGeneral Info

hashtagSitecore

DNT-2843 EVCalculator

hashtagControls:

Udemy

DNT-2423 Throttle scroll event listeners

Site Navigation

hashtagMulti Step Forms

hashtagRelated Links

Docs

TechnicalOverview

hashtagComponent Creation - Technical Overview

hashtagA Technical Overview

hashtagGenerate Component Factory

hashtagPassing Down Data Via Composition

hashtagAdding files for your component

hashtagIndex.tsx

hashtagTest.tsx

hashtagTypes.ts

hashtagStories.js

hashtagData.js

hashtagThe folder

Installing Citrix Workspace on Chrome OS Devices

Code Review:

hashtagCode Reviewsarrow-up-right

hashtagState of the Code Review

hashtagWhy Improve Code Review?

hashtagGoing Forward

hashtagGeneral suggestions:

hashtagThings to think about and maybe discuss:

hashtagFor the 20% currently doing 80% of the reviewing:

hashtagFor the 80%:

Duke Company

hashtagPortal Guide - Home

hashtagPortal Site Managers

hashtagPORTAL GUIDE

hashtagManage Your Information

hashtagPORTAL GUIDE

hashtagAccessing the Portal Remotely

hashtagPORTAL GUIDE

hashtagIntranet Design Awards

hashtagPORTAL GUIDE

Personal

hashtagBitLocker keys for LAPTOP-9LGJ3JGS

Setup

DefinitionOfDone

hashtagComponent Creation - Definition of Done

🗺 Site Navigation

📖 Storybook

Stories

Args

Controls

A11y and Other Addons

Anatomy of a Story

storybookCustomArgs

createStoryOptions

Resources

Duke Training:

Table of contents

General Info

Sitecore

Controls:

🗺 Site Navigation

📖 Storybook

Stories

Args

Controls

A11y and Other Addons

Anatomy of a Story

storybookCustomArgs

createStoryOptions

Resources

Duke Training:

Table of contents

General Info

Sitecore

Controls:

Multi Step Forms

Related Links

Component Creation - Technical Overview

A Technical Overview

Generate Component Factory

Passing Down Data Via Composition

Adding files for your component

`Index.tsx`

`Test.tsx`

`Types.ts`

`Stories.js`

`Data.js`

The folder

Code Reviews

State of the Code Review

Why Improve Code Review?

Going Forward

General suggestions:

Things to think about and maybe discuss:

For the 20% currently doing 80% of the reviewing:

For the 80%:

Portal Guide - Home

Portal Site Managers

PORTAL GUIDE

Manage Your Information

PORTAL GUIDE

Accessing the Portal Remotely

PORTAL GUIDE

Intranet Design Awards

PORTAL GUIDE

BitLocker keys for LAPTOP-9LGJ3JGS

Component Creation - Definition of Done

Component Creation - Intro

Component Creation - Sitecore

Component Creation - Practical Overview

Our "Definition of Done" for a Component

Checklist

Introduction

Sitecore and You

Sitecore Component Creation Overview

Basic Instructions for Creating a Component

Workflow - A Practical Overview

The Approach

Checklist

`Pick<Type, Keys>`

`Partial<Type>`

`Required<Type>`

`Naming`

`class`

`enum`