Merge pull request #20784 from backstage/camilaibs/create-homepage-resizing-tests

[Home] Create resizing tests

packages/app/e2e-tests/HomePage.test.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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.
+ */
+
+import { test, expect } from '@playwright/test';
+
+test('Should not throw `ResizeObserver loop completed with undelivered notifications`', async ({
+  page,
+}) => {
+  await page.goto('/');
+
+  const enterButton = page.getByRole('button', { name: 'Enter' });
+  await expect(enterButton).toBeVisible();
+  await enterButton.click();
+
+  await page.goto('/home');
+  await expect(
+    page
+      .frameLocator('#webpack-dev-server-client-overlay')
+      .getByText(
+        /ResizeObserver loop completed with undelivered notifications/,
+      ),
+  ).not.toBeVisible();
+});
+
+test('Should resize widgets vertically and horizontally', async ({ page }) => {
+  await page.goto('/');
+
+  const enterButton = page.getByRole('button', { name: 'Enter' });
+  await expect(enterButton).toBeVisible();
+  await enterButton.click();
+
+  await page.goto('/home');
+  await expect(page.getByText('Backstage Example App')).toBeVisible();
+
+  // Start editing mode
+  await page.getByRole('button', { name: /Edit/ }).click();
+  await expect(page.getByRole('button', { name: /Save/ })).toBeVisible();
+
+  // Resize the last installed widget
+  const widgetElement = await page.locator('.react-grid-item:nth-child(3)');
+  const defaultWidgetBox = { x: 1, y: 1, width: 1, height: 1 };
+  const widgetBoxBefore =
+    (await widgetElement.boundingBox()) ?? defaultWidgetBox;
+  const widgetResizeHandle = await widgetElement.locator(
+    '.react-resizable-handle',
+  );
+  await widgetResizeHandle.hover();
+  await page.mouse.down();
+  await page.mouse.move(widgetBoxBefore.width / 2, widgetBoxBefore.height / 2);
+  await page.mouse.up();
+  const widgetBoxAfter =
+    (await widgetElement.boundingBox()) ?? defaultWidgetBox;
+
+  // Ensure that both height and width was reduced
+  expect(widgetBoxAfter.width).toBeLessThan(widgetBoxBefore.width);
+  expect(widgetBoxAfter.height).toBeLessThan(widgetBoxBefore.height);
+
+  // Exit editing mode
+  await page.getByRole('button', { name: 'Save' }).click();
+  await expect(page.getByRole('button', { name: /Edit/ })).toBeVisible();
+});

plugins/home/src/plugin.test.ts

@@ -13,10 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import packageJson from '../package.json';
 import { homePlugin } from './plugin';
 
 describe('home', () => {
   it('should export plugin', () => {
     expect(homePlugin).toBeDefined();
   });
+
+  // Temporarily ensure we are installing a working version of the react-grid-layout library
+  // For more details, see: https://github.com/react-grid-layout/react-grid-layout/issues/1959
+  // TODO(@backstage/discoverability-maintainers): Delete this once the sub-dependency issue has been resolved.
+  it('should pin react-grid-layout version to 1.3.4', async () => {
+    expect(packageJson.dependencies['react-grid-layout']).toBe('1.3.4');
+  });
 });