[AuButton] deprecate the default loading message (#497)

The default loading message is a footgun. Many projects forget to properly set this which means the default is used, even though it's not a good fit for the context.

By requiring an explicit loading message this should no longer be an issue.

Author: Windvis

addon/components/au-button.gts

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { deprecate } from '@ember/debug';
 import AuIcon, { type AuIconSignature } from './au-icon';
 import { LoadingAnimation } from '../private/components/loading-animation';
 
@@ -71,8 +72,31 @@ export default class AuButton extends Component<AuButtonSignature> {
   }
 
   get loadingMessage() {
-    if (this.args.loadingMessage) return this.args.loadingMessage;
-    else return 'Aan het laden';
+    if (this.args.loadingMessage) {
+      return this.args.loadingMessage;
+    }
+
+    deprecate(
+      `[AuButton] Not providing \`@loadingMessage\` when setting \`@loading\` to \`true\` is deprecated. Add the \`@loadingMessage\` argument explicitly.
+
+Use \`@loadingMessage="Aan het laden"\` to get the same behavior as before.
+
+More info in the migration guide: https://github.com/appuniversum/ember-appuniversum/pull/497
+
+`,
+      false,
+      {
+        id: '@appuniversum/ember-appuniversum.au-button-loading-message',
+        until: '4.0.0',
+        for: '@appuniversum/ember-appuniversum',
+        since: {
+          available: '3.5.0',
+          enabled: '3.5.0',
+        },
+      },
+    );
+
+    return 'Aan het laden';
   }
 
   get isIconLeft() {

tests/integration/components/au-button-test.gts

@@ -3,10 +3,12 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, settled } from '@ember/test-helpers';
 import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
 import { tracked } from '@glimmer/tracking';
+import { hasDeprecationStartingWith } from 'dummy/tests/helpers/deprecations';
 
 class TestState {
   @tracked isDisabled?: boolean;
   @tracked isLoading?: boolean;
+  @tracked loadingMessage?: string;
 }
 
 module('Integration | Component | au-button', function (hooks) {
@@ -65,4 +67,47 @@ module('Integration | Component | au-button', function (hooks) {
     await settled();
     assert.dom('[data-test-button]').isDisabled();
   });
+
+  test('the default loading message is deprecated', async function (assert) {
+    const state = new TestState();
+    state.isLoading = false;
+
+    await render(
+      <template>
+        <AuButton
+          @loading={{state.isLoading}}
+          @loadingMessage={{state.loadingMessage}}
+          data-test-button
+        >
+          Foo
+        </AuButton>
+      </template>,
+    );
+
+    assert.false(
+      showsDeprecationMessage(),
+      "it does't show the deprecation if @loading isn't true",
+    );
+
+    state.isLoading = true;
+    state.loadingMessage = 'Loading';
+    await settled();
+    assert.false(
+      showsDeprecationMessage(),
+      "it does't show the deprecation if @loadingMessage is set",
+    );
+
+    state.loadingMessage = undefined;
+    await settled();
+    assert.true(
+      showsDeprecationMessage(),
+      "it shows the deprecation message if @loadingMessage isn't set",
+    );
+  });
 });
+
+function showsDeprecationMessage() {
+  return hasDeprecationStartingWith(
+    '[AuButton] Not providing `@loadingMessage` when setting `@loading` to `true` is deprecated.',
+  );
+}