Steven/publish canaries

.changeset/big-steaks-help.md

@@ -0,0 +1,5 @@
+---
+'@chromatic-com/playwright': patch
+---
+
+Working on a sample change

packages/cypress/tests/cypress/e2e/amd.cy.ts

@@ -0,0 +1,10 @@
+it('pages with AMD modules are archived', { env: { ignoreSelectors: ['#objectUrl'] } }, () => {
+  cy.visit('/amd');
+  cy.get('#output').contains('Sum of');
+
+  cy.get('#fileInput').selectFile('../../../test-server/fixtures/blue.png');
+
+  cy.get('#objectUrl')
+    .invoke('text')
+    .should('match', /blob:.*/);
+});

packages/cypress/tests/cypress/e2e/blob-urls.cy.ts

@@ -1,5 +1,5 @@
 it('Upload a Single file and Assert blob', { env: { ignoreSelectors: ['#objectUrl'] } }, () => {
-  cy.visit('/createObjectUrl');
+  cy.visit('/blob-urls');
 
   cy.get('#fileInput').selectFile('../../../test-server/fixtures/blue.png');
 
@@ -9,7 +9,7 @@ it('Upload a Single file and Assert blob', { env: { ignoreSelectors: ['#objectUr
 });
 
 it('Fetch data for blob', () => {
-  cy.visit('/createObjectUrl?noUpload=true');
+  cy.visit('/blob-urls?noUpload=true');
 
   cy.get('#blobImg')
     .should('be.visible')
@@ -23,7 +23,7 @@ it(
   'Captures blob contents for manual snapshots',
   { env: { ignoreSelectors: ['#objectUrl'] } },
   () => {
-    cy.visit('/createObjectUrl');
+    cy.visit('/blob-urls');
 
     cy.get('#fileInput').selectFile('../../../test-server/fixtures/blue.png');
 

packages/playwright/jest.config.js

@@ -1,4 +1,8 @@
 module.exports = {
   testMatch: ['**/*.test.*'],
   testPathIgnorePatterns: ['__playwrightTests__/*'],
+  // this file is ignored because code coverage was inserting some cov_asdf line that was making tests fail
+  // After trying to istanbul-ignore a single line, I ended up disabling the coverage completely for this file.
+  // https://stackoverflow.com/questions/55272295/using-jest-with-puppeteer-evaluation-failed-referenceerror-cov-4kq3tptqc-is
+  coveragePathIgnorePatterns: ['<rootDir>/src/takeSnapshot.ts'],
 };

packages/playwright/src/takeSnapshot.ts

@@ -99,6 +99,10 @@ async function takeSnapshot(
     }    
   `);
 
+  await page.evaluate(() => {
+    console.log('blarb');
+  });
+
   const bufferedSnapshot = Buffer.from(JSON.stringify(domSnapshot));
   if (!chromaticSnapshots.has(testId)) {
     // map used so the snapshots are always in order

packages/playwright/tests/createObjectUrl.spec.ts → packages/playwright/tests/blob-urls.spec.ts

@@ -1,10 +1,10 @@
 import * as path from 'path';
-import { test, expect } from '../src';
+import { test, expect, takeSnapshot } from '../src';
 
 test.use({ ignoreSelectors: ['#objectUrl'] });
 
 test('Upload a Single file and Assert blob', async ({ page }) => {
-  await page.goto('/createObjectUrl');
+  await page.goto('/blob-urls');
   const fileWithPath = path.join(__dirname, '../../../test-server/fixtures/blue.png');
   const [fileChooser] = await Promise.all([
     page.waitForEvent('filechooser'),
@@ -15,9 +15,24 @@ test('Upload a Single file and Assert blob', async ({ page }) => {
   await expect(page.locator('#objectUrl')).toHaveText(/blob:.*/);
 });
 
+test('Captures blob contents for manual snapshots', async ({ page }, testInfo) => {
+  await page.goto('/blob-urls');
+  const fileWithPath = path.join(__dirname, '../../../test-server/fixtures/blue.png');
+  const [fileChooser] = await Promise.all([
+    page.waitForEvent('filechooser'),
+    page.locator('#fileInput').click(),
+  ]);
+  await fileChooser.setFiles([fileWithPath]);
+  await page.locator('#fileInput').dispatchEvent('change');
+  await expect(page.locator('#objectUrl')).toHaveText(/blob:.*/);
+  await takeSnapshot(page, 'Manual snapshot (Should show a blue square)', testInfo);
+
+  await page.goto('/asset-paths/query-params');
+});
+
 // adapted from https://fossies.org/linux/playwright/tests/library/trace-viewer.spec.ts
 test('Fetch data for blob', async ({ page }) => {
-  await page.goto('/createObjectUrl?noUpload=true');
+  await page.goto('/blob-urls?noUpload=true');
   const size = await page.locator('#blobImg').evaluate((e) => (e as HTMLImageElement).naturalWidth);
   expect(size).toBe(10);
 });

test-server/server.js

@@ -136,8 +136,8 @@ app.get('/amd', (req, res) => {
   res.sendFile(path.join(__dirname, 'fixtures/amd.html'));
 });
 
-app.get('/createObjectUrl', (req, res) => {
-  res.sendFile(path.join(__dirname, 'fixtures/createObjectUrl.html'));
+app.get('/blob-urls', (req, res) => {
+  res.sendFile(path.join(__dirname, 'fixtures/blob-urls.html'));
 });
 
 app.listen(port, () => {