fix(tab-icons) feat(v3-list-data-read-write-support)

cypress/integration/component-data.js → cypress/integration/v2/component-data.js

@@ -1,4 +1,4 @@
-it('should display read-only function/HTMLElement attributes + allow editing of booleans, numbers and strings', () => {
+it('v2 - should display read-only function/HTMLElement attributes + allow editing of booleans, numbers and strings', () => {
     cy.visit('/').get('[data-testid=component-name]').should('be.visible')
 
     cy.get('[data-testid=component-container]').first().click()
@@ -73,7 +73,7 @@ it('should display read-only function/HTMLElement attributes + allow editing of
     cy.iframe('#target').contains('Str, type: "string", value: "devtools"')
 })
 
-it('should display nested arrays/object attributes and support editing', () => {
+it('v2 - should display nested arrays/object attributes and support editing', () => {
     cy.visit('/').get('[data-testid=component-name]').should('be.visible')
 
     cy.get('[data-testid=component-name]').first().click().trigger('mouseleave')
@@ -127,7 +127,7 @@ it('should display nested arrays/object attributes and support editing', () => {
     cy.get('[data-testid=data-property-name-0]').click()
 })
 
-it('should support x-model updates and editing values', () => {
+it('v2 - should support x-model updates and editing values', () => {
     cy.visit('/').get('[data-testid=component-name]').should('be.visible')
 
     cy.get('[data-testid=component-name]').contains('model-no-render').click().trigger('mouseleave')
@@ -168,7 +168,7 @@ it('should support x-model updates and editing values', () => {
     cy.iframe('#target').find('[data-testid=nested-model-no-render]').should('have.value', 'nested-from-devtools')
 })
 
-it('should reset component selection when changing page', () => {
+it('v2 - should reset component selection when changing page', () => {
     cy.visit('/')
 
     cy.get('[data-testid=component-name]').first().click()

cypress/integration/component-list.js → cypress/integration/v2/component-list.js

@@ -1,4 +1,4 @@
-it('should get names of components', () => {
+it('v2 - should get names of components', () => {
     cy.visit('/')
         .get('[data-testid=component-name]')
         .should('be.visible')
@@ -9,7 +9,7 @@ it('should get names of components', () => {
         .should('contain.text', 'combobox')
 })
 
-it('should create globals + add annotation for each component', () => {
+it('v2 - should create globals + add annotation for each component', () => {
     cy.visit('/').get('[data-testid=component-name]').should('be.visible')
 
     let win
@@ -38,7 +38,7 @@ it('should create globals + add annotation for each component', () => {
         })
 })
 
-it('should handle adding and removing new components', () => {
+it('v2 - should handle adding and removing new components', () => {
     cy.visit('/')
         .get('[data-testid=component-name]')
         .should('have.length.above', 0)
@@ -53,7 +53,7 @@ it('should handle adding and removing new components', () => {
         })
 })
 
-it('should handle replacing a component and keep its listed position', () => {
+it('v2 - should handle replacing a component and keep its listed position', () => {
     let currentIndex = -1
     cy.visit('/')
         .get('[data-testid=component-name]')
@@ -68,7 +68,7 @@ it('should handle replacing a component and keep its listed position', () => {
         .then((index) => expect(currentIndex).to.equal(index))
 })
 
-it('should add/remove hover overlay on component mouseenter/leave', () => {
+it('v2 - should add/remove hover overlay on component mouseenter/leave', () => {
     cy.visit('/')
     // check overlay works for first component
     cy.get('[data-testid=component-container]').first().should('be.visible').trigger('mouseenter')
@@ -132,7 +132,7 @@ it('should add/remove hover overlay on component mouseenter/leave', () => {
     cy.iframe('#target').find('[data-testid=hover-element]').should('not.exist')
 })
 
-it('should support selecting/unselecting a component', () => {
+it('v2 - should support selecting/unselecting a component', () => {
     cy.visit('/')
 
     cy.get('[data-testid=component-container]').last().click().should('have.class', 'text-white bg-alpine-300')
@@ -143,7 +143,7 @@ it('should support selecting/unselecting a component', () => {
     cy.get('[data-testid=component-container]').last().should('not.have.class', 'text-white bg-alpine-300')
 })
 
-it('should display message with number of components watched', () => {
+it('v2 - should display message with number of components watched', () => {
     cy.visit('/')
         .get('[data-testid=component-name]')
         .should('have.length.above', 0)

cypress/integration/v2/warning.js

@@ -0,0 +1,84 @@
+it('v2 - should catch component initialisation errors', () => {
+    cy.visit('/').get('[data-testid=component-name]').should('have.length.above', 0)
+    cy.get('[data-testid=tab-link-warnings').should('be.visible').click()
+    cy.get('[data-testid=warnings-tab-content]').should('be.visible').should('contain.text', 'No warnings found')
+
+    cy.iframe('#target').find('[data-testid=inject-broken]').click()
+
+    cy.get('[data-testid=footer-line]').should(($el) => {
+        expect($el.text()).to.contain('1 warning')
+    })
+
+    cy.get('[data-testid=warnings-tab-content]').should('be.visible').should('not.contain.text', 'No warnings found')
+
+    cy.get('[data-testid=eval-error-div]')
+        .should('have.length', 1)
+        .should(($el) => {
+            const text = $el.text().replace(/\n/g, '')
+            expect(text).to.contain(`Error evaluating`)
+            expect(text).to.contain(`"{ foo: 'aaa' "`)
+            expect(text).to.contain(`SyntaxError: Unexpected token ')'`)
+        })
+})
+it('v2 - should catch x-on errors', () => {
+    cy.iframe('#target').find('[data-testid=broken-click]').click()
+
+    cy.get('[data-testid=eval-error-button]').should('have.length', 1)
+
+    cy.get('[data-testid=footer-line]').should(($el) => {
+        expect($el.text()).to.contain('2 warnings')
+    })
+
+    cy.get('[data-testid=warnings-tab-content]').should('be.visible').should('not.contain.text', 'No warnings found')
+
+    cy.get('[data-testid=eval-error-button]').should(($el) => {
+        const text = $el.text().replace(/\n/g, '')
+        expect(text).to.contain(`Error evaluating`)
+        expect(text).to.contain(`"foo.bar.baz"`)
+        expect(text).to.contain(`ReferenceError: foo is not defined`)
+    })
+})
+it('v2 - should scroll to newest error when warnings tab is open', () => {
+    cy.iframe('#target').find('[data-testid=broken-click]').click()
+    cy.iframe('#target').find('[data-testid=broken-click]').click()
+    cy.iframe('#target').find('[data-testid=broken-click]').click()
+
+    cy.get('[data-testid=eval-error-button').should('have.length', 4)
+
+    cy.get('[data-testid=footer-line]').should(($el) => {
+        expect($el.text()).to.contain('5 warnings')
+    })
+
+    cy.get('[data-testid=warnings-scroll-container]').should(($el) => {
+        expect($el.scrollTop()).not.to.equal(0)
+    })
+})
+
+it('v2 - should scroll to newest error when switching from components to warnings tab', () => {
+    cy.get('[data-testid=warnings-scroll-container]').scrollTo('top')
+    cy.get('[data-testid=warnings-scroll-container]').should(($el) => {
+        expect($el.scrollTop()).to.equal(0)
+    })
+
+    cy.get('[data-testid=tab-link-components]').click()
+    cy.get('[data-testid=warnings-tab-content]').should('not.be.visible')
+
+    cy.get('[data-testid=tab-link-warnings]').click()
+    cy.get('[data-testid=warnings-tab-content]').should('be.visible')
+
+    cy.get('[data-testid=warnings-scroll-container]').should(($el) => {
+        expect($el.scrollTop()).not.to.equal(0)
+    })
+})
+
+it('v2 - should toggle using footer links', () => {
+    cy.get('[data-testid=warnings-tab-content]').should('be.visible')
+    cy.get('[data-testid=footer-components-link').click()
+    cy.get('[data-testid=warnings-tab-content]').should('not.be.visible')
+    cy.get('[data-testid=footer-warnings-link').click()
+    cy.get('[data-testid=warnings-tab-content]').should('be.visible')
+
+    cy.get('[data-testid=warnings-scroll-container]').should(($el) => {
+        expect($el.scrollTop()).not.to.equal(0)
+    })
+})

cypress/integration/v3/component-data.js

@@ -0,0 +1,183 @@
+it('v3 -  should display read-only function/HTMLElement attributes + allow editing of booleans, numbers and strings', () => {
+    cy.visit('/?target=v3.html').get('[data-testid=component-name]').should('be.visible')
+
+    cy.get('[data-testid=component-container]').first().click()
+
+    cy.get('[data-testid=data-property-name-myFunction]').should('be.visible').contains('myFunction')
+
+    cy.get('[data-testid=data-property-value-myFunction]').should('contain.text', 'function')
+
+    cy.get('[data-testid=data-property-name-el]').contains('el')
+
+    cy.get('[data-testid=data-property-value-el]').should('contain.text', 'HTMLElement').as('elValue').click()
+
+    // check nested attributes
+    cy.get('[data-testid=data-property-name-name]').contains('name').should('be.visible')
+    cy.get('[data-testid=data-property-value-name]').should('contain.text', 'div')
+
+    cy.get('[data-testid=data-property-name-attributes]').contains('attributes').should('be.visible')
+    cy.get('[data-testid=data-property-value-attributes]').should('contain.text', 'Array[1]')
+
+    cy.get('[data-testid=data-property-name-children]').contains('children').should('be.visible')
+    cy.get('[data-testid=data-property-value-children]').should('contain.text', 'Array[5]')
+
+    // check they toggle off
+    cy.get('[data-testid=data-property-value-el]').click()
+
+    cy.get('[data-testid=data-property-value-name]').should('not.exist')
+
+    cy.get('[data-testid=data-property-name-attributes]').should('not.exist')
+    cy.get('[data-testid=data-property-name-children]').should('not.exist')
+
+    // booleans
+    cy.get('[data-testid=data-property-name-bool]').should('be.visible').contains('bool')
+    cy.get('[data-testid=data-property-value-bool]').should('contain.text', 'true')
+    // checkbox is visibility is toggled using CSS click the hidden element
+    cy.get('[data-testid=data-property-value-bool] [type=checkbox]').click({ force: true })
+    // check the edit worked
+    cy.get('[data-testid=data-property-name-bool]').should('be.visible').contains('bool')
+
+    cy.get('[data-testid=data-property-value-bool]').should('contain.text', 'false')
+
+    cy.iframe('#target').contains('Bool, type: "boolean", value: "false"')
+
+    // numbers
+    cy.get('[data-testid=data-property-name-num]').should('be.visible').contains('num')
+
+    cy.get('[data-testid=data-property-value-num]').should('contain.text', '5')
+    // edit icon visibility is toggled using CSS, force-click
+    cy.get('[data-testid=edit-icon-num]').click({ force: true })
+    // editing toggles window.alpineState, causes issues with visibility/re-rendering
+    // force all interactions
+    cy.get('[data-testid=input-num]')
+        .clear({ force: true })
+        .type('20', { force: true })
+        .siblings('[data-testid=save-icon]')
+        .click({ force: true })
+
+    cy.iframe('#target').contains('Num, type: "number", value: "20"')
+
+    // strings
+    cy.get('[data-testid=data-property-name-str]').should('be.visible').contains('str')
+    cy.get('[data-testid=data-property-value-str]').should('contain.text', 'string')
+    // edit icon visibility is toggled using CSS, force-click
+    cy.get('[data-testid=edit-icon-str]').click({ force: true })
+    // editing toggles window.alpineState, causes issues with visibility/re-rendering
+    // force all interactions
+    cy.get('[data-testid=input-str]')
+        .clear({ force: true })
+        .type('devtools', { force: true })
+        .siblings('[data-testid=save-icon]')
+        .click({ force: true })
+
+    cy.iframe('#target').contains('Str, type: "string", value: "devtools"')
+})
+
+it('v3 -  should display nested arrays/object attributes and support editing', () => {
+    cy.visit('/?target=v3.html').get('[data-testid=component-name]').should('be.visible')
+
+    cy.get('[data-testid=component-name]').first().click().trigger('mouseleave')
+
+    cy.get('[data-testid="data-property-name-nestedObjArr"]').contains('nestedObjArr')
+    cy.get('[data-testid="data-property-value-nestedObjArr"]').contains('Object')
+
+    cy.get('[data-testid="data-property-value-nestedObjArr"]').click()
+    cy.get('[data-testid=data-property-name-array]').should('be.visible').contains('array')
+    cy.get('[data-testid=data-property-value-array]').should('be.visible').contains('Array[1]')
+
+    cy.get('[data-testid=data-property-value-array]').click()
+
+    cy.get('[data-testid=data-property-name-0]').should('be.visible').contains('0')
+    cy.get('[data-testid=data-property-value-0]').should('be.visible').contains('Object')
+
+    cy.get('[data-testid=data-property-name-0]').click()
+
+    cy.get('[data-testid=data-property-name-nested]').should('be.visible').contains('nested')
+    cy.get('[data-testid=data-property-value-nested]').should('be.visible').contains('property')
+
+    // editing the nested array/object
+    cy.get('[data-testid=edit-icon-nested]').click({ force: true })
+    cy.get('[data-testid=input-nested]')
+        .clear({ force: true })
+        .type('from-devtools', { force: true })
+        .siblings('[data-testid=save-icon]')
+        .click({ force: true })
+
+    cy.iframe('#target')
+        .find('[data-testid=nested-obj-arr]')
+        .should('have.text', JSON.stringify({ array: [{ nested: 'from-devtools' }] }))
+
+    // check untoggling also works
+    cy.get('[data-testid=data-property-name-0]').click()
+
+    cy.get('[data-testid=data-property-name-nested]').should('not.exist')
+    cy.get('[data-testid=data-property-value-nested]').should('not.exist')
+
+    cy.get('[data-testid=data-property-value-array]').click()
+
+    cy.get('[data-testid=data-property-name-0]').should('not.exist')
+    cy.get('[data-testid=data-property-value-0]').should('not.exist')
+
+    cy.get('[data-testid="data-property-value-nestedObjArr"]').click()
+    cy.get('[data-testid=data-property-name-array]').should('not.exist')
+    cy.get('[data-testid=data-property-value-array]').should('not.exist')
+
+    cy.get('[data-testid="data-property-value-nestedObjArr"]').click()
+    cy.get('[data-testid=data-property-value-array]').click()
+    cy.get('[data-testid=data-property-name-0]').click()
+})
+
+it('v3 -  should support x-model updates and editing values', () => {
+    cy.visit('/?target=v3.html').get('[data-testid=component-name]').should('be.visible')
+
+    cy.get('[data-testid=component-name]').contains('model-no-render').click().trigger('mouseleave')
+
+    // check preloading doesn't cause issues with selected component tracking
+    cy.get('[data-testid=component-name]').last().trigger('mouseenter').trigger('mouseleave')
+
+    cy.get('[data-testid=data-property-name-text]').should('be.visible').contains('text')
+    cy.get('[data-testid=data-property-value-text]').should('be.visible').contains('initial')
+    cy.iframe('#target').find('[data-testid=model-no-render]').should('be.visible').clear().type('updated')
+    cy.get('[data-testid=data-property-value-text]').should('be.visible').contains('updated')
+
+    cy.get('[data-testid=edit-icon-text]').click({ force: true })
+    cy.get('[data-testid=input-text]')
+        .clear({ force: true })
+        .type('from-devtools', { force: true })
+        .siblings('[data-testid=save-icon]')
+        .click({ force: true })
+
+    cy.iframe('#target').find('[data-testid=model-no-render]').should('have.value', 'from-devtools')
+
+    // nested updates
+    cy.get('[data-testid=data-property-name-model]').click()
+    cy.get('[data-testid=data-property-name-nested').should('be.visible').contains('nested')
+    cy.get('[data-testid=data-property-value-nested').should('be.visible').contains('nested-initial')
+
+    cy.iframe('#target').find('[data-testid=nested-model-no-render]').clear().type('nested-update')
+    cy.get('[data-testid=data-property-name-nested').should('be.visible').contains('nested')
+    cy.get('[data-testid=data-property-value-nested').should('be.visible').contains('nested-update')
+
+    cy.get('[data-testid=edit-icon-nested]').click({ force: true })
+    cy.get('[data-testid=input-nested]')
+        .clear({ force: true })
+        .type('nested-from-devtools', { force: true })
+        .siblings('[data-testid=save-icon]')
+        .click({ force: true })
+
+    cy.iframe('#target').find('[data-testid=nested-model-no-render]').should('have.value', 'nested-from-devtools')
+})
+
+it('v3 -  should reset component selection when changing page', () => {
+    cy.visit('/?target=v3.html')
+
+    cy.get('[data-testid=component-name]').first().click()
+    cy.get('[data-testid=component-container]').first().should('have.class', 'text-white bg-alpine-300')
+
+    cy.get('[data-testid=data-property-name-myFunction]').should('be.visible').contains('myFunction')
+
+    cy.iframe('#target').find('[data-testid=navigation-target]').click()
+
+    cy.get('[data-testid=component-container]').first().should('not.have.class', 'text-white bg-alpine-300')
+    cy.get('[data-testid=data-property-name-myFunction]').should('not.exist')
+})