Test/187 make logo (#205)

* adding banner page and logo test

* restructure test files

air-quality-ui/system_tests/pages/banner.ts

@@ -0,0 +1,11 @@
+import { Locator, type Page } from '@playwright/test'
+
+export class Banner {
+  readonly page: Page
+  readonly logo: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.logo = page.getByAltText('vAirify')
+  }
+}

air-quality-ui/system_tests/ui/breadcrumb.spec.ts → air-quality-ui/system_tests/ui/city_page.spec.ts

@@ -1,5 +1,17 @@
 import { expect, test } from '../utils/fixtures'
 
+test('vAirify logo is visible', async ({ vairifyCityPage, banner }) => {
+  await vairifyCityPage.gotoRioCityPage()
+  await expect(banner.logo).toBeVisible()
+})
+
+test('AQI snapshot assertion', async ({ vairifyCityPage }) => {
+  await vairifyCityPage.setupCityPageGraph()
+  await expect(vairifyCityPage.textFinder('Rio de Janeiro')).toBeVisible()
+  const chartShot = await vairifyCityPage.captureChartScreenshot()
+  expect(chartShot).toMatchSnapshot('rio-aqi-graph.png')
+})
+
 test('Mocked response breadcrumb', async ({
   vairifySummaryPage,
   vairifyCityPage,

air-quality-ui/system_tests/ui/summary_page.spec.ts

@@ -3,6 +3,9 @@ import { expect, test } from '../utils/fixtures'
 test.beforeEach(async ({ vairifySummaryPage }) => {
   await vairifySummaryPage.setupPage()
 })
+test('vAirify logo is visible', async ({ banner }) => {
+  await expect(banner.logo).toBeVisible()
+})
 
 test('Verify page title is vAirify', async ({ vairifySummaryPage }) => {
   const title = await vairifySummaryPage.getTitle()

air-quality-ui/system_tests/utils/fixtures.ts

@@ -2,14 +2,19 @@ import { test as base } from '@playwright/test'
 
 import { apiForecastAqi } from './graph_aqi_mock'
 import { apiForecast, apiSummary } from './mocked_api'
-import { VairifyCityPage } from '../pages/vAirify_city_page'
-import { VairifySummaryPage } from '../pages/vAirify_summary_page'
+import { Banner } from '../pages/banner'
+import { VairifyCityPage } from '../pages/city_page'
+import { VairifySummaryPage } from '../pages/summary_page'
 
 type Fixtures = {
+  banner: Banner
   vairifySummaryPage: VairifySummaryPage
   vairifyCityPage: VairifyCityPage
 }
 const test = base.extend<Fixtures>({
+  banner: async ({ page }, use) => {
+    await use(new Banner(page))
+  },
   vairifySummaryPage: async ({ page }, use) => {
     await use(new VairifySummaryPage(page, apiForecast, apiSummary))
   },