feat(web): Improve web e2e tests and move them to their directory

apps/web/README.md

@@ -90,6 +90,24 @@ yarn nx extract-strings web
 
 Currently, in this project, only the `Custom Page` content type utilizes the `Translation Namespace` content type for translations
 
+## E2E Testing
+
+### Quick Start
+
+To run the E2E tests for the `web` app:
+
+```bash
+# Install dependencies
+yarn install && yarn codegen
+
+# Start the server
+yarn nx e2e web
+```
+
+### More Resources
+
+For further details, refer to the [E2E Testing Library README](../../libs/testing/e2e/README.md).
+
 ## Further Documentation
 
 [Subpages](./docs/subpages.md) - Information on Layouts and Components used when

apps/web/e2e/homepage.spec.ts

@@ -0,0 +1,214 @@
+import {
+  type BrowserContext,
+  createPageAndNavigate,
+  expect,
+  session,
+  test,
+  urls,
+} from '@island.is/testing/e2e'
+
+test.use({ baseURL: urls.islandisBaseUrl })
+
+test.describe('Front page', { tag: '@fast' }, () => {
+  let context: BrowserContext
+
+  test.beforeAll(async ({ browser }) => {
+    context = await session({
+      browser: browser,
+      storageState: 'homepage.json',
+      homeUrl: `${urls.islandisBaseUrl}/`,
+      phoneNumber: '0103019',
+      idsLoginOn: false,
+    })
+  })
+
+  test.afterAll(async () => {
+    await context.close()
+  })
+
+  test('has expected sections @lang:is', async () => {
+    const page = await createPageAndNavigate(context, '/')
+    await expect(
+      page.locator('text=Öll opinber þjónusta á einum stað'),
+    ).toBeVisible()
+    await expect(page.locator('data-testid=home-banner')).toBeVisible()
+    await expect(page.locator('data-testid=home-heading')).toBeVisible()
+    await expect(page.locator('data-testid=home-news')).toBeVisible()
+  })
+
+  test(`should have life event @lang:is`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/')
+    const lifeEventsCards = page.locator('[data-testid="lifeevent-card"]')
+    await expect(lifeEventsCards.count()).resolves.toBeGreaterThan(3)
+    const lifeEventHandles = await lifeEventsCards.elementHandles()
+    const lifeEventUrls = await Promise.all(
+      lifeEventHandles.map((item) => item.getAttribute('href')),
+    )
+    const lifeEventPage = await context.newPage()
+    for (const url of lifeEventUrls) {
+      if (url) {
+        const result = await lifeEventPage.goto(url ?? '')
+        await expect(
+          lifeEventPage.getByRole('link', { name: 'island.is logo' }),
+        ).toBeVisible()
+        expect(result?.status()).toBe(200)
+      }
+    }
+    await lifeEventPage.close()
+  })
+
+  test(`should have life event @lang:en`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/en')
+    const lifeEventsCards = page.locator('[data-testid="lifeevent-card"]')
+    await expect(lifeEventsCards.count()).resolves.toBeGreaterThan(3)
+    const lifeEventHandles = await lifeEventsCards.elementHandles()
+    const lifeEventUrls = await Promise.all(
+      lifeEventHandles.map((item) => item.getAttribute('href')),
+    )
+    const lifeEventPage = await context.newPage()
+    for (const url of lifeEventUrls) {
+      if (url) {
+        const result = await lifeEventPage.goto(url ?? '')
+        await expect(
+          lifeEventPage.getByRole('link', { name: 'island.is logo' }),
+        ).toBeVisible()
+        expect(result?.status()).toBe(200)
+      }
+    }
+    await lifeEventPage.close()
+  })
+
+  test(`should navigate to featured link @lang:is`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/')
+    const featuredLinks = page.locator('[data-testid="featured-link"]')
+    await expect(featuredLinks.count()).resolves.toBeGreaterThan(3)
+    const featuredLinksHandles = await featuredLinks.elementHandles()
+    const featuresLinksUrls = await Promise.all(
+      featuredLinksHandles.map((item) => item.getAttribute('href')),
+    )
+    const featuredPage = await context.newPage()
+    for (const url of featuresLinksUrls) {
+      if (url) {
+        const result = await featuredPage.goto(url)
+        await expect(
+          featuredPage.getByRole('link', { name: 'island.is logo' }),
+        ).toBeVisible()
+        if (result) {
+          expect(result.status()).toBe(200)
+        }
+      }
+    }
+    await featuredPage.close()
+  })
+
+  test(`should navigate to featured link @lang:en`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/en')
+    const featuredLinks = page.locator('[data-testid="featured-link"]')
+    await expect(featuredLinks.count()).resolves.toBeGreaterThan(3)
+    const featuredLinksHandles = await featuredLinks.elementHandles()
+    const featuresLinksUrls = await Promise.all(
+      featuredLinksHandles.map((item) => item.getAttribute('href')),
+    )
+    const featuredPage = await context.newPage()
+    for (const url of featuresLinksUrls) {
+      if (url) {
+        const result = await featuredPage.goto(url)
+        await expect(
+          featuredPage.getByRole('link', { name: 'island.is logo' }),
+        ).toBeVisible()
+        if (result) {
+          expect(result.status()).toBe(200)
+        }
+      }
+    }
+    await featuredPage.close()
+  })
+
+  test(`should have link on life events pages to navigate back to the main page @lang:is`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/')
+    const lifeEventsCards = page.locator('[data-testid="lifeevent-card"]')
+    const lifeEventHandles = await lifeEventsCards.elementHandles()
+    const lifeEventUrls = await Promise.all(
+      lifeEventHandles.map((item) => item.getAttribute('href')),
+    )
+    const lifeEventPage = await context.newPage()
+    for (const url of lifeEventUrls) {
+      if (url) {
+        await lifeEventPage.goto(url)
+        await lifeEventPage.locator('[data-testid="link-back-home"]').click()
+        await expect(
+          lifeEventPage.locator('data-testid=home-heading'),
+        ).toBeVisible()
+        await expect(lifeEventPage).toHaveURL('/')
+      }
+    }
+    await lifeEventPage.close()
+  })
+
+  test(`should have link on life events pages to navigate back to the main page @lang:en`, async () => {
+    test.slow()
+    const page = await createPageAndNavigate(context, '/en')
+    const lifeEventsCards = page.locator('[data-testid="lifeevent-card"]')
+    const lifeEventHandles = await lifeEventsCards.elementHandles()
+    const lifeEventUrls = await Promise.all(
+      lifeEventHandles.map((item) => item.getAttribute('href')),
+    )
+    const lifeEventPage = await context.newPage()
+    for (const url of lifeEventUrls) {
+      if (url) {
+        await lifeEventPage.goto(url)
+        await lifeEventPage.locator('[data-testid="link-back-home"]').click()
+        await lifeEventPage.locator('[data-testid="link-back-home"]').click()
+        await expect(
+          lifeEventPage.locator('data-testid=home-heading'),
+        ).toBeVisible()
+        await expect(lifeEventPage).toHaveURL('/en')
+      }
+    }
+    await lifeEventPage.close()
+  })
+
+  test('should change welcome message on language toggle @lang:is', async () => {
+    const page = await createPageAndNavigate(context, '/')
+    const homeHeading = page.locator('h1[data-testid="home-heading"]')
+    const icelandicHeading = await homeHeading.textContent()
+    await page.locator('button[data-testid="language-toggler"]:visible').click()
+    if (icelandicHeading) {
+      await expect(homeHeading).not.toHaveText(icelandicHeading)
+    }
+    await expect(page).toHaveURL('/en')
+  })
+
+  test('should toggle mega-menu @lang:is', async () => {
+    const page = await createPageAndNavigate(context, '/')
+    await page
+      .locator('[data-testid="frontpage-burger-button"]:nth-child(2)')
+      .click()
+    await expect(
+      page.locator('[data-testid="mega-menu-link"] > a').count(),
+    ).resolves.toBeGreaterThan(18)
+  })
+
+  test('burger menu should open and close', async () => {
+    const page = await createPageAndNavigate(context, '/')
+    await page.getByRole('button', { name: 'Valmynd' }).click()
+
+    await expect(page.getByRole('dialog', { name: 'Menu' })).toBeVisible()
+    await expect(page.getByText('Þjónustuflokkar')).toBeVisible()
+    await expect(page.getByRole('dialog', { name: 'Menu' })).toBeVisible()
+    // Heading is "visible" behind menu
+    // await expect(page.getByTestId('home-heading')).not.toBeVisible()
+    await page
+      .getByRole('dialog', { name: 'Menu' })
+      .getByRole('button')
+      .getByTestId('icon-close')
+      .click()
+    await expect(page.getByTestId('home-heading')).toBeVisible()
+    await expect(page.getByRole('dialog', { name: 'Menu' })).not.toBeVisible()
+  })
+})

apps/web/e2e/search.spec.ts

@@ -0,0 +1,57 @@
+import {
+  type BrowserContext,
+  expect,
+  session,
+  test,
+  urls,
+} from '@island.is/testing/e2e'
+
+test.use({ baseURL: urls.islandisBaseUrl })
+
+test.describe('Search feature', { tag: '@fast' }, () => {
+  let context: BrowserContext
+  test.beforeAll(async ({ browser }) => {
+    context = await session({
+      browser: browser,
+      storageState: 'homepage.json',
+      homeUrl: `${urls.islandisBaseUrl}/`,
+      phoneNumber: '0103019',
+      idsLoginOn: false,
+    })
+  })
+  test.afterAll(async () => {
+    await context.close()
+  })
+
+  test('should display search results and navigate to result page', async () => {
+    const testPhrase = 'umsókn'
+    const page = await context.newPage()
+    await page.goto('/', { waitUntil: 'networkidle' })
+    await page
+      .getByRole('textbox', { name: 'Leitaðu á Ísland.is' })
+      .fill(testPhrase)
+    await page.keyboard.press('Enter')
+    const testResults = page.locator('[data-testid="search-result"]')
+    await expect(testResults.count()).resolves.toBeGreaterThan(9)
+    const searchUrl = page.url()
+    await testResults.nth(0).click()
+    await page.waitForLoadState('networkidle')
+    await expect(page).not.toHaveURL(searchUrl)
+  })
+
+  test('should have no search results for long bogus search words', async () => {
+    const page = await context.newPage()
+    await page.goto('/', { waitUntil: 'networkidle' })
+    await page
+      .getByRole('textbox', { name: 'Leitaðu á Ísland.is' })
+      .fill('abcdefhijklmnopqrstuvwxyz1234567890')
+    await page.keyboard.press('Enter')
+    await page.waitForLoadState('networkidle')
+    const testResults = page.locator('[data-testid="search-result"]')
+    await expect(testResults).toHaveCount(0)
+  })
+
+  test.skip('should search in English', async () => {
+    return
+  })
+})

apps/web/e2e/sites-of-institutions.spec.ts

@@ -0,0 +1,87 @@
+import slugify from 'slugify'
+
+import {
+  type BrowserContext,
+  expect,
+  type Page,
+  session,
+  test,
+} from '@island.is/testing/e2e'
+
+type GetByRole = Pick<Page, 'getByRole'>['getByRole']
+type GetByRoleParameters = Parameters<GetByRole>
+
+type Orgs = {
+  organisationName: string
+  organisationHome?: string
+  skip?: boolean
+  target?: { role: GetByRoleParameters[0]; options?: GetByRoleParameters[1] }
+}
+const orgs: Orgs[] = [
+  { organisationName: 'Opinberir aðilar', organisationHome: '/' },
+  { organisationName: 'Fiskistofa' },
+  {
+    organisationName: 'Heilbrigðisstofnun Norðurlands',
+    organisationHome: '/hsn',
+  },
+  { organisationName: 'Sjúkratryggingar', target: { role: 'link' } },
+  { organisationName: 'Ríkislögmaður' },
+  { organisationName: 'Landskjörstjórn', target: { role: 'link' } },
+  { organisationName: 'Opinber nýsköpun', skip: true },
+  { organisationName: 'Sýslumenn' },
+  { organisationName: 'Fjársýslan' },
+  {
+    organisationName: 'Heilbrigðisstofnun Suðurlands',
+    organisationHome: '/hsu',
+  },
+  {
+    organisationName: 'Landlæknir',
+    target: { role: 'link', options: { name: 'Eyðublöð' } },
+  },
+  { organisationName: 'Útlendingastofnun', target: { role: 'link' } },
+]
+
+test.describe('Sites of institutions', { tag: '@fast' }, () => {
+  let context: BrowserContext
+  test.beforeAll(async ({ browser }) => {
+    context = await session({
+      browser,
+      idsLoginOn: false,
+      homeUrl: '/s',
+    })
+  })
+  test.afterAll(async () => {
+    await context.close()
+  })
+  orgs.forEach(
+    ({
+      organisationName,
+      organisationHome = `/${slugify(organisationName, { lower: true })}`,
+      target,
+      skip,
+    }) => {
+      test(organisationName, async () => {
+        if (skip) return
+        const page = await context.newPage()
+        const url = `/s${organisationHome}`
+
+        const response = await page.goto(url, { timeout: 30000 })
+        expect(response?.ok()).toBe(true)
+
+        // Verify we landed on the correct URL
+        expect(page.url()).toContain(url)
+
+        await expect(
+          page
+            .getByRole(target?.role ?? 'heading', {
+              ...{ name: organisationName },
+              ...target?.options,
+            })
+            .first(),
+        ).toBeVisible()
+
+        await page.close()
+      })
+    },
+  )
+})

apps/web/infra/web.ts

@@ -7,7 +7,7 @@ export const serviceSetup = (services: {
   web
     .namespace('islandis')
     .env({
-      API_URL: ref((h) => `http://${h.svc(services.api)}`),
+      GRAPHQL_API_URL: ref((h) => `http://${h.svc(services.api)}`),
       TRACKING_DOMAIN: {
         dev: 'beta.dev01.devland.is',
         staging: 'beta.staging01.devland.is',