diff --git a/junior/app/templates/school/divisions.hbs b/junior/app/templates/school/divisions.hbs
index c0286953a00..b1e0ef8fb8b 100644
--- a/junior/app/templates/school/divisions.hbs
+++ b/junior/app/templates/school/divisions.hbs
@@ -4,9 +4,21 @@
{{#each @model.divisions as |division|}}
-
- {{division}}
+
+
+ <:triggerElement>
+
+
+
+ <:tooltip>
+ {{division}}
+
+
+
{{/each}}
\ No newline at end of file
diff --git a/junior/tests/acceptance/school-divisions-test.js b/junior/tests/acceptance/school-divisions-test.js
new file mode 100644
index 00000000000..43d4dd688e5
--- /dev/null
+++ b/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);
+ });
+});