Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(react): fix/update docs #1115

Merged
merged 1 commit into from
Apr 20, 2023
Merged

docs(react): fix/update docs #1115

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 32 additions & 28 deletions packages/web-components/src/stories/astro-uxds/welcome/react.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,12 @@ const MyComp = () => {
```
## Using our CSS Variables (Design Tokens).

While our components may solve 60% of your UI needs, you will inevitably find yourself needing to
create your own custom UI in the style of Astro.
While our components may solve 60% of your UI needs, you will inevitably find yourself needing to
create your own custom UI in the style of Astro.

Our Astro Web Components are powered by our Design Tokens under the hood. These are imported
and made available to you when you import `astro-web-components.css` in the form of CSS Custom Properties.
Our Design Tokens include everything from our color palette to our spacing system.
Our Astro Web Components are powered by our Design Tokens under the hood. These are imported
and made available to you when you import `astro-web-components.css` in the form of CSS Custom Properties.
Our Design Tokens include everything from our color palette to our spacing system.

We also provide our tokens in other formats (SASS, json) for your convienence. For more information,
check out our [Design Tokens](https://www.astrouxds.com/design-tokens/installation/) page for a list
Expand Down Expand Up @@ -366,9 +366,9 @@ React also has syntactic sugar for two way data binding, which can be found [her

#### Overview

[React Testing Library](https://testing-library.com/docs/react-testing-library/intro) is built for testing React components and supports the native HTML elements such as `<input>`.
[React Testing Library](https://testing-library.com/docs/react-testing-library/intro) is built for testing React components and supports the native HTML elements such as `<input>`.
Because our Astro components are web-components, some adaptations must be made to make testing with React Testing Library possible.
[testing-library__dom](https://www.npmjs.com/package/testing-library__dom) is an adpatation of the DOM testing library for use with
[testing-library__dom](https://www.npmjs.com/package/testing-library__dom) is an adpatation of the DOM testing library for use with
shadow dom. It is still in an early beta stage, however we will show some examples on how to make use of it below.

> For a complete list of the React Testing Library API, read their [docs](https://testing-library.com/docs/react-testing-library/api).
Expand Down Expand Up @@ -397,42 +397,43 @@ test('Can find and click a rux-button', async () => {
const { getByTestId } = render(<Comp handleClick={mockClick}/>)
let btn = getByTestId('btn')
expect(btn).not.toBeNull()

fireEvent.click(btn);
expect(mockClick).toHaveBeenCalledTimes(1)
})
```
#### User input

Handling user input can be done through `fireEvent` or `userEvent`. According to [the docs](https://testing-library.com/docs/ecosystem-user-event), `userEvent` is more true to
Handling user input can be done through `fireEvent` or `userEvent`. According to [the docs](https://testing-library.com/docs/ecosystem-user-event), `userEvent` is more true to
how the dom would behave with actual user interaction. However, there may be some hiccups with `userEvent` and shadow dom.

Here's an example using both `fireEvent` and `userEvent` to handle user input.

```jsx
// MyForm.tsx
import { useState } from "react"
import { RuxInput } from "@astrouxds/react"
import { useState } from "react";
import { RuxInput } from "@astrouxds/react";

function RuxInputTest() {
const [input, setInput] = useState("")

return(
<div>
<RuxInput
label="Rux Input"
type="text"
data-testid="rux-input-test"
value={input}
setInput={(e: CustomEvent<HTMLRuxInputElement>) => {
const target = e.target as HTMLInputElement;
setRuxInput(target.value);
}}
/>
</div>
)
const [input, setInput] = useState("");

return (
<div>
<RuxInput
label="Rux Input"
type="text"
data-testid="rux-input-test"
value={input}
onRuxinput={(e: CustomEvent<HTMLRuxInputElement>) => {
const target = e.target as HTMLInputElement;
setInput(target.value);
}}
/>
</div>
);
}

export default RuxInputTest;
```
```jsx
//input.test.tsx
Expand Down Expand Up @@ -462,4 +463,7 @@ describe('RuxInput', () => {
})
```

For more React testing examples, see our React repo [here](https://github.com/RocketCommunicationsInc/astro/tree/main/packages/react).
Depending on your enviornment, you may also need to update the test command. For example, in a create-react-app you might need to change the test script to be: `test: "react-scripts test --transformIgnorePatterns=\"node_modules/(?!@astrouxds/react)/\" --env=jsdom"`,
or otherwise configure Jest to use jsdom and set the `--transformIgnorePatterns` inside `jest.config`. More info can be found at [Jest's documentation](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring).

For more React testing examples, see our React repo [here](https://github.com/RocketCommunicationsInc/astro/tree/v7.7.0/packages/react/test-app).