certif(banner): extract information banners to dedicated component

certif/app/components/information-banners.gjs

@@ -0,0 +1,11 @@
+import PixBannerAlert from '@1024pix/pix-ui/components/pix-banner-alert';
+
+import textWithMultipleLang from '../helpers/text-with-multiple-lang.js';
+
+<template>
+  {{#each @banners as |banner|}}
+    <PixBannerAlert @type={{banner.severity}} @canCloseBanner={{false}}>
+      {{textWithMultipleLang banner.message}}
+    </PixBannerAlert>
+  {{/each}}
+</template>

certif/app/models/banner.js

@@ -1,6 +1,6 @@
 import Model, { attr } from '@ember-data/model';
 
-export default class InformationBanner extends Model {
+export default class Banner extends Model {
   @attr() severity;
   @attr() message;
 }

certif/app/models/information-banner.js

@@ -1,5 +1,5 @@
 import Model, { hasMany } from '@ember-data/model';
 
 export default class InformationBanner extends Model {
-  @hasMany('banners', { async: false, inverse: null }) banners;
+  @hasMany('banner', { async: false, inverse: null }) banners;
 }

certif/app/templates/application.hbs

@@ -6,11 +6,7 @@
 
 <CommunicationBanner />
 
-{{#each @model.informationBanner.banners as |banner|}}
-  <PixBannerAlert @type={{banner.severity}} @canCloseBanner={{false}}>
-    {{text-with-multiple-lang banner.message}}
-  </PixBannerAlert>
-{{/each}}
+<InformationBanners @banners={{@model.informationBanner.banners}} />
 
 {{outlet}}
 

certif/mirage/config.js

@@ -391,11 +391,11 @@ function routes() {
 
   this.get('/information-banners/:target', (schema, request) => {
     const { target } = request.params;
-    let informationBanners = schema.informationBanners.find(target);
-    if (!informationBanners) {
-      informationBanners = server.create('information-banner', { id: target, banners: [] });
+    const informationBanner = schema.informationBanners.find(target);
+    if (informationBanner) {
+      return informationBanner;
     }
-    return informationBanners;
+    return server.create('information-banner', 'withoutBanners');
   });
 }
 

certif/mirage/factories/information-banner.js

@@ -1,7 +1,7 @@
-import { Factory } from 'miragejs';
+import { Factory, trait } from 'miragejs';
 
 export default Factory.extend({
-  banners() {
-    return [];
-  },
+  withoutBanners: trait({
+    banners: [],
+  }),
 });

certif/mirage/serializers/information-banner.js

@@ -0,0 +1,7 @@
+import ApplicationSerializer from './application';
+
+const include = ['banners'];
+
+export default ApplicationSerializer.extend({
+  include,
+});

certif/tests/acceptance/application-test.js

@@ -0,0 +1,42 @@
+import { visit } from '@1024pix/ember-testing-library';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { setupIntl } from 'ember-intl/test-support';
+import { setupApplicationTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Application', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+  setupIntl(hooks, 'fr');
+
+  module('When there are no information banners', function () {
+    test('it should not display any banner', async function (assert) {
+      // given
+      server.create('information-banner', 'withoutBanners', { id: 'pix-certif-local' });
+
+      // when
+      const screen = await visit(`/`);
+
+      // then
+      assert.dom(screen.queryByRole('alert')).doesNotExist();
+    });
+  });
+
+  module('When there is an information banner', function () {
+    test('it should display it', async function (assert) {
+      // given
+      const banner = server.create('banner', {
+        id: 'pix-certif-local:1',
+        severity: 'info',
+        message: '[en]some text[/en][fr]du texte[/fr]',
+      });
+      server.create('information-banner', { id: 'pix-certif-local', banners: [banner] });
+
+      // when
+      const screen = await visit(`/`);
+
+      // then
+      assert.dom(screen.getByRole('alert')).exists();
+    });
+  });
+});

certif/tests/integration/components/information-banners-test.gjs

@@ -0,0 +1,36 @@
+import { render } from '@1024pix/ember-testing-library';
+import { module, test } from 'qunit';
+import InformationBanners from 'pix-certif/components/information-banners';
+import setupIntlRenderingTest from '../../helpers/setup-intl-rendering';
+
+module('Integration | Component | information-banners', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  test('should not display the banner when no banners', async function (assert) {
+    // given
+    const banners = [];
+
+    // when
+    const screen = await render(<template><InformationBanners @banners={{banners}} /></template>);
+
+    // then
+    assert.dom(screen.queryByRole('alert')).doesNotExist();
+  });
+
+  test('should display the information banner', async function (assert) {
+    // given
+    const banners = [
+      {
+        severity: 'information',
+        message: '[fr]texte de la bannière d‘information[/fr][en]information banner text[/en]',
+      },
+    ];
+
+    // when
+    const screen = await render(<template><InformationBanners @banners={{banners}} /></template>);
+
+    // then
+    assert.dom(screen.getByText('texte de la bannière d‘information')).exists();
+    assert.dom(screen.getByRole('alert')).exists();
+  });
+});