test(ui-byline): migrate old Byline tests

Closes: INSTUI-3866

packages/ui-byline/package.json

@@ -32,10 +32,13 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
+    "@instructure/ui-axe-check": "8.45.0",
     "@instructure/ui-babel-preset": "8.45.0",
     "@instructure/ui-color-utils": "8.45.0",
     "@instructure/ui-test-utils": "8.45.0",
-    "@instructure/ui-themes": "8.45.0"
+    "@instructure/ui-themes": "8.45.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

packages/ui-byline/src/Byline/__new-tests__/Byline.test.tsx

@@ -0,0 +1,157 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentType } from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import { Byline } from '../index'
+import { BylineProps } from '../props'
+import { runAxeCheck } from '@instructure/ui-axe-check'
+import { View } from '@instructure/ui-view'
+
+const TEST_TITLE = 'Test-title'
+const TEST_DESCRIPTION = 'Test-description'
+const TEST_HEADING = 'Test-heading'
+const TEST_PARAGRAPH = 'Lorem Ipsum...'
+const TEST_LINK = 'http://instructure-test.com'
+const TEST_IMAGE = (
+  <img
+    alt=""
+    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+  />
+)
+
+const initProps = {
+  title: TEST_TITLE,
+  description: TEST_DESCRIPTION
+}
+
+const renderByline = (props: Partial<BylineProps> = { ...initProps }) => {
+  return render(<Byline {...props}>{TEST_IMAGE}</Byline>)
+}
+
+const originalOmitViewProps = View.omitViewProps
+
+describe('<Byline />', () => {
+  beforeAll(() => {
+    // View component read Component.name instead of Component.displayName
+    // causing [undefined] in error messages
+    type BylineComponentType = ComponentType & {
+      name: 'Byline'
+    }
+
+    View.omitViewProps = (props, Component) => {
+      const ModifiedComponent = {
+        ...Component,
+        name: 'Byline'
+      } as BylineComponentType
+      return originalOmitViewProps(props, ModifiedComponent)
+    }
+  })
+
+  afterAll(() => {
+    View.omitViewProps = originalOmitViewProps
+  })
+
+  it('should render', () => {
+    const { container } = renderByline()
+
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('should pass down div and its contents via the description property', () => {
+    const descriptionElement = (
+      <div>
+        <h2>
+          <a href={TEST_LINK}>{TEST_HEADING}</a>
+        </h2>
+        <p>{TEST_PARAGRAPH}</p>
+      </div>
+    )
+    renderByline({ description: descriptionElement })
+    const clickableHeading = screen.getByText(TEST_HEADING)
+    const descriptionText = screen.getByText(TEST_PARAGRAPH)
+
+    expect(clickableHeading.tagName).toBe('A')
+    expect(clickableHeading).toHaveAttribute('href', TEST_LINK)
+    expect(clickableHeading?.parentElement?.tagName).toBe('H2')
+
+    expect(descriptionText).toBeInTheDocument()
+    expect(descriptionText.tagName).toBe('P')
+  })
+
+  it('should meet a11y standards', async () => {
+    const { container } = renderByline()
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
+  })
+
+  it(`should render a figure by default`, () => {
+    renderByline()
+    const figureElement = screen.getByRole('figure')
+
+    expect(figureElement).toBeInTheDocument()
+  })
+
+  describe('when passing down props to View', () => {
+    let spyOnConsoleError: jest.SpyInstance
+    const customAllowedProps: { [key: string]: string } = { margin: 'small' }
+    const customIgnoredProps = ['elementRef', 'children']
+
+    const allProps = View.allowedProps as Array<string>
+    const testPropsToAllow = Object.keys(customAllowedProps)
+    const testPropsToDisallow = allProps.filter((prop) => {
+      return !(prop in customAllowedProps) && !customIgnoredProps.includes(prop)
+    })
+
+    beforeEach(() => {
+      spyOnConsoleError = jest.spyOn(console, 'error').mockImplementation()
+    })
+
+    afterEach(() => {
+      spyOnConsoleError.mockRestore()
+    })
+
+    testPropsToAllow.forEach((prop) => {
+      it(`should allow the '${prop}' prop`, () => {
+        renderByline({ [prop]: customAllowedProps[prop] })
+
+        expect(spyOnConsoleError).not.toHaveBeenCalled()
+      })
+    })
+
+    testPropsToDisallow.forEach((prop) => {
+      it(`should NOT allow the '${prop}' prop`, () => {
+        renderByline({ [prop]: 'foo' })
+        const expectedWarningMessage = `Warning: [Byline] prop '${prop}' is not allowed.`
+        const warningMessage = spyOnConsoleError.mock.calls[0][0]
+
+        expect(warningMessage).toBe(expectedWarningMessage)
+        expect(spyOnConsoleError).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

packages/ui-byline/tsconfig.build.json

@@ -15,6 +15,7 @@
     { "path": "../ui-babel-preset/tsconfig.build.json" },
     { "path": "../ui-color-utils/tsconfig.build.json" },
     { "path": "../ui-test-utils/tsconfig.build.json" },
-    { "path": "../ui-themes/tsconfig.build.json" }
+    { "path": "../ui-themes/tsconfig.build.json" },
+    { "path": "../ui-axe-check/tsconfig.build.json" }
   ]
 }