Skip to content

Instantly share code, notes, and snippets.

View adamjarling's full-sized avatar

Adam J. Arling adamjarling

View GitHub Profile
{
"@context": [
"http://www.w3.org/ns/anno.jsonld",
"http://iiif.io/api/presentation/3/context.json"
],
"type": "Manifest",
"id": "http://localhost:3333/concern/generic_works/9019s2443/manifest",
"label": "Generic Bunny",
"metadata": [
{
@adamjarling
adamjarling / renderWithRouter.js
Last active July 25, 2023 08:12
Testing Library renderWithRouter helper function
// https://testing-library.com/docs/example-react-router
import React from "react";
import { Router } from "react-router-dom";
import { render } from "@testing-library/react";
import { createMemoryHistory } from "history";
// test utils file
function renderWithRouter(
ui,
@adamjarling
adamjarling / exampleUsingRouterMatch.js
Last active September 24, 2019 20:36
An example React component which uses React Router's match object to grab a url parameter
import React from "react";
import { withRouter } from "react-router";
import ScreenHeader from "../../components/UI/ScreenHeader";
import Error from "../../components/UI/Error";
import Loading from "../../components/UI/Loading";
import { useQuery } from "@apollo/react-hooks";
import { GET_PROJECT } from "../../components/Project/project.query";
const ScreensProject = ({ match }) => {
const { id } = match.params;
@adamjarling
adamjarling / renderWithRouterMatchExample.js
Created September 24, 2019 20:54
Example of a Testing Library renderWith helper function to include React Router match object in tests
// Component example
// ContentWrapper.jsx
import React from "react";
import Main from "./Main";
import { withRouter } from "react-router-dom";
const ContentWrapper = ({ children, match }) => (
<Main>
<p>Match id: {match.params.id}</p>
{children}
@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 (
/**
* 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 = {} } = {}
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",
};
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
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 = ({
/**
* 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();