Add test for registering impressions

Author: mashalifshin

.github/workflows/playwright.yml

@@ -1,9 +1,9 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main ]
+    branches: [ main, majc-61-view-testing ]
   pull_request:
-    branches: [ main ]
+    branches: [ main, majc-61-view-testing ]
 jobs:
   test:
     timeout-minutes: 20

dist/chunk-MFJKCNX2.js dist/chunk-MTC7CY2D.jsdist/chunk-MFJKCNX2.js renamed to dist/chunk-MTC7CY2D.js

@@ -1 +1 @@
-import{A,B,C,D,E,F,G,H,I,J,K,L,M,N,a as o,b as r,c as e,d as f,e as m,f as p,g as t,h as x,i as a,j as b,k as c,l as d,m as g,n as h,o as i,p as j,q as k,r as l,s as n,t as q,u as s,v as u,w as v,x as w,y,z}from"./chunk-3CV7W4JN.mjs";import"./chunk-57T3EAOB.mjs";export{d as AdUnitFormatImpressionThreshold,b as AdUnitFormatTypeLookup,u as CLOSE_ICON_SVG,e as DEFAULT_SERVICE_ENDPOINT,g as DefaultImpressionThreshold,i as DefaultLogReporter,l as DefaultLogger,n as DefaultMozAdsImpressionObserver,z as FALLBACK_BILLBOARD_SVG,w as FALLBACK_DINO_SVG_FRAGMENT,y as FALLBACK_DONATE_SVG_FRAGMENT,B as FALLBACK_MRECTANGLE_SVG,A as FALLBACK_SKYSCRAPER_SVG,c as FallbackAdURL,K as FetchAdsError,a as FixedSize,t as IABFixedSize,f as INSTRUMENT_ENDPOINT,o as IS_BROWSER,r as IS_PRODUCTION,p as LOG_EMIT_FLAG_DEFAULT,m as LOG_TO_CONSOLE_FLAG_DEFAULT,k as LoggerLevel,x as NonIABFixedSize,v as REPORT_ICON_SVG,h as SeverityLevel,F as StoreType,M as buildPlacementsRequest,q as defaultImpressionObserver,j as defaultLogReporter,L as fetchAds,G as getItemFromStore,J as getOrGenerateContextId,C as l,N as mapResponseToPlacementsWithContent,D as preloadImage,s as recordClick,I as removeItemFromStore,E as renderPlacement,H as setItemInStore};
+import{A,B,C,D,E,F,G,H,I,J,K,L,M,N,a as o,b as r,c as e,d as f,e as m,f as p,g as t,h as x,i as a,j as b,k as c,l as d,m as g,n as h,o as i,p as j,q as k,r as l,s as n,t as q,u as s,v as u,w as v,x as w,y,z}from"./chunk-X23QSPGH.mjs";import"./chunk-57T3EAOB.mjs";export{d as AdUnitFormatImpressionThreshold,b as AdUnitFormatTypeLookup,u as CLOSE_ICON_SVG,e as DEFAULT_SERVICE_ENDPOINT,g as DefaultImpressionThreshold,i as DefaultLogReporter,l as DefaultLogger,n as DefaultMozAdsImpressionObserver,z as FALLBACK_BILLBOARD_SVG,w as FALLBACK_DINO_SVG_FRAGMENT,y as FALLBACK_DONATE_SVG_FRAGMENT,B as FALLBACK_MRECTANGLE_SVG,A as FALLBACK_SKYSCRAPER_SVG,c as FallbackAdURL,K as FetchAdsError,a as FixedSize,t as IABFixedSize,f as INSTRUMENT_ENDPOINT,o as IS_BROWSER,r as IS_PRODUCTION,p as LOG_EMIT_FLAG_DEFAULT,m as LOG_TO_CONSOLE_FLAG_DEFAULT,k as LoggerLevel,x as NonIABFixedSize,v as REPORT_ICON_SVG,h as SeverityLevel,F as StoreType,M as buildPlacementsRequest,q as defaultImpressionObserver,j as defaultLogReporter,L as fetchAds,G as getItemFromStore,J as getOrGenerateContextId,C as l,N as mapResponseToPlacementsWithContent,D as preloadImage,s as recordClick,I as removeItemFromStore,E as renderPlacement,H as setItemInStore};

dist/chunk-3CV7W4JN.mjs dist/chunk-X23QSPGH.mjsdist/chunk-3CV7W4JN.mjs renamed to dist/chunk-X23QSPGH.mjs

@@ -1 +1 @@
-"use client";import{E as h,L as A,r as m,t as P,u as g}from"./chunk-3CV7W4JN.mjs";import"./chunk-57T3EAOB.mjs";import{useLayoutEffect as x,useRef as b}from"react";import{createContext as v,useContext as y,useEffect as w,useState as L}from"react";var M;try{M=new m({name:"react.hooks.useMozAdsPlacement"})}catch(e){console.debug(`DefaultLogger for react.hooks.useMozAdsPlacement could not be instantiated: ${e}`)}var f=class{placements={};async getPlacementWithContent(t){let o=this.placements[t.placementId];if(o)return o;try{let r=await A({placements:{[t.placementId]:t}});this.placements={...this.placements,...r}}catch(r){return M?.error(`Unable to fetch ads; ${r.message}`,{type:"placementComponent.adLoad.failure",eventLabel:"ad_load_error",errorId:r?.name}),t.onError?.({error:r}),t}return this.placements[t.placementId]}},R=v(new f),z=({placementId:e,iabContent:t,fixedSize:o,onError:r})=>{let[l,s]=L({placementId:e,iabContent:t,fixedSize:o}),d=y(R),c=async()=>{s(await d.getPlacementWithContent({placementId:e,iabContent:t,fixedSize:o,onError:r}))};return w(()=>{c()},[e]),l};import{jsx as C}from"react/jsx-runtime";var E;try{E=new m({name:"react.components.MozAdsPlacement"})}catch(e){console.debug(`DefaultLogger for react.components.MozAdsPlacement could not be instantiated: ${e}`)}function q({placementId:e,iabContent:t,fixedSize:o,onClick:r,onReport:l,onError:s,onLoad:d}){let{width:c,height:u}=o||{},p={width:c&&`${c}px`,height:u&&`${u}px`};try{let n=z({placementId:e,iabContent:t,fixedSize:o,onError:s}),i=b(null);return x(()=>{i.current&&h(i.current,{placement:n,onClick:a=>{g(n),r?.(a)},onReport:a=>{l?.(a)},onError:a=>{s?.(a)},onLoad:a=>{P.observe(n),d?.(a)}})},[n]),C("div",{ref:i,style:p})}catch(n){try{E?.error(`An unexpected error has occured when rendering ${e}: ${n?.message}`,{type:"placementComponent.render.error",eventLabel:"render_error",placementId:e,errorId:n?.name}),s?.({error:n})}catch{}return C("div",{style:p})}}export{q as MozAdsPlacement,f as MozAdsPlacementContextState,R as mozAdsPlacementContext,z as useMozAdsPlacement};
+"use client";import{E as h,L as A,r as m,t as P,u as g}from"./chunk-X23QSPGH.mjs";import"./chunk-57T3EAOB.mjs";import{useLayoutEffect as x,useRef as b}from"react";import{createContext as v,useContext as y,useEffect as w,useState as L}from"react";var M;try{M=new m({name:"react.hooks.useMozAdsPlacement"})}catch(e){console.debug(`DefaultLogger for react.hooks.useMozAdsPlacement could not be instantiated: ${e}`)}var f=class{placements={};async getPlacementWithContent(t){let o=this.placements[t.placementId];if(o)return o;try{let r=await A({placements:{[t.placementId]:t}});this.placements={...this.placements,...r}}catch(r){return M?.error(`Unable to fetch ads; ${r.message}`,{type:"placementComponent.adLoad.failure",eventLabel:"ad_load_error",errorId:r?.name}),t.onError?.({error:r}),t}return this.placements[t.placementId]}},R=v(new f),z=({placementId:e,iabContent:t,fixedSize:o,onError:r})=>{let[l,s]=L({placementId:e,iabContent:t,fixedSize:o}),d=y(R),c=async()=>{s(await d.getPlacementWithContent({placementId:e,iabContent:t,fixedSize:o,onError:r}))};return w(()=>{c()},[e]),l};import{jsx as C}from"react/jsx-runtime";var E;try{E=new m({name:"react.components.MozAdsPlacement"})}catch(e){console.debug(`DefaultLogger for react.components.MozAdsPlacement could not be instantiated: ${e}`)}function q({placementId:e,iabContent:t,fixedSize:o,onClick:r,onReport:l,onError:s,onLoad:d}){let{width:c,height:u}=o||{},p={width:c&&`${c}px`,height:u&&`${u}px`};try{let n=z({placementId:e,iabContent:t,fixedSize:o,onError:s}),i=b(null);return x(()=>{i.current&&h(i.current,{placement:n,onClick:a=>{g(n),r?.(a)},onReport:a=>{l?.(a)},onError:a=>{s?.(a)},onLoad:a=>{P.observe(n),d?.(a)}})},[n]),C("div",{ref:i,style:p})}catch(n){try{E?.error(`An unexpected error has occured when rendering ${e}: ${n?.message}`,{type:"placementComponent.render.error",eventLabel:"render_error",placementId:e,errorId:n?.name}),s?.({error:n})}catch{}return C("div",{style:p})}}export{q as MozAdsPlacement,f as MozAdsPlacementContextState,R as mozAdsPlacementContext,z as useMozAdsPlacement};

dist/core.js

@@ -7,6 +7,9 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('Tiles', { tag: '@Desktop' }, () => {
   test('should show the ad image', async ({ page }) => {
+    await page.goto('http://127.0.0.1:8080/examples/iife/')
+    await expect(page).toHaveTitle(/powered by MAJC/)
+
     const tileImage = page.getByAltText('Mozilla Ad')
     await expect(tileImage).toBeVisible()
     await expect(tileImage).toHaveAttribute('src', new RegExp('^https://ads-img.allizom.org/'))
@@ -21,13 +24,25 @@ test.describe('Tiles', { tag: '@Desktop' }, () => {
     await expect(tileContainer).toHaveAttribute('data-placement-id', 'newtab_tile_1')
   })
 
-  // test('should register an impression', async ({ page }) => { })
-
-  test('should register a click and navigate to the landing page', async ({ page }) => {
+  test('should register the impression', async ({ page }) => {
+    page.on('request', (request) => {
+      expect(request.url().startsWith('https://ads.allizom.org/v1/t?data=')).toBeTruthy()
+      expect(request.method()).toEqual('GET')
+    })
+    page.on('response', (response) => {
+      expect(response).toBeDefined()
+      expect(response?.ok()).toBeTruthy()
+    })
   })
 
-  test('should allow me to report an ad', async ({ page }) => {
-  })
+  // test('should register a click and navigate to the landing page', async ({ page }) => {
+  // })
+
+  // test('should allow me to report an ad', async ({ page }) => {
+  // })
+
+  // test('should show a hardcoded fallback ad if the request fails', async ({ page }) => {
+  // })
 })
 
 test.describe('Billboard', { tag: '@Desktop' }, () => {

dist/core.mjs

@@ -20,6 +20,7 @@ export default {
     '<rootDir>/jest.setup.ts',
   ],
   testEnvironment: 'jsdom',
+  testPathIgnorePatterns: ['examples/tests'],
   transform: {
     '^.+.(ts|tsx)?$': ['ts-jest', {}],
   },