test(components): add more tests (#13168)

packages/playwright-ct-react/register.mjs

@@ -30,6 +30,10 @@ function render(component) {
     if (typeof child === 'string')
       return child;
     return render(child);
+  }).filter(child => {
+    if (typeof child === 'string')
+      return !!child.trim();
+    return true;
   }));
 }
 

packages/trace-viewer/src/ui/networkResourceDetails.tsx

@@ -125,7 +125,7 @@ export const NetworkResourceDetails: React.FunctionComponent<{
 
   return <div
     className={'network-request ' + (selected ? 'selected' : '')} onClick={() => setSelected(index)}>
-    <Expandable expanded={expanded} setExpanded={setExpanded} style={{ width: '100%' }} title={ renderTitle() } body={
+    <Expandable expanded={expanded} setExpanded={setExpanded} style={{ width: '100%' }} title={ renderTitle() }>
       <div className='network-request-details'>
         <div className='network-request-details-header'>URL</div>
         <div className='network-request-details-url'>{resource.request.url}</div>
@@ -140,6 +140,6 @@ export const NetworkResourceDetails: React.FunctionComponent<{
         {responseBody !== null && responseBody.dataUrl ? <img src={responseBody.dataUrl} /> : ''}
         {responseBody !== null && responseBody.text ? <div className='network-request-response-body'>{formatBody(responseBody.text, resource.response.content.mimeType)}</div> : ''}
       </div>
-    }/>
+    </Expandable>
   </div>;
 };

packages/web/src/components/expandable.spec.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Microsoft Corporation. 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.
+ */
+
+import React from 'react';
+import { expect, test } from '@playwright/experimental-ct-react/test';
+import { Expandable } from './expandable';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('should render collapsed', async ({ mount }) => {
+  const component = await mount(<Expandable expanded={false} setExpanded={() => {}} title='Title'>Details text</Expandable>);
+  await expect(component.locator('text=Title')).toBeVisible();
+  await expect(component.locator('text=Details')).toBeHidden();
+  await expect(component.locator('.codicon-chevron-right')).toBeVisible();
+});
+
+test('should render expanded', async ({ mount }) => {
+  const component = await mount(<Expandable expanded={true} setExpanded={() => {}} title='Title'>Details text</Expandable>);
+  await expect(component.locator('text=Title')).toBeVisible();
+  await expect(component.locator('text=Details')).toBeVisible();
+  await expect(component.locator('.codicon-chevron-down')).toBeVisible();
+});
+
+test('click should expand', async ({ mount }) => {
+  let expanded = false;
+  const component = await mount(<Expandable expanded={false} setExpanded={e => expanded = e} title='Title'>Details text</Expandable>);
+  await component.locator('.codicon-chevron-right').click();
+  expect(expanded).toBeTruthy();
+});

packages/web/src/components/expandable.tsx

@@ -17,12 +17,12 @@
 import * as React from 'react';
 
 export const Expandable: React.FunctionComponent<{
-  title: JSX.Element,
-  body: JSX.Element,
+  title: JSX.Element | string,
   setExpanded: Function,
   expanded: Boolean,
   style?: React.CSSProperties,
-}> = ({ title, body, setExpanded, expanded, style }) => {
+  children: JSX.Element | JSX.Element[] | string,
+}> = ({ title, children, setExpanded, expanded, style }) => {
   return <div style={{ ...style, display: 'flex', flexDirection: 'column' }}>
     <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', whiteSpace: 'nowrap' }}>
       <div
@@ -31,6 +31,6 @@ export const Expandable: React.FunctionComponent<{
         onClick={() => setExpanded(!expanded)} />
       {title}
     </div>
-    { expanded && <div style={{ display: 'flex', flex: 'auto', margin: '5px 0 5px 20px' }}>{body}</div> }
+    { expanded && <div style={{ display: 'flex', flex: 'auto', margin: '5px 0 5px 20px' }}>{children}</div> }
   </div>;
 };

packages/web/src/components/index.ts

@@ -14,11 +14,16 @@
  * limitations under the License.
  */
 
+import { Expandable } from './expandable';
 import { Source } from './source';
+import { SplitView } from './splitView';
 import '../common.css';
+import '../third_party/vscode/codicon.css';
 
 import register from '@playwright/experimental-ct-react/register';
 
 register({
+  Expandable,
   Source,
+  SplitView,
 });

packages/web/src/components/splitView.spec.tsx

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Microsoft Corporation. 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.
+ */
+
+import React from 'react';
+import { expect, test } from '@playwright/experimental-ct-react/test';
+import { SplitView } from './splitView';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('should render', async ({ mount }) => {
+  const component = await mount(<SplitView sidebarSize={100}>
+    <div id='main' style={{ border: '1px solid red', flex: 'auto' }}>main</div>
+    <div id='sidebar' style={{ border: '1px solid blue', flex: 'auto' }}>sidebar</div>
+  </SplitView>);
+  const mainBox = await component.locator('#main').boundingBox();
+  const sidebarBox = await component.locator('#sidebar').boundingBox();
+  expect.soft(mainBox).toEqual({ x: 0, y: 0, width: 500, height: 400 });
+  expect.soft(sidebarBox).toEqual({ x: 0, y: 401, width: 500, height: 99 });
+});
+
+test('should render sidebar first', async ({ mount }) => {
+  const component = await mount(<SplitView sidebarSize={100} sidebarIsFirst={true}>
+    <div id='main' style={{ border: '1px solid blue', flex: 'auto' }}>main</div>
+    <div id='sidebar' style={{ border: '1px solid red', flex: 'auto' }}>sidebar</div>
+  </SplitView>);
+  const mainBox = await component.locator('#main').boundingBox();
+  const sidebarBox = await component.locator('#sidebar').boundingBox();
+  expect.soft(mainBox).toEqual({ x: 0, y: 100, width: 500, height: 400 });
+  expect.soft(sidebarBox).toEqual({ x: 0, y: 0, width: 500, height: 99 });
+});
+
+test('should render horizontal split', async ({ mount }) => {
+  const component = await mount(<SplitView sidebarSize={100} sidebarIsFirst={true} orientation={'horizontal'}>
+    <div id='main' style={{ border: '1px solid blue', flex: 'auto' }}>main</div>
+    <div id='sidebar' style={{ border: '1px solid red', flex: 'auto' }}>sidebar</div>
+  </SplitView>);
+  const mainBox = await component.locator('#main').boundingBox();
+  const sidebarBox = await component.locator('#sidebar').boundingBox();
+  expect.soft(mainBox).toEqual({ x: 100, y: 0, width: 400, height: 500 });
+  expect.soft(sidebarBox).toEqual({ x: 0, y: 0, width: 99, height: 500 });
+});
+
+test('should hide sidebar', async ({ mount }) => {
+  const component = await mount(<SplitView sidebarSize={100} orientation={'horizontal'} sidebarHidden={true}>
+    <div id='main' style={{ border: '1px solid blue', flex: 'auto' }}>main</div>
+    <div id='sidebar' style={{ border: '1px solid red', flex: 'auto' }}>sidebar</div>
+  </SplitView>);
+  const mainBox = await component.locator('#main').boundingBox();
+  expect.soft(mainBox).toEqual({ x: 0, y: 0, width: 500, height: 500 });
+});
+
+test('drag resize', async ({ page, mount }) => {
+  const component = await mount(<SplitView sidebarSize={100}>
+    <div id='main' style={{ border: '1px solid blue', flex: 'auto' }}>main</div>
+    <div id='sidebar' style={{ border: '1px solid red', flex: 'auto' }}>sidebar</div>
+  </SplitView>);
+  await page.mouse.move(25, 400);
+  await page.mouse.down();
+  await page.mouse.move(25, 100);
+  await page.mouse.up();
+  const mainBox = await component.locator('#main').boundingBox();
+  const sidebarBox = await component.locator('#sidebar').boundingBox();
+  expect.soft(mainBox).toEqual({ x: 0, y: 0, width: 500, height: 100 });
+  expect.soft(sidebarBox).toEqual({ x: 0, y: 101, width: 500, height: 399 });
+});