docs: add playwright test for Neo.component.label (#7737)

[Alachi24]

Please make sure to read the Contributing Guidelines:

https://github.com/neomjs/neo/blob/dev/CONTRIBUTING.md

Does this PR resolve an issue? (Required)

Closes #

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Build-related changes
• Other, please describe: Just a test, no refactoring

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills this requirement:

• It's submitted to the dev branch, not the main branch

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:
closes #7737

kindly review @tobiu

[tobiu]

Did you actually run the test file, and ensure that it passes? await expect(label).toHaveAttribute('data-ntype', 'label'); => this one looks like a hallucination to me. Afaik there is no data-ntype DOM attribute.

[Alachi24]

I did using the AI Agent, the only issue I got was not having a Playwright dependency installed which I've rectified but before that, the response given was everything is in check.

I'd test it again and see the outcome @tobiu

[Alachi24]

I have done retest using the AI Agent. Kindly check and confirm @tobiu

[tobiu]

i am not sure what you are doing, but if i use npm run test-components i get this:

/usr/local/bin/npm run test-components

> [email protected] test-components
> playwright test -c test/playwright/playwright.config.component.mjs

[WebServer] <i> [webpack-dev-server] Project is running at:
[WebServer] <i> [webpack-dev-server] Loopback: http://localhost:8080/, http://[::1]:8080/
[WebServer] <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.178.75:8080/
[WebServer] <i> [webpack-dev-server] On Your Network (IPv6): http://[fdf3:513e:29c0:0:c52:ab3c:4d9a:c1fd]:8080/
[WebServer] <i> [webpack-dev-server] Content not from webpack is served from '/Users/Shared/github/neomjs/neo' directory
[WebServer] <i> [webpack-dev-middleware] wait until bundle finished: /
[WebServer] <i> [webpack-dev-middleware] wait until bundle finished: /

Running 35 tests using 1 worker

  ✓   1 …right/component/button/Base.spec.mjs:19:5 › Neo.button.Base › should create a button with icon and text (483ms)
  ✓   2 …ium] › test/playwright/component/button/Base.spec.mjs:47:5 › Neo.button.Base › should show isLoading UI (772ms)
  ✓   3 …aywright/component/component/Base.spec.mjs:50:5 › Neo.component.Base › Checking colliding style updates (600ms)
  ✓   4 …aywright/component/component/Base.spec.mjs:128:5 › Neo.component.Base › Checking colliding vdom updates (533ms)
  ✓   5 …nent/DateSelector.spec.mjs:40:5 › Neo.component.DateSelector › should render the DateSelector component (449ms)
  ✓   6 …right/component/component/Image.spec.mjs:37:5 › Neo.component.Image › should render and mount correctly (432ms)
  ✓   7 …onent/Image.spec.mjs:47:5 › Neo.component.Image › should update src and alt attributes on config change (330ms)
  ✘   8 …Neo.component.Label › Component-Specific Feature Tests › should have baseCls and render as a <label> tag (5.4s)
  ✓   9 …9 › Neo.component.Label › Component-Specific Feature Tests › should set textContent via the text config (376ms)
  ✓  10 …ponent.Label › Component-Specific Feature Tests › should have user-select: none and white-space: nowrap (444ms)
  ✓  11 …omponent/Label.spec.mjs:59:9 › Neo.component.Label › Inherited Behavior Tests › should apply custom cls (434ms)
  ✓  12 …ent/component/Label.spec.mjs:64:9 › Neo.component.Label › Inherited Behavior Tests › should be disabled (428ms)
  ✓  13 …onent/component/Label.spec.mjs:69:9 › Neo.component.Label › Inherited Behavior Tests › should be hidden (321ms)
  ✓  14 …ec.mjs:74:9 › Neo.component.Label › Inherited Behavior Tests › should set innerHTML via the html config (428ms)
  ✘  15 …ponent/Label.spec.mjs:80:9 › Neo.component.Label › Inherited Behavior Tests › should apply custom styles (5.3s)
  ✓  16 …t/component/Label.spec.mjs:87:9 › Neo.component.Label › Inherited Behavior Tests › should be scrollable (369ms)
  ✓  17 …omponent/Label.spec.mjs:93:9 › Neo.component.Label › Inherited Behavior Tests › should apply ui classes (437ms)
  ✓  18 …nent/component/Label.spec.mjs:98:9 › Neo.component.Label › Inherited Behavior Tests › should apply role (433ms)
  ✓  19 …ent/component/Label.spec.mjs:103:9 › Neo.component.Label › Inherited Behavior Tests › should change tag (349ms)
  ✘  20 …ec.mjs:108:9 › Neo.component.Label › Inherited Behavior Tests › should apply wrapperCls and wrapperStyle (5.3s)
  ✓  21 …ponent/Label.spec.mjs:122:9 › Neo.component.Label › Inherited Behavior Tests › should show isLoading UI (491ms)
  ✓  22 …mponent/Label.spec.mjs:138:9 › Neo.component.Label › Inherited Behavior Tests › should create a tooltip (766ms)
  ✓  23 …ium] › test/playwright/component/form/field/ComboBox.spec.mjs:55:5 › Neo.form.field.ComboBox › Editable (848ms)
  ✓  24 …/playwright/component/form/field/ComboBox.spec.mjs:114:5 › Neo.form.field.ComboBox › Keyboard navigation (1.3s)
  ✓  25 …test/playwright/component/form/field/ComboBox.spec.mjs:170:5 › Neo.form.field.ComboBox › Type to filter (789ms)
  ✓  26 …/playwright/component/form/field/ComboBox.spec.mjs:212:5 › Neo.form.field.ComboBox › With store as data (508ms)
  ✓  27 …wright/component/form/field/Number.spec.mjs:41:5 › Neo.form.field.Number › should create a number field (441ms)
  ✓  28 …d/Number.spec.mjs:49:5 › Neo.form.field.Number › should increment and decrement value with spin buttons (709ms)
  ✓  29 …nt/form/field/Number.spec.mjs:65:5 › Neo.form.field.Number › should wrap around when exceeding maxValue (586ms)
  ✓  30 …orm/field/Number.spec.mjs:85:5 › Neo.form.field.Number › should wrap around when falling below minValue (481ms)
  ✓  31 …laywright/component/form/field/Text.spec.mjs:43:5 › Neo.form.field.Text › Check isTouched on focusLeave (598ms)
  ✓  32 …laywright/component/form/field/Text.spec.mjs:57:5 › Neo.form.field.Text › Check isTouched on focusEnter (560ms)
  ✓  33 …laywright/component/form/field/Text.spec.mjs:70:5 › Neo.form.field.Text › Check isTouched set initially (437ms)
  ✓  34 …mium] › test/playwright/component/form/field/Text.spec.mjs:79:5 › Neo.form.field.Text › Label Positions (659ms)
  ✓  35 [chromium] › test/playwright/component/list/Chip.spec.mjs:58:5 › ChipListComponent › Sanity (563ms)


  1) [chromium] › test/playwright/component/component/Label.spec.mjs:39:9 › Neo.component.Label › Component-Specific Feature Tests › should have baseCls and render as a <label> tag 

    Error: expect(locator).toHaveAttribute(expected) failed

    Locator:  locator('#neo-label-1')
    Expected: "label"
    Received: ""
    Timeout:  5000ms

    Call log:
      - Expect "toHaveAttribute" with timeout 5000ms
      - waiting for locator('#neo-label-1')
        9 × locator resolved to <label id="neo-label-1" class="neo-label">Test Label</label>
          - unexpected value "null"


      40 |             const label = await createLabel(page, {text: 'Test Label'});
      41 |             await expect(label).toHaveClass(/neo-label/);
    > 42 |             await expect(label).toHaveAttribute('data-ntype', 'label');
         |                                 ^
      43 |             expect(await label.evaluate(node => node.tagName)).toBe('LABEL');
      44 |         });
      45 |
        at /Users/Shared/github/neomjs/neo/test/playwright/component/component/Label.spec.mjs:42:33

  2) [chromium] › test/playwright/component/component/Label.spec.mjs:80:9 › Neo.component.Label › Inherited Behavior Tests › should apply custom styles 

    Error: expect(locator).toHaveCSS(expected) failed

    Locator:  locator('#neo-label-1')
    Expected: "100px"
    Received: "720px"
    Timeout:  5000ms

    Call log:
      - Expect "toHaveCSS" with timeout 5000ms
      - waiting for locator('#neo-label-1')
        9 × locator resolved to <label id="neo-label-1" class="neo-label"></label>
          - unexpected value "720px"


      81 |             const label = await createLabel(page, {style: {color: 'rgb(255, 0, 0)', height: '100px', width: '200px'}});
      82 |             await expect(label).toHaveCSS('color', 'rgb(255, 0, 0)');
    > 83 |             await expect(label).toHaveCSS('height', '100px');
         |                                 ^
      84 |             await expect(label).toHaveCSS('width', '200px');
      85 |         });
      86 |
        at /Users/Shared/github/neomjs/neo/test/playwright/component/component/Label.spec.mjs:83:33

  3) [chromium] › test/playwright/component/component/Label.spec.mjs:108:9 › Neo.component.Label › Inherited Behavior Tests › should apply wrapperCls and wrapperStyle 

    Error: expect(locator).toHaveClass(expected) failed

    Locator: locator('#neo-label-1').locator('..')
    Expected pattern: /my-wrapper-class/
    Timeout: 5000ms
    Error: element(s) not found

    Call log:
      - Expect "toHaveClass" with timeout 5000ms
      - waiting for locator('#neo-label-1').locator('..')
        7 × locator resolved to <div id="component-test-viewport" class="neo-viewport neo-flex-container neo-flex-align-stretch neo-flex-direction-column neo-flex-wrap-nowrap">…</div>
          - unexpected value "neo-viewport neo-flex-container neo-flex-align-stretch neo-flex-direction-column neo-flex-wrap-nowrap"


      115 |             });
      116 |             const wrapper = label.locator('..');
    > 117 |             await expect(wrapper).toHaveClass(/my-wrapper-class/);
          |                                   ^
      118 |             await expect(wrapper).toHaveCSS('background-color', 'rgb(0, 128, 0)');
      119 |             await expect(wrapper).toHaveCSS('padding', '10px');
      120 |         });
        at /Users/Shared/github/neomjs/neo/test/playwright/component/component/Label.spec.mjs:117:35

  3 failed
    [chromium] › test/playwright/component/component/Label.spec.mjs:39:9 › Neo.component.Label › Component-Specific Feature Tests › should have baseCls and render as a <label> tag 
    [chromium] › test/playwright/component/component/Label.spec.mjs:80:9 › Neo.component.Label › Inherited Behavior Tests › should apply custom styles 
    [chromium] › test/playwright/component/component/Label.spec.mjs:108:9 › Neo.component.Label › Inherited Behavior Tests › should apply wrapperCls and wrapperStyle 
  32 passed (39.0s)

Process finished with exit code 1