From 900dff7a1f0edbe6c899eac4bec8ecf0cf73995a Mon Sep 17 00:00:00 2001 From: Simon Knott Date: Wed, 5 Feb 2025 09:31:50 +0100 Subject: [PATCH] update tests --- packages/playwright-core/types/types.d.ts | 30 ++ tests/assets/to-do-notifications/README.md | 1 + tests/assets/to-do-notifications/index.html | 108 ++++++ .../to-do-notifications/manifest.webapp | 18 + .../to-do-notifications/scripts/todo.js | 354 ++++++++++++++++++ .../to-do-notifications/style/style.css | 248 ++++++++++++ .../browsercontext-storage-state.spec.ts | 62 +-- 7 files changed, 763 insertions(+), 58 deletions(-) create mode 100644 tests/assets/to-do-notifications/README.md create mode 100644 tests/assets/to-do-notifications/index.html create mode 100644 tests/assets/to-do-notifications/manifest.webapp create mode 100644 tests/assets/to-do-notifications/scripts/todo.js create mode 100644 tests/assets/to-do-notifications/style/style.css diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts index 2b0b292497..7f50390c35 100644 --- a/packages/playwright-core/types/types.d.ts +++ b/packages/playwright-core/types/types.d.ts @@ -10096,9 +10096,18 @@ export interface Browser { value: string; }>; + /** + * indexedDB to set for context + */ indexedDB?: Array<{ + /** + * database name + */ name: string; + /** + * database version + */ version: number; stores: Array<{ @@ -10123,8 +10132,14 @@ export interface Browser { }>; records: Array<{ + /** + * key, only defined if stores uses out-of-line keys + */ key?: string; + /** + * opaque value + */ value: string; }>; }>; @@ -22297,9 +22312,18 @@ export interface BrowserContextOptions { value: string; }>; + /** + * indexedDB to set for context + */ indexedDB?: Array<{ + /** + * database name + */ name: string; + /** + * database version + */ version: number; stores: Array<{ @@ -22324,8 +22348,14 @@ export interface BrowserContextOptions { }>; records: Array<{ + /** + * key, only defined if stores uses out-of-line keys + */ key?: string; + /** + * opaque value + */ value: string; }>; }>; diff --git a/tests/assets/to-do-notifications/README.md b/tests/assets/to-do-notifications/README.md new file mode 100644 index 0000000000..5bd8b1d38c --- /dev/null +++ b/tests/assets/to-do-notifications/README.md @@ -0,0 +1 @@ +Source: https://github.com/mdn/dom-examples/tree/main/to-do-notifications diff --git a/tests/assets/to-do-notifications/index.html b/tests/assets/to-do-notifications/index.html new file mode 100644 index 0000000000..e9cd52c7b8 --- /dev/null +++ b/tests/assets/to-do-notifications/index.html @@ -0,0 +1,108 @@ + + + + + + + To-do list with Notifications + + + + +

To-do list

+ +
+ + + +
+ +
+

Add new to-do item.

+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ + + +
+ + + \ No newline at end of file diff --git a/tests/assets/to-do-notifications/manifest.webapp b/tests/assets/to-do-notifications/manifest.webapp new file mode 100644 index 0000000000..fe48e2e423 --- /dev/null +++ b/tests/assets/to-do-notifications/manifest.webapp @@ -0,0 +1,18 @@ +{ + "version": "0.1", + "name": "To-do list", + "description": "Store to-do items on your device, and be notified when the deadlines are up.", + "launch_path": "/to-do-notifications/index.html", + "icons": { + "128": "/to-do-notifications/img/icon-128.png" + }, + "developer": { + "name": "Chris Mills", + "url": "http://chrisdavidmills.github.io/to-do-notifications/" + }, + "permissions": { + "desktop-notification": { + "description": "Needed for creating system notifications." + } + } +} \ No newline at end of file diff --git a/tests/assets/to-do-notifications/scripts/todo.js b/tests/assets/to-do-notifications/scripts/todo.js new file mode 100644 index 0000000000..2e3cfae210 --- /dev/null +++ b/tests/assets/to-do-notifications/scripts/todo.js @@ -0,0 +1,354 @@ +window.onload = () => { + const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; + + // Hold an instance of a db object for us to store the IndexedDB data in + let db; + + // Create a reference to the notifications list in the bottom of the app; we will write database messages into this list by + // appending list items as children of this element + const note = document.getElementById('notifications'); + + // All other UI elements we need for the app + const taskList = document.getElementById('task-list'); + const taskForm = document.getElementById('task-form'); + const title = document.getElementById('title'); + const hours = document.getElementById('deadline-hours'); + const minutes = document.getElementById('deadline-minutes'); + const day = document.getElementById('deadline-day'); + const month = document.getElementById('deadline-month'); + const year = document.getElementById('deadline-year'); + const notificationBtn = document.getElementById('enable'); + + // Do an initial check to see what the notification permission state is + if (Notification.permission === 'denied' || Notification.permission === 'default') { + notificationBtn.style.display = 'block'; + } else { + notificationBtn.style.display = 'none'; + } + + note.appendChild(createListItem('App initialised.')); + + // Let us open our database + const DBOpenRequest = window.indexedDB.open('toDoList', 4); + + // Register two event handlers to act on the database being opened successfully, or not + DBOpenRequest.onerror = (event) => { + note.appendChild(createListItem('Error loading database.')); + }; + + DBOpenRequest.onsuccess = (event) => { + note.appendChild(createListItem('Database initialised.')); + + // Store the result of opening the database in the db variable. This is used a lot below + db = DBOpenRequest.result; + + // Run the displayData() function to populate the task list with all the to-do list data already in the IndexedDB + displayData(); + }; + + // This event handles the event whereby a new version of the database needs to be created + // Either one has not been created before, or a new version number has been submitted via the + // window.indexedDB.open line above + //it is only implemented in recent browsers + DBOpenRequest.onupgradeneeded = (event) => { + db = event.target.result; + + db.onerror = (event) => { + note.appendChild(createListItem('Error loading database.')); + }; + + // Create an objectStore for this database + const objectStore = db.createObjectStore('toDoList', { keyPath: 'taskTitle' }); + + // Define what data items the objectStore will contain + objectStore.createIndex('hours', 'hours', { unique: false }); + objectStore.createIndex('minutes', 'minutes', { unique: false }); + objectStore.createIndex('day', 'day', { unique: false }); + objectStore.createIndex('month', 'month', { unique: false }); + objectStore.createIndex('year', 'year', { unique: false }); + + objectStore.createIndex('notified', 'notified', { unique: false }); + + note.appendChild(createListItem('Object store created.')); + }; + + function displayData() { + // First clear the content of the task list so that you don't get a huge long list of duplicate stuff each time + // the display is updated. + while (taskList.firstChild) { + taskList.removeChild(taskList.lastChild); + } + + // Open our object store and then get a cursor list of all the different data items in the IDB to iterate through + const objectStore = db.transaction('toDoList').objectStore('toDoList'); + objectStore.openCursor().onsuccess = (event) => { + const cursor = event.target.result; + // Check if there are no (more) cursor items to iterate through + if (!cursor) { + // No more items to iterate through, we quit. + note.appendChild(createListItem('Entries all displayed.')); + return; + } + + // Check which suffix the deadline day of the month needs + const { hours, minutes, day, month, year, notified, taskTitle } = cursor.value; + const ordDay = ordinal(day); + + // Build the to-do list entry and put it into the list item. + const toDoText = `${taskTitle} — ${hours}:${minutes}, ${month} ${ordDay} ${year}.`; + const listItem = createListItem(toDoText); + + if (notified === 'yes') { + listItem.style.textDecoration = 'line-through'; + listItem.style.color = 'rgba(255, 0, 0, 0.5)'; + } + + // Put the item item inside the task list + taskList.appendChild(listItem); + + // Create a delete button inside each list item, + const deleteButton = document.createElement('button'); + listItem.appendChild(deleteButton); + deleteButton.textContent = 'X'; + + // Set a data attribute on our delete button to associate the task it relates to. + deleteButton.setAttribute('data-task', taskTitle); + + // Associate action (deletion) when clicked + deleteButton.onclick = (event) => { + deleteItem(event); + }; + + // continue on to the next item in the cursor + cursor.continue(); + }; + }; + + // Add listener for clicking the submit button + taskForm.addEventListener('submit', addData, false); + + function addData(e) { + // Prevent default, as we don't want the form to submit in the conventional way + e.preventDefault(); + + // Stop the form submitting if any values are left empty. + // This should never happen as there is the required attribute + if (title.value === '' || hours.value === null || minutes.value === null || day.value === '' || month.value === '' || year.value === null) { + note.appendChild(createListItem('Data not submitted — form incomplete.')); + return; + } + + // Grab the values entered into the form fields and store them in an object ready for being inserted into the IndexedDB + const newItem = [ + { taskTitle: title.value, hours: hours.value, minutes: minutes.value, day: day.value, month: month.value, year: year.value, notified: 'no' }, + ]; + + // Open a read/write DB transaction, ready for adding the data + const transaction = db.transaction(['toDoList'], 'readwrite'); + + // Report on the success of the transaction completing, when everything is done + transaction.oncomplete = () => { + note.appendChild(createListItem('Transaction completed: database modification finished.')); + + // Update the display of data to show the newly added item, by running displayData() again. + displayData(); + }; + + // Handler for any unexpected error + transaction.onerror = () => { + note.appendChild(createListItem(`Transaction not opened due to error: ${transaction.error}`)); + }; + + // Call an object store that's already been added to the database + const objectStore = transaction.objectStore('toDoList'); + console.log(objectStore.indexNames); + console.log(objectStore.keyPath); + console.log(objectStore.name); + console.log(objectStore.transaction); + console.log(objectStore.autoIncrement); + + // Make a request to add our newItem object to the object store + const objectStoreRequest = objectStore.add(newItem[0]); + objectStoreRequest.onsuccess = (event) => { + + // Report the success of our request + // (to detect whether it has been succesfully + // added to the database, you'd look at transaction.oncomplete) + note.appendChild(createListItem('Request successful.')); + + // Clear the form, ready for adding the next entry + title.value = ''; + hours.value = null; + minutes.value = null; + day.value = 01; + month.value = 'January'; + year.value = 2020; + }; + }; + + function deleteItem(event) { + // Retrieve the name of the task we want to delete + const dataTask = event.target.getAttribute('data-task'); + + // Open a database transaction and delete the task, finding it by the name we retrieved above + const transaction = db.transaction(['toDoList'], 'readwrite'); + transaction.objectStore('toDoList').delete(dataTask); + + // Report that the data item has been deleted + transaction.oncomplete = () => { + // Delete the parent of the button, which is the list item, so it is no longer displayed + event.target.parentNode.parentNode.removeChild(event.target.parentNode); + note.appendChild(createListItem(`Task "${dataTask}" deleted.`)); + }; + }; + + // Check whether the deadline for each task is up or not, and responds appropriately + function checkDeadlines() { + // First of all check whether notifications are enabled or denied + if (Notification.permission === 'denied' || Notification.permission === 'default') { + notificationBtn.style.display = 'block'; + } else { + notificationBtn.style.display = 'none'; + } + + // Grab the current time and date + const now = new Date(); + + // From the now variable, store the current minutes, hours, day of the month, month, year and seconds + const minuteCheck = now.getMinutes(); + const hourCheck = now.getHours(); + const dayCheck = now.getDate(); // Do not use getDay() that returns the day of the week, 1 to 7 + const monthCheck = now.getMonth(); + const yearCheck = now.getFullYear(); // Do not use getYear() that is deprecated. + + // Open a new transaction + const objectStore = db.transaction(['toDoList'], 'readwrite').objectStore('toDoList'); + + // Open a cursor to iterate through all the data items in the IndexedDB + objectStore.openCursor().onsuccess = (event) => { + const cursor = event.target.result; + if (!cursor) return; + const { hours, minutes, day, month, year, notified, taskTitle } = cursor.value; + + // convert the month names we have installed in the IDB into a month number that JavaScript will understand. + // The JavaScript date object creates month values as a number between 0 and 11. + const monthNumber = MONTHS.indexOf(month); + if (monthNumber === -1) throw new Error('Incorrect month entered in database.'); + + // Check if the current hours, minutes, day, month and year values match the stored values for each task. + // The parseInt() function transforms the value from a string to a number for comparison + // (taking care of leading zeros, and removing spaces and underscores from the string). + let matched = parseInt(hours) === hourCheck; + matched &&= parseInt(minutes) === minuteCheck; + matched &&= parseInt(day) === dayCheck; + matched &&= parseInt(monthNumber) === monthCheck; + matched &&= parseInt(year) === yearCheck; + if (matched && notified === 'no') { + // If the numbers all do match, run the createNotification() function to create a system notification + // but only if the permission is set + if (Notification.permission === 'granted') { + createNotification(taskTitle); + } + } + + // Move on to the next cursor item + cursor.continue(); + }; + }; + + // Ask for permission when the 'Enable notifications' button is clicked + function askNotificationPermission() { + // Function to actually ask the permissions + function handlePermission(permission) { + // Whatever the user answers, we make sure Chrome stores the information + if (!Reflect.has(Notification, 'permission')) { + Notification.permission = permission; + } + + // Set the button to shown or hidden, depending on what the user answers + if (Notification.permission === 'denied' || Notification.permission === 'default') { + notificationBtn.style.display = 'block'; + } else { + notificationBtn.style.display = 'none'; + } + }; + + // Check if the browser supports notifications + if (!Reflect.has(window, 'Notification')) { + console.log('This browser does not support notifications.'); + } else { + if (checkNotificationPromise()) { + Notification.requestPermission().then(handlePermission); + } else { + Notification.requestPermission(handlePermission); + } + } + }; + + // Check whether browser supports the promise version of requestPermission() + // Safari only supports the old callback-based version + function checkNotificationPromise() { + try { + Notification.requestPermission().then(); + } catch(e) { + return false; + } + + return true; + }; + + // Wire up notification permission functionality to 'Enable notifications' button + notificationBtn.addEventListener('click', askNotificationPermission); + + function createListItem(contents) { + const listItem = document.createElement('li'); + listItem.textContent = contents; + return listItem; + }; + + // Create a notification with the given title + function createNotification(title) { + // Create and show the notification + const img = '/to-do-notifications/img/icon-128.png'; + const text = `HEY! Your task "${title}" is now overdue.`; + const notification = new Notification('To do list', { body: text, icon: img }); + + // We need to update the value of notified to 'yes' in this particular data object, so the + // notification won't be set off on it again + + // First open up a transaction + const objectStore = db.transaction(['toDoList'], 'readwrite').objectStore('toDoList'); + + // Get the to-do list object that has this title as its title + const objectStoreTitleRequest = objectStore.get(title); + + objectStoreTitleRequest.onsuccess = () => { + // Grab the data object returned as the result + const data = objectStoreTitleRequest.result; + + // Update the notified value in the object to 'yes' + data.notified = 'yes'; + + // Create another request that inserts the item back into the database + const updateTitleRequest = objectStore.put(data); + + // When this new request succeeds, run the displayData() function again to update the display + updateTitleRequest.onsuccess = () => { + displayData(); + }; + }; + }; + + // Using a setInterval to run the checkDeadlines() function every second + setInterval(checkDeadlines, 1000); +} + +// Helper function returning the day of the month followed by an ordinal (st, nd, or rd) +function ordinal(day) { + const n = day.toString(); + const last = n.slice(-1); + if (last === '1' && n !== '11') return `${n}st`; + if (last === '2' && n !== '12') return `${n}nd`; + if (last === '3' && n !== '13') return `${n}rd`; + return `${n}th`; +}; \ No newline at end of file diff --git a/tests/assets/to-do-notifications/style/style.css b/tests/assets/to-do-notifications/style/style.css new file mode 100644 index 0000000000..c08ff299ac --- /dev/null +++ b/tests/assets/to-do-notifications/style/style.css @@ -0,0 +1,248 @@ +/* Basic set up + sizing for containers */ + +html, +body { + margin: 0; +} + +html { + width: 100%; + height: 100%; + font-size: 10px; + font-family: Georgia, "Times New Roman", Times, serif; + background: #111; +} + +body { + width: 50rem; + position: relative; + background: #d88; + margin: 0 auto; + border-left: 2px solid #d33; + border-right: 2px solid #d33; +} + +h1, +h2 { + text-align: center; + background: #d88; + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 6rem; + margin: 0; + background: #d66; +} + +h2 { + font-size: 2.4rem; +} + +/* Bottom toolbar styling */ + +#toolbar { + position: relative; + height: 6rem; + width: 100%; + background: #d66; + border-top: 2px solid #d33; + border-bottom: 2px solid #d33; +} + +#enable, +input[type="submit"] { + line-height: 1.8; + font-size: 1.3rem; + border-radius: 5px; + border: 1px solid black; + color: black; + text-shadow: 1px 1px 1px black; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: + inset 0px 5px 3px rgba(255, 255, 255, 0.2), + inset 0px -5px 3px rgba(0, 0, 0, 0.2); +} + +#enable { + position: absolute; + bottom: 0.3rem; + right: 0.3rem; +} + +#notifications { + margin: 0; + position: relative; + padding: 0.3rem; + background: #ddd; + position: absolute; + top: 0rem; + left: 0rem; + height: 5.4rem; + width: 50%; + overflow: auto; + line-height: 1.2; +} + +#notifications li { + margin-left: 1.5rem; +} + +/* New item form styling */ + +.form-box { + background: #d66; + width: 85%; + padding: 1rem; + margin: 2rem auto; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); +} + +form div { + margin-bottom: 1rem; +} + +form .full-width { + margin: 1rem auto 2rem; + width: 100%; +} + +form .half-width { + width: 50%; + float: left; +} + +form .third-width { + width: 33%; + float: left; +} + +form div label { + width: 10rem; + float: left; + padding-right: 1rem; + font-size: 1.6rem; + line-height: 1.6; +} + +form .full-width input { + width: 30rem; +} + +form .half-width input { + width: 8.75rem; +} + +form .third-width select { + width: 13.5rem; +} + +form div input[type="submit"] { + clear: both; + width: 20rem; + display: block; + height: 3rem; + margin: 0 auto; + position: relative; + top: 0.5rem; +} + +/* || tasks box */ + +.task-box { + width: 85%; + padding: 1rem; + margin: 2rem auto; + font-size: 1.8rem; +} + +.task-box ul { + margin: 0; + padding: 0; +} + +.task-box li { + list-style-type: none; + padding: 1rem; + border-bottom: 2px solid #d33; +} + +.task-box li:last-child { + border-bottom: none; +} + +.task-box li:last-child { + margin-bottom: 0rem; +} + +.task-box button { + margin-left: 2rem; + font-size: 1.6rem; + border: 1px solid #eee; + border-radius: 5px; + box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.5) 1px 1px 1px black; +} + +/* setting cursor for interactive controls */ + +button, +input[type="submit"], +select { + cursor: pointer; +} + +/* media query for small screens */ + +@media (max-width: 32rem) { + body { + width: 100%; + border-left: none; + border-right: none; + } + + form div { + clear: both; + } + + form .full-width { + margin: 1rem auto; + } + + form .half-width { + width: 100%; + float: none; + } + + form .third-width { + width: 100%; + float: none; + } + + form div label { + width: 36%; + padding-left: 1rem; + } + + form input, + form select, + form label { + line-height: 2.5rem; + font-size: 2rem; + } + + form .full-width input { + width: 50%; + } + + form .half-width input { + width: 50%; + } + + form .third-width select { + width: 50%; + } + + #enable { + right: 1rem; + } +} \ No newline at end of file diff --git a/tests/library/browsercontext-storage-state.spec.ts b/tests/library/browsercontext-storage-state.spec.ts index 40a7dc0fb1..b74cfadf7a 100644 --- a/tests/library/browsercontext-storage-state.spec.ts +++ b/tests/library/browsercontext-storage-state.spec.ts @@ -317,8 +317,8 @@ it('should roundtrip local storage in third-party context', async ({ page, conte await context2.close(); }); -it('should support IndexedDB', async ({ page, contextFactory }) => { - await page.goto('https://mdn.github.io/dom-examples/to-do-notifications/'); +it('should support IndexedDB', async ({ page, server, contextFactory }) => { + await page.goto(server.PREFIX + '/to-do-notifications/index.html'); await page.getByLabel('Task title').fill('Pet the cat'); await page.getByLabel('Hours').fill('1'); await page.getByLabel('Mins').fill('1'); @@ -327,7 +327,7 @@ it('should support IndexedDB', async ({ page, contextFactory }) => { const storageState = await page.context().storageState(); expect(storageState.origins).toEqual([ { - origin: 'https://mdn.github.io', + origin: server.PREFIX, localStorage: [], indexedDB: [ { @@ -403,64 +403,10 @@ it('should support IndexedDB', async ({ page, contextFactory }) => { expect(await context.storageState()).toEqual(storageState); const recreatedPage = await context.newPage(); - await recreatedPage.goto('https://mdn.github.io/dom-examples/to-do-notifications/'); + await recreatedPage.goto(server.PREFIX + '/to-do-notifications/index.html'); await expect(recreatedPage.locator('#task-list')).toMatchAriaSnapshot(` - list: - listitem: - text: /Pet the cat/ `); }); - -it('indexedDb firebase acceptance test', async ({ page, contextFactory }) => { - await page.goto('https://fir-ui-demo-84a6c.firebaseapp.com/'); - await page.getByText('Continue as guest').click(); - await expect(page.getByRole('button', { name: 'Sign Out' })).toBeVisible(); - await page.close(); - const storageState = await page.context().storageState(); - expect(storageState).toEqual({ - cookies: [], - origins: [ - { - indexedDB: [ - { - name: 'firebase-heartbeat-database', - stores: [ - { - autoIncrement: false, - indexes: [], - name: 'firebase-heartbeat-store', - records: [], - }, - ], - version: 1, - }, - { - name: 'firebaseLocalStorageDb', - stores: [ - { - autoIncrement: false, - indexes: [], - keyPath: 'fbase_key', - name: 'firebaseLocalStorage', - records: [ - { - value: expect.any(String), - }, - ], - }, - ], - version: 1, - }, - ], - localStorage: [], - origin: 'https://fir-ui-demo-84a6c.firebaseapp.com', - }, - ], - }); - - const recreatedContext = await contextFactory({ storageState }); - const recreatedPage = await recreatedContext.newPage(); - await recreatedPage.goto('https://fir-ui-demo-84a6c.firebaseapp.com/'); - await expect(recreatedPage.getByRole('button', { name: 'Sign Out' })).toBeVisible(); - expect(await recreatedContext.storageState()).toEqual(storageState); -});