LG-4799: Code test harnesses

.changeset/chatty-ears-exercise.md

@@ -85,6 +85,11 @@ e.g.
 </Code>
 ```
 
+### Test Harnesses
+Exports `getTestUtils`, a util to reliably interact with LG `Code` in a product test suite. For more details, check out the [README](https://github.com/mongodb/leafygreen-ui/tree/main/packages/code#test-harnesses) [LG-4799](https://jira.mongodb.org/browse/LG-4799)
+
+Exports `getLgIds`, a util to instantiate an object of `data-lgid` values for a given LG `Code` component instance.
+
 ### `baseFontSize`
 Adds `baseFontSize` prop, which allows you to override the `LeafyGreenProvider` value.
 

.changeset/soft-experts-dance.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/select': minor
+---
+
+Exports `type GetTestUtilsReturnType`.

.changeset/tame-timers-exist.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/button': minor
+---
+
+Exports `type GetTestUtilsReturnType`.

packages/button/src/index.ts

@@ -1,4 +1,4 @@
 export { Button as default } from './Button';
 export type { BaseButtonProps, ButtonProps } from './types';
 export { FontSize, Size, Variant } from './types';
-export { getTestUtils } from './utils';
+export { getTestUtils, type GetTestUtilsReturnType } from './utils';

packages/button/src/utils/index.ts

@@ -1 +1,2 @@
 export { getTestUtils } from './getTestUtils';
+export type { GetTestUtilsReturnType } from './getTestUtils.types';

packages/code/README.md

@@ -124,3 +124,141 @@ interface LanguageOption {
   image?: React.ReactElement;
 }
 ```
+
+# Test Harnesses
+
+## getTestUtils()
+
+`getTestUtils()` is a util that allows consumers to reliably interact with LG `Code` in a product test suite. If the `Code` component cannot be found, an error will be thrown.
+
+### Usage
+
+```tsx
+import { getTestUtils } from '@leafygreen-ui/code';
+
+const utils = getTestUtils(lgId?: `lg-${string}`); // lgId refers to the custom `data-lgid` attribute passed to `Code`. It defaults to 'lg-code' if left empty.
+```
+
+#### Single `Code` component
+
+```tsx
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Code, { getTestUtils } from '@leafygreen-ui/code';
+
+...
+
+test('code', () => {
+  render(
+    <Code
+      language="javascript"
+      panel={
+        <Panel
+          onChange={() => {}}
+          languageOptions={languageOptions}
+          title="Title"
+        />
+      }
+    >
+      {codeSnippet}
+    </Code>
+  );
+
+  const { getLanguage, getLanguageSwitcherUtils, getIsLoading, getCopyButtonUtils, getExpandButton } = getTestUtils();
+  const { getInput, getOptions, getOptionByValue, getInputValue, isDisabled: isLanguageSwitcherDisabled } = getLanguageSwitcherUtils();
+  const { getButton: getCopyButtonUtils, isDisabled: isCopyButtonDisabled } = getCopyButtonUtils();
+
+  expect(getLanguage()).toBe('javascript');
+  expect(getTitle()).toBe('Title');
+  expect(getInput()).toBeInTheDocument();
+  expect(getOptions()).toHaveLength(2);
+  expect(getOptionByValue('js')).toBeInTheDocument();
+  expect(getInputValue()).toBe('javascript');
+  expect(isLanguageSwitcherDisabled()).toBe(false);
+  expect(getIsLoading()).toBe(false);
+  expect(getCopyButtonUtils()).toBeInTheDocument();
+  expect(isCopyButtonDisabled()).toBe(false);
+  expect(getExpandButton()).toBeInTheDocument();
+  expect(isExpanded()).toBe(false);
+});
+```
+
+#### Multiple `Code` components
+
+When testing multiple `Code` components, it is recommended to add the custom `data-lgid` attribute to each `Code`.
+
+```tsx
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Code, getTestUtils } from '@leafygreen-ui/code';
+
+...
+
+test('code', () => {
+  render(
+    <>
+      <Code
+        language="javascript"
+        panel={<Panel/>}
+        data-lgid="lg-code-1"
+      >
+      {codeSnippet}
+      </Code>
+      <Code
+        language="python"
+        panel={<Panel/>}
+        data-lgid="lg-code-2"
+      >
+        {codeSnippet}
+      </Code>
+    </>
+  );
+
+  const testUtils1 = getTestUtils('lg-code-1');
+  const testUtils2 = getTestUtils('lg-code-2');
+
+  // First Code
+  expect(testUtils1.getLanguage()).toBe('javascript');
+
+  // Second Code
+  expect(testUtils2.getLanguage()).toBe('python');
+});
+```
+
+### Test Utils
+
+```tsx
+const {
+  getLanguage,
+  getTitle,
+  getLanguageSwitcherUtils: {
+    getInput,
+    getOptions,
+    getOptionByValue,
+    isDisabled,
+  },
+  getIsLoading,
+  getCopyButtonUtils: { getButton, isDisabled },
+  getExpandButton,,
+} = getTestUtils();
+```
+
+| Util                         | Description                                              | Returns                                                                                                                  |
+| ---------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `getLanguage()`              | Returns the current language of the code block           | `string`                                                                                                                 |
+| `getTitle()`                 | Returns the title of the code block                      | `string` \| `null`                                                                                                       |
+| `getLanguageSwitcherUtils()` | Returns utils for interacting with the language switcher | `LanguageSwitcherUtils`                                                                                                  |
+| `getIsLoading()`             | Returns whether the code block is in loading state       | `boolean`                                                                                                                |
+| `getCopyButtonUtils()`       | Returns utils for interacting with the copy button       | [Button test utils return type](https://github.com/mongodb/leafygreen-ui/blob/main/packages/button/README.md#test-utils) |
+| `getExpandButton()`          | Returns the expand button                                | `HTMLButtonElement`                                                                                                      |
+| `getIsExpanded()`            | Returns whether the code block is expanded               | `boolean`                                                                                                                |
+
+### LanguageSwitcherUtils
+
+| Util                              | Description                                       | Returns                 |
+| --------------------------------- | ------------------------------------------------- | ----------------------- |
+| `getInput()`                      | Returns the language switcher trigger             | `HTMLButtonElement`     |
+| `getInputValue()`                 | Returns the language switcher input value         | `string`                |
+| `getOptions()`                    | Returns all options in the language switcher      | `Array<HTMLElement>`    |
+| `getOptionByValue(value: string)` | Returns the option element by its value           | `HTMLElement` \| `null` |
+| `isDisabled()`                    | Returns whether the language switcher is disabled | `boolean`               |

packages/code/package.json

@@ -36,6 +36,7 @@
     "@leafygreen-ui/tokens": "workspace:^",
     "@leafygreen-ui/tooltip": "workspace:^",
     "@leafygreen-ui/typography": "workspace:^",
+    "@lg-tools/test-harnesses": "workspace:^",
     "@types/facepaint": "^1.2.1",
     "@types/highlight.js": "^10.1.0",
     "clipboard": "^2.0.6",

packages/code/src/Code.testutils.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+
+import Code from './Code/Code';
+import { CodeProps } from './Code/Code.types';
+import { PanelProps } from './Panel/Panel.types';
+import { Panel } from './Panel';
+import { Language } from './types';
+import { getTestUtils, TestUtilsReturnType } from './utils';
+
+const codeSnippet = `
+import datetime from './';
+
+const myVar = 42;
+
+var myObj = {
+  someProp: ['arr', 'ay'],
+  regex: /([A-Z])w+/
+}
+
+export default class myClass {
+  constructor(){
+    // access properties
+    this.myProp = false
+  }
+}
+
+function greeting(entity) {
+  return \`Hello, \${entity}! Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.\`;
+}
+
+console.log(greeting('World'));`;
+
+export const languageOptions = [
+  {
+    displayName: 'JavaScript',
+    language: Language.JavaScript,
+  },
+  {
+    displayName: 'Python',
+    language: Language.Python,
+  },
+];
+
+export const renderCode = (
+  props: Partial<CodeProps> = {},
+): RenderResult & TestUtilsReturnType => {
+  const renderResults = render(
+    <Code language={languageOptions[0].language} {...props}>
+      {codeSnippet}
+    </Code>,
+  );
+
+  const testUtils = getTestUtils();
+
+  return {
+    ...renderResults,
+    ...testUtils,
+  };
+};
+
+export const renderCodeWithLanguageSwitcher = ({
+  props = {},
+  isLoading = false,
+}: {
+  props?: Partial<PanelProps>;
+  isLoading?: boolean;
+}): RenderResult & TestUtilsReturnType => {
+  const renderResults = render(
+    <Code
+      isLoading={isLoading}
+      language={languageOptions[0].displayName}
+      panel={
+        <Panel
+          onChange={() => {}}
+          {...props}
+          languageOptions={languageOptions}
+        />
+      }
+    >
+      {codeSnippet}
+    </Code>,
+  );
+
+  const testUtils = getTestUtils();
+
+  return {
+    ...renderResults,
+    ...testUtils,
+  };
+};
+
+export const renderMultipleCodes = (): RenderResult => {
+  const renderResults = render(
+    <>
+      <Code
+        data-lgid="lg-code-1"
+        language={languageOptions[0].displayName}
+        panel={<Panel onChange={() => {}} languageOptions={languageOptions} />}
+      >
+        {codeSnippet}
+      </Code>
+      <Code
+        data-lgid="lg-code-2"
+        language={languageOptions[1].displayName}
+        panel={<Panel onChange={() => {}} languageOptions={languageOptions} />}
+      >
+        {codeSnippet}
+      </Code>
+    </>,
+  );
+
+  return {
+    ...renderResults,
+  };
+};