Remove path aliases from tests

.github/test-a-feature.md

@@ -51,9 +51,9 @@ These tests are typically imported into individual component tests.
 Every common test receives your component as its first argument.
 
 ```tsx
-import { isConformant } from 'test/specs/commonTests'
+import { isConformant } from '../../commonTests'
 
-import Divider from 'src/components/Divider/Divider'
+import { Divider } from '@fluentui/react'
 
 describe('Divider', () => {
   isConformant(Divider)
@@ -85,9 +85,9 @@ There should be one describe block for each prop of your component.
 Example for `Button` component:
 
 ```tsx
-import { isConformant } from 'test/specs/commonTests'
+import { isConformant } from '../../commonTests'
 
-import Button from 'src/components/Button'
+import { Button } from '@fluentui/react'
 
 describe('Button', () => {
   isConformant(Button)
@@ -242,7 +242,7 @@ Add your spec file into the array of files `skipSpecChecksForFiles` in `testHelp
 
 ## Performance Tests
 
-Performance tests will measure performance, set a baseline for performance and help guard against regressions. 
+Performance tests will measure performance, set a baseline for performance and help guard against regressions.
 
 ### Adding a Perf Test
 

build/screener/screener.config.js

@@ -1,7 +1,10 @@
 require('@fluentui/internal-tooling/babel/register')
 
 const config = require('../config').default
-const { compilerOptions } = require('../tsconfig.docs.json')
+
+// Ensure that paths to local packages are interpreted properly
+// (see https://github.com/microsoft/fluent-ui-react/pull/837)
+const { compilerOptions } = require('../../tsconfig.json')
 
 require('tsconfig-paths').register({
   baseUrl: config.path_base,

build/tsconfig.common.json

@@ -3,14 +3,6 @@
     "module": "commonjs",
     "target": "es5",
     "lib": ["es2015", "dom"],
-    "baseUrl": "../",
-    "paths": {
-      "@fluentui/docs": ["docs"],
-      "@fluentui/e2e": ["e2e"],
-      "@fluentui/internal-tooling": ["build"],
-      "@fluentui/perf": ["perf"],
-      "@fluentui/*": ["packages/*/src"]
-    },
     "types": ["node", "jest"],
     "typeRoots": ["../types", "../node_modules/@types"],
     "jsx": "react",

build/tsconfig.docs.json

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.common.json",
   "compilerOptions": {
     "module": "esnext",
+    "baseUrl": "../",
     "paths": {
       "@fluentui/*": ["packages/*/src"],
       "docs/*": ["docs/*"],

gulpfile.ts

@@ -4,17 +4,19 @@ import * as tsPaths from 'tsconfig-paths'
 
 import config from './build/config'
 
-const { compilerOptions } = require('./build/tsconfig.docs.json')
-
-// add node_modules/.bin to the path so we can invoke .bin CLIs in tasks
-process.env.PATH =
-  process.env.PATH + path.delimiter + path.resolve(__dirname, 'node_modules', '.bin')
+// Ensure that paths to local packages are interpreted properly
+// (see https://github.com/microsoft/fluent-ui-react/pull/837)
+const { compilerOptions } = require('./tsconfig.json')
 
 tsPaths.register({
   baseUrl: config.path_base,
   paths: compilerOptions.paths,
 })
 
+// add node_modules/.bin to the path so we can invoke .bin CLIs in tasks
+process.env.PATH =
+  process.env.PATH + path.delimiter + path.resolve(__dirname, 'node_modules', '.bin')
+
 // load tasks in order of dependency usage
 require('./build/gulp/tasks/bundle')
 require('./build/gulp/tasks/docs')

packages/accessibility/test/behaviors/behavior-test.tsx

@@ -83,6 +83,7 @@ import {
 import { TestHelper } from './testHelper'
 import definitions from './testDefinitions'
 
+// TODO (@ecraig12345) - remove relative docs import
 const behaviorMenuItems = require('../../../../docs/src/behaviorMenu')
 
 const testHelper = new TestHelper()

packages/accessibility/tsconfig.json

@@ -2,7 +2,12 @@
   "extends": "../../build/tsconfig.common",
   "compilerOptions": {
     "composite": true,
-    "outDir": "dist/dts"
+    "outDir": "dist/dts",
+    "baseUrl": ".",
+    "paths": {
+      // For tests
+      "@fluentui/accessibility": ["./src"]
+    }
   },
   "include": ["src", "test"]
 }

packages/react-bindings/test/accesibility/getKeyDownHandlers-test.ts

@@ -1,3 +1,4 @@
+// This is not exported
 import getKeyDownHandlers from '../../src/accessibility/getKeyDownHandlers'
 // @ts-ignore
 import * as keyboardKey from 'keyboard-key'

packages/react-bindings/test/accesibility/shouldHandleOnKeys-test.ts

@@ -1,3 +1,4 @@
+// This is not exported
 import shouldHandleOnKeys from '../../src/accessibility/shouldHandleOnKeys'
 
 const getEventArg = (

packages/react-bindings/test/styles/resolveStylesAndClasses-test.ts

@@ -4,6 +4,7 @@ import {
   emptyTheme,
   ICSSInJSStyle,
 } from '@fluentui/styles'
+// This is not exported
 import resolveStylesAndClasses from '../../src/styles/resolveStylesAndClasses'
 
 const styleParam: ComponentStyleFunctionParam = {

packages/react-bindings/tsconfig.json

@@ -7,7 +7,12 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "noUnusedParameters": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      // For tests
+      "@fluentui/react-bindings": ["./src"]
+    }
   },
   "include": ["src", "test"],
   "references": [

packages/react-component-event-listener/tsconfig.json

@@ -7,7 +7,12 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "noUnusedParameters": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      // For tests
+      "@fluentui/react-component-event-listener": ["./src"]
+    }
   },
   "include": ["src", "test"],
   "references": []

packages/react-component-nesting-registry/tsconfig.json

@@ -7,7 +7,12 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "noUnusedParameters": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      // For tests
+      "@fluentui/react-component-nesting-registry": ["./src"]
+    }
   },
   "include": ["src", "test"],
   "references": []

packages/react-component-ref/tsconfig.json

@@ -7,7 +7,12 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "noUnusedParameters": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      // For tests
+      "@fluentui/react-component-ref": ["./src"]
+    }
   },
   "include": ["src", "test"],
   "references": []

packages/react-proptypes/tsconfig.json

@@ -2,7 +2,12 @@
   "extends": "../../build/tsconfig.common",
   "compilerOptions": {
     "composite": true,
-    "outDir": "dist/dts"
+    "outDir": "dist/dts",
+    "baseUrl": ".",
+    "paths": {
+      // For tests
+      "@fluentui/react-proptypes": ["./src"]
+    }
   },
   "include": ["src", "test"],
   "references": []

packages/react-theming/tsconfig.json

@@ -3,7 +3,12 @@
   "compilerOptions": {
     "composite": true,
     "rootDir": "src",
-    "outDir": "lib"
+    "outDir": "lib",
+    "baseUrl": ".",
+    "paths": {
+      // For tests
+      "@fluentui/react-theming": ["./src"]
+    }
   },
   "include": ["src"]
 }

packages/react/jest.config.js

@@ -3,12 +3,5 @@ const commonConfig = require('@fluentui/internal-tooling/jest')
 module.exports = {
   ...commonConfig,
   name: 'react',
-  moduleNameMapper: {
-    ...require('lerna-alias').jest(),
-    'docs/(.*)$': `<rootDir>/../../docs/$1`,
-
-    // Legacy aliases, they should not be used in new tests
-    '^src/(.*)$': `<rootDir>/src/$1`,
-    'test/(.*)$': `<rootDir>/test/$1`,
-  },
+  moduleNameMapper: require('lerna-alias').jest(),
 }

packages/react/test/specs/commonTests/handlesAccessibility.tsx

@@ -8,8 +8,8 @@ import { FocusZone, FOCUSZONE_WRAP_ATTRIBUTE } from '@fluentui/react-bindings'
 import * as React from 'react'
 import * as keyboardKey from 'keyboard-key'
 
-import { mountWithProviderAndGetComponent, mountWithProvider } from 'test/utils'
-import { UIComponent } from 'src/utils'
+import { mountWithProviderAndGetComponent, mountWithProvider } from '../../utils'
+import { UIComponent } from '@fluentui/react'
 import { EVENT_TARGET_ATTRIBUTE, getEventTargetComponent } from './eventTarget'
 
 export const getRenderedAttribute = (renderedComponent, propName, partSelector) => {

packages/react/test/specs/commonTests/htmlIsAccessibilityCompliant.ts

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import { EmptyThemeProvider } from 'test/utils'
+import { EmptyThemeProvider } from '../../utils'
 
 type AxeMatcher<R> = jest.Matchers<R, any> & {
   toHaveNoViolations: () => R

packages/react/test/specs/commonTests/implementsCollectionShorthandProp.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { mountWithProvider as mount } from 'test/utils'
+import { mountWithProvider as mount } from '../../utils'
 import * as _ from 'lodash'
-import { PropsOf } from 'src/types'
+import { PropsOf } from '@fluentui/react'
 
 export type CollectionShorthandTestOptions<TProps = any> = {
   mapsValueToProp: keyof (TProps & React.HTMLProps<HTMLElement>) | false

packages/react/test/specs/commonTests/implementsShorthandProp.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { ReactWrapper } from 'enzyme'
-import { mountWithProvider } from 'test/utils'
-import { Props, PropsOf, InstanceOf } from 'src/types'
+import { mountWithProvider } from '../../utils'
+import { Props, PropsOf, InstanceOf } from '@fluentui/react'
 
 export type ShorthandTestOptions<TProps = any> = {
   mapsValueToProp: keyof (TProps & React.HTMLProps<HTMLElement>) | false

packages/react/test/specs/commonTests/implementsWrapperProp.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 import { ReactWrapper } from 'enzyme'
-import { mountWithProvider as mount } from 'test/utils'
+import { mountWithProvider as mount } from '../../utils'
 
-import Box from 'src/components/Box/Box'
-import { Props, ShorthandValue } from 'src/types'
+import { Box, Props, ShorthandValue } from '@fluentui/react'
 
 export interface ImplementsWrapperPropOptions {
   wrapppedComponentSelector: any

packages/react/test/specs/commonTests/isConformant.tsx

@@ -14,10 +14,10 @@ import {
   getDisplayName,
   mountWithProvider as mount,
   syntheticEvent,
-} from 'test/utils'
+} from '../../utils'
 import helpers from './commonHelpers'
 
-import * as FluentUI from 'src/index'
+import * as FluentUI from '@fluentui/react'
 import { getEventTargetComponent, EVENT_TARGET_ATTRIBUTE } from './eventTarget'
 
 export interface Conformant {
@@ -112,7 +112,8 @@ export default function isConformant(
   // This is pretty ugly because:
   // - jest doesn't support custom error messages
   // - jest will run all test
-  const infoJSONPath = `docs/src/componentInfo/${constructorName}.info.json`
+  // TODO (@ecraig12345) - remove relative docs import
+  const infoJSONPath = `../../../../../docs/src/componentInfo/${constructorName}.info.json`
 
   let info
 
@@ -124,7 +125,7 @@ export default function isConformant(
       throw new Error(
         [
           '!! ==========================================================',
-          `!! Missing ${infoJSONPath}.`,
+          `!! Missing ${infoJSONPath.replace('../../../../../', '')}.`,
           '!! Run `yarn test` or `yarn test:watch` again to generate one.',
           '!! ==========================================================',
         ].join('\n'),

packages/react/test/specs/commonTests/isExportedAtTopLevel.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import * as FluentUI from 'src/index'
+import * as FluentUI from '@fluentui/react'
 
 // ----------------------------------------
 // Is exported or private
@@ -12,7 +12,7 @@ export default (constructorName: string, displayName: string) => {
   test('is exported at the top level', () => {
     const message = [
       `'${displayName}' must be exported at top level.`,
-      "Export it in 'src/index.js'.",
+      "Export it in 'src/index.ts'.",
     ].join(' ')
 
     expect({ isTopLevelAPIProp, message }).toEqual({

packages/react/test/specs/commonTests/stylesFunction-test.tsx

@@ -2,8 +2,8 @@ import { Extendable, ICSSInJSStyle } from '@fluentui/styles'
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
-import { UIComponent } from 'src/utils'
-import { mountWithProviderAndGetComponent } from 'test/utils'
+import { UIComponent } from '@fluentui/react'
+import { mountWithProviderAndGetComponent } from '../../utils'
 
 type AttrValue = 'props' | 'state'
 

packages/react/test/specs/components/Accordion/Accordion-test.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react'
 import * as keyboardKey from 'keyboard-key'
 
-import Accordion from 'src/components/Accordion/Accordion'
-import { isConformant, handlesAccessibility } from 'test/specs/commonTests'
-import { mountWithProvider, mountWithProviderAndGetComponent } from 'test/utils'
-import AccordionTitle from 'src/components/Accordion/AccordionTitle'
+import { Accordion, AccordionTitle } from '@fluentui/react'
+import { isConformant, handlesAccessibility } from '../../commonTests'
+import { mountWithProvider, mountWithProviderAndGetComponent } from '../../../utils'
 import { ReactWrapper, CommonWrapper } from 'enzyme'
 
 const panels = [

packages/react/test/specs/components/Accordion/AccordionContent-test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 
-import AccordionContent from 'src/components/Accordion/AccordionContent'
-import { isConformant, handlesAccessibility, getRenderedAttribute } from 'test/specs/commonTests'
-import { mountWithProviderAndGetComponent } from 'test/utils'
+import { AccordionContent } from '@fluentui/react'
+import { isConformant, handlesAccessibility, getRenderedAttribute } from '../../commonTests'
+import { mountWithProviderAndGetComponent } from '../../../utils'
 
 describe('AccordionContent', () => {
   isConformant(AccordionContent)

packages/react/test/specs/components/Accordion/AccordionTitle-test.tsx

@@ -1,5 +1,5 @@
-import AccordionTitle from 'src/components/Accordion/AccordionTitle'
-import { isConformant, handlesAccessibility } from 'test/specs/commonTests'
+import { AccordionTitle } from '@fluentui/react'
+import { isConformant, handlesAccessibility } from '../../commonTests'
 
 describe('AccordionTitle', () => {
   isConformant(AccordionTitle, {

packages/react/test/specs/components/Alert/Alert-test.tsx

@@ -5,11 +5,9 @@ import {
   implementsShorthandProp,
   handlesAccessibility,
   htmlIsAccessibilityCompliant,
-} from 'test/specs/commonTests'
+} from '../../commonTests'
 
-import Alert from 'src/components/Alert/Alert'
-import Box from 'src/components/Box/Box'
-import Button from 'src/components/Button/Button'
+import { Alert, Box, Button } from '@fluentui/react'
 
 const alertImplementsShorthandProp = implementsShorthandProp(Alert)
 

packages/react/test/specs/components/Animation/Animation-test.tsx

@@ -1,6 +1,6 @@
-import { isConformant } from 'test/specs/commonTests'
+import { isConformant } from '../../commonTests'
 
-import Animation from 'src/components/Animation/Animation'
+import { Animation } from '@fluentui/react'
 
 describe('Animation', () => {
   isConformant(Animation, { hasAccessibilityProp: false })