task: Re-order snippet tabs (#2512)

microsoftgraph · Apr 17, 2023 · 5c93577 · 5c93577
1 parent 3544fa5
commit 5c93577
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 36 deletions.
diff --git a/src/app/views/query-response/snippets/Snippets.tsx b/src/app/views/query-response/snippets/Snippets.tsx
@@ -13,21 +13,21 @@ function GetSnippets() {
       sdkDownloadLink: 'https://aka.ms/csharpsdk',
       sdkDocLink: 'https://aka.ms/sdk-doc'
     },
-    'JavaScript': {
-      sdkDownloadLink: 'https://aka.ms/graphjssdk',
+    'PowerShell': {
+      sdkDownloadLink: 'https://aka.ms/pshellsdk',
+      sdkDocLink: 'https://aka.ms/pshellsdkdocs'
+    },
+    'Go': {
+      sdkDownloadLink: 'https://aka.ms/graphgosdk',
       sdkDocLink: 'https://aka.ms/sdk-doc'
     },
     'Java': {
       sdkDownloadLink: 'https://aka.ms/graphjavasdk',
       sdkDocLink: 'https://aka.ms/sdk-doc'
     },
-    'Go': {
-      sdkDownloadLink: 'https://aka.ms/graphgosdk',
+    'JavaScript': {
+      sdkDownloadLink: 'https://aka.ms/graphjssdk',
       sdkDocLink: 'https://aka.ms/sdk-doc'
-    },
-    'PowerShell': {
-      sdkDownloadLink: 'https://aka.ms/pshellsdk',
-      sdkDocLink: 'https://aka.ms/pshellsdkdocs'
     }
   };
 

diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx
@@ -28,20 +28,26 @@ interface ISupportedLanguages {
 }
 
 export function renderSnippets(supportedLanguages: ISupportedLanguages) {
-  return Object.keys(supportedLanguages).map((language: string) => (
-    <PivotItem
-      key={language}
-      headerText={language}
-      headerButtonProps={{
-        'aria-controls': `${language}-tab`
-      }}
-      itemKey={language}
-      tabIndex={0}
-      id={`${language}-tab`}
-    >
-      <Snippet language={language} snippetInfo={supportedLanguages} />
-    </PivotItem>
-  ));
+  const sortedSupportedLanguages: ISupportedLanguages = {};
+  Object.keys(supportedLanguages).sort().forEach(key => {
+    sortedSupportedLanguages[key] = supportedLanguages[key];
+  });
+
+  return Object.keys(sortedSupportedLanguages).
+    map((language: string) => (
+      <PivotItem
+        key={language}
+        headerText={language === 'CSharp' ? 'C#' : language}
+        headerButtonProps={{
+          'aria-controls': `${language}-tab`
+        }}
+        itemKey={language}
+        tabIndex={0}
+        id={`${language}-tab`}
+      >
+        <Snippet language={language} snippetInfo={supportedLanguages} />
+      </PivotItem>
+    ));
 }
 
 function Snippet(props: ISnippetProps) {

diff --git a/src/tests/ui/anonymous-experiences/response.spec.ts b/src/tests/ui/anonymous-experiences/response.spec.ts
@@ -8,6 +8,11 @@ test.beforeAll(async ({ browser }) => {
   await page.goto('/');
 });
 
+const waitForFonts = async (): Promise<void> => {
+  await page.waitForTimeout(200);
+  await page.evaluate(() => document.fonts.ready);
+};
+
 test.describe('Response section', () => {
   test('should show a response for a successful request', async () => {
     await page.locator('button[role="button"]:has-text("Run query")').click();
@@ -24,12 +29,20 @@ test.describe('Response section', () => {
     await queryInput.press('Tab');
     const snippetTab = page.locator('[aria-label="Code snippets"]');
     await snippetTab.click();
-    const cSharpTab = page.locator('button[role="tab"]:has-text("CSharp")');
-    await cSharpTab.click();
-    await page.locator('button[role="tab"]:has-text("JavaScript")').click();
-    await page.locator('button[name="Java"]').click();
-    await page.locator('button[role="tab"]:has-text("Go")').click();
-    await page.locator('button[role="tab"]:has-text("PowerShell")').click();
+    await waitForFonts();
+    expect(page.getByText('graphClient.Me.Messages.GetAsync();')).toBeDefined();
+    await page.getByRole('tab', { name: 'Go Go' }).click();
+    await waitForFonts();
+    expect(page.getByText('result, err := graphClient.Me().Messages().Get(con')).toBeDefined();
+    await page.getByRole('tab', { name: 'Java Java' }).click();
+    await waitForFonts();
+    expect(page.getByText('MessageCollectionPage messages = graphClient.me().')).toBeDefined();
+    await page.getByRole('tab', { name: 'JavaScript JavaScript' }).click();
+    await waitForFonts();
+    expect(page.getByText('\'/me/messages\'')).toBeDefined();
+    await page.getByRole('tab', { name: 'PowerShell PowerShell' }).click();
+    await waitForFonts();
+    expect(page.getByText('Get-MgUserMessage -UserId')).toBeDefined();
   });
 
   test('should show toolkit component for a valid url', async () => {
@@ -40,8 +53,7 @@ test.describe('Response section', () => {
     expect(await page.screenshot({ clip: { x: 300, y: -200, width: 1920, height: 1080 } })).toMatchSnapshot();
     const toolkitTab = page.locator('[aria-label="Toolkit component"]');
     await toolkitTab.click();
-    await page.waitForTimeout(200);
-    await page.evaluate(() => document.fonts.ready);
+    await waitForFonts();
     expect(await page.screenshot({ clip: { x: 300, y: -200, width: 1920, height: 1080 } })).toMatchSnapshot();
     expect(page.locator('text=Open this example in')).toBeDefined();
   });
@@ -54,24 +66,21 @@ test.describe('Response section', () => {
     expect(await page.screenshot({ clip: { x: 300, y: -200, width: 1920, height: 1080 } })).toMatchSnapshot();
     const toolkitTab = page.locator('[aria-label="Toolkit component"]');
     await toolkitTab.click();
-    await page.waitForTimeout(200);
-    await page.evaluate(() => document.fonts.ready);
+    await waitForFonts();
     expect(await page.screenshot({ clip: { x: 300, y: -200, width: 1920, height: 1080 } })).toMatchSnapshot();
     expect(page.locator('text=No toolkit component is available')).toBeDefined();
   })
 
   test('should open an expanded modal with response tabs when Expand is clicked', async () => {
     await page.locator('[aria-label="Expand response"]').click();
-    await page.waitForTimeout(200);
-    await page.evaluate(() => document.fonts.ready);
+    await waitForFonts();
     expect(await page.screenshot()).toMatchSnapshot();
     await page.locator('text= Response preview Response headers Code snippets Toolkit component Adaptiv >> [aria-label="Response headers"]').click();
     await page.locator('text= Response preview Response headers Code snippets Toolkit component Adaptiv >> [aria-label="Code snippets"]').click();
     await page.locator('text= Response preview Response headers Code snippets Toolkit component Adaptiv >> [aria-label="Toolkit component"]').click();
     await page.locator('text= Response preview Response headers Code snippets Toolkit component Adaptiv >> [aria-label="Adaptive cards"]').click();
     await page.locator('[aria-label="Close expanded response area"]').click();
-    await page.waitForTimeout(200);
-    await page.evaluate(() => document.fonts.ready);
+    await waitForFonts();
     expect(await page.screenshot()).toMatchSnapshot();
   })
 })