add jest + react testing library to the project

jest.config.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  testMatch: ['**/__new-tests__/**/*.test.tsx']
+}

package.json

@@ -18,14 +18,15 @@
     "start": "yarn workspace docs-app start",
     "start:watch": "yarn workspace docs-app start:watch ",
     "dev": "yarn start:watch",
-    "test:patchset": "npm-run-all lint:commit lint:changes test:jest test",
+    "test:patchset": "npm-run-all lint:commit lint:changes test:jest test test:new",
     "pretest:merge": "yarn bootstrap && yarn check",
     "test:merge": "npm-run-all lint:commit lint test",
     "test:all": "npm-run-all test:jest test",
     "test:watch": "ui-scripts test --watch --no-headless",
     "test:changes": "ui-scripts test --changed --randomize",
     "test": "ui-scripts test --randomize",
     "test:jest": "lerna run test:jest --stream",
+    "test:new": "NODE_ENV=test jest --coverage",
     "lint": "lerna run lint --stream",
     "lint:changes": "yarn lint --since HEAD^",
     "lint:fix": "lerna run lint:fix --stream",
@@ -68,17 +69,25 @@
     "@babel/cli": "^7.22.9",
     "@instructure/ui-scripts": "workspace:*",
     "@instructure/ui-token-scripts": "workspace:*",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.3",
     "@types/react-dom": "^18.2.7",
     "chalk": "^4.1.2",
     "commitizen": "^4.3.0",
     "danger": "^11.2.6",
     "esbuild": "^0.18.12",
     "eslint": "^8.44.0",
     "husky": "^8.0.3",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
     "lerna": "^7.1.3",
     "lint-staged": "^13.2.3",
     "netlify-cli": "13.2.2",
     "npm-run-all": "^4.1.5",
+    "ts-jest": "^29.1.1",
     "typescript": "5.1.6",
     "webpack": "^5.88.1"
   },

packages/__docs__/buildScripts/build-docs.ts

@@ -79,6 +79,7 @@ const pathsToIgnore = [
   '**/__fixtures__/**',
   '**/__testfixtures__/**',
   '**/__tests__/**',
+  '**/__new-tests__/**',
   '**/locales/**',
   '**/styles.{js,ts}',
   '**/theme.{js,ts}',

packages/ui-a11y-utils/tsconfig.build.json

@@ -6,7 +6,7 @@
     "rootDir": "./src"
   },
   "include": ["src"],
-  "exclude": ["src/**/__tests__/**/*"],
+  "exclude": ["src/**/__tests__/**/*", "src/**/__new-tests__/**/*"],
   "references": [
     { "path": "../console/tsconfig.build.json" },
     { "path": "../ui-a11y-content/tsconfig.build.json" },

packages/ui-avatar/package.json

@@ -31,6 +31,8 @@
     "@instructure/ui-react-utils": "8.39.0",
     "@instructure/ui-testable": "8.39.0",
     "@instructure/ui-view": "8.39.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {

packages/ui-avatar/src/Avatar/__new-tests__/Avatar.test.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 from 'react'
+import { render, screen } from '@testing-library/react'
+
+import '@testing-library/jest-dom/extend-expect'
+import Avatar from '../index'
+
+describe('ui-avatar component tests', () => {
+  it('renders correctly', async () => {
+    const { container } = render(<Avatar name="avatar name" />)
+    const avatarImg = container.querySelector('img')
+    expect(avatarImg).toBeInTheDocument()
+  })
+
+  it('should display as a circle', async () => {
+    const { container } = render(<Avatar name="Avatar Name" />)
+    const avatarImg = container.querySelector('span[name="Avatar Name"]')
+    expect(avatarImg).toHaveAttribute('shape', 'circle')
+  })
+
+  it('should render initials', async () => {
+    render(<Avatar name="Avatar Name" />)
+    const avatarWithInitials = await screen.findByText('AN')
+    expect(avatarWithInitials).toBeVisible()
+  })
+
+  it('should display an svg passed', async () => {
+    const SomeIcon = () => (
+      <svg>
+        <circle cx="25" cy="75" r="20" />
+      </svg>
+    )
+    const { container } = render(
+      <Avatar name="avatar name" renderIcon={SomeIcon}>
+        hello
+      </Avatar>
+    )
+    const avatarSvg = container.querySelector('svg')
+    expect(avatarSvg).toBeInTheDocument()
+  })
+
+  it('should display the image url provided', async () => {
+    const src =
+      'data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw=='
+    const { container } = render(<Avatar name="avatar name" src={src} />)
+    const avatarImg = container.querySelector('img')
+    expect(avatarImg).toHaveAttribute('src', src)
+  })
+})

packages/ui-babel-preset/lib/index.js

@@ -141,6 +141,7 @@ module.exports = function (
             '**/*.config.js',
             '**/*.conf.js',
             '__tests__/**/*.js',
+            '__new-tests__/**/*.js',
             '__testfixtures__/**/*.js',
             '__examples__/**/*.js',
             '__fixtures__/**/*.js'

packages/ui-karma-config/lib/FilePathCalculator.js

@@ -27,7 +27,11 @@ const globby = require('globby')
 
 module.exports = function (uiTestScopePaths) {
   const files = ['packages/**/*.test.{js,ts,tsx}']
-  const ignore = ['packages/ui-codemods/**', '**/node_modules/**']
+  const ignore = [
+    'packages/ui-codemods/**',
+    '**/node_modules/**',
+    '**/__new-tests__/**'
+  ]
 
   return globby
     .sync(files, { ignore })

packages/ui-karma-config/lib/index.js

@@ -160,7 +160,13 @@ module.exports = function makeConfig({ coverageDirectory, coverageThreshold }) {
             // https://github.com/mattlewis92/karma-coverage-istanbul-reporter
             {
               test: /.*.tsx?$/,
-              exclude: [/node_modules/, /\/lib\//, /\/es\//, /\/__tests__\//],
+              exclude: [
+                /node_modules/,
+                /\/lib\//,
+                /\/es\//,
+                /\/__tests__\//,
+                /\/__new-tests__\//
+              ],
               loader: '@jsdevtools/coverage-istanbul-loader',
               enforce: 'post',
               options: {

packages/ui-prop-types/tsconfig.build.json

@@ -6,7 +6,7 @@
     "rootDir": "./src"
   },
   "include": ["src"],
-  "exclude": ["src/**/__tests__/**/*"],
+  "exclude": ["src/**/__tests__/**/*", "src/**/__new-tests__/**/*"],
   "references": [
     {
       "path": "../ui-babel-preset/tsconfig.build.json"

packages/ui-scripts/lib/build/babel.js

@@ -61,7 +61,7 @@ export default {
 
     babelArgs = babelArgs.concat([
       src,
-      '--ignore "src/**/*.test.js","src/**/__tests__/**"'
+      '--ignore "src/**/*.test.js","src/**/__tests__/**","src/**/__new-tests__/**"'
     ])
 
     let envVars = [

packages/ui-test-utils/tsconfig.build.json

@@ -6,7 +6,7 @@
     "rootDir": "./src"
   },
   "include": ["src"],
-  "exclude": ["src/**/__tests__/**/*"],
+  "exclude": ["src/**/__tests__/**/*", "src/**/__new-tests__/**/*"],
   "references": [
     {
       "path": "../ui-babel-preset/tsconfig.build.json"

packages/ui-utils/tsconfig.build.json

@@ -6,7 +6,7 @@
     "rootDir": "./src"
   },
   "include": ["src"],
-  "exclude": ["src/**/__tests__/**/*"],
+  "exclude": ["src/**/__tests__/**/*", "src/**/__new-tests__/**/*"],
   "references": [
     {
       "path": "../ui-babel-preset/tsconfig.build.json"