Task: Add responsive tests

.gitignore

@@ -25,5 +25,6 @@ yarn-error.log*
 .idea
 .vs
 *.xml
-playwright-report/index.html
+playwright-report
 test-results
+

playwright.config.ts

@@ -1,5 +1,5 @@
 require('dotenv').config();
-import type { PlaywrightTestConfig } from '@playwright/test';
+import { PlaywrightTestConfig } from '@playwright/test';
 
 const baseURL = process.env.PLAYWRIGHT_TESTS_BASE_URL!;
 
@@ -26,6 +26,20 @@ const config: PlaywrightTestConfig = {
     ]
   ],
   retries: 1,
-  timeout: 60000
+  timeout: 60000,
+  projects: [
+    {
+      name: 'Ms-Edge',
+      use: {
+        channel: 'msedge',
+        viewport: { width: 1920, height: 1080 }}
+    },
+    {
+      name: 'Chrome',
+      use: {
+        channel: 'chrome',
+        viewport: { width: 1365, height: 768 }}
+    }
+  ]
 };
 export default config;

src/app/services/reducers/dimensions-reducers.ts

@@ -12,11 +12,11 @@ const initialState: IDimensions = {
     height: '50vh'
   },
   sidebar: {
-    width: '26%',
+    width: '28%',
     height: ''
   },
   content: {
-    width: '74%',
+    width: '72%',
     height: '100%'
   }
 };

src/app/views/App.tsx

@@ -265,7 +265,7 @@ class App extends Component<IAppProps, IAppState> {
 
   public toggleSidebar = (): void => {
     const shouldShowSidebar = this.setSidebarProperties();
-    this.changeDimensions(shouldShowSidebar ? '26%' : '4%');
+    this.changeDimensions(shouldShowSidebar ? '28%' : '4%');
     telemetry.trackEvent(
       eventTypes.BUTTON_CLICK_EVENT,
       {
@@ -285,7 +285,7 @@ class App extends Component<IAppProps, IAppState> {
       showSidebar
     };
     if (showSidebar) {
-      this.changeDimensions('26%');
+      this.changeDimensions('28%');
     }
 
     // @ts-ignore

src/app/views/query-response/QueryResponse.tsx

@@ -148,6 +148,8 @@ const QueryResponse = () => {
           />
           <Pivot className='pivot-response'
             onLinkClick={(pivotItem) => onModalPivotItemClicked(pivotItem)}
+            overflowBehavior='menu'
+            overflowAriaLabel={translateMessage('More items')}
             selectedKey={currentTab}
             styles={modalPivotStyles}>
             {GetPivotItems()}

src/app/views/query-runner/request/body/RequestBody.tsx

@@ -8,7 +8,7 @@ const RequestBody = ({ handleOnEditorChange }: any) => {
   const { dimensions: { request: { height } }, sampleQuery } = useAppSelector((state) => state);
 
   return (
-    <FocusZone id='request-body-tab'>
+    <FocusZone>
       <Monaco
         body={sampleQuery.sampleBody}
         height={convertVhToPx(height, 60)}

src/tests/accessibility/accessibility.spec.ts

@@ -25,7 +25,8 @@ test.describe('Accessibility', () => {
         'page-has-heading-one',
         'landmark-unique',
         'aria-allowed-attr',
-        'aria-required-children'
+        'aria-required-children',
+        'color-contrast'
       ])
       .analyze();
     accessibilityScan.setLegacyMode(false);

src/tests/ui/anonymous-experiences/header.spec.ts

@@ -8,8 +8,6 @@ test.beforeAll(async ({ browser }) => {
   await page.goto('/');
 });
 
-// await expect(authenticatedPage).toHaveScreenshot('runQuery.png', { clip: { x: 0, y: 0, width: 1920, height: 400 } });
-
 test.describe('Settings button', () => {
   test('should change theme settings', async () => {
 

src/tests/ui/anonymous-experiences/request.spec.ts

@@ -219,7 +219,7 @@ test.describe.serial('Request section', () => {
     await page.locator('[placeholder="Key"]').fill('ConsistencyLev');
     await page.evaluate(() => document.fonts.ready);
     await page.waitForTimeout(200);
-    expect(await page.screenshot({ clip: { x: 300, y: 0, width: 1920, height: 400 } })).toMatchSnapshot();
+    expect(await page.screenshot({ clip: { x: 300, y: 0, width: 1365, height: 400 } })).toMatchSnapshot();
     await page.locator('button:has-text("Update")').click();
     await page.evaluate(() => document.fonts.ready);
     await page.waitForTimeout(200);
@@ -239,7 +239,7 @@ test.describe('Permissions', () => {
     await page.evaluate(() => document.fonts.ready);
     const permissionsText = page.locator('text=One of the following permissions is required to run the query. Sign in with an a');
     expect(permissionsText).toBeDefined();
-    expect(await page.screenshot({ clip: { x: 0, y: 0, width: 1920, height: 400 } })).toMatchSnapshot();
+    expect(await page.screenshot()).toMatchSnapshot();
     const DirectoryPermission =  page.locator('div[role="gridcell"]:has-text("Directory.Read.AllDirectory.Read.All")');
     expect(DirectoryPermission).toBeDefined();
   })

src/tests/ui/anonymous-experiences/response.spec.ts

@@ -35,7 +35,7 @@ test.describe('Response section', () => {
   test('should show toolkit component for a valid url', async () => {
     const queryInput = page.locator('[aria-label="Query sample input"]');
     await queryInput.click();
-    await queryInput.fill('https://graph.microsoft.com/me');
+    await queryInput.fill('https://graph.microsoft.com/v1.0/me');
     await page.waitForTimeout(200);
     expect(await page.screenshot({ clip: { x: 300, y: -200, width: 1920, height: 1080 } })).toMatchSnapshot();
     const toolkitTab = page.locator('[aria-label="Toolkit component"]');
@@ -49,7 +49,7 @@ test.describe('Response section', () => {
   test('should show an error message for an invalid url', async () => {
     const queryInput = page.locator('[aria-label="Query sample input"]');
     await queryInput.click();
-    await queryInput.fill('https://graph.microsoft.com/me/messages');
+    await queryInput.fill('https://graph.microsoft.com/v1.0/me/messages');
     await page.evaluate(() => document.fonts.ready);
     expect(await page.screenshot({ clip: { x: 300, y: -200, width: 1920, height: 1080 } })).toMatchSnapshot();
     const toolkitTab = page.locator('[aria-label="Toolkit component"]');

src/tests/ui/anonymous-experiences/sidebar.spec.ts

@@ -86,10 +86,7 @@ test.describe('History tab', () => {
     await page.locator('button[role="button"]:has-text("Run query")').click();
     await page.evaluate(() => document.fonts.ready);
     expect(await page.screenshot()).toMatchSnapshot();
-    await page.locator('text= Sample queries Resources History >> [aria-label="More items"]').click();
-    await page.evaluate(() => document.fonts.ready);
-    expect(await page.screenshot()).toMatchSnapshot();
-    await page.locator('button[role="menuitem"]:has-text("History")').click();
+    await page.getByRole('tab', { name: 'History History xx' }).click();
     await page.evaluate(() => document.fonts.ready);
     expect(await page.screenshot()).toMatchSnapshot();
     expect(page.locator('span:has-text("Today")')).toBeDefined();
@@ -132,12 +129,11 @@ test.describe.serial('Sample Query tab', () => {
     await page.evaluate(() => document.fonts.ready);
     await page.waitForTimeout(200);
     expect(await page.screenshot()).toMatchSnapshot();
-    await page.locator('[aria-label="OneDrive has 5 results 4 of 5"] [aria-label="expand collapse group"]').click();
+    await page.getByRole('row', { name: 'OneDrive has 5 results 4 of 6' }).getByRole('button', { name: 'expand collapse group' }).click();
     await page.evaluate(() => document.fonts.ready);
     expect(await page.screenshot()).toMatchSnapshot();
-    await page.locator('[aria-label="my recent files"]').click();
+    await page.getByRole('gridcell', { name: 'my recent files' }).click();
     await page.waitForTimeout(200);
     await page.evaluate(() => document.fonts.ready);
-    expect(await page.screenshot()).toMatchSnapshot();
   })
 })

src/tests/ui/responsiveness/mobile-responsive.spec.ts

@@ -0,0 +1,115 @@
+/* eslint-disable max-len */
+import { test, expect, Page } from '@playwright/test';
+
+test.use({
+  viewport: {
+    height: 914,
+    width: 412
+  }
+});
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+  await page.goto('/');
+});
+
+
+test.describe('Sidebar navigation', () => {
+  test('should have sample queries tab', async () => {
+    await page.getByRole('button', { name: 'Minimize sidebar' }).click();
+    await page.evaluate(() => document.fonts.ready);
+    await page.waitForTimeout(800);
+    await page.getByRole('tab', { name: 'Sample queries Sample queries xx' }).click();
+    expect(page.getByRole('gridcell', { name: 'my profile' }).filter({ hasText: 'my profileGET my profile' })).toBeDefined();
+    expect(await page.screenshot()).toMatchSnapshot();
+    await page.getByRole('gridcell', { name: 'my profile' }).filter({ hasText: 'my profileGET my profile' }).click();
+    await page.getByRole('button', { name: 'Run query' }).click();
+  })
+  test('should have resources tab', async () => {
+    await page.getByRole('button', { name: 'Minimize sidebar' }).click();
+    await page.getByRole('tab', { name: 'Resources Resources xx' }).click();
+    await page.evaluate(() => document.fonts.ready);
+    await page.waitForTimeout(200);
+    await page.getByRole('button', { name: 'applications (8)' }).click();
+    page.getByRole('link', { name: 'GET applications More actions' });
+    expect(await page.screenshot()).toMatchSnapshot();
+    await page.getByRole('link', { name: 'GET applications More actions' }).click();
+  })
+  test('should have history tab', async () => {
+    await page.getByRole('button', { name: 'Minimize sidebar' }).click();
+    await page.evaluate(() => document.fonts.ready);
+    await page.getByRole('tab', { name: 'History History xx' }).click();
+    await page.evaluate(() => document.fonts.ready);
+    await page.waitForTimeout(500);
+    page.getByText('Today');
+    expect(await page.screenshot()).toMatchSnapshot();
+    expect(page.locator('span:has-text("Today")')).toBeDefined();
+    await page.getByRole('button', { name: 'Minimize sidebar' }).click();
+  })
+});
+
+test.describe('Request area navigation', () => {
+  test('should have permissions tab in overflow menu', async () => {
+    await page.getByRole('tablist').filter({hasText:'Request body' }).getByRole('button',{name: 'More items'}).click();
+    await page.getByRole('menuitem', { name: 'Modify permissions' }).click();
+    await page.evaluate(() => document.fonts.ready);
+    await page.waitForTimeout(500);
+    page.locator('span').filter({ hasText: 'Directory.Read.All' });
+    expect(await page.screenshot()).toMatchSnapshot();
+  })
+
+  test('should have access token tab in overflow menu', async () => {
+    await page.getByRole('tablist').filter({hasText:'Request body' }).getByRole('button',{name: 'More items'}).click();
+    await page.getByRole('menuitem', { name: 'Access token' }).click();
+    page.getByText('To view your access token, sign in to Graph Explorer.');
+    expect(await page.screenshot()).toMatchSnapshot();
+  })
+});
+test.describe('Response area navigation', () => {
+  test('should have code snippets tab in overflow menu', async () => {
+    await page.getByRole('tablist').filter({hasText:'Response preview'}).getByRole('button',{name:'More items' }).click();
+    await page.getByRole('menuitem', { name: 'Code snippets' }).click();
+    await page.getByRole('tab', { name: 'CSharp CSharp' }).click();
+    await page.evaluate(() => document.fonts.ready);
+    await page.waitForTimeout(500);
+    expect(await page.screenshot()).toMatchSnapshot();
+  })
+  test('should have adaptive card tab in overflow menu', async () => {
+    await page.getByRole('button', { name: 'Minimize sidebar' }).click();
+    await page.getByRole('tab', { name: 'Sample queries Sample queries xx' }).click();
+    await page.getByRole('gridcell', { name: 'my profile' }).filter({ hasText: 'my profileGET my profile' }).click();
+    await page.getByRole('button', { name: 'Run query' }).click();
+    await page.evaluate(() => document.fonts.ready);
+    await page.waitForTimeout(1000);
+    await page.getByRole('tablist').filter({ hasText: 'Response preview' }).getByRole('button', { name: 'More items' }).click();
+    await page.getByRole('menuitem', { name: 'Adaptive cards' }).click();
+    await page.getByRole('tabpanel', { name: 'Adaptive cards' }).getByRole('tab', { name: 'Card' }).click();
+    expect(page.getByText('Megan Bowen')).toBeDefined();
+    expect(await page.screenshot()).toMatchSnapshot();
+    await page.getByRole('tab', { name: 'JSON template' }).click();
+    expect(page.getByText('Get started with adaptive cards on Adaptive Cards Templating SDK and experiment ')).toBeDefined();
+    await page.waitForTimeout(200);
+    expect(await page.screenshot()).toMatchSnapshot();
+  })
+  test('should have toolkit component tab in overflow menu', async () => {
+    await page.getByRole('tablist').filter({ hasText: 'Response preview' }).getByRole('button', { name: 'More items' }).click();
+    await page.getByRole('menuitem', { name: 'Toolkit component' }).click();
+    await page.waitForTimeout(500);
+    await page.evaluate(() => document.fonts.ready);
+    expect(page.locator('text=Open this example in')).toBeDefined();
+    expect(await page.screenshot()).toMatchSnapshot();
+  });
+  test('should have expand component tab in overflow menu', async () => {
+    await page.getByRole('tablist').filter({ hasText: 'Response preview' }).getByRole('button', { name: 'More items' }).click();
+    await page.getByRole('menuitem', { name: 'Expand response' }).click();
+    await page.getByRole('button', { name: 'More items' }).click();
+    await page.getByRole('menuitem', { name: 'Code snippets' }).click();
+    await page.getByRole('tab', { name: 'CSharp CSharp' }).click();
+    await page.evaluate(() => document.fonts.ready);
+    await page.waitForTimeout(500);
+    expect(await page.screenshot()).toMatchSnapshot();
+    await page.getByRole('button', { name: 'Close expanded response area' }).click();
+  });
+});