feat(junior): add tooltip to classes selection

junior/app/templates/school/divisions.hbs

@@ -4,9 +4,21 @@
 </RobotDialog>
 <div class="list">
   {{#each @model.divisions as |division|}}
-    <LinkTo @route="school.students" @query={{hash division=division}} class="divisions__item">
-      <p class="item__title">{{division}}</p>
+    <LinkTo @route="school.students" @query={{hash division=division}}>
+      <PixTooltip @isInline={{true}}>
+        <:triggerElement>
+          <div class="divisions__item">
+            <p class="item__title">{{division}}</p>
+
+          </div>
+        </:triggerElement>
+
+        <:tooltip>
+          {{division}}
+        </:tooltip>
+      </PixTooltip>
     </LinkTo>
+
   {{/each}}
 </div>
 <Footer />

junior/tests/acceptance/school-divisions-test.js

@@ -0,0 +1,33 @@
+import { visit } from '@1024pix/ember-testing-library';
+import { module, test } from 'qunit';
+
+import { setupApplicationTest } from '../../tests/helpers';
+
+module('Acceptance | School | divisions', function (hooks) {
+  setupApplicationTest(hooks);
+  hooks.afterEach(async function () {
+    localStorage.clear();
+  });
+
+  test('should display all existant divisions', async function (assert) {
+    // given
+    const longClassName = 'CM2-B 3 3 3 3 adzaz azd adazdzad dzad d';
+    this.server.create('school', {
+      organizationLearners: [
+        {
+          id: 1,
+          division: longClassName,
+          firstName: 'Sara',
+          displayName: 'Sara A.',
+          organizationId: 9000,
+        },
+        { id: 2, division: 'CM2 A', firstName: 'Mickey', displayName: 'Mickey', organizationId: 9000 },
+      ],
+    });
+    // when
+    const screen = await visit('/schools/MINIPIXOU');
+    const htmlElementsWithLongName = screen.queryAllByText(longClassName);
+
+    assert.strictEqual(htmlElementsWithLongName.length, 2);
+  });
+});