Prevent Negative Margins

packages/frontend/.stylelintrc.js

@@ -4,6 +4,9 @@ module.exports = {
   plugins: ['stylelint-scales'],
   extends: ['stylelint-config-recommended-scss'],
   rules: {
+    'declaration-property-value-disallowed-list': {
+      '/^margin/': ['/-[\\d.]/'],
+    },
     'property-disallowed-list': ['font-size', 'line-height'],
     'font-weight-notation': 'numeric',
     'scales/font-weights': [200, 400, 600],

packages/frontend/app/styles/components/reports/new-subject.scss

@@ -67,7 +67,6 @@
 
       .results {
         @include m.ilios-list-reset;
-        margin-top: -0.25rem;
         grid-column: 2;
         background: var(--white);
         border-width: 0 1px 1px 1px;

packages/frontend/tests/helpers/take-screenshot.js

@@ -20,7 +20,16 @@ export const takeComponentScreenshot = async (assert, description = '') => {
   }
   const filename = getUniqueName(assert, description);
   const testing = document.getElementById('ember-testing');
-  const element = testing.firstChild;
+  let element;
+  let i = 0;
+  do {
+    element = testing.children[i];
+    i++;
+  } while (element && !(element instanceof Element));
+  if (!(element instanceof Element)) {
+    console.error('Unable to find a valid Element to screenshot');
+    return;
+  }
   return snap(element, filename, {
     backgroundColor: 'hsl(0, 0%, 98%)',
   });

packages/frontend/tests/integration/components/instructor-group/header-test.gjs

@@ -1,5 +1,5 @@
 import { module, test } from 'qunit';
-import { setupRenderingTest } from 'frontend/tests/helpers';
+import { setupRenderingTest, takeComponentScreenshot } from 'frontend/tests/helpers';
 import { setupMirage } from 'frontend/tests/test-support/mirage';
 import { render } from '@ember/test-helpers';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
@@ -32,6 +32,7 @@ module('Integration | Component | instructor-group/header', function (hooks) {
         <Header @instructorGroup={{this.instructorGroup}} @canUpdate={{this.canUpdate}} />
       </template>,
     );
+    await takeComponentScreenshot(assert);
 
     assert.strictEqual(component.title.text, 'lorem ipsum');
     assert.ok(component.title.isEditable);
@@ -54,6 +55,7 @@ module('Integration | Component | instructor-group/header', function (hooks) {
       </template>,
     );
 
+    await takeComponentScreenshot(assert);
     assert.strictEqual(component.title.text, 'lorem ipsum');
     assert.notOk(component.title.isEditable);
     assert.ok(component.members, 'Members: 3');
@@ -96,6 +98,7 @@ module('Integration | Component | instructor-group/header', function (hooks) {
     assert.strictEqual(component.title.value, 'lorem ipsum');
     await component.title.set('a'.repeat(61));
     await component.title.save();
+    await takeComponentScreenshot(assert);
     assert.strictEqual(component.title.error, 'Title is too long (maximum is 60 characters)');
   });
 
@@ -115,6 +118,7 @@ module('Integration | Component | instructor-group/header', function (hooks) {
     assert.strictEqual(component.title.value, 'lorem ipsum');
     await component.title.set('AB');
     await component.title.save();
+    await takeComponentScreenshot(assert);
     assert.strictEqual(component.title.error, 'Title is too short (minimum is 3 characters)');
   });
 
@@ -134,6 +138,7 @@ module('Integration | Component | instructor-group/header', function (hooks) {
     assert.strictEqual(component.title.value, 'lorem ipsum');
     await component.title.set('');
     await component.title.save();
+    await takeComponentScreenshot(assert);
     assert.strictEqual(component.title.error, 'Title is too short (minimum is 3 characters)');
   });
 

packages/frontend/tests/integration/components/reports/new-subject-test.gjs

@@ -1,6 +1,6 @@
 import Service from '@ember/service';
 import { module, test } from 'qunit';
-import { setupRenderingTest } from 'frontend/tests/helpers';
+import { setupRenderingTest, takeComponentScreenshot } from 'frontend/tests/helpers';
 import { render } from '@ember/test-helpers';
 import { setupMirage } from 'frontend/tests/test-support/mirage';
 import { component } from 'frontend/tests/pages/components/reports/new-subject';
@@ -70,6 +70,7 @@ module('Integration | Component | reports/new-subject', function (hooks) {
       'subject dropdown value is correct',
     );
     await component.subjects.choose(subjectVal);
+    await takeComponentScreenshot(assert);
     await component.objects.choose('null');
     if (!exceptedSubjects.includes(subjectVal)) {
       assert.strictEqual(component.objects.items[0].value, '', '"Anything" is first object option');
@@ -111,6 +112,7 @@ module('Integration | Component | reports/new-subject', function (hooks) {
     this.owner.register('service:current-user', CurrentUserMock);
 
     await render(<template><NewSubject @close={{(noop)}} /></template>);
+    await takeComponentScreenshot(assert);
 
     assert.strictEqual(component.componentTitle, 'New Report');
     assert.strictEqual(component.schools.items.length, 4);
@@ -196,7 +198,9 @@ module('Integration | Component | reports/new-subject', function (hooks) {
     await component.objects.choose('mesh term');
     assert.notOk(component.meshTerm.hasSelectedTerm, 'no mesh term selected');
     await component.meshTerm.meshManager.search.set('descriptor 0');
+    await takeComponentScreenshot(assert, 'with descriptor');
     await component.meshTerm.meshManager.searchResults[0].add();
+    await takeComponentScreenshot(assert, 'with term selected');
     assert.strictEqual(
       component.meshTerm.selectedTerm,
       'descriptor 0',
@@ -241,7 +245,9 @@ module('Integration | Component | reports/new-subject', function (hooks) {
     await component.objects.choose('instructor');
     assert.notOk(component.instructor.hasSelectedInstructor);
     await component.instructor.userSearch.searchBox.set('Rusty');
+    await takeComponentScreenshot(assert, 'with instructor');
     await component.instructor.userSearch.results.items[0].click();
+    await takeComponentScreenshot(assert, 'with instructor selected');
     assert.strictEqual(component.instructor.selectedInstructor, 'Rusty M. Mc0son');
     await component.instructor.removeSelectedInstructor();
     assert.notOk(component.instructor.hasSelectedInstructor);
@@ -413,10 +419,35 @@ module('Integration | Component | reports/new-subject', function (hooks) {
     await component.objects.choose('instructor');
     assert.ok(component.instructor.userSearch.isVisible);
     await component.instructor.userSearch.searchBox.set('test');
+    await takeComponentScreenshot(assert);
+
     await component.instructor.userSearch.results.items[0].click();
     assert.strictEqual(component.instructor.selectedInstructor, 'Aardvark');
   });
 
+  test('can search for course', async function (assert) {
+    const school = this.server.create('school', { title: 'first' });
+    this.server.createList('course', 3, { school });
+    await render(
+      <template>
+        <NewSubject
+          @close={{(noop)}}
+          @setSelectedSchoolId={{(noop)}}
+          @setSelectedSchool={{(noop)}}
+          @selectedSubject="session"
+          @selectedPrepositionalObject="course"
+        />
+      </template>,
+    );
+    assert.ok(component.course.isVisible);
+    await component.course.input('course');
+    await takeComponentScreenshot(assert);
+    assert.deepEqual(component.course.results.length, 3);
+    assert.deepEqual(component.course.results[0].text, '2013 course 0');
+    assert.deepEqual(component.course.results[1].text, '2013 course 1');
+    assert.deepEqual(component.course.results[2].text, '2013 course 2');
+  });
+
   test('cancel', async function (assert) {
     const school = this.server.create('school', { title: 'first' });
     const user = this.server.create('user', { school });
@@ -497,6 +528,7 @@ module('Integration | Component | reports/new-subject', function (hooks) {
     await component.title.set(this.title.repeat(25));
     await component.save();
     assert.strictEqual(component.title.error, 'Title is too long (maximum is 240 characters)');
+    await takeComponentScreenshot(assert);
     assert.verifySteps(['setTitle called']);
   });
 

packages/ilios-common/.stylelintrc.js

@@ -4,6 +4,9 @@ module.exports = {
   plugins: ['stylelint-scales'],
   extends: ['stylelint-config-recommended-scss'],
   rules: {
+    'declaration-property-value-disallowed-list': {
+      '/^margin/': ['/-[\\d.]/'],
+    },
     'property-disallowed-list': ['font-size', 'line-height'],
     'font-weight-notation': 'numeric',
     'scales/font-weights': [200, 400, 600],

packages/ilios-common/app/styles/ilios-common/components/breadcrumbs.scss

@@ -16,7 +16,7 @@
     }
   }
 
-  /* stylelint-disable property-disallowed-list */
+  /* stylelint-disable property-disallowed-list, declaration-property-value-disallowed-list */
   span {
     background-color: var(--white);
     border: $breadcrumb-border;

packages/ilios-common/app/styles/ilios-common/mixins/ilios-fieldset.scss

@@ -7,7 +7,7 @@
   legend {
     @include ilios-heading.ilios-heading;
     font-weight: 600;
-    margin: 0 -0.5rem;
+    margin: 0;
     padding: 0 0.5rem;
   }
 }

packages/ilios-common/app/styles/ilios-common/shared/visually-hidden.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable declaration-property-value-disallowed-list */
 .visually-hidden {
   border: 0;
   clip-path: rect(0 0 0 0);

packages/lti-course-manager/.stylelintrc.js

@@ -4,6 +4,9 @@ module.exports = {
   plugins: ['stylelint-scales'],
   extends: ['stylelint-config-recommended-scss'],
   rules: {
+    'declaration-property-value-disallowed-list': {
+      '/^margin/': ['/-[\\d.]/'],
+    },
     'property-disallowed-list': ['font-size', 'line-height'],
     'font-weight-notation': 'numeric',
     'scales/font-weights': [200, 400, 600],

packages/lti-dashboard/.stylelintrc.js

@@ -4,6 +4,9 @@ module.exports = {
   plugins: ['stylelint-scales'],
   extends: ['stylelint-config-recommended-scss'],
   rules: {
+    'declaration-property-value-disallowed-list': {
+      '/^margin/': ['/-[\\d.]/'],
+    },
     'property-disallowed-list': ['font-size', 'line-height'],
     'font-weight-notation': 'numeric',
     'scales/font-weights': [200, 400, 600],

packages/test-app/.stylelintrc.js

@@ -4,6 +4,9 @@ module.exports = {
   plugins: ['stylelint-scales'],
   extends: ['stylelint-config-recommended-scss'],
   rules: {
+    'declaration-property-value-disallowed-list': {
+      '/^margin/': ['/-[\\d.]/'],
+    },
     'property-disallowed-list': ['font-size', 'line-height'],
     'font-weight-notation': 'numeric',
     'scales/font-weights': [200, 400, 600],