Merge pull request #18 from grafana/ismail/type-fixes-5

Removing loki specific code and making custom jest matchers available in the repo

Author: itsmylife

.config/webpack/webpack.config.ts

@@ -37,12 +37,10 @@ const config = async (env): Promise<Configuration> => {
       'lodash',
       'jquery',
       'moment',
-      'slate',
       'emotion',
       '@emotion/react',
       '@emotion/css',
       'prismjs',
-      'slate-plain-serializer',
       '@grafana/slate-react',
       'react',
       'react-dom',
@@ -97,7 +95,7 @@ const config = async (env): Promise<Configuration> => {
         },
         {
           test: /\.css$/,
-          use: ["style-loader", "css-loader"]
+          use: ['style-loader', 'css-loader'],
         },
         {
           test: /\.s[ac]ss$/,
@@ -197,17 +195,16 @@ const config = async (env): Promise<Configuration> => {
       modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],
       unsafeCache: true,
     },
-  }
+  };
 
-  if(isWSL()) {
+  if (isWSL()) {
     baseConfig.watchOptions = {
       poll: 3000,
       ignored: /node_modules/,
-    }}
-
+    };
+  }
 
   return baseConfig;
-
 };
 
 export default config;

jest-setup.js

@@ -4,3 +4,7 @@ import { TextEncoder, TextDecoder } from 'util';
 
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;
+
+import { matchers } from './src/gcopypaste/public/test/matchers';
+
+expect.extend(matchers);

package.json

@@ -18,7 +18,6 @@
   "author": "Grafana",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@babel/core": "7.23.0",
     "@emotion/eslint-plugin": "11.11.0",
     "@grafana/e2e": "10.1.4",
     "@grafana/e2e-selectors": "10.1.4",
@@ -40,9 +39,9 @@
     "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.0",
     "@types/pluralize": "0.0.30",
     "@types/prismjs": "1.26.0",
-    "@types/react": "18.2.15",
-    "@types/react-beautiful-dnd": "13.1.4",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "18.2.29",
+    "@types/react-beautiful-dnd": "13.1.6",
+    "@types/react-dom": "18.2.14",
     "@types/react-highlight-words": "0.16.5",
     "@types/react-redux": "7.1.25",
     "@types/react-window": "1.8.7",
@@ -132,9 +131,5 @@
     "prettier@3.0.0": {
       "unplugged": true
     }
-  },
-  "resolutions": {
-    "@types/slate": "0.47.11",
-    "slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch"
   }
 }

src/components/VariableQueryEditor.test.tsx

@@ -1,9 +1,9 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
 
 import { PrometheusDatasource } from '../datasource';
+import { selectOptionInTest } from '../gcopypaste/test/helpers/selectOptionInTest';
 import PrometheusLanguageProvider from '../language_provider';
 import { migrateVariableEditorBackToVariableSupport } from '../migrations/variableMigration';
 import { PromVariableQuery, PromVariableQueryType, StandardPromVariableQuery } from '../types';

src/configuration/ConfigEditor.tsx

@@ -3,8 +3,8 @@ import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
 import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { Alert, DataSourceHttpSettings, FieldValidationMessage, useTheme2 } from '@grafana/ui';
-import React, { useRef } from 'react';
+import { Alert, FieldValidationMessage, useTheme2 } from '@grafana/ui';
+import React from 'react';
 
 import { PromOptions } from '../types';
 
@@ -13,7 +13,6 @@ import { DataSourcehttpSettingsOverhaul } from './DataSourceHttpSettingsOverhaul
 import { PromSettings } from './PromSettings';
 import { AdvancedHttpSettings } from './overhaul/AdvancedHttpSettings';
 
-
 export const PROM_CONFIG_LABEL_WIDTH = 30;
 
 export type Props = DataSourcePluginOptionsEditorProps<PromOptions>;
@@ -29,7 +28,7 @@ export const ConfigEditor = (props: Props) => {
         <Alert title="Error" severity="error">
           Browser access mode in the Prometheus data source is no longer available. Switch to server access mode.
         </Alert>
-      )}  
+      )}
       <DataSourceDescription
         dataSourceName="Prometheus"
         docsLink="https://grafana.com/docs/grafana/latest/datasources/prometheus/configure-prometheus-data-source/"
@@ -41,7 +40,7 @@ export const ConfigEditor = (props: Props) => {
         sigV4AuthToggleEnabled={config.sigV4AuthEnabled}
         renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
         secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
-      />  
+      />
       <hr />
       <ConfigSection
         className={styles.advancedSettings}

src/datasource.test.ts

@@ -15,7 +15,7 @@ import {
   toDataFrame,
   VariableHide,
 } from '@grafana/data';
-import { TemplateSrv } from 'app/features/templating/template_srv';
+import { TemplateSrv } from '@grafana/runtime';
 import { cloneDeep } from 'lodash';
 import { lastValueFrom, of, throwError } from 'rxjs';
 

src/gcopypaste/app/core/utils/query.ts

@@ -0,0 +1,20 @@
+import { DataQuery } from '@grafana/data';
+
+export const getNextRefIdChar = (queries: DataQuery[]): string => {
+  for (let num = 0; ; num++) {
+    const refId = getRefId(num);
+    if (!queries.some((query) => query.refId === refId)) {
+      return refId;
+    }
+  }
+};
+
+function getRefId(num: number): string {
+  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+  if (num < letters.length) {
+    return letters[num];
+  } else {
+    return getRefId(Math.floor(num / letters.length) - 1) + letters[num % letters.length];
+  }
+}

src/gcopypaste/public/test/matchers/index.ts

@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+
+import { toEmitValues } from './toEmitValues';
+import { toEmitValuesWith } from './toEmitValuesWith';
+import { ObservableMatchers } from './types';
+
+export const matchers: ObservableMatchers<void, Observable<any>> = {
+  toEmitValues,
+  toEmitValuesWith,
+};

src/gcopypaste/public/test/matchers/toEmitValues.test.ts

@@ -0,0 +1,140 @@
+import { interval, Observable, of, throwError } from 'rxjs';
+import { map, mergeMap, take } from 'rxjs/operators';
+
+import { OBSERVABLE_TEST_TIMEOUT_IN_MS } from './types';
+
+describe('toEmitValues matcher', () => {
+  describe('failing tests', () => {
+    describe('passing null in expect', () => {
+      it('should fail', async () => {
+        const observable = null as unknown as Observable<number>;
+
+        const rejects = expect(() => expect(observable).toEmitValues([1, 2, 3])).rejects;
+        await rejects.toThrow();
+      });
+    });
+
+    describe('passing undefined in expect', () => {
+      it('should fail', async () => {
+        const observable = undefined as unknown as Observable<number>;
+
+        const rejects = expect(() => expect(observable).toEmitValues([1, 2, 3])).rejects;
+        await rejects.toThrow();
+      });
+    });
+
+    describe('passing number instead of Observable in expect', () => {
+      it('should fail', async () => {
+        const observable = 1 as unknown as Observable<number>;
+
+        const rejects = expect(() => expect(observable).toEmitValues([1, 2, 3])).rejects;
+        await rejects.toThrow();
+      });
+    });
+
+    describe('wrong number of emitted values', () => {
+      it('should fail', async () => {
+        const observable = interval(10).pipe(take(3));
+
+        const rejects = expect(() => expect(observable).toEmitValues([0, 1])).rejects;
+        await rejects.toThrow();
+      });
+    });
+
+    describe('wrong emitted values', () => {
+      it('should fail', async () => {
+        const observable = interval(10).pipe(take(3));
+
+        const rejects = expect(() => expect(observable).toEmitValues([1, 2, 3])).rejects;
+        await rejects.toThrow();
+      });
+    });
+
+    describe('wrong emitted value types', () => {
+      it('should fail', async () => {
+        const observable = interval(10).pipe(take(3)) as unknown as Observable<string>;
+
+        const rejects = expect(() => expect(observable).toEmitValues(['0', '1', '2'])).rejects;
+        await rejects.toThrow();
+      });
+    });
+
+    describe(`observable that does not complete within ${OBSERVABLE_TEST_TIMEOUT_IN_MS}ms`, () => {
+      it('should fail', async () => {
+        const observable = interval(600);
+
+        const rejects = expect(() => expect(observable).toEmitValues([0])).rejects;
+        await rejects.toThrow();
+      });
+    });
+  });
+
+  describe('passing tests', () => {
+    describe('correct emitted values', () => {
+      it('should pass with correct message', async () => {
+        const observable = interval(10).pipe(take(3));
+        await expect(observable).toEmitValues([0, 1, 2]);
+      });
+    });
+
+    describe('using nested arrays', () => {
+      it('should pass with correct message', async () => {
+        const observable = interval(10).pipe(
+          map((interval) => [{ text: interval.toString(), value: interval }]),
+          take(3)
+        );
+        await expect(observable).toEmitValues([
+          [{ text: '0', value: 0 }],
+          [{ text: '1', value: 1 }],
+          [{ text: '2', value: 2 }],
+        ]);
+      });
+    });
+
+    describe('using nested objects', () => {
+      it('should pass with correct message', async () => {
+        const observable = interval(10).pipe(
+          map((interval) => ({ inner: { text: interval.toString(), value: interval } })),
+          take(3)
+        );
+        await expect(observable).toEmitValues([
+          { inner: { text: '0', value: 0 } },
+          { inner: { text: '1', value: 1 } },
+          { inner: { text: '2', value: 2 } },
+        ]);
+      });
+    });
+
+    describe('correct emitted values with throw', () => {
+      it('should pass with correct message', async () => {
+        const observable = interval(10).pipe(
+          map((interval) => {
+            if (interval > 1) {
+              throw 'an error';
+            }
+
+            return interval;
+          })
+        ) as unknown as Observable<string | number>;
+
+        await expect(observable).toEmitValues([0, 1, 'an error']);
+      });
+    });
+
+    describe('correct emitted values with throwError', () => {
+      it('should pass with correct message', async () => {
+        const observable = interval(10).pipe(
+          mergeMap((interval) => {
+            if (interval === 1) {
+              return throwError('an error');
+            }
+
+            return of(interval);
+          })
+        ) as unknown as Observable<string | number>;
+
+        await expect(observable).toEmitValues([0, 'an error']);
+      });
+    });
+  });
+});