[FEATURE] Front - statut béta (PIX-15351)

 #10611

mon-pix/app/components/module/details.gjs

@@ -161,7 +161,9 @@ export default class ModulixDetails extends Component {
             <h2>{{t "pages.modulix.details.explanationTitle"}}</h2>
           </div>
           <p class="module-details-infos-explanation__text">{{t "pages.modulix.details.explanationText1"}}</p>
-          <p class="module-details-infos-explanation__text">{{t "pages.modulix.details.explanationText2"}}</p>
+          {{#if @module.isBeta}}
+            <p class="module-details-infos-explanation__text">{{t "pages.modulix.details.explanationText2"}}</p>
+          {{/if}}
         </div>
       </div>
     </main>

mon-pix/app/components/module/passage.gjs

@@ -201,7 +201,9 @@ export default class ModulePassage extends Component {
     <ModuleNavbar @currentStep={{this.currentPassageStep}} @totalSteps={{this.displayableGrains.length}} />
 
     <main class="module-passage">
-      <BetaBanner />
+      {{#if @module.isBeta}}
+        <BetaBanner />
+      {{/if}}
 
       <div class="module-passage__title">
         <h1>{{@module.title}}</h1>

mon-pix/app/components/module/recap.gjs

@@ -5,7 +5,9 @@ import ModuleBetaBanner from 'mon-pix/components/module/beta-banner';
 import ModuleObjectives from 'mon-pix/components/module/objectives';
 
 <template>
-  <ModuleBetaBanner />
+  {{#if @module.isBeta}}
+    <ModuleBetaBanner />
+  {{/if}}
 
   <main class="module-recap">
     <div class="module-recap__header">
@@ -17,15 +19,17 @@ import ModuleObjectives from 'mon-pix/components/module/objectives';
       <p class="module-recap-objectives__subtitle">{{t "pages.modulix.recap.subtitle" htmlSafe=true}}</p>
       <ModuleObjectives @objectives={{@module.details.objectives}} />
     </div>
-    <div class="module-recap__link-form">
-      <PixButtonLink
-        @size="large"
-        target="_blank"
-        @href="https://form-eu.123formbuilder.com/71180/modulix-experimentation?2850087={{@passage.id}}"
-      >
-        {{t "pages.modulix.recap.goToForm"}}
-      </PixButtonLink>
-    </div>
+    {{#if @module.isBeta}}
+      <div class="module-recap__link-form">
+        <PixButtonLink
+          @size="large"
+          target="_blank"
+          @href="https://form-eu.123formbuilder.com/71180/modulix-experimentation?2850087={{@passage.id}}"
+        >
+          {{t "pages.modulix.recap.goToForm"}}
+        </PixButtonLink>
+      </div>
+    {{/if}}
     <div class="module-recap__link-details">
       <PixButtonLink @model={{@module.id}} @size="large" @route="module.details" @variant="secondary">
         {{t "pages.modulix.recap.backToModuleDetails"}}

mon-pix/app/models/module.js

@@ -2,6 +2,7 @@ import Model, { attr, hasMany } from '@ember-data/model';
 
 export default class Module extends Model {
   @attr('string') title;
+  @attr('boolean') isBeta;
   @attr({ defaultValue: () => [] }) transitionTexts;
   @attr() details;
   @hasMany('grain', { async: false, inverse: 'module' }) grains;

mon-pix/app/templates/module/details.hbs

@@ -1,6 +1,8 @@
-<div class="modulix-beta-banner">
-  <Module::BetaBanner />
-</div>
+{{#if @model.isBeta}}
+  <div class="modulix-beta-banner">
+    <Module::BetaBanner />
+  </div>
+{{/if}}
 <nav>
   <ul>
     <li>

mon-pix/tests/acceptance/module/navigate-into-the-module-recap-test.js

@@ -28,6 +28,7 @@ module('Acceptance | Module | Routes | navigateIntoTheModuleRecap', function (ho
       server.create('module', {
         id: 'bien-ecrire-son-adresse-mail',
         title: 'Bien écrire son adresse mail',
+        isBeta: true,
         grains: [grain],
         details: {
           image: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-details.svg',
@@ -48,18 +49,20 @@ module('Acceptance | Module | Routes | navigateIntoTheModuleRecap', function (ho
       assert.ok(screen.getByRole('heading', { level: 1, name: t('pages.modulix.recap.title') }));
     });
 
-    test('should display the links to details button and to form builder', async function (assert) {
-      // when
-      const formLink = screen.getByRole('link', { name: t('pages.modulix.recap.goToForm') });
+    module('when module has status beta', function () {
+      test('should display the links to details button and to form builder', async function (assert) {
+        // when
+        const formLink = screen.getByRole('link', { name: t('pages.modulix.recap.goToForm') });
 
-      // then
-      const passage = server.schema.passages.all().models[0];
-      assert.ok(formLink);
-      assert.ok(screen.getByRole('link', { name: t('pages.modulix.recap.backToModuleDetails') }));
-      assert.strictEqual(
-        formLink.getAttribute('href'),
-        `https://form-eu.123formbuilder.com/71180/modulix-experimentation?2850087=${passage.id}`,
-      );
+        // then
+        const passage = server.schema.passages.all().models[0];
+        assert.ok(formLink);
+        assert.ok(screen.queryByRole('link', { name: t('pages.modulix.recap.backToModuleDetails') }));
+        assert.strictEqual(
+          formLink.getAttribute('href'),
+          `https://form-eu.123formbuilder.com/71180/modulix-experimentation?2850087=${passage.id}`,
+        );
+      });
     });
 
     test('should navigate to details page by clicking on back to module details button', async function (assert) {

mon-pix/tests/acceptance/module/retry-qcm-test.js

@@ -104,6 +104,7 @@ module('Acceptance | Module | Routes | retryQcm', function (hooks) {
     server.create('module', {
       id: 'bien-ecrire-son-adresse-mail',
       title: 'Bien écrire son adresse mail',
+      isBeta: true,
       grains: [grain],
     });
 

mon-pix/tests/acceptance/module/retry-qcu-test.js

@@ -54,6 +54,7 @@ module('Acceptance | Module | Routes | retryQcu', function (hooks) {
     server.create('module', {
       id: 'bien-ecrire-son-adresse-mail',
       title: 'Bien écrire son adresse mail',
+      isBeta: true,
       grains: [grain1, grain2],
     });
 
@@ -140,6 +141,7 @@ module('Acceptance | Module | Routes | retryQcu', function (hooks) {
     server.create('module', {
       id: 'bien-ecrire-son-adresse-mail',
       title: 'Bien écrire son adresse mail',
+      isBeta: true,
       grains: [grain1, grain2],
     });
 

mon-pix/tests/acceptance/module/retry-qrocm-test.js

@@ -54,6 +54,7 @@ module('Acceptance | Module | Routes | retryQrocm', function (hooks) {
     server.create('module', {
       id: 'bien-ecrire-son-adresse-mail',
       title: 'Bien écrire son adresse mail',
+      isBeta: true,
       grains: [grain],
     });
 
@@ -173,6 +174,7 @@ module('Acceptance | Module | Routes | retryQrocm', function (hooks) {
     server.create('module', {
       id: 'bien-ecrire-son-adresse-mail',
       title: 'Bien écrire son adresse mail',
+      isBeta: true,
       grains: [grain],
     });
 

mon-pix/tests/acceptance/module/visit-module-details-page-test.js

@@ -5,6 +5,7 @@ import { t } from 'ember-intl/test-support';
 import { setupApplicationTest } from 'ember-qunit';
 import setupIntl from 'mon-pix/tests/helpers/setup-intl';
 import { module, test } from 'qunit';
+
 module('Acceptance | Module | Routes | details', function (hooks) {
   setupApplicationTest(hooks);
   setupIntl(hooks);
@@ -15,6 +16,7 @@ module('Acceptance | Module | Routes | details', function (hooks) {
     const module = server.create('module', {
       id: 'bien-ecrire-son-adresse-mail',
       title: 'Bien écrire son adresse mail',
+      isBeta: false,
       details: {
         image: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-details.svg',
         description:
@@ -32,12 +34,37 @@ module('Acceptance | Module | Routes | details', function (hooks) {
     // then
     assert.strictEqual(currentURL(), '/modules/bien-ecrire-son-adresse-mail/details');
     assert.ok(document.title.includes(module.title));
-    assert.dom(screen.getByRole('alert')).exists();
+    assert.dom(screen.queryByRole('alert')).doesNotExist();
     assert.dom(screen.getByRole('link', { name: t('common.skip-links.skip-to-content') })).exists();
     assert.dom(screen.getByRole('link', { name: t('common.skip-links.skip-to-footer') })).exists();
     assert.dom(screen.getByRole('contentinfo')).exists();
   });
 
+  module('when module is beta', function () {
+    test('should display a beta banner', async function (assert) {
+      // given
+      server.create('module', {
+        id: 'bien-ecrire-son-adresse-mail',
+        title: 'Bien écrire son adresse mail',
+        isBeta: true,
+        details: {
+          image: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-details.svg',
+          description:
+            'Apprendre à rédiger correctement une adresse e-mail pour assurer une meilleure communication et éviter les erreurs courantes.',
+          duration: 12,
+          level: 'Débutant',
+          objectives: ['Écrire une adresse mail correctement, en évitant les erreurs courantes'],
+        },
+        grains: [],
+      });
+
+      // when
+      const screen = await visit('/modules/bien-ecrire-son-adresse-mail/details');
+
+      // then
+      assert.dom(screen.getByRole('alert')).exists();
+    });
+  });
   test('should redirect /modules/:slug to /modules/:slug/details', async function (assert) {
     // given
     const grain = server.create('grain', {

mon-pix/tests/integration/components/module/passage_test.gjs

@@ -116,23 +116,46 @@ module('Integration | Component | Module | Passage', function (hooks) {
     });
   });
 
-  test('should display a banner at the top of the screen for a passage', async function (assert) {
-    // given
-    const store = this.owner.lookup('service:store');
-    const textElement = { content: 'content', type: 'text' };
-    const grain = store.createRecord('grain', {
-      id: 'grainId1',
-      components: [{ type: 'element', element: textElement }],
+  module('when module has isBeta status', function () {
+    test('should display a banner at the top of the screen for a passage', async function (assert) {
+      // given
+      const store = this.owner.lookup('service:store');
+      const textElement = { content: 'content', type: 'text' };
+      const grain = store.createRecord('grain', {
+        id: 'grainId1',
+        components: [{ type: 'element', element: textElement }],
+      });
+      const module = store.createRecord('module', { title: 'Module title', isBeta: true, grains: [grain] });
+
+      const passage = store.createRecord('passage');
+
+      // when
+      const screen = await render(<template><ModulePassage @module={{module}} @passage={{passage}} /></template>);
+
+      // then
+      assert.dom(screen.getByRole('alert')).exists();
     });
-    const module = store.createRecord('module', { title: 'Module title', grains: [grain] });
+  });
 
-    const passage = store.createRecord('passage');
+  module('when module does not have isBeta status', function () {
+    test('should not display a banner at the top of the screen for a passage', async function (assert) {
+      // given
+      const store = this.owner.lookup('service:store');
+      const textElement = { content: 'content', type: 'text' };
+      const grain = store.createRecord('grain', {
+        id: 'grainId1',
+        components: [{ type: 'element', element: textElement }],
+      });
+      const module = store.createRecord('module', { title: 'Module title', isBeta: false, grains: [grain] });
 
-    // when
-    const screen = await render(<template><ModulePassage @module={{module}} @passage={{passage}} /></template>);
+      const passage = store.createRecord('passage');
 
-    // then
-    assert.dom(screen.getByRole('alert')).exists();
+      // when
+      const screen = await render(<template><ModulePassage @module={{module}} @passage={{passage}} /></template>);
+
+      // then
+      assert.dom(screen.queryByRole('alert')).doesNotExist();
+    });
   });
 
   test('should display given module with more than one grain', async function (assert) {

mon-pix/tests/integration/components/module/recap-test.gjs

@@ -8,23 +8,84 @@ import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
 module('Integration | Component | Module | Recap', function (hooks) {
   setupIntlRenderingTest(hooks);
 
-  test('should display a banner at the top of the screen for module recap', async function (assert) {
-    // given
-    const store = this.owner.lookup('service:store');
-    const details = {
-      image: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-details.svg',
-      description: '<p>Description</p>',
-      duration: 12,
-      level: 'Débutant',
-      objectives: ['Objectif 1'],
-    };
-    const module = store.createRecord('module', { title: 'Module title', details });
+  module('when module has beta status', function () {
+    test('should display a banner at the top of the screen for module recap', async function (assert) {
+      // given
+      const store = this.owner.lookup('service:store');
+      const details = {
+        image: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-details.svg',
+        description: '<p>Description</p>',
+        duration: 12,
+        level: 'Débutant',
+        objectives: ['Objectif 1'],
+      };
+      const module = store.createRecord('module', { title: 'Module title', isBeta: true, details });
 
-    // when
-    const screen = await render(<template><ModuleRecap @module={{module}} /></template>);
+      // when
+      const screen = await render(<template><ModuleRecap @module={{module}} /></template>);
 
-    // then
-    assert.dom(screen.getByRole('alert')).exists();
+      // then
+      assert.dom(screen.getByRole('alert')).exists();
+    });
+
+    test('should display link to user form', async function (assert) {
+      // given
+      const store = this.owner.lookup('service:store');
+      const details = {
+        image: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-details.svg',
+        description: '<p>Description</p>',
+        duration: 12,
+        level: 'Débutant',
+        objectives: ['Objectif 1'],
+      };
+      const module = store.createRecord('module', { title: 'Module title', isBeta: true, details });
+
+      // when
+      const screen = await render(<template><ModuleRecap @module={{module}} /></template>);
+
+      // then
+      assert.dom(screen.getByRole('link', { name: 'Répondre au questionnaire' })).exists();
+    });
+  });
+
+  module('when module does not have beta status', function () {
+    test('should not display a banner at the top of the screen for module recap', async function (assert) {
+      // given
+      const store = this.owner.lookup('service:store');
+      const details = {
+        image: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-details.svg',
+        description: '<p>Description</p>',
+        duration: 12,
+        level: 'Débutant',
+        objectives: ['Objectif 1'],
+      };
+      const module = store.createRecord('module', { title: 'Module title', isBeta: false, details });
+
+      // when
+      const screen = await render(<template><ModuleRecap @module={{module}} /></template>);
+
+      // then
+      assert.dom(screen.queryByRole('alert')).doesNotExist();
+    });
+
+    test('should not display link to user form', async function (assert) {
+      // given
+      const store = this.owner.lookup('service:store');
+      const details = {
+        image: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-details.svg',
+        description: '<p>Description</p>',
+        duration: 12,
+        level: 'Débutant',
+        objectives: ['Objectif 1'],
+      };
+      const module = store.createRecord('module', { title: 'Module title', isBeta: false, details });
+
+      // when
+      const screen = await render(<template><ModuleRecap @module={{module}} /></template>);
+
+      // then
+      assert.dom(screen.queryByRole('link', { name: 'Répondre au questionnaire' })).doesNotExist();
+    });
   });
 
   test('should display the details of a given module', async function (assert) {