Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-131981

Ability to create remote web components in the portal

    Details

      Description

      The goal of this epic is to enable portal to include remote web components.

      A remote web component is declared by providing the following information:

      • A remote URL from where the component code (.js) is to be loaded
      • The web component name

      Once declared, portal will make it available.

      Also, integrate with dev cycle (allow js-toolkit to create web components). It should work similarly as remote web apps

       

      Test Scenarios:

      Requirement Test Scenarios Covered by frontend/backend Unit Test? Test Priority (business impact)  Chrome
      Pass/Fail
        Given: Custom Elements admin page
      When: Click Add Button
      And When: Input
      Name: Vanilla Counter
      HTML Element Name: vanilla-counter
      URL: http://remote-component-test.wincent.com/packages/vanilla-counter/index.js
      And When: Save
      Then: Custom Elements admin page lists the Name, HTML Element Name, and URL
      no 5-critical  
        Given: A created Custom Element
      When: Click Edit
      And When: edit the custom element fields
      And When: Save
      Then: Custom Elements has been updated on Custom Elements admin page
      no 4-major  
        Given: A created Custom Element
      When: Click Delete
      Then: The Custom Element is removed from Custom Elements admin page
      no 4-major  
        Given: Custom Elements Widgets admin page
      When: Click Add Button
      And When: Input
      Name: Vanila Counter
      HTML Element Name: vanilla-counter
      Instanceable: toggled on
      Properties: test-data-user=QAuser
      CSS URL: http://remote-component-test.wincent.com/index.css
      And When: Save
      Then: Custom Elements admin page lists the Name, HTML Element Name
      And When: Click Portlet Name
      Then: All fields are saved properly
      no 5-critical  
        Given: A created Custom Elements Widgets admin page
      When: Click Edit
      And When: Edit Name, HTML Element Name, Instanceable, Properties tag, CSS URL
      And When: Save
      Then: The Widget fields are updated on the admin page
      And When: Click Edit
      Then: The Widget fields are updated
      no 4-major  
        Given: A created Custom Element Widget
      When: Click Delete
      Then: The Custom Element Widget is removed from Custom Elements admin page
      no 4-major  
        Given: A created Custom Element Widget referencing vanilla counter custom element (http://remote-component-test.wincent.com/packages/vanilla-counter/index.js)
      And Given: Custom Element Widget on content page
      When: Navigate to content page
      Then: Plus and minus buttons are present in portlet
      And When: Clicking on plus button
      Then: Adds 1 to counter
      And When: Clicking on minus button
      Then: Subtracts 1 to counter
      no 5-critical  
        Given: A created Custom Element Widget referencing vanilla counter custom element (http://remote-component-test.wincent.com/packages/vanilla-counter/index.js)
      And Given:
      Instanceable: toggled on
      And Given: Custom Element Widget on content page
      When: Open Add Widget Panel
      Then: Able to add another Custom Element Widget to the page
      no 3-medium  
        Given: A created Custom Element Widget referencing vanilla counter custom element (http://remote-component-test.wincent.com/packages/vanilla-counter/index.js)
      And Given:
      Instanceable: toggled off
      And Given: Custom Element Widget on content page
      When: Open Add Widget Panel
      Then: Not able to add another Custom Element Widget to the page
      no 3-medium  
        Given: A created Custom Element Widget referencing vanilla counter custom element (http://remote-component-test.wincent.com/packages/vanilla-counter/index.js)
      And Given:
      Properties: test-data-user=QAuser
      And Given: Custom Element Widget on content page
      When: Navigate to content page
      Then: test-data-user=QAuser element is present in html
      no 3-medium  
        Given: A created Custom Element Widget referencing vanilla counter custom element (http://remote-component-test.wincent.com/packages/vanilla-counter/index.js)
      And Given: CSS URLs: http://remote-component-test.wincent.com/index.css
      And Given: Custom Element Widget on content page
      When: Navigate to content page
      Then: in DOM > Sources > remote-component-test.wincent.com/index.css is listed and contents match
      ```
      body { display: flex; flex-direction: column; font-family: sans-serif; margin: 0; min-height: 100vh; }
       
      footer { background-color: peach-puff; border-top: 1px solid #ccc; padding: 16px; }
       
      header { background-color: azure; border-bottom: 1px solid #ccc; }
       
      li { line-height: 1.5; margin-bottom: 1em; }
       
      #content { flex: 1; padding: 16px; }
      ```
      no 3-medium  
      *Will not be tested by QA, already tested by dev Given: A 2 node cluster environment
      And Given: On 1st node, A created Custom Element Widget referencing vanilla counter custom element (http://remote-component-test.wincent.com/packages/vanilla-counter/index.js) on a previous liferay version
      And Given: On 1st node, Custom Element Widget on content page
      When: On 2nd node, Make edit to the custom element
      Then: Edit is reflected on 1st cluster node
      no -3-medium-  -- 
        Given: A created Custom Element Widget referencing vanilla counter custom element (http://remote-component-test.wincent.com/packages/vanilla-counter/index.js) on a previous liferay version
      And Given: Custom Element Widget on content page
      When: Upgrade liferay version to latest version
      Then: All fields are present
      And Then: Plus and minus buttons are present in portlet
      And When: Clicking on plus button
      Then: Adds 1 to counter
      And When: Clicking on minus button
      Then: Subtracts 1 to counter
      no 3-medium  

      Exploratory testing to consider:

      Test Scenarios Covered by frontend/backend Unit Test? Test Priority (business impact)  Firefox
      Pass/Fail
      Chrome
      Pass/Fail
      Safari Pass/Fail Edge
      Pass/Fail
      Exploratory test for visual and functional issues on Chrome/FF/Edge/Safari.
      1. Check that the admin pages are displays properly
      2. Validate custom element widget is displayed properly
      no 2-low    n/a    
      Exploratory test for edge cases:
      Some items to explore:
      1. What happens with multiple custom elements that are defined with the same html tag?
      2. Will a different host location still work? ie: js file on google drive
      no 2-low    n/a  n/a n/a
      Given: Custom Elements and Custom Elements Widget admin and edit pages
      When: Use keyboard only
      Then: Able to access all interactible elements invovled
      no 2-low  n/a    n/a n/a
      Given: Custom Elements and Custom Elements Widget admin and edit pages
      When: Use AXE chrome extension
      Then: No issues related to WCAG AA and A
      no 2-low  n/a    n/a n/a

      *Note: Clustering will not be tested or automated due to the heavy cost of setup and reliability issues. The likelihood of clustering feature failing or unintentionally disabled is very low. Testing was completed manually on PR here.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              support-lep@liferay.com SE Support
              Reporter:
              daniel.sanz Daniel Sanz
              Recent user:
              Bruno Fernández
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:

                  Packages

                  Version Package