jimkeller

export const nested_html = 
`
<div id="test-immediate-children">
  <div class="immediate-child">
    Immediate Child 1
    <div class="descendant-child">
      Descendant 1-1
    </div>
    <div class="descendant-child">
      Descendant 1-2

jimkeller

import { describe, expect, test, beforeEach } from '@jest/globals'
import { Renderer } from '../Renderer'
import { nested_html } from "../../test/fixtures/nested_html"

describe('Nested HTML Parser', () => {
  
  let container: HTMLElement
  let test_element: HTMLElement
  let children: NodeList

jimkeller

const my_element = document.getElementById('my-element')
jest.spyOn(my_element, "scrollHeight", 'get').mockReturnValue(100) //return 100 as scrollHeight

jimkeller

const my_element = document.getElementById('#my-element)

jest.spyOn(my_element, "getBoundingClientRect").mockImplementation(
  () => {
    return new DOMRect(0, 0, 100, 500) //100px wide, 500px tall
  }
)

jimkeller

/**
 * 
 * This file creates a React Context to hold the functionality for connecting to the 
 * employee data endpoint. 
 * 
 * I'm using Context here to mimic dependency injection so that the 
 * client can be more easily mocked for testing, or swapped out in the future. 
 * 
 * You can import EmployeeDataProvider from this file then 
 * wrapping a child component in <EmployeeDataProvider></EmployeeDataProvider> to give the component

jimkeller

/**
 * This file will hold the Menu that lives at the top of the Page, this is all rendered using a React Component...
 * 
 */
import React, { useState } from 'react';
import EmployeeSearchForm from './EmployeeSearchForm';
import EmployeeDataProvider from "../services/EmployeeDataProvider";

function Header() {

jimkeller

function EmployeeSearchForm() {

  const employee_data_client = useEmployeeDataClient();
  const loadResults = async(employee_id) => {
    return await employee_data_client.getResults(employee_id);
  }

  /* Below here, the rest of the component; e.g. rendering a form that calls 
     loadResults */
}

jimkeller

 import axios from "axios";
 import regeneratorRuntime from "regenerator-runtime"; // eslint-disable-line no-unused-vars
 
const EmployeeDataClient = {

  getResults: async(employee_id, endpoint_base_url) => {
 
    endpoint_base_url = "http://localhost:3035/employees"
  
    const response = await axios.get(`${endpoint_base_url}/${employee_id}`)

jimkeller

import DebugModule from "debug";

//create a debug logger for my-component inside my-app
const debug = DebugModule("my-app:my-component");

//enable the my-app namespace for debugging
DebugModule.enable("my-app:*");

debug("This message will print now since my-app:* namespace is enabled for debugging");

jimkeller

/*
 * call the useQuery hook, but leave the 
 * 'enabled' flag to false. Doing so prevents the query
 * from running immediately on component mount.
*/
const { data, refetch, isError, isRefetching } = useQuery(
  ['search_results', inputValue], 
  async () => {
    return await axios.get(`/path/to/results/api/${inputValue}`).catch((err) => { //handle error here })
  },