Skip to content

Instantly share code, notes, and snippets.

View adamjarling's full-sized avatar

Adam J. Arling adamjarling

16 followers · 17 following
View GitHub Profile
@adamjarling
adamjarling / medium-es-build-article-demo__dev.tsx
Last active January 3, 2022 21:40
import React from "react";
import ReactDOM from "react-dom";
import App from "./index";
ReactDOM.render(<App foo="Whats up bud" />, document.getElementById("root"));
@adamjarling
adamjarling / medium-es-build-article-demo__index.html
Last active January 3, 2022 21:39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
</head>
<body>
<div id="root"></div>
<script src="/script.js"></script>
@adamjarling
adamjarling / renderWithReactHookFormExtended.test.js
Created September 27, 2020 19:21
import React from "react";
import { screen, fireEvent, waitFor } from "@testing-library/react";
import UIFormRelatedURL from "./RelatedURL";
import { relatedUrlSchemeMock } from "../../Work/controlledVocabulary.gql.mock";
import { renderWithReactHookForm } from "../../../services/testing-helpers";
import userEvent from "@testing-library/user-event";
const props = {
codeLists: relatedUrlSchemeMock,
name: "relatedUrl",
@adamjarling
adamjarling / ControlledMetadata.test.jsx
Created September 26, 2020 17:03
import React from "react";
import { screen } from "@testing-library/react";
import {
renderWithRouterApollo,
withReactHookForm,
} from "../../../services/testing-helpers";
import ControlledMetadata from "./ControlledMetadata";
describe("Some component", () => {
beforeEach(() => {
@adamjarling
adamjarling / withReactHookForm.jsx
Created September 26, 2020 16:57
/**
* Higher order helper function which wraps a component w/ React Hook Form
* @param {React Component} WrappedComponent to pass into
* @param {*} restProps any other remaining props
* @returns {React Component}
*/
export function withReactHookForm(WrappedComponent, restProps) {
const HOC = () => {
const methods = useForm();
@adamjarling
adamjarling / relatedUrlSampleComponent.jsx
Created September 26, 2020 16:48
import React from "react";
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useFieldArray } from "react-hook-form";
import UIFormSelect from "./Select";
import { isUrlValid } from "../../../services/helpers";
import { Button } from "@nulib/admin-react-components";
import { useFormContext } from "react-hook-form";
const UIFormRelatedURL = ({
@adamjarling
adamjarling / renderWithReactHookFormExtended.js
Created September 25, 2020 21:05
import React from "react";
import { Router } from "react-router-dom";
import { render } from "@testing-library/react";
import { useForm, FormProvider } from "react-hook-form";
/**
* Testing Library utility function to wrap tested component in React Hook Form
* @param {ReactElement} ui A React component
* @param objectParameters
* @param {Object} objectParameters.defaultValues Initial form values to pass into
@adamjarling
adamjarling / testWithRenderReactHookForm.test.js
Last active September 26, 2020 16:45
import React from "react";
import { screen } from "@testing-library/react";
import { renderWithReactHookForm } from "./services/testing-helpers";
import UIFormRelatedURL from "./RelatedURL";
const props = {
name: "relatedUrl",
label: "Related URL",
};
@adamjarling
adamjarling / renderWithReactHookForm.js
Created September 25, 2020 19:35
/**
* Testing Library utility function to wrap tested component in React Hook Form
* @param {ReactElement} ui A React component
* @param objectParameters
* @param {Object} objectParameters.defaultValues Initial form values to pass into
* React Hook Form, which you can then assert against
*/
export function renderWithReactHookForm(
ui,
{ defaultValues = {} } = {}
@adamjarling
adamjarling / example-open-graph-include.js
Last active August 27, 2020 20:24
Example configuration for including
// Very simplified version of a component
import React from "react"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
import ogImage from "../images/og-image.png"
export default function SEO() {
return (