added tests config

elastic · Nov 20, 2024 · bb1d59d · bb1d59d
1 parent 73d4575
commit bb1d59d
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 10 deletions.
diff --git a/examples/grid_example/jest.config.js b/examples/grid_example/jest.config.js
@@ -0,0 +1,18 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/examples/grid_example'],
+  coverageDirectory: '<rootDir>/target/kibana-coverage/jest/examples/grid_example',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: ['<rootDir>/examples/grid_example/{common,public,server}/**/*.{ts,tsx}'],
+  setupFiles: ['jest-canvas-mock'],
+};
diff --git a/examples/grid_example/public/app.test.tsx b/examples/grid_example/public/app.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { GridExample } from './app';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CoreStart } from '@kbn/core-lifecycle-browser';
+import { initialGridLayout } from './serialized_grid_layout';
+
+describe('GridExample', () => {
+  let coreStart: CoreStart;
+
+  beforeEach(() => {
+    coreStart = {} as CoreStart;
+  });
+
+  it('renders all the panels', () => {
+    render(<GridExample coreStart={coreStart} />);
+    const panelTitles = screen
+      .getAllByTestId('gridExamplePanelTitle')
+      .map((panel) => panel.textContent);
+    const expectedPanelTitles = initialGridLayout.flatMap(({ panels }) => Object.keys(panels));
+    expect(panelTitles).toEqual(expectedPanelTitles);
+  });
+});
diff --git a/examples/grid_example/public/app.tsx b/examples/grid_example/public/app.tsx
@@ -85,6 +85,7 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
             <EuiFlexItem grow={false}>
               <EuiButton
                 onClick={async () => {
+                  setExpandedPanelId(undefined);
                   const panelId = await getPanelId({
                     coreStart,
                     suggestion: `panel${(gridLayoutApi?.getPanelCount() ?? 0) + 1}`,
@@ -156,10 +157,13 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
             renderPanelContents={(id) => {
               return (
                 <>
-                  <div style={{ padding: 8 }}>{id}</div>
+                  <div style={{ padding: 8 }} data-test-subj="gridExamplePanelTitle">
+                    {id}
+                  </div>
                   <EuiButtonEmpty
                     onClick={() => {
                       gridLayoutApi?.removePanel(id);
+                      setExpandedPanelId(undefined);
                     }}
                   >
                     {i18n.translate('examples.gridExample.deletePanelButton', {
@@ -173,20 +177,29 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
                         suggestion: `panel${(gridLayoutApi?.getPanelCount() ?? 0) + 1}`,
                       });
                       if (newPanelId) gridLayoutApi?.replacePanel(id, newPanelId);
+                      setExpandedPanelId(undefined);
                     }}
                   >
                     {i18n.translate('examples.gridExample.replacePanelButton', {
                       defaultMessage: 'Replace panel',
                     })}
                   </EuiButtonEmpty>
                   <EuiButtonIcon
-                    iconType={'expand'}
+                    iconType={expandedPanelId ? 'minimize' : 'expand'}
                     onClick={() =>
                       setExpandedPanelId((expandedId) => (expandedId ? undefined : id))
                     }
-                    aria-label={i18n.translate('examples.gridExample.maximizePanel', {
-                      defaultMessage: 'Maximize/minimize panel',
-                    })}
+                    aria-label={
+                      expandedPanelId
+                        ? i18n.translate('examples.gridExample.minimizePanel', {
+                            defaultMessage: 'Minimize panel {id}',
+                            values: { id },
+                          })
+                        : i18n.translate('examples.gridExample.maximizePanel', {
+                            defaultMessage: 'Maximize panel {id}',
+                            values: { id },
+                          })
+                    }
                   />
                 </>
               );

diff --git a/examples/grid_example/public/serialized_grid_layout.ts b/examples/grid_example/public/serialized_grid_layout.ts
@@ -24,7 +24,7 @@ export function setSerializedGridLayout(layout: GridLayoutData) {
   sessionStorage.setItem(STATE_SESSION_STORAGE_KEY, JSON.stringify(layout));
 }
 
-const initialGridLayout: GridLayoutData = [
+export const initialGridLayout: GridLayoutData = [
   {
     title: 'Large section',
     isCollapsed: false,

diff --git a/packages/kbn-grid-layout/grid/grid_panel.tsx b/packages/kbn-grid-layout/grid/grid_panel.tsx
@@ -69,7 +69,7 @@ export const GridPanel = forwardRef<
             if (!ref || !panel) return;
             if (expandedPanelId && expandedPanelId === panelId) {
               // adding the class to target the handles in css and disable them
-              ref.classList.add('panelExpanded');
+              ref.classList.add('kbnGridPanel--nonInteractive');
               ref.style.transform = 'translate(9999px, 9999px)';
               ref.style.gridArea = '1 / 1 / -1 / -1';
               ref.style.position = `absolute`;
@@ -79,7 +79,7 @@ export const GridPanel = forwardRef<
               ref.style.height = `100%`;
               return;
             } else {
-              ref.classList.remove('panelExpanded');
+              ref.classList.remove('kbnGridPanel--nonInteractive');
               ref.style.transform = '';
             }
 
@@ -182,7 +182,7 @@ export const GridPanel = forwardRef<
                 cursor: grabbing;
                 opacity: 1 !important;
               }
-              .panelExpanded & {
+              .kbnGridPanel--nonInteractive & {
                 opacity: 0 !important;
                 display: none;
               }
@@ -214,7 +214,7 @@ export const GridPanel = forwardRef<
                 background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)};
                 cursor: se-resize;
               }
-              .panelExpanded & {
+              .kbnGridPanel--nonInteractive & {
                 opacity: 0 !important;
                 display: none;
               }