glib-web 5.0.7 → 6.0.0

package/cypress/e2e/glib-web/fieldsText.cy.js

@@ -0,0 +1,83 @@
+import { testPageUrl } from "../../helper.js";
+
+const url = testPageUrl('fields_text');
+
+describe('fields_text', () => {
+  it('shows status changed when Name field is edited', () => {
+    cy.visit(url);
+
+    cy.contains('Status: idle').should('exist');
+    cy.get('input[placeholder="Full name"]').type('John Doe');
+    cy.contains('Status: changed').should('exist');
+  });
+
+  it('Set value fills the Name field with Hello world', () => {
+    cy.visit(url);
+
+    cy.contains('Set value').click();
+    cy.get('input[placeholder="Full name"]').should('have.value', 'Hello world');
+  });
+
+  it('Clear value empties the Name field', () => {
+    cy.visit(url);
+
+    cy.contains('Set value').click();
+    cy.get('input[placeholder="Full name"]').should('have.value', 'Hello world');
+    cy.contains('Clear value').click();
+    cy.get('input[placeholder="Full name"]').should('have.value', '');
+  });
+
+  it('Focus button focuses the Name field', () => {
+    cy.visit(url);
+
+    cy.contains('Focus').click();
+    cy.get('input[placeholder="Full name"]').should('be.focused');
+  });
+
+  it('Reset button resets fields and shows status reset', () => {
+    cy.visit(url);
+
+    cy.get('input[placeholder="Full name"]').type('Changed text');
+    cy.contains('Reset').click();
+    cy.get('#text_status').scrollIntoView().should('contain', 'Status: reset');
+    cy.get('input[placeholder="Full name"]').should('have.value', '');
+  });
+
+  it('password visibility toggle reveals and hides password text', () => {
+    cy.visit(url);
+
+    cy.get('input[placeholder="Enter your password"]').type('secret123');
+    cy.get('input[placeholder="Enter your password"]').should('have.attr', 'type', 'password');
+    cy.get('input[placeholder="Enter your password"]')
+      .closest('.v-input')
+      .find('i.material-icons[role="button"]')
+      .click();
+    cy.get('input[placeholder="Enter your password"]').should('have.attr', 'type', 'text');
+  });
+
+  it('derived value updates when Base value changes', () => {
+    cy.visit(url);
+
+    cy.contains('Base value').closest('.v-input').find('input').clear().type('30');
+    cy.get('input[name="user[derived_value]"]').should('have.value', '10');
+  });
+
+  it('password strength hint appears when password reaches 8 characters', () => {
+    cy.visit(url);
+
+    cy.get('input[placeholder="Type a password..."]').type('short');
+    cy.contains('Password length looks good').should('not.be.visible');
+    cy.get('input[placeholder="Type a password..."]').type('longpass');
+    cy.contains('Password length looks good').should('be.visible');
+  });
+
+  it('Submit opens a dialog showing POST form data', () => {
+    cy.visit(url);
+
+    cy.contains('Submit').click();
+    cy.contains('Method: POST').should('be.visible');
+    cy.contains('Form Data:').should('be.visible');
+    cy.contains('OK').click();
+    cy.contains('Method: POST').should('not.exist');
+  });
+});

package/cypress/e2e/glib-web/fieldsUpload.cy.js

@@ -1,57 +1,30 @@
-import { testPageUrl } from "../../helper.js"
+import { testPageUrl, withComponent, withComponentThen } from "../../helper.js";
 
-const url = testPageUrl('fields_upload')
-
-const getRealComponent = (win, component) => {
-  const { isObject, isNotNull } = win.Utils.type
-  let realComp = component
-
-  while (isObject(realComp) && isNotNull(realComp.$refs?.delegate)) {
-    realComp = realComp.$refs.delegate
-  }
-
-  return realComp
-}
+const url = testPageUrl('fields_upload');
 
 describe('fields_upload', () => {
-  it('invokes upload triggers and resets', () => {
-    cy.visit(url)
-
-    cy.window().then((win) => {
-      const basicComp = getRealComponent(win, win.GLib.component.findById('fields_upload_basic'))
-      const filesComp = getRealComponent(win, win.GLib.component.findById('fields_upload_files'))
-
-      cy.wrap(basicComp).should('exist')
-      cy.wrap(filesComp).should('exist')
 
-      cy.spy(basicComp, 'trigger').as('basicTrigger')
-      cy.spy(basicComp, 'reset').as('basicReset')
-      cy.spy(filesComp, 'trigger').as('filesTrigger')
-    })
+  it('resets the avatar placeholderView field value', () => {
+    cy.visit(url);
 
-    cy.contains('Trigger').click()
-    cy.get('@basicTrigger').should('have.been.calledOnce')
+    withComponent('fields_upload_avatar', (comp) => cy.spy(comp, 'reset').as('avatarReset'));
 
-    cy.contains('Reset').click()
-    cy.get('@basicReset').should('have.been.calledOnce')
+    cy.get('.v-btn').filter(':contains("Reset")').eq(1).click();
+    cy.get('@avatarReset').should('have.been.calledOnce');
 
-    cy.contains('Select file').click()
-    cy.get('@filesTrigger').should('have.been.calledOnce')
-  })
+    cy.contains('submit').click();
+    cy.get('.unformatted').should('contain.text', 'Method: POST').and('not.contain.text', '"file_avatar": "test"');
+    cy.get('.v-dialog').contains('OK').click();
+  });
 
   it('handles multi progress view drag and drop uploads', () => {
-    const htmlUploadUrl = 'http://localhost:3000/glib/json_ui_garage?path=forms%2Ffile_upload_new&mode=html'
-    let uploadIndex = 0
-    const pngBase64 =
-      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNgYAAAAAMAASsJTYQAAAAASUVORK5CYII='
-    const pngFile = {
-      contents: Cypress.Buffer.from(pngBase64, 'base64'),
-      fileName: 'upload.png',
-      mimeType: 'image/png'
-    }
+    const htmlUploadUrl = 'http://localhost:3000/glib/json_ui_garage?path=forms%2Ffile_upload_new&mode=html';
+    let uploadIndex = 0;
+
+    cy.fixture('upload.png', null).as('pngContents');
 
     cy.intercept('POST', /\/(glib\/glib_direct_uploads|rails\/active_storage\/direct_uploads)$/, (req) => {
-      uploadIndex += 1
+      uploadIndex += 1;
       req.reply({
         statusCode: 200,
         body: {
@@ -63,97 +36,234 @@ describe('fields_upload', () => {
             }
           }
         }
-      })
-    }).as('directUploadCreate')
+      });
+    }).as('directUploadCreate');
 
     cy.intercept('PUT', 'https://example.com/rails/active_storage/blobs/upload', {
       statusCode: 200
-    }).as('directUploadStore')
-
-    cy.visit(url)
-
-    cy.window()
-      .should((win) => {
-        const multiComp = getRealComponent(win, win.GLib.component.findById('fields_upload_multiprogress'))
-        expect(multiComp, 'multi progress component').to.exist
-        expect(multiComp.$el, 'multi progress element').to.exist
-        expect(multiComp.$el.querySelector('.gdrop-file'), 'multi progress dropzone').to.exist
-      })
-      .then((win) => {
-        const multiComp = getRealComponent(win, win.GLib.component.findById('fields_upload_multiprogress'))
-        cy.wrap(multiComp.$el).as('multiRoot')
-        cy.wrap(multiComp.$el.querySelector('.gdrop-file')).as('dropzone')
-      })
-
-    cy.get('@dropzone').should('have.class', 'border-[2px]')
-    cy.get('@dropzone').trigger('drag')
-    cy.get('@dropzone').trigger('dragover')
-    cy.get('@dropzone').should('have.class', 'border-[4px]').and('not.have.class', 'border-[2px]')
-    cy.get('@dropzone').trigger('dragleave')
-    cy.get('@dropzone').should('have.class', 'border-[2px]')
-
-    cy.get('@dropzone').click({ force: true })
-    cy.get('@multiRoot').find('input[type="file"]').should('exist')
-
-    cy.get('@dropzone').selectFile(
-      pngFile,
-      { action: 'drag-drop' }
-    )
-
-    cy.wait('@directUploadCreate')
-    cy.wait('@directUploadStore')
+    }).as('directUploadStore');
+
+    cy.visit(url);
+
+    withComponentThen('fields_upload_multiprogress', (comp) => {
+      expect(comp.$el, 'multi progress element').to.exist;
+      expect(comp.$el.querySelector('.gdrop-file'), 'multi progress dropzone').to.exist;
+      cy.wrap(comp.$el).as('multiRoot');
+      cy.wrap(comp.$el.querySelector('.gdrop-file')).as('dropzone');
+    });
+
+    cy.get('@dropzone').should('have.class', 'border-[2px]');
+    cy.get('@dropzone').trigger('drag');
+    cy.get('@dropzone').trigger('dragover');
+    cy.get('@dropzone').should('have.class', 'border-[4px]').and('not.have.class', 'border-[2px]');
+    cy.get('@dropzone').trigger('dragleave');
+    cy.get('@dropzone').should('have.class', 'border-[2px]');
+
+    cy.get('@dropzone').click({ force: true });
+    cy.get('@multiRoot').find('input[type="file"]').should('exist');
+
+    cy.get('@pngContents').then((contents) => {
+      cy.get('@dropzone').selectFile(
+        { contents, fileName: 'upload.png', mimeType: 'image/png' },
+        { action: 'drag-drop' }
+      );
+    });
+
+    cy.wait('@directUploadCreate');
+    cy.wait('@directUploadStore');
     cy.get('@multiRoot')
       .find('input[type="hidden"][name="user[file_input_multiprogress][]"]')
-      .should('have.length', 1)
+      .should('have.length', 1);
 
-    cy.get('@dropzone').selectFile(
-      { ...pngFile, fileName: 'second.png' },
-      { action: 'drag-drop' }
-    )
+    cy.get('@pngContents').then((contents) => {
+      cy.get('@dropzone').selectFile(
+        { contents, fileName: 'second.png', mimeType: 'image/png' },
+        { action: 'drag-drop' }
+      );
+    });
 
-    cy.wait('@directUploadCreate')
-    cy.wait('@directUploadStore')
+    cy.wait('@directUploadCreate');
+    cy.wait('@directUploadStore');
 
-    cy.get('@multiRoot').find('.guploaded-file .file-container').should('have.length', 2)
+    cy.get('@multiRoot').find('.guploaded-file .file-container').should('have.length', 2);
     cy.get('@multiRoot')
       .find('input[type="hidden"][name="user[file_input_multiprogress][]"]')
-      .should('have.length', 2)
-    cy.get('@multiRoot').find('.guploaded-file .close-btn').first().click()
-    cy.get('@multiRoot').find('.guploaded-file .file-container').should('have.length', 1)
+      .should('have.length', 2);
+    cy.get('@multiRoot').find('.guploaded-file .close-btn').first().click();
+    cy.get('@multiRoot').find('.guploaded-file .file-container').should('have.length', 1);
     cy.get('@multiRoot')
       .find('input[type="hidden"][name="user[file_input_multiprogress][]"]')
-      .should('have.length', 1)
-
-    cy.visit(htmlUploadUrl)
-
-    cy.window()
-      .should((win) => {
-        const multiComp = getRealComponent(win, win.GLib.component.findById('mp1'))
-        expect(multiComp, 'html multi progress component').to.exist
-        expect(multiComp.$el, 'html multi progress element').to.exist
-        expect(multiComp.$el.querySelector('.gdrop-file'), 'html multi progress dropzone').to.exist
-      })
-      .then((win) => {
-        const multiComp = getRealComponent(win, win.GLib.component.findById('mp1'))
-        cy.wrap(multiComp.$el).as('htmlMultiRoot')
-        cy.wrap(multiComp.$el.querySelector('.gdrop-file')).as('htmlDropzone')
-      })
-
-    cy.get('@htmlDropzone').selectFile(
-      { ...pngFile, fileName: 'html-mode.png' },
-      { action: 'drag-drop' }
-    )
-
-    cy.get('@htmlMultiRoot').find('.guploaded-file .file-container').should('have.length', 1)
+      .should('have.length', 1);
+
+    cy.visit(htmlUploadUrl);
+
+    withComponentThen('mp1', (comp) => {
+      expect(comp.$el, 'html multi progress element').to.exist;
+      expect(comp.$el.querySelector('.gdrop-file'), 'html multi progress dropzone').to.exist;
+      cy.wrap(comp.$el).as('htmlMultiRoot');
+      cy.wrap(comp.$el.querySelector('.gdrop-file')).as('htmlDropzone');
+    });
+
+    cy.get('@pngContents').then((contents) => {
+      cy.get('@htmlDropzone').selectFile(
+        { contents, fileName: 'html-mode.png', mimeType: 'image/png' },
+        { action: 'drag-drop' }
+      );
+    });
+
+    cy.get('@htmlMultiRoot').find('.guploaded-file .file-container').should('have.length', 1);
     cy.get('@htmlMultiRoot')
       .find('input[type="hidden"][name="user[file_multiprogress1][]"]')
-      .should('not.exist')
-  })
+      .should('not.exist');
+  });
+
+  it('rejects files with an invalid type in multi progress view', () => {
+    cy.fixture('document.pdf', null).as('pdfContents');
+
+    cy.visit(url);
+
+    withComponentThen('fields_upload_multiprogress', (comp) => {
+      expect(comp.$el.querySelector('.gdrop-file'), 'dropzone').to.exist;
+      cy.wrap(comp.$el).as('multiRoot');
+      cy.wrap(comp.$el.querySelector('.gdrop-file')).as('dropzone');
+    });
+
+    cy.get('@pdfContents').then((contents) => {
+      cy.get('@dropzone').selectFile(
+        { contents, fileName: 'document.pdf', mimeType: 'application/pdf' },
+        { action: 'drag-drop' }
+      );
+    });
+    cy.get('@multiRoot').find('.guploaded-file').should('not.exist');
+  });
+
+  it('rejects files that exceed the maximum file size in multi progress view', () => {
+    // maxFileSize: 10 in the test page → 10 * 1000 = 10,000 bytes limit
+    cy.fixture('large.png', null).as('largeContents');
+
+    cy.visit(url);
+
+    withComponentThen('fields_upload_multiprogress', (comp) => {
+      expect(comp.$el.querySelector('.gdrop-file'), 'dropzone').to.exist;
+      cy.wrap(comp.$el).as('multiRoot');
+      cy.wrap(comp.$el.querySelector('.gdrop-file')).as('dropzone');
+    });
+
+    cy.get('@largeContents').then((contents) => {
+      cy.get('@dropzone').selectFile(
+        { contents, fileName: 'large.png', mimeType: 'image/png' },
+        { action: 'drag-drop' }
+      );
+    });
+    cy.get('@multiRoot').find('.guploaded-file').should('not.exist');
+  });
+
+  it('rejects uploads that exceed the maximum file count in multi progress view', () => {
+    let uploadIndex = 0;
+
+    cy.fixture('upload.png', null).as('pngContents');
+
+    cy.intercept('POST', /\/(glib\/glib_direct_uploads|rails\/active_storage\/direct_uploads)$/, (req) => {
+      uploadIndex += 1;
+      req.reply({
+        statusCode: 200,
+        body: {
+          signed_id: `signed-${uploadIndex}`,
+          direct_upload: {
+            url: 'https://example.com/rails/active_storage/blobs/upload',
+            headers: { 'Content-Type': 'text/plain' }
+          }
+        }
+      });
+    }).as('directUploadCreate');
+
+    cy.intercept('PUT', 'https://example.com/rails/active_storage/blobs/upload', { statusCode: 200 }).as('directUploadStore');
+
+    cy.visit(url);
+
+    withComponentThen('fields_upload_multiprogress', (comp) => {
+      expect(comp.$el.querySelector('.gdrop-file'), 'dropzone').to.exist;
+      cy.wrap(comp.$el).as('multiRoot');
+      cy.wrap(comp.$el.querySelector('.gdrop-file')).as('dropzone');
+    });
+
+    // Upload 2 files to reach maxFileLength: 2
+    cy.get('@pngContents').then((contents) => {
+      cy.get('@dropzone').selectFile(
+        { contents, fileName: 'first.png', mimeType: 'image/png' },
+        { action: 'drag-drop' }
+      );
+    });
+    cy.wait('@directUploadCreate');
+    cy.wait('@directUploadStore');
+    cy.get('@pngContents').then((contents) => {
+      cy.get('@dropzone').selectFile(
+        { contents, fileName: 'second.png', mimeType: 'image/png' },
+        { action: 'drag-drop' }
+      );
+    });
+    cy.wait('@directUploadCreate');
+    cy.wait('@directUploadStore');
+    cy.get('@multiRoot').find('.guploaded-file .file-container').should('have.length', 2);
+
+    // A 3rd file should be rejected — container count stays at 2
+    cy.get('@pngContents').then((contents) => {
+      cy.get('@dropzone').selectFile(
+        { contents, fileName: 'third.png', mimeType: 'image/png' },
+        { action: 'drag-drop' }
+      );
+    });
+    cy.get('@multiRoot').find('.guploaded-file .file-container').should('have.length', 2);
+  });
 
   it('submits the form', () => {
-    cy.visit(url)
+    cy.visit(url);
+
+    cy.contains('submit').click();
+    cy.get('.unformatted').should('contain.text', 'Method: POST');
+  });
+
+  it('pastes an image from clipboard and shows filename', () => {
+    let uploadIndex = 0;
+
+    cy.intercept('POST', /\/(glib\/glib_direct_uploads|rails\/active_storage\/direct_uploads)$/, (req) => {
+      uploadIndex += 1;
+      req.reply({
+        statusCode: 200,
+        body: {
+          signed_id: `signed-clip-${uploadIndex}`,
+          direct_upload: {
+            url: 'https://example.com/rails/active_storage/blobs/upload',
+            headers: { 'Content-Type': 'text/plain' }
+          }
+        }
+      });
+    }).as('directUploadCreate');
+
+    cy.intercept('PUT', 'https://example.com/rails/active_storage/blobs/upload', {
+      statusCode: 200
+    }).as('directUploadStore');
+
+    cy.visit(url);
+
+    withComponentThen('fields_upload_clipboard', (comp) => {
+      cy.wrap(comp.$el).as('clipRoot');
+    });
+
+    cy.window().then((win) => {
+      const mockBlob = new win.Blob(['fake-png'], { type: 'image/png' });
+      cy.stub(win.navigator.clipboard, 'read').resolves([
+        { types: ['image/png'], getType: () => Promise.resolve(mockBlob) }
+      ]);
+    });
+
+    cy.get('@clipRoot').find('.v-input__append i').click();
+    cy.wait('@directUploadCreate');
+    cy.wait('@directUploadStore');
 
-    cy.contains('submit').click()
-    cy.get('.unformatted').should('contain.text', 'Method: POST')
-  })
-})
+    cy.get('@clipRoot').find('input').should('have.value', 'clipboard.png');
+    cy.get('@clipRoot')
+      .find('input[type="hidden"][name="user[file_clipboard]"]')
+      .should('have.value', 'signed-clip-1');
+  });
+});

package/cypress/e2e/glib-web/image.cy.js

@@ -1,53 +1,82 @@
-import { testPageUrl } from "../../helper.js"
+import { testPageUrl } from "../../helper.js";
 
-const url = testPageUrl('image')
-const imageSelector = '#image_main'
+const url = testPageUrl('image');
+const imageSelector = '#image_main';
 
 const getImage = () => {
   return cy.get(imageSelector).then(($el) => {
-    const image = $el.is('img') ? $el : $el.find('img')
-    expect(image.length).to.be.greaterThan(0)
-    return cy.wrap(image)
-  })
-}
+    const image = $el.is('img') ? $el : $el.find('img');
+    expect(image.length).to.be.greaterThan(0);
+    return cy.wrap(image);
+  });
+};
 
 describe('image', () => {
   it('updates size and fit settings', () => {
-    cy.visit(url)
+    cy.visit(url);
 
-    cy.contains('Default').click()
-    getImage().should('have.css', 'object-fit', 'contain')
+    cy.contains('Default').click();
+    getImage().should('have.css', 'object-fit', 'contain');
 
-    cy.contains('Crop square').click()
-    getImage().should('have.css', 'object-fit', 'cover')
+    cy.contains('Crop square').click();
+    getImage().should('have.css', 'object-fit', 'cover');
     getImage().should(($image) => {
-      expect($image.attr('width')).to.eq('160px')
-    })
+      expect($image.attr('width')).to.eq('160px');
+    });
 
-    cy.contains('Full width').click()
-    getImage().should('have.css', 'object-fit', 'contain')
+    cy.contains('Full width').click();
+    getImage().should('have.css', 'object-fit', 'contain');
 
-    cy.contains('Tall crop').click()
-    getImage().should('have.css', 'object-fit', 'cover')
-  })
+    cy.contains('Tall crop').click();
+    getImage().should('have.css', 'object-fit', 'cover');
+  });
 
   it('toggles badges', () => {
-    cy.visit(url)
+    cy.visit(url);
 
-    cy.contains('Show badge').click()
-    cy.get('#image_main .v-badge__badge').should('contain.text', '3')
-  })
+    cy.contains('Show badge').click();
+    cy.get('#image_main .v-badge__badge').should('contain.text', '3');
+  });
 
   it('handles tiny thumbnails', () => {
-    cy.visit(url)
+    cy.visit(url);
 
-    cy.contains('Tiny thumbnail').click()
-    getImage().should('have.css', 'object-fit', 'cover')
+    cy.contains('Tiny thumbnail').click();
+    getImage().should('have.css', 'object-fit', 'cover');
     getImage().should(($image) => {
-      expect($image.attr('width')).to.eq('64px')
-    })
+      expect($image.attr('width')).to.eq('64px');
+    });
 
-    cy.contains('Restore size').click()
-    getImage().should('have.css', 'object-fit', 'contain')
-  })
-})
+    cy.contains('Restore size').click();
+    getImage().should('have.css', 'object-fit', 'contain');
+  });
+
+  it('fits by height only (clip)', () => {
+    cy.visit(url);
+
+    cy.contains('Height clip').click();
+    getImage().should('have.css', 'object-fit', 'contain');
+    getImage().should(($image) => {
+      expect($image.attr('height')).to.eq('200px');
+    });
+  });
+
+  it('fits by height only (crop)', () => {
+    cy.visit(url);
+
+    cy.contains('Height crop').click();
+    getImage().should('have.css', 'object-fit', 'cover');
+    getImage().should(($image) => {
+      expect($image.attr('height')).to.eq('160px');
+    });
+  });
+
+  it('handles image onClick', () => {
+    cy.visit(url);
+
+    cy.on('window:alert', (message) => {
+      expect(message).to.include('Image clicked');
+    });
+    getImage().click();
+  });
+});

package/cypress/e2e/glib-web/switch.cy.js

@@ -0,0 +1,13 @@
+import { testPageUrl } from "../../helper.js";
+
+const url = testPageUrl('switch');
+
+describe('switch', () => {
+  it('toggles push notifications on from default off state', () => {
+    cy.visit(url);
+
+    cy.contains('Push notifications').click();
+
+    cy.contains('Push enabled').should('be.visible');
+  });
+});

package/cypress/e2e/glib-web/tabBar.cy.js

@@ -0,0 +1,23 @@
+import { testPageUrl } from "../../helper.js";
+
+const url = testPageUrl('tabBar');
+
+describe('tabBar', () => {
+  it('shows Tapped Alerts snackbar when Alerts tab is clicked', () => {
+    cy.visit(url);
+
+    cy.contains('Alerts').click();
+
+    cy.contains('Tapped Alerts').should('be.visible');
+  });
+
+  it('renders all-disabled tabs as unclickable', () => {
+    cy.visit(url);
+
+    cy.contains('All tabs disabled').should('be.visible');
+    cy.contains('One').should('be.visible');
+    cy.contains('Two').should('be.visible');
+    cy.contains('Three').should('be.visible');
+  });
+
+});

package/cypress/fixtures/document.pdf

@@ -0,0 +1,12 @@
+%PDF-1.4
+1 0 obj<</Type /Catalog /Pages 2 0 R>>endobj 2 0 obj<</Type /Pages /Kids [3 0 R] /Count 1>>endobj 3 0 obj<</Type /Page /MediaBox [0 0 3 3]>>endobj
+xref
+0 4
+0000000000 65535 f 
+0000000009 00000 n 
+0000000058 00000 n 
+0000000115 00000 n 
+trailer<</Size 4 /Root 1 0 R>>
+startxref
+190
+%%EOF

package/cypress/helper.js

@@ -16,4 +16,16 @@ function withComponent(id, callback) {
   })
 }
 
-export { testPageUrl, withComponent }
+function withComponentThen(id, callback) {
+  return cy.window()
+    .should((win) => {
+      const comp = realComponent(win.GLib.component.findById(id))
+      expect(comp).to.exist
+      expect(comp.$el instanceof win.HTMLElement).to.be.true
+    })
+    .then((win) => {
+      callback(realComponent(win.GLib.component.findById(id)))
+    })
+}
+
+export { testPageUrl, withComponent, withComponentThen }