Add unit test for DomSnapshot to cover base tag use case

Author: stephanie56

packages/shared/src/utils/filePaths.test.ts

@@ -219,19 +219,19 @@ describe('truncateFileName', () => {
     expect(truncated).toMatch(new RegExp('^this-title-.*-a-file-system-[a-z0-9]{4}$'));
   });
   describe('removeLocalhostFromBaseRef', () => {
-    it('should remove localhost from href', () => {
+    it('should remove localhost from href but keeps the relative path', () => {
       const href = 'http://localhost:3000/some/path/';
       const result = removeLocalhostFromBaseRef(href);
       expect(result).toBe('/some/path/');
     });
 
-    it('should not remove localhost from href if it is not the first part', () => {
+    it('should remove localhost from href', () => {
       const href = 'http://localhost:3000/';
       const result = removeLocalhostFromBaseRef(href);
       expect(result).toBe('/');
     });
 
-    it('should not remove localhost from href if it is not the first part', () => {
+    it('should return the exact href if it is already relative', () => {
       const href = '/some/path/';
       const result = removeLocalhostFromBaseRef(href);
       expect(result).toBe('/some/path/');

packages/shared/src/write-archive/dom-snapshot.test.ts

@@ -10,6 +10,18 @@ function createSnapshot(url1: string, url2: string, url3: string) {
   return `{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":2,"tagName":"html","attributes":{},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":3,"textContent":"    ","id":5},{"type":2,"tagName":"link","attributes":{"rel":"stylesheet","href":"/styles-test.css"},"childNodes":[],"id":6},{"type":3,"textContent":"    ","id":7},{"type":2,"tagName":"style","attributes":{},"childNodes":[{"type":3,"textContent":".test1 { background-image: url(\\"${url1}\\"); }.test2 { background-image: url(\\"${url2}\\"); }.test2 { background-image: url(\\"${url3}\\"); }","isStyle":true,"id":9}],"id":8},{"type":3,"textContent":"  ","id":10}],"id":4},{"type":3,"textContent":"  ","id":11},{"type":2,"tagName":"body","attributes":{},"childNodes":[{"type":3,"textContent":"    ","id":13},{"type":2,"tagName":"div","attributes":{"class":"image-container flex flex-wrap"},"childNodes":[{"type":3,"textContent":"      ","id":15},{"type":2,"tagName":"img","attributes":{"src":"${url1}"},"childNodes":[],"id":16},{"type":3,"textContent":"      ","id":17},{"type":2,"tagName":"img","attributes":{"src":"${url2}"},"childNodes":[],"id":18},{"type":3,"textContent":"      ","id":19},{"type":2,"tagName":"img","attributes":{"src":"${url3}"},"childNodes":[],"id":20},{"type":3,"textContent":"      ","id":21},{"type":2,"tagName":"div","attributes":{"style":"background: url('${url1}'); no-repeat center;"},"childNodes":[],"id":22},{"type":3,"textContent":"      ","id":23},{"type":2,"tagName":"div","attributes":{"style":"background: url('${url2}'); no-repeat center;"},"childNodes":[],"id":24},{"type":3,"textContent":"      ","id":25},{"type":2,"tagName":"div","attributes":{"style":"background: url('${url3}'); no-repeat center;"},"childNodes":[],"id":26},{"type":3,"textContent":"    ","id":27}],"id":14},{"type":3,"textContent":"  ","id":28}],"id":12}],"id":3}],"id":1}`;
 }
 
+function createBaseTagSnapshot(url: string) {
+  return JSON.stringify({
+    type: 2,
+    tagName: 'base',
+    attributes: {
+      href: url,
+    },
+    childNodes: [],
+    id: 5,
+  });
+}
+
 function createImgSrcsetSnapshot({
   backupUrl,
   smallUrl,
@@ -374,5 +386,26 @@ describe('DOMSnapshot', () => {
         ],
       });
     });
+
+    it('does change base tag href when there is a localhost', async () => {
+      const originalSnapshot = createBaseTagSnapshot('http://localhost:3000/');
+      const domSnapshot = new DOMSnapshot(originalSnapshot);
+      const mappedSnapshot = await domSnapshot.mapAssetPaths(new Map());
+      expect(mappedSnapshot).toEqual(createBaseTagSnapshot('/'));
+    });
+
+    it('does not change base tag href when not localhost', async () => {
+      const originalSnapshot = createBaseTagSnapshot('https://example.com/app/');
+      const domSnapshot = new DOMSnapshot(originalSnapshot);
+      const mappedSnapshot = await domSnapshot.mapAssetPaths(new Map());
+      expect(mappedSnapshot).toEqual(originalSnapshot);
+    });
+
+    it('does not change base tag href when already relative', async () => {
+      const originalSnapshot = createBaseTagSnapshot('/app/');
+      const domSnapshot = new DOMSnapshot(originalSnapshot);
+      const mappedSnapshot = await domSnapshot.mapAssetPaths(new Map());
+      expect(mappedSnapshot).toEqual(originalSnapshot);
+    });
   });
 });