From 9f2a75be3b41a55e33b4825a0d5d52f3df8897a6 Mon Sep 17 00:00:00 2001
From: Sloane <sloane.perrault@elastic.co>
Date: Mon, 10 Jul 2023 09:10:25 -0400
Subject: [PATCH] [Serverless Search] Expanded unit testing (#161356)

## Summary

Sets up unit testing for react components.

Unit testing of server-side components already implemented.


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
---
 x-pack/plugins/serverless_search/jest.sh      |  3 +
 .../application/components/overview.test.tsx  | 58 +++++++++++++++++++
 .../public/test/test_utils.tsx                | 48 +++++++++++++++
 3 files changed, 109 insertions(+)
 create mode 100755 x-pack/plugins/serverless_search/jest.sh
 create mode 100644 x-pack/plugins/serverless_search/public/application/components/overview.test.tsx
 create mode 100644 x-pack/plugins/serverless_search/public/test/test_utils.tsx

diff --git a/x-pack/plugins/serverless_search/jest.sh b/x-pack/plugins/serverless_search/jest.sh
new file mode 100755
index 0000000000000..b51ce6bc18fe9
--- /dev/null
+++ b/x-pack/plugins/serverless_search/jest.sh
@@ -0,0 +1,3 @@
+#!/bin/bash
+
+TZ="Etc/UTC" yarn test:jest -c "$(dirname "${BASH_SOURCE[0]}")/jest.config.js"
diff --git a/x-pack/plugins/serverless_search/public/application/components/overview.test.tsx b/x-pack/plugins/serverless_search/public/application/components/overview.test.tsx
new file mode 100644
index 0000000000000..971025125ab94
--- /dev/null
+++ b/x-pack/plugins/serverless_search/public/application/components/overview.test.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { render, core } from '../../test/test_utils';
+import { ElasticsearchOverview as Overview } from './overview';
+
+describe('<Overview />', () => {
+  beforeEach(() => {
+    core.http.fetch.mockResolvedValueOnce({ apiKeys: [] });
+  });
+
+  test('renders without throwing an error', () => {
+    const wrapper = render(<Overview />);
+    expect(wrapper).toBeDefined();
+  });
+
+  test('getting started', () => {
+    const { getByRole } = render(<Overview />);
+    expect(getByRole('heading', { name: 'Get started with Elasticsearch' })).toBeDefined();
+  });
+
+  test('select client', () => {
+    const { getByRole } = render(<Overview />);
+    expect(getByRole('heading', { name: 'Select your client' })).toBeDefined();
+  });
+  test('install client', () => {
+    const { getByRole } = render(<Overview />);
+    expect(getByRole('heading', { name: 'Install a client' })).toBeDefined();
+  });
+  test('api key', () => {
+    const { getByRole } = render(<Overview />);
+    expect(getByRole('heading', { name: 'Store your API key and Cloud ID' })).toBeDefined();
+  });
+  test('configure client', () => {
+    const { getByRole } = render(<Overview />);
+    expect(getByRole('heading', { name: 'Configure your client' })).toBeDefined();
+  });
+  test('test connection', () => {
+    const { getByRole } = render(<Overview />);
+    expect(getByRole('heading', { name: 'Test your connection' })).toBeDefined();
+  });
+  test('ingest data', () => {
+    const { getByRole } = render(<Overview />);
+    expect(getByRole('heading', { name: 'Ingest data' })).toBeDefined();
+  });
+  test('build query', () => {
+    const { getByRole } = render(<Overview />);
+    expect(getByRole('heading', { name: 'Build your first search query' })).toBeDefined();
+  });
+  test("what's next?", () => {
+    const { getByRole } = render(<Overview />);
+    expect(getByRole('heading', { name: "What's next?" })).toBeDefined();
+  });
+});
diff --git a/x-pack/plugins/serverless_search/public/test/test_utils.tsx b/x-pack/plugins/serverless_search/public/test/test_utils.tsx
new file mode 100644
index 0000000000000..9139180015e2d
--- /dev/null
+++ b/x-pack/plugins/serverless_search/public/test/test_utils.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ReactElement } from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { I18nProvider } from '@kbn/i18n-react';
+
+import { coreMock } from '@kbn/core/public/mocks';
+import { cloudMock } from '@kbn/cloud-plugin/public/mocks';
+import { sharePluginMock } from '@kbn/share-plugin/public/mocks';
+import { userProfileMock } from '@kbn/security-plugin/common/model/user_profile.mock';
+
+export const core = coreMock.createStart();
+export const services = {
+  cloud: cloudMock.createStart(),
+  share: sharePluginMock.createStartContract(),
+  userProfile: userProfileMock.createWithSecurity(),
+};
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { cacheTime: Infinity, retry: false },
+  },
+});
+
+const AllTheProviders: React.FC = ({ children }) => {
+  return (
+    <KibanaThemeProvider theme$={core.theme.theme$}>
+      <KibanaContextProvider services={{ ...core, ...services }}>
+        <QueryClientProvider client={queryClient}>
+          <I18nProvider>{children}</I18nProvider>
+        </QueryClientProvider>
+      </KibanaContextProvider>
+    </KibanaThemeProvider>
+  );
+};
+
+const customRender = (ui: ReactElement, options: Omit<RenderOptions, 'wrapper'> = {}) =>
+  render(ui, { wrapper: AllTheProviders, ...options });
+
+export * from '@testing-library/react';
+export { customRender as render };