Switch pre-commit hook to pre-push; fix Jest --findRelatedTests behavior (#7163)

Author: cee-chen

package.json

@@ -60,7 +60,7 @@
     "**/@types/react": "^18",
     "react-focus-lock": "^2.9.5"
   },
-  "pre-commit": [
+  "pre-push": [
     "test-staged"
   ],
   "dependencies": {
@@ -220,7 +220,7 @@
     "postcss-inline-svg": "^4.1.0",
     "postcss-loader": "^7.0.1",
     "postcss-styled-syntax": "^0.4.0",
-    "pre-commit": "^1.2.2",
+    "pre-push": "^0.1.4",
     "prettier": "^2.8.8",
     "process": "^0.11.10",
     "prop-types": "^15.6.0",

scripts/test-staged.js

@@ -1,11 +1,6 @@
 const { execSync } = require('child_process');
 
-// find names of staged files
-const stagedFiles = execSync('git diff --cached --name-only --diff-filter=ACMR')
-  .toString()
-  .split(/[\r\n]+/g);
-
-// execute tests related to the staged files
-execSync(`yarn test-unit --findRelatedTests ${stagedFiles.join(' ')}`, {
+// https://jestjs.io/docs/cli#--changedsince
+execSync(`yarn test-unit --changedSince main`, {
   stdio: 'inherit',
 });

scripts/tests/test-staged.test.js

@@ -0,0 +1,24 @@
+const { execSync } = require('child_process');
+const path = require('path');
+const euiRoot = path.resolve(__dirname, '../../'); // NOTE: CI lists the EUI project root as app/ instead of eui/
+
+describe('test-staged.js', () => {
+  it('does not have --findRelatedTests regressions due to imports from src/components', () => {
+    const outputString = execSync(
+      'yarn test-unit --findRelatedTests --listTests src/components/beacon/beacon.tsx',
+      { cwd: euiRoot }
+    ).toString();
+    const output = outputString
+      .split('\n')
+      .filter((item) => item.endsWith('test.tsx'));
+
+    expect(
+      output[0].endsWith('src/components/tour/tour_step.test.tsx')
+    ).toBeTruthy();
+    expect(
+      output[1].endsWith('src/components/beacon/beacon.test.tsx')
+    ).toBeTruthy();
+
+    expect(output[2]).toBeUndefined();
+  });
+});

src-docs/src/components/guide_section/_utils.test.js

@@ -1,5 +1,5 @@
-const dedent = require('dedent');
-const { renderJsSourceCode } = require('./_utils.js');
+import dedent from 'dedent';
+import { renderJsSourceCode } from './_utils';
 
 describe('renderJsSourceCode', () => {
   describe('EUI imports', () => {
@@ -41,8 +41,8 @@ describe('renderJsSourceCode', () => {
       expect(
         renderJsSourceCode({
           default: dedent(`
-            import { EuiButton, EuiFlexGroup, EuiFlexItem } from '../../../src/components';
-            import { useGeneratedHtmlId } from '../../../src/services';
+            import { EuiButton, EuiFlexGroup, EuiFlexItem } from '../../src/components';
+            import { useGeneratedHtmlId } from '../../src/services';
   
             export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`),
         })

src/components/card/card.styles.ts

@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { EuiCardProps } from '..';
+
 import {
   euiPaddingSize,
   euiSupportsHas,
@@ -18,6 +18,7 @@ import {
 import { UseEuiTheme } from '../../services';
 import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
 
+import { EuiCardProps } from './card';
 const paddingKey = 'm';
 const halfPaddingKey = 's';
 

src/components/card/card.test.tsx

@@ -12,11 +12,13 @@ import { requiredProps } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { render } from '../../test/rtl';
 
-import { EuiCard, ALIGNMENTS } from './card';
-
-import { EuiIcon, EuiAvatar, EuiI18n } from '../../components';
+import { EuiIcon } from '../icon';
+import { EuiAvatar } from '../avatar';
+import { EuiI18n } from '../i18n';
 import { COLORS, SIZES } from '../panel/panel';
 
+import { EuiCard, ALIGNMENTS } from './card';
+
 describe('EuiCard', () => {
   test('is rendered', () => {
     const { container } = render(

src/components/card/card.tsx

@@ -15,21 +15,23 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { CommonProps, ExclusiveUnion } from '../common';
 import {
   getSecureRelForTarget,
   useEuiTheme,
   cloneElementWithCss,
 } from '../../services';
+import { useGeneratedHtmlId } from '../../services/accessibility';
+import { validateHref } from '../../services/security/href_validator';
+
+import { CommonProps, ExclusiveUnion } from '../common';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
 import { EuiBetaBadge, EuiBetaBadgeProps } from '../badge/beta_badge';
 import { EuiIconProps } from '../icon';
-import { EuiCardSelect, EuiCardSelectProps } from './card_select';
-import { useGeneratedHtmlId } from '../../services/accessibility';
-import { validateHref } from '../../services/security/href_validator';
 import { EuiPanel, EuiPanelProps } from '../panel';
 import { EuiSpacer } from '../spacer';
+
+import { EuiCardSelect, EuiCardSelectProps } from './card_select';
 import {
   euiCardBetaBadgeStyles,
   euiCardStyles,

src/components/popover/popover.test.tsx

@@ -12,7 +12,9 @@ import { act } from '@testing-library/react';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test/required_props';
 import { render } from '../../test/rtl';
-import { EuiFocusTrap } from '../';
+
+import { keys } from '../../services';
+import { EuiFocusTrap } from '../focus_trap';
 
 import {
   EuiPopover,
@@ -21,8 +23,6 @@ import {
   PopoverAnchorPosition,
 } from './popover';
 
-import { keys } from '../../services';
-
 const actAdvanceTimersByTime = (time: number) =>
   act(() => jest.advanceTimersByTime(time));
 

src/global_styling/functions/typography.test.tsx

@@ -9,7 +9,7 @@
 import React, { FunctionComponent, PropsWithChildren } from 'react';
 import { renderHook } from '@testing-library/react';
 
-import { EuiProvider } from '../../components';
+import { EuiProvider } from '../../components/provider';
 import { useEuiTheme } from '../../services';
 import { EuiThemeFontScales, EuiThemeFontUnits } from '../variables/typography';
 

src/services/theme/hooks.test.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import { render, act } from '@testing-library/react';
 import { renderHook } from '../../test/rtl';
 
-import { EuiProvider } from '../../components';
+import { EuiProvider } from '../../components/provider';
 
 import { setEuiDevProviderWarning } from './warning';
 import {