Chore: reorganise test files (#1481)

.vscode/settings.json

@@ -19,4 +19,10 @@
     "typescript",
     "typescriptreact"
   ],
+  "explorer.experimental.fileNesting.enabled": true,
+  "explorer.experimental.fileNesting.patterns": {
+    "*.ts": "$(capture).js, $(capture).d.ts, $(capture).spec.ts",
+    "*.tsx": "$(capture).ts, $(capture).d.ts, $(capture).spec.tsx, $(capture).styles.ts",
+    "package.json": "package-lock.json, .npmrc"
+  }
 }

src/app/services/actions/permissions-action-creator.ts

@@ -9,7 +9,7 @@ import { IRootState } from '../../../types/root';
 import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../utils/sample-url-generation';
 import { translateMessage } from '../../utils/translate-messages';
-import { getConsentAuthErrorHint } from '../../views/authentication/AuthenticationErrorsHints';
+import { getConsentAuthErrorHint } from '../../../modules/authentication/authentication-error-hints';
 import { ACCOUNT_TYPE, PERMS_SCOPE } from '../graph-constants';
 import {
   FETCH_SCOPES_ERROR,

src/tests/components/AppTitle.spec.tsx → src/app/views/app-sections/AppTitle.spec.tsx

@@ -1,7 +1,8 @@
-import { appTitleDisplayOnMobileScreen, appTitleDisplayOnFullScreen } from '../../app/views/app-sections/AppTitle';
 import React from 'react';
 import { cleanup, render, screen } from '@testing-library/react';
 
+import { appTitleDisplayOnMobileScreen, appTitleDisplayOnFullScreen } from './AppTitle';
+
 afterEach(cleanup)
 const renderTitle = () => {
   const stackTokens = {
@@ -46,7 +47,7 @@ jest.mock('@ms-ofb/officebrowserfeedbacknpm/scripts/app/Configuration/IInitOptio
 }))
 
 // eslint-disable-next-line react/display-name
-jest.mock('../../app/views/query-runner/request/feedback/FeedbackForm.tsx', () => () => {
+jest.mock('../query-runner/request/feedback/FeedbackForm.tsx', () => () => {
   return <div>Feedback</div>
 });
 
@@ -71,12 +72,12 @@ describe('It should render the app title section in mobile screen size', () => {
   });
 
   it('Renders app title section in full screen without crashing', () => {
-    const { getByText } = renderTitleOnFullScreen({minimised: false});
+    const { getByText } = renderTitleOnFullScreen({ minimised: false });
     getByText('Graph Explorer');
   });
 
   it('Renders app title section in minimised mode without crashing', () => {
-    renderTitleOnFullScreen({minimised: true});
+    renderTitleOnFullScreen({ minimised: true });
     expect(screen.getByRole('heading')).toBeDefined();
   })
 })

src/tests/components/FeedbackButton.spec.tsx → src/app/views/app-sections/FeedbackButton.spec.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { cleanup, render } from '@testing-library/react';
-import { FeedbackButton } from '../../app/views/app-sections/FeedbackButton';
+
+import { FeedbackButton } from './FeedbackButton';
 
 afterEach(cleanup);
-const renderFeedbackButton  = () => {
-  return render (
+const renderFeedbackButton = () => {
+  return render(
     <FeedbackButton />
   )
 }
@@ -24,7 +25,7 @@ jest.mock('react-redux', () => ({
 console.warn = jest.fn();
 
 // eslint-disable-next-line react/display-name
-jest.mock('../../app/views/query-runner/request/feedback/FeedbackForm.tsx', () => () => {
+jest.mock('../query-runner/request/feedback/FeedbackForm.tsx', () => () => {
   return <div>Feedback</div>
 })
 

src/tests/components/ResponseMessages.spec.tsx → src/app/views/app-sections/ResponseMessages.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { cleanup, render} from '@testing-library/react';
-import { responseMessages } from '../../app/views/app-sections/ResponseMessages';
+import { cleanup, render } from '@testing-library/react';
+
+import { responseMessages } from './ResponseMessages';
 
 afterEach(cleanup);
 const renderResponseMessages = (): any => {

src/tests/components/StatusMessages.spec.tsx → src/app/views/app-sections/StatusMessages.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { cleanup, render, screen } from '@testing-library/react';
-import statusMessages from '../../app/views/app-sections/StatusMessages';
+import statusMessages from './StatusMessages';
 
 afterEach(cleanup)
 const renderStatusMessage = () => {
@@ -37,7 +37,7 @@ jest.mock('react-redux', () => {
 // eslint-disable-next-line no-console
 console.warn = jest.fn()
 
-describe('Renders the status bar', () =>{
+describe('Renders the status bar', () => {
   it('Renders the status bar', () => {
     renderStatusMessage();
     expect(screen.getByRole('alert')).toBeDefined();

src/app/views/authentication/Authentication.tsx

@@ -12,7 +12,7 @@ import { setQueryResponseStatus } from '../../services/actions/query-status-acti
 import { classNames } from '../classnames';
 import { showSignInButtonOrProfile } from './auth-util-components';
 import { authenticationStyles } from './Authentication.styles';
-import { getSignInAuthErrorHint, signInAuthError } from './AuthenticationErrorsHints';
+import { getSignInAuthErrorHint, signInAuthError } from '../../../modules/authentication/authentication-error-hints';
 
 const Authentication = (props: any) => {
   const dispatch = useDispatch();
@@ -61,8 +61,7 @@ const Authentication = (props: any) => {
         SeverityLevel.Error,
         {
           ComponentName: componentNames.AUTHENTICATION_ACTION,
-          Message: `Authentication failed: ${errorCode ? removeUnderScore(errorCode) : ''
-          }`
+          Message: `Authentication failed: ${errorCode ? removeUnderScore(errorCode) : ''}`
         }
       );
     }

src/tests/components/Profile.spec.tsx → src/app/views/authentication/profile/Profile.spec.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
 import { cleanup, render } from '@testing-library/react';
-import Profile from '../../app/views/authentication/profile/Profile';
-import { Mode } from '../../types/enums';
+
+import { Mode } from '../../../../types/enums';
+import Profile from './Profile';
+
 afterEach(cleanup);
 const renderProfile = () => {
   return render(<Profile />);
 }
 
 jest.mock('react-redux', () => ({
   useDispatch: jest.fn(),
-  useSelector: jest.fn( () => {
-    return(
+  useSelector: jest.fn(() => {
+    return (
       {
         sidebarProperties: {
           mobileScreen: false,

src/tests/components/CopyButton.spec.tsx → src/app/views/common/copy/CopyButton.spec.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { cleanup, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event'
-import { CopyButton } from '../../app/views/common/copy/CopyButton';
+import userEvent from '@testing-library/user-event';
+
+import { CopyButton } from './CopyButton';
 
 afterEach(cleanup);
 const renderCopyButton = (args?: any): any => {
   const copyProps = {
-    handleOnClick:jest.fn(),
+    handleOnClick: jest.fn(),
     isIconButton: true
   }
 

src/tests/common/dimensions-adjustment/dimension-adjustment.spec.ts → src/app/views/common/dimensions/dimension-adjustment.spec.ts

@@ -1,4 +1,4 @@
-import { convertVhToPx, convertPxToVh, getResponseHeight } from '../../../app/views/common/dimensions-adjustment';
+import { convertVhToPx, convertPxToVh, getResponseHeight } from './dimensions-adjustment';
 
 describe('Tests dimension adjustments', () => {
   it('Converts vh to px', () => {

src/tests/components/Image.spec.tsx → src/app/views/common/image/Image.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { cleanup, render } from '@testing-library/react';
-import { Image } from '../../app/views/common/image/Image';
+import { Image } from './Image';
 
 afterEach(cleanup);
 const renderImage = () => {

src/tests/components/response/QueryResponse.spec.tsx → src/app/views/query-response/QueryResponse.spec.tsx

@@ -5,13 +5,13 @@ import { IQueryResponseProps } from '../../../types/query-response';
 import { Mode } from '../../../types/enums';
 import { IntlProvider } from 'react-intl';
 import { geLocale } from '../../../appLocale';
-import { messages_ } from '../../utils/get-messages';
 import messages from '../../../messages';
+import { messages_ } from '../../../tests/utils/get-messages';
 
 afterEach(cleanup);
 const renderQueryResponse = () => {
   const message = messages_['en-US'] as object;
-  const queryResponseProps : IQueryResponseProps = {
+  const queryResponseProps: IQueryResponseProps = {
     mode: Mode.Complete,
     dispatch: jest.fn(),
     graphResponse: {

src/app/views/query-response/QueryResponse.tsx

@@ -16,7 +16,7 @@ import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { expandResponseArea } from '../../services/actions/response-expanded-action-creator';
 import { translateMessage } from '../../utils/translate-messages';
 import { copy } from '../common/copy';
-import { convertVhToPx } from '../common/dimensions-adjustment';
+import { convertVhToPx } from '../common/dimensions/dimensions-adjustment';
 import { createShareLink } from '../common/share';
 import { getPivotItems, onPivotItemClick } from './pivot-items/pivot-items';
 import './query-response.scss';

src/tests/components/ResponseHeaders.spec.tsx → src/app/views/query-response/headers/ResponseHeaders.spec.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import { cleanup, render } from '@testing-library/react';
-import ResponseHeaders from '../../app/views/query-response/headers/ResponseHeaders';
+import ResponseHeaders from './ResponseHeaders';
 
 afterEach(cleanup);
 const renderResponseHeaders = (): any => {
   return render(
-    <ResponseHeaders/>
+    <ResponseHeaders />
   )
 }
 
 jest.mock('react-redux', () => ({
-  useSelector: jest.fn( () => {
-    return({
+  useSelector: jest.fn(() => {
+    return ({
       dimensions: {
-        request:{
+        request: {
           height: 60,
           width: 60
         },
@@ -44,7 +44,7 @@ jest.mock('react-redux', () => ({
 // eslint-disable-next-line no-console
 console.warn = jest.fn()
 
-jest.mock('../../app/views/common/dimensions-adjustment.ts', () => {
+jest.mock('../../common/dimensions/dimensions-adjustment.ts', () => {
   return {
     convertVhToPx: jest.fn(() => {
       return 60

src/app/views/query-response/headers/ResponseHeaders.tsx

@@ -6,7 +6,7 @@ import { IRootState } from '../../../../types/root';
 
 import { Monaco } from '../../common';
 import { trackedGenericCopy } from '../../common/copy';
-import { convertVhToPx, getResponseHeight } from '../../common/dimensions-adjustment';
+import { convertVhToPx, getResponseHeight } from '../../common/dimensions/dimensions-adjustment';
 import { CopyButton } from '../../common/copy/CopyButton';
 
 const ResponseHeaders = () => {

src/app/views/query-response/response/Response.tsx

@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { IRootState } from '../../../../types/root';
 import { getContentType } from '../../../services/actions/query-action-creator-util';
 import { responseMessages } from '../../app-sections/ResponseMessages';
-import { convertVhToPx, getResponseHeight } from '../../common/dimensions-adjustment';
+import { convertVhToPx, getResponseHeight } from '../../common/dimensions/dimensions-adjustment';
 import ResponseDisplay from './ResponseDisplay';
 
 const Response = () => {

src/tests/components/ResponseDisplay.spec.tsx → src/app/views/query-response/response/ResponseDisplay.spec.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { cleanup, render } from '@testing-library/react';
-import ResponseDisplay from '../../app/views/query-response/response/ResponseDisplay';
+import ResponseDisplay from './ResponseDisplay';
 
 afterEach(cleanup);
 const renderResponseDisplay = (properties: any): any => {
-  const {contentType, body, height} = properties;
+  const { contentType, body, height } = properties;
   return render(
-    <ResponseDisplay contentType={contentType} body={body} height={height}/>
+    <ResponseDisplay contentType={contentType} body={body} height={height} />
   )
 }
 
 // eslint-disable-next-line no-console
 console.warn = jest.fn()
 
 describe('Tests Response display of different formats', () => {
-  it('Renders xml response type', ()=> {
+  it('Renders xml response type', () => {
     // Arrange
     const properties = {
       contentType: ['application/xml'],

src/app/views/query-response/snippets/snippets-helper.tsx

@@ -7,7 +7,7 @@ import { getSnippet } from '../../../services/actions/snippet-action-creator';
 import { Monaco } from '../../common';
 import { trackedGenericCopy } from '../../common/copy';
 
-import { convertVhToPx, getResponseHeight } from '../../common/dimensions-adjustment';
+import { convertVhToPx, getResponseHeight } from '../../common/dimensions/dimensions-adjustment';
 import { IRootState } from '../../../../types/root';
 import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names';
 import { CopyButton } from '../../common/copy/CopyButton';
@@ -52,7 +52,7 @@ function Snippet(props: ISnippetProps) {
   const dispatch = useDispatch();
 
   const handleCopy = async () => {
-    trackedGenericCopy(snippet, CODE_SNIPPETS_COPY_BUTTON, sampleQuery,{ Language: language });
+    trackedGenericCopy(snippet, CODE_SNIPPETS_COPY_BUTTON, sampleQuery, { Language: language });
   }
 
   useEffect(() => {

src/tests/components/query-runner/QueryRunner.spec.tsx → src/app/views/query-runner/QueryRunner.spec.tsx

@@ -6,7 +6,9 @@ import { IntlProvider } from 'react-intl';
 import { geLocale } from '../../../appLocale';
 import messages from '../../../messages';
 import { Mode } from '../../../types/enums';
+
 afterEach(cleanup);
+
 const renderQueryRunner = (args?: any): any => {
   const queryRunnerProps: IQueryRunnerProps = {
     headers: [],
@@ -29,7 +31,7 @@ const renderQueryRunner = (args?: any): any => {
     url: 'https://graph.microsoft.com/v1.0/me'
   }
 
-  const allProps = {...queryRunnerState, ...queryRunnerProps, ...args};
+  const allProps = { ...queryRunnerState, ...queryRunnerProps, ...args };
   return render(
     <IntlProvider
       locale={geLocale}
@@ -41,14 +43,14 @@ const renderQueryRunner = (args?: any): any => {
 }
 
 jest.mock('react-redux', () => {
-  return{
+  return {
     useDispatch: jest.fn(),
     connect: jest.fn(
       // eslint-disable-next-line no-unused-vars
       <P extends object>(_props?: any) => (component: React.ComponentType<P>) => component
     ),
-    useSelector: jest.fn( () => {
-      return({
+    useSelector: jest.fn(() => {
+      return ({
         sampleQuery: {
           selectedVerb: 'GET',
           selectedVersion: 'v1',
@@ -82,9 +84,9 @@ jest.mock('react-redux', () => {
 })
 
 // eslint-disable-next-line react/display-name
-jest.mock('../../../app/views/query-runner/query-input/QueryInput.tsx');
+jest.mock('../query-runner/query-input/QueryInput.tsx');
 
-jest.mock('../../../app/views/query-runner/request/Request.tsx');
+jest.mock('../query-runner/request/Request.tsx');
 
 // eslint-disable-next-line no-console
 console.warn = jest.fn()

src/tests/components/query-runner/QueryInput.spec.tsx → src/app/views/query-runner/query-input/QueryInput.spec.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { cleanup, render } from '@testing-library/react';
-import IntlQueryInput from '../../../app/views/query-runner/query-input/QueryInput';
-import { IQueryInputProps } from '../../../types/query-runner';
-import { Mode } from '../../../types/enums';
-import { messages_ } from '../../utils/get-messages';
 import { IntlProvider } from 'react-intl';
-import { geLocale } from '../../../appLocale';
-import messages from '../../../messages';
+
+import { geLocale } from '../../../../appLocale';
+import messages from '../../../../messages';
+import { messages_ } from '../../../../tests/utils/get-messages';
+import { Mode } from '../../../../types/enums';
+import { IQueryInputProps } from '../../../../types/query-runner';
+import IntlQueryInput from './QueryInput';
 
 afterEach(cleanup);
 const renderQueryInput = (args?: any): any => {
@@ -33,7 +34,7 @@ const renderQueryInput = (args?: any): any => {
     }
   }
 
-  const allProps = {...queryInputProps, ...args};
+  const allProps = { ...queryInputProps, ...args };
   return render(
     <IntlProvider
       locale={geLocale}
@@ -44,20 +45,20 @@ const renderQueryInput = (args?: any): any => {
   );
 }
 
-jest.mock('../../../app/views/query-runner/query-input/auto-complete/AutoComplete.tsx')
+jest.mock('../query-input/auto-complete/AutoComplete.tsx')
 
 // eslint-disable-next-line no-console
 console.warn = jest.fn();
 
 jest.mock('react-redux', () => {
-  return{
+  return {
     useDispatch: jest.fn(),
     connect: jest.fn(
       // eslint-disable-next-line no-unused-vars
       <P extends object>(_props?: any) => (component: React.ComponentType<P>) => component
     ),
     useSelector: jest.fn(() => {
-      return({
+      return ({
         sampleQuery: {
           selectedVerb: 'GET',
           selectedVersion: 'v1.0',