tests(eslint): add import/order rule (GoogleChrome#12998)

.eslintrc.js

@@ -11,7 +11,10 @@ module.exports = {
   // start with google standard style
   //     https://github.com/google/eslint-config-google/blob/master/index.js
   extends: ['eslint:recommended', 'google'],
-  plugins: ['eslint-plugin-local-rules'], // include custom rules
+  plugins: [
+    'eslint-plugin-local-rules',
+    'eslint-plugin-import',
+  ],
   env: {
     node: true,
     es6: true,

flow-report/.eslintrc.js

@@ -10,6 +10,21 @@ module.exports = {
     node: true,
     browser: true,
   },
+  rules: {
+    // TODO(esmodules): move to root eslint when all code is ESM
+    // or when this is resolved: https://github.com/import-js/eslint-plugin-import/issues/2214
+    'import/order': [2, {
+      'groups': [
+        'builtin',
+        'external',
+        ['sibling', 'parent'],
+        'index',
+        'object',
+        'type',
+      ],
+      'newlines-between': 'always',
+    }],
+  },
   overrides: [
     // TS already handles this issue.
     // https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors

flow-report/src/app.tsx

@@ -5,6 +5,7 @@
  */
 
 import {FunctionComponent} from 'preact';
+
 import {ReportRendererProvider} from './wrappers/report-renderer';
 import {Sidebar} from './sidebar/sidebar';
 import {Summary} from './summary/summary';

flow-report/src/common.tsx

@@ -5,6 +5,7 @@
  */
 
 import {FunctionComponent} from 'preact';
+
 import {Util} from '../../report/renderer/util';
 
 const GatherModeIcon: FunctionComponent<{mode: LH.Result.GatherMode}> = ({mode}) => {

flow-report/src/sidebar/flow.tsx

@@ -5,6 +5,7 @@
  */
 
 import {FunctionComponent} from 'preact';
+
 import {FlowStepIcon} from '../common';
 import {classNames, useCurrentLhr, useDerivedStepNames, useFlowResult} from '../util';
 

flow-report/src/sidebar/sidebar.tsx

@@ -6,6 +6,7 @@
 
 import {FunctionComponent} from 'preact';
 import {useMemo} from 'preact/hooks';
+
 import {classNames, useCurrentLhr, useFlowResult, useLocale} from '../util';
 import {SidebarFlow} from './flow';
 

flow-report/src/summary/summary.tsx

@@ -5,11 +5,12 @@
  */
 
 import {FunctionComponent} from 'preact';
+import {useMemo} from 'preact/hooks';
+
 import {Gauge} from '../wrappers/gauge';
 import {CategoryRatio, FlowStepIcon} from '../common';
 import {getScreenDimensions, getScreenshot, useDerivedStepNames, useFlowResult} from '../util';
 import {Util} from '../../../report/renderer/util';
-import {useMemo} from 'preact/hooks';
 
 const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
 const THUMBNAIL_WIDTH = 50;

flow-report/src/wrappers/gauge.tsx

@@ -6,6 +6,7 @@
 
 import {FunctionComponent} from 'preact';
 import {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
+
 import {useReportRenderer} from './report-renderer';
 
 export const Gauge: FunctionComponent<{category: LH.ReportResult.Category, href: string}> =

flow-report/src/wrappers/report-renderer.tsx

@@ -6,6 +6,7 @@
 
 import {createContext, FunctionComponent} from 'preact';
 import {useContext, useMemo} from 'preact/hooks';
+
 import {CategoryRenderer} from '../../../report/renderer/category-renderer';
 import {DetailsRenderer} from '../../../report/renderer/details-renderer';
 import {DOM} from '../../../report/renderer/dom';

flow-report/src/wrappers/report.tsx

@@ -6,6 +6,7 @@
 
 import {FunctionComponent} from 'preact';
 import {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
+
 import {useCurrentLhr, useHashParam} from '../util';
 import {useReportRenderer} from './report-renderer';
 

flow-report/standalone-flow.tsx

@@ -10,6 +10,7 @@
  */
 
 import {render} from 'preact';
+
 import {App} from './src/app';
 
 // Used by standalone-flow.html

flow-report/test/app-test.tsx

@@ -5,11 +5,13 @@
  */
 
 import fs from 'fs';
-import {App} from '../src/app';
-import {render} from '@testing-library/preact';
 import {dirname} from 'path';
 import {fileURLToPath} from 'url';
 
+import {render} from '@testing-library/preact';
+
+import {App} from '../src/app';
+
 const flowResult = JSON.parse(
   fs.readFileSync(
     // eslint-disable-next-line max-len

flow-report/test/common-test.tsx

@@ -4,9 +4,10 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {CategoryRatio} from '../src/common';
 import {render} from '@testing-library/preact';
 
+import {CategoryRatio} from '../src/common';
+
 describe('CategoryRatio', () => {
   it('renders passed audit count', async () => {
     const audits = {

flow-report/test/sidebar/flow-test.tsx

@@ -1,10 +1,13 @@
 import fs from 'fs';
-import {SidebarFlow} from '../../src/sidebar/flow';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+
 import {render} from '@testing-library/preact';
 import {FunctionComponent} from 'preact';
+
+import {SidebarFlow} from '../../src/sidebar/flow';
 import {FlowResultContext} from '../../src/util';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
+
 
 const flowResult = JSON.parse(
   fs.readFileSync(

flow-report/test/sidebar/sidebar-test.tsx

@@ -5,12 +5,15 @@
  */
 
 import fs from 'fs';
-import {SidebarHeader, SidebarSummary} from '../../src/sidebar/sidebar';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+
 import {render} from '@testing-library/preact';
 import {FunctionComponent} from 'preact';
+
+import {SidebarHeader, SidebarSummary} from '../../src/sidebar/sidebar';
 import {FlowResultContext} from '../../src/util';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
+
 
 const flowResult = JSON.parse(
   fs.readFileSync(

flow-report/test/summary/summary-test.tsx

@@ -5,11 +5,13 @@
  */
 
 import fs from 'fs';
-import {SummaryHeader, SummaryFlowStep} from '../../src/summary/summary';
-import {render} from '@testing-library/preact';
 import {dirname} from 'path';
 import {fileURLToPath} from 'url';
+
+import {render} from '@testing-library/preact';
 import {FunctionComponent} from 'preact';
+
+import {SummaryHeader, SummaryFlowStep} from '../../src/summary/summary';
 import {FlowResultContext} from '../../src/util';
 import {ReportRendererProvider} from '../../src/wrappers/report-renderer';
 

flow-report/test/util-test.tsx

@@ -5,12 +5,14 @@
  */
 
 import fs from 'fs';
-import {FlowResultContext, useCurrentLhr, useDerivedStepNames} from '../src/util';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+
 import {renderHook} from '@testing-library/preact-hooks';
 import {FunctionComponent} from 'preact';
 import {act} from 'preact/test-utils';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
+
+import {FlowResultContext, useCurrentLhr, useDerivedStepNames} from '../src/util';
 
 const flowResult: LH.FlowResult = JSON.parse(
   fs.readFileSync(

lighthouse-treemap/.eslintrc.cjs

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+module.exports = {
+  env: {
+    browser: true,
+  },
+  rules: {
+    // TODO(esmodules): move to root eslint when all code is ESM
+    // or when this is resolved: https://github.com/import-js/eslint-plugin-import/issues/2214
+    'import/order': [2, {
+      'groups': [
+        'builtin',
+        'external',
+        ['sibling', 'parent'],
+        'index',
+        'object',
+        'type',
+      ],
+      'newlines-between': 'always',
+    }],
+  },
+};

lighthouse-treemap/test/treemap-test-pptr.js

@@ -7,11 +7,11 @@
 
 /* eslint-env jest */
 
-/* global document, window */
+import fs from 'fs';
 
 import {jest} from '@jest/globals';
-import fs from 'fs';
 import puppeteer from 'puppeteer';
+
 import {server} from '../../lighthouse-cli/test/fixtures/static-server.js';
 import {LH_ROOT} from '../../root.js';
 

lighthouse-treemap/test/util-test.js

@@ -9,7 +9,9 @@
 
 import assert from 'assert';
 import fs from 'fs';
+
 import jsdom from 'jsdom';
+
 import {TreemapUtil} from '../app/src/util.js';
 import {LH_ROOT} from '../../root.js';
 

lighthouse-viewer/.eslintrc.cjs

@@ -9,4 +9,19 @@ module.exports = {
   env: {
     browser: true,
   },
+  rules: {
+    // TODO(esmodules): move to root eslint when all code is ESM
+    // or when this is resolved: https://github.com/import-js/eslint-plugin-import/issues/2214
+    'import/order': [2, {
+      'groups': [
+        'builtin',
+        'external',
+        ['sibling', 'parent'],
+        'index',
+        'object',
+        'type',
+      ],
+      'newlines-between': 'always',
+    }],
+  },
 };

lighthouse-viewer/app/src/github-api.js

@@ -10,6 +10,7 @@
 /** @typedef {{etag: ?string, content: LH.Result}} CachableGist */
 
 import idbKeyval from 'idb-keyval';
+
 import {FirebaseAuth} from './firebase-auth.js';
 import {getFilenamePrefix} from '../../../report/generator/file-namer.js';
 

lighthouse-viewer/app/src/lighthouse-report-viewer.js

@@ -6,6 +6,7 @@
 'use strict';
 
 import idbKeyval from 'idb-keyval';
+
 import {DragAndDrop} from './drag-and-drop.js';
 import {GithubApi} from './github-api.js';
 import {PSIApi} from './psi-api';

lighthouse-viewer/test/drag-and-drop-test.js

@@ -8,6 +8,7 @@
 /* eslint-env jest */
 
 import {jest} from '@jest/globals';
+
 import {DragAndDrop} from '../app/src/drag-and-drop.js';
 import * as testHelpers from './test-helpers.js';
 

lighthouse-viewer/test/test-helpers.js

@@ -7,7 +7,9 @@
 
 import * as fs from 'fs';
 import * as path from 'path';
+
 import * as jsdom from 'jsdom';
+
 import {LH_ROOT} from '../../root.js';
 
 /* eslint-env jest */

lighthouse-viewer/test/viewer-test-pptr.js

@@ -7,10 +7,12 @@
 
 /* eslint-env jest */
 
-import {jest} from '@jest/globals';
 import * as fs from 'fs';
 import * as assert from 'assert';
+
+import {jest} from '@jest/globals';
 import puppeteer from 'puppeteer';
+
 import {server} from '../../lighthouse-cli/test/fixtures/static-server.js';
 import defaultConfig from '../../lighthouse-core/config/default-config.js';
 import {LH_ROOT} from '../../root.js';

package.json

@@ -141,6 +141,7 @@
     "devtools-protocol": "0.0.863986",
     "eslint": "^7.23.0",
     "eslint-config-google": "^0.9.1",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-local-rules": "0.1.0",
     "event-target-shim": "^6.0.2",
     "exorcist": "^1.0.1",

report/.eslintrc.cjs

@@ -15,4 +15,19 @@ module.exports = {
   env: {
     browser: true,
   },
+  rules: {
+    // TODO(esmodules): move to root eslint when all code is ESM
+    // or when this is resolved: https://github.com/import-js/eslint-plugin-import/issues/2214
+    'import/order': [2, {
+      'groups': [
+        'builtin',
+        'external',
+        ['sibling', 'parent'],
+        'index',
+        'object',
+        'type',
+      ],
+      'newlines-between': 'always',
+    }],
+  },
 };

report/generator/report-assets.js

@@ -6,6 +6,7 @@
 'use strict';
 
 const fs = require('fs');
+
 const flowReportAssets = require('./flow-report-assets.js');
 
 const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/../assets/standalone-template.html',

report/test/clients/psi-test.js

@@ -7,7 +7,9 @@
 
 import {strict as assert} from 'assert';
 import fs from 'fs';
+
 import jsdom from 'jsdom';
+
 import testUtils from '../../../lighthouse-core/test/test-utils.js';
 import {prepareLabData} from '../../clients/psi.js';
 import {Util} from '../../renderer/util.js';

report/test/generator/file-namer-test.js

@@ -6,6 +6,7 @@
 'use strict';
 
 const assert = require('assert').strict;
+
 const getFilenamePrefix = require('../../generator/file-namer.js').getFilenamePrefix;
 
 /* eslint-env jest */

report/test/generator/report-generator-test.js

@@ -7,9 +7,11 @@
 
 const assert = require('assert').strict;
 const fs = require('fs');
+
+const csvValidator = require('csv-validator');
+
 const ReportGenerator = require('../../generator/report-generator.js');
 const sampleResults = require('../../../lighthouse-core/test/results/sample_v2.json');
-const csvValidator = require('csv-validator');
 
 /* eslint-env jest */