diff --git a/packages/frontend/.stylelintrc.js b/packages/frontend/.stylelintrc.js
index 1d5417c4f5..2d3764fb29 100644
--- a/packages/frontend/.stylelintrc.js
+++ b/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],
diff --git a/packages/frontend/app/styles/components/reports/new-subject.scss b/packages/frontend/app/styles/components/reports/new-subject.scss
index 8bbc347361..d1285a1b5b 100644
--- a/packages/frontend/app/styles/components/reports/new-subject.scss
+++ b/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;
diff --git a/packages/frontend/tests/helpers/take-screenshot.js b/packages/frontend/tests/helpers/take-screenshot.js
index e806bdbac3..b1de7210cb 100644
--- a/packages/frontend/tests/helpers/take-screenshot.js
+++ b/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%)',
});
diff --git a/packages/frontend/tests/integration/components/instructor-group/header-test.gjs b/packages/frontend/tests/integration/components/instructor-group/header-test.gjs
index 01d8997d09..3178028361 100644
--- a/packages/frontend/tests/integration/components/instructor-group/header-test.gjs
+++ b/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) {
,
);
+ 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) {
,
);
+ 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)');
});
diff --git a/packages/frontend/tests/integration/components/reports/new-subject-test.gjs b/packages/frontend/tests/integration/components/reports/new-subject-test.gjs
index 85639efdd3..e1b4971ba3 100644
--- a/packages/frontend/tests/integration/components/reports/new-subject-test.gjs
+++ b/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();
+ 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(
+
+
+ ,
+ );
+ 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']);
});
diff --git a/packages/ilios-common/.stylelintrc.js b/packages/ilios-common/.stylelintrc.js
index 1d5417c4f5..2d3764fb29 100644
--- a/packages/ilios-common/.stylelintrc.js
+++ b/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],
diff --git a/packages/ilios-common/app/styles/ilios-common/components/breadcrumbs.scss b/packages/ilios-common/app/styles/ilios-common/components/breadcrumbs.scss
index ea06b291a2..fcb03e7092 100644
--- a/packages/ilios-common/app/styles/ilios-common/components/breadcrumbs.scss
+++ b/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;
diff --git a/packages/ilios-common/app/styles/ilios-common/mixins/ilios-fieldset.scss b/packages/ilios-common/app/styles/ilios-common/mixins/ilios-fieldset.scss
index 18e49ece86..77f4cf87f4 100644
--- a/packages/ilios-common/app/styles/ilios-common/mixins/ilios-fieldset.scss
+++ b/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;
}
}
diff --git a/packages/ilios-common/app/styles/ilios-common/shared/visually-hidden.scss b/packages/ilios-common/app/styles/ilios-common/shared/visually-hidden.scss
index c9025d88ba..4abff005a1 100644
--- a/packages/ilios-common/app/styles/ilios-common/shared/visually-hidden.scss
+++ b/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);
diff --git a/packages/lti-course-manager/.stylelintrc.js b/packages/lti-course-manager/.stylelintrc.js
index 1d5417c4f5..2d3764fb29 100644
--- a/packages/lti-course-manager/.stylelintrc.js
+++ b/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],
diff --git a/packages/lti-dashboard/.stylelintrc.js b/packages/lti-dashboard/.stylelintrc.js
index 1d5417c4f5..2d3764fb29 100644
--- a/packages/lti-dashboard/.stylelintrc.js
+++ b/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],
diff --git a/packages/test-app/.stylelintrc.js b/packages/test-app/.stylelintrc.js
index 1d5417c4f5..2d3764fb29 100644
--- a/packages/test-app/.stylelintrc.js
+++ b/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],