VaAlert event `va-component-did-load` does not have a test and implementation is not explained in Storybook

[pmclaren19]

Bug Report

While attempting to use the event va-component-did-load found that it didnt appear to be working, also found while looking at the code that there were no tests around the event.

What happened

The event va-component-did-load on vaAlert appear to not properly work and there are no tests or an explanation of how to implement it in Storybook.

What I expected to happen

The event va-component-did-load on vaAlert should emit and it is not.
Also there are no tests or an example of how to use it in code.

Reproducing

In code added this

    <VaAlert
      close-btn-aria-label="Close notification"
      className="claims-alert"
      closeable={closeable}
      onCloseEvent={onClose}
      status={type}
      visible
      onVaComponentDidLoad={() => {
        console.log('Component Loaded');
      }}
    >
      <h2 slot="headline">{title}</h2>
      <p className="vads-u-margin-y--0">{body}</p>
    </VaAlert>

and it did not work. After messing around with the event name I tried this an it appears to work but it is not intuitive.

    <VaAlert
      close-btn-aria-label="Close notification"
      className="claims-alert"
      closeable={closeable}
      onCloseEvent={onClose}
      status={type}
      visible
      onVa-component-did-load={() => {
        console.log('Component Loaded');
      }}
    >
      <h2 slot="headline">{title}</h2>
      <p className="vads-u-margin-y--0">{body}</p>
    </VaAlert>

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details

We would like the ability to use onVaComponentDidLoad instead of using onVa-component-did-load. We would also like there to be tests around this event and for storybook to better explain how implementation works for this event as it.

[Andrew565]

Note that the developer is using the React Binding version of va-alert (i.e. VaAlert), thus why the event listener name is goofy. For the standard web component version (<va-alert>) the va-component-did-load event is emitting correctly.

[jerekshoe]

I'm finding that this code does not emit the event when running it inside a unit test. I created a test in vets-website to demonstrate what I would expect to be true vs what I'm seeing:

it('should call mySpy when the component loads', async () => {
  const message = {
    title: 'Success Title',
    body: 'Success Message',
  };

  const mySpy = sinon.spy();

  const { getByText } = render(
    <va-alert
      close-btn-aria-label="Close notification"
      className="claims-alert"
      status="success"
      visible
      va-component-did-load={mySpy}
    >
      <h2 slot="headline">{message.title}</h2>
      <p className="vads-u-margin-y--0">{message.body}</p>
    </va-alert>,
  );

  getByText(message.title);
  getByText(message.body);
  expect(mySpy.called).to.be.true;
});

This is the output of running the test:

yarn run v1.19.1
$ node ./script/run-unit-tests-local.js src/applications/claims-status/tests/components/claim-files-tab/AdditionalEvidencePage.unit.spec.jsx --log-level=error

  [▬▬.....................................................]

  0 passing (93ms)
  1 failing

  1) <AdditionalEvidencePage>
       when claim is open
         should render and focus success alert when rerendered:

      AssertionError: expected false to be true
      + expected - actual

      -false
      +true

[Andrew565]

@jerekshoe When using the web component version, you have to setup event listeners.