glib-web 5.0.7 → 6.0.1

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

@@ -1,82 +1,122 @@
-import { testPageUrl } from "../../helper.js"
+import { testPageUrl } from "../../helper.js";
 
-const url = testPageUrl('fields_select')
-
-const getSelectComponent = () =>
-  cy.window().then((win) => {
-    const comp = win.GLib.component.findById('select_media')
-    expect(comp).to.exist
-    return comp
-  })
+const url = testPageUrl('fields_select');
 
 describe('fields_select', () => {
   it('updates option variants', () => {
-    cy.visit(url)
-
-    cy.contains('Use icon options').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(4)
-      expect(comp.spec.options[0].icon.name).to.eq('star')
-      expect(comp.spec.multiple).to.not.eq(true)
-      expect(comp.spec.useChips).to.not.eq(true)
-    })
-
-    cy.contains('Use image options').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(4)
-      expect(comp.spec.options[0].imageUrl).to.contain('select-1')
-      expect(comp.spec.multiple).to.not.eq(true)
-      expect(comp.spec.useChips).to.not.eq(true)
-    })
-
-    cy.contains('Text only').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(4)
-      expect(comp.spec.options[0].icon).to.be.undefined
-      expect(comp.spec.options[0].imageUrl).to.be.undefined
-      // expect(comp.spec.value).to.eq('option3')
-      expect(comp.spec.multiple).to.not.eq(true)
-      expect(comp.spec.useChips).to.not.eq(true)
-    })
-
-    cy.contains('Multiple + chips').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(4)
-      expect(comp.spec.options[0].icon.name).to.eq('star')
-      // expect(comp.spec.value).to.deep.equal(['option1', 'option3'])
-      expect(comp.spec.multiple).to.eq(true)
-      expect(comp.spec.useChips).to.eq(true)
-    })
-  })
+    cy.visit(url);
+
+    cy.contains('Use icon options').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 4);
+    cy.get('#select_media').click();
+    cy.get('body').type('{esc}');
+    cy.get('#select_media .v-select--multiple').should('not.exist');
+    cy.get('#select_media .v-chip').should('not.exist');
+
+    cy.contains('Use image options').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 4);
+    cy.get('#select_media').click();
+    cy.get('.v-overlay--active .v-list-item').first().find('img').should('have.attr', 'src').and('contain', 'select-1');
+    cy.get('body').type('{esc}');
+    cy.get('#select_media .v-select--multiple').should('not.exist');
+    cy.get('#select_media .v-chip').should('not.exist');
+
+    cy.contains('Text only').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 4);
+    cy.get('#select_media').click();
+    cy.get('.v-overlay--active .v-list-item').first().find('.v-icon').should('not.exist');
+    cy.get('.v-overlay--active .v-list-item').first().find('img').should('not.exist');
+    cy.get('body').type('{esc}');
+    cy.get('#select_media .v-select--multiple').should('not.exist');
+    cy.get('#select_media .v-chip').should('not.exist');
+
+    cy.contains('Multiple + chips').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 4);
+    cy.get('#select_media').click();
+    cy.get('body').type('{esc}');
+    cy.get('#select_media .v-select--multiple').should('exist');
+    cy.get('#select_media .v-chip').should('exist');
+  });
+
+  it('selects all options in multiple mode', () => {
+    cy.on('uncaught:exception', (err) => {
+      if (err.message.includes('ResizeObserver')) return false;
+    });
+
+    cy.visit(url);
+
+    cy.contains('Multiple + chips').click();
+    cy.get('#select_media').click();
+    cy.get('.v-list-item').contains('Option 2').click();
+    cy.get('.v-list-item').contains('Option 4').click();
+    cy.get('body').type('{esc}');
+
+    cy.get('#select_media input[type="hidden"]').should('have.length', 4);
+    cy.get('#select_media input[type="hidden"]').eq(0).should('have.value', 'option1');
+    cy.get('#select_media input[type="hidden"]').eq(1).should('have.value', 'option3');
+    cy.get('#select_media input[type="hidden"]').eq(2).should('have.value', 'option2');
+    cy.get('#select_media input[type="hidden"]').eq(3).should('have.value', 'option4');
+  });
+
+  it('removes one chip from multiple selection', () => {
+    cy.visit(url);
+
+    cy.contains('Multiple + chips').click();
+    cy.get('#select_media').contains('.v-chip', 'Option 1').should('exist');
+    cy.get('#select_media').contains('.v-chip', 'Option 1').find('[data-testid="close-chip"]').click();
+    cy.get('#select_media').contains('.v-chip', 'Option 1').should('not.exist');
+    cy.get('#select_media input[type="hidden"][value="option1"]').should('not.exist');
+  });
+
+  it('collapses expanded chips back to overflow state', () => {
+    cy.on('uncaught:exception', (err) => {
+      if (err.message.includes('ResizeObserver')) return false;
+    });
+
+    cy.visit(url);
+
+    cy.contains('Multiple + chips').click();
+
+    // Initial collapsed state: overflow chip shows "X more"
+    cy.get('#select_media .expansion-chip').should('contain.text', 'more');
+    cy.get('#select_media').contains('.expansion-chip', 'Show less').should('not.exist');
+
+    // Expand: click the "X more" chip
+    cy.get('#select_media .expansion-chip').click();
+    cy.get('body').type('{esc}');
+
+    // Expanded state: "Show less" chip is visible, "X more" is gone
+    cy.get('#select_media .expansion-chip').should('contain.text', 'Show less');
+    cy.get('#select_media').contains('.expansion-chip', 'more').should('not.exist');
+
+    // Collapse: click "Show less" (calls collapseChips)
+    cy.get('#select_media .expansion-chip').click();
+    cy.get('body').type('{esc}');
+
+    // Back to collapsed state
+    cy.get('#select_media .expansion-chip').should('contain.text', 'more');
+    cy.get('#select_media').contains('.expansion-chip', 'Show less').should('not.exist');
+  });
 
   it('toggles disabled and resets options', () => {
-    cy.visit(url)
-
-    cy.contains('Disable select').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.disabled).to.eq(true)
-    })
-    cy.get('#select_media').find('.v-input--disabled').should('exist')
-
-    cy.contains('Enable select').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.disabled).to.not.eq(true)
-    })
-    cy.get('#select_media').find('.v-input--disabled').should('not.exist')
-
-    cy.contains('Empty options').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(0)
-    })
-
-    cy.contains('Restore defaults').click()
-    getSelectComponent().then((comp) => {
-      expect(comp.spec.options).to.have.length(4)
-      expect(comp.spec.options[0].icon.name).to.eq('star')
-      expect(comp.fieldModel).to.eq('option1')
-      expect(comp.spec.disabled).to.not.eq(true)
-      expect(comp.spec.multiple).to.not.eq(true)
-      expect(comp.spec.useChips).to.not.eq(true)
-    })
-  })
-})
+    cy.visit(url);
+
+    cy.contains('Disable select').click();
+    cy.get('#select_media').find('.v-input--disabled').should('exist');
+
+    cy.contains('Enable select').click();
+    cy.get('#select_media').find('.v-input--disabled').should('not.exist');
+
+    cy.contains('Empty options').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 0);
+
+    cy.contains('Restore defaults').click();
+    cy.get('#select_media select[hidden] option').should('have.length', 4);
+    cy.get('#select_media').click();
+    cy.get('body').type('{esc}');
+    cy.get('#select_media input[type="hidden"]').should('have.length', 1).and('have.value', 'option1');
+    cy.get('#select_media .v-input--disabled').should('not.exist');
+    cy.get('#select_media .v-select--multiple').should('not.exist');
+    cy.get('#select_media .v-chip').should('not.exist');
+  });
+});

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');
+  });
+});