diff --git a/src/app/views/query-response/snippets/Snippets.tsx b/src/app/views/query-response/snippets/Snippets.tsx index 2ddcf194b..50031558d 100644 --- 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 index 8eac86854..1fc8a1180 100644 --- 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) => ( - - - - )); + const sortedSupportedLanguages: ISupportedLanguages = {}; + Object.keys(supportedLanguages).sort().forEach(key => { + sortedSupportedLanguages[key] = supportedLanguages[key]; + }); + + return Object.keys(sortedSupportedLanguages). + map((language: string) => ( + + + + )); } function Snippet(props: ISnippetProps) { diff --git a/src/tests/ui/anonymous-experiences/response.spec.ts b/src/tests/ui/anonymous-experiences/response.spec.ts index 577f126e2..882238670 100644 --- 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 => { + 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(); }) }) \ No newline at end of file