@internetarchive/collection-browser 2.6.4-alpha.0 → 2.6.4-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/tiles/image-block.js +7 -11
- package/dist/src/tiles/image-block.js.map +1 -1
- package/dist/src/tiles/overlay/icon-overlay.js +2 -4
- package/dist/src/tiles/overlay/icon-overlay.js.map +1 -1
- package/dist/src/tiles/overlay/text-overlay.js +2 -2
- package/dist/src/tiles/overlay/text-overlay.js.map +1 -1
- package/dist/test/icon-overlay.test.js +10 -10
- package/dist/test/icon-overlay.test.js.map +1 -1
- package/dist/test/image-block.test.js +122 -3
- package/dist/test/image-block.test.js.map +1 -1
- package/dist/test/text-overlay.test.js +18 -30
- package/dist/test/text-overlay.test.js.map +1 -1
- package/package.json +1 -1
- package/src/tiles/image-block.ts +9 -11
- package/src/tiles/overlay/icon-overlay.ts +9 -4
- package/src/tiles/overlay/text-overlay.ts +13 -2
- package/test/icon-overlay.test.ts +9 -11
- package/test/image-block.test.ts +141 -3
- package/test/text-overlay.test.ts +18 -26
|
@@ -42,11 +42,11 @@ let ImageBlock = class ImageBlock extends LitElement {
|
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
44
|
get iconOverlayTemplate() {
|
|
45
|
-
var _a, _b;
|
|
46
45
|
// Only list tiles use the icon overlay
|
|
47
46
|
if (!this.isListTile)
|
|
48
47
|
return nothing;
|
|
49
|
-
|
|
48
|
+
const { overlayType } = this;
|
|
49
|
+
if (!overlayType)
|
|
50
50
|
return nothing;
|
|
51
51
|
return html `
|
|
52
52
|
<icon-overlay
|
|
@@ -57,15 +57,13 @@ let ImageBlock = class ImageBlock extends LitElement {
|
|
|
57
57
|
`;
|
|
58
58
|
}
|
|
59
59
|
get textOverlayTemplate() {
|
|
60
|
-
var _a, _b;
|
|
61
60
|
// List tiles do not require the text overlay
|
|
62
61
|
if (this.isListTile)
|
|
63
62
|
return nothing;
|
|
64
|
-
|
|
63
|
+
const { overlayType } = this;
|
|
64
|
+
if (!overlayType)
|
|
65
65
|
return nothing;
|
|
66
|
-
return html `
|
|
67
|
-
<text-overlay .type=${this.overlayType}></text-overlay>
|
|
68
|
-
`;
|
|
66
|
+
return html ` <text-overlay .type=${this.overlayType}></text-overlay> `;
|
|
69
67
|
}
|
|
70
68
|
get overlayType() {
|
|
71
69
|
var _a, _b;
|
|
@@ -75,12 +73,10 @@ let ImageBlock = class ImageBlock extends LitElement {
|
|
|
75
73
|
if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !this.loggedIn) {
|
|
76
74
|
return 'login-required';
|
|
77
75
|
}
|
|
78
|
-
|
|
76
|
+
if ((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning) {
|
|
79
77
|
return 'content-warning';
|
|
80
78
|
}
|
|
81
|
-
|
|
82
|
-
return undefined;
|
|
83
|
-
}
|
|
79
|
+
return undefined;
|
|
84
80
|
}
|
|
85
81
|
static get styles() {
|
|
86
82
|
const imageBlockBackgroundColor = css `var(--imageBlockBackgroundColor, #f1f1f4)`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAIlE,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAGhC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAG+B,kBAAa,GAAG,KAAK,CAAC;QAEtB,eAAU,GAAG,KAAK,CAAC;QAEnB,aAAQ,GAAG,KAAK,CAAC;QAIlB,aAAQ,GAAW,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel, TileOverlayType } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) isCompactTile = false;\n\n @property({ type: Boolean }) isListTile = false;\n\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) viewSize: string = 'desktop';\n\n render() {\n if (!this.model?.identifier) return nothing;\n\n return html`\n <div class=${classMap(this.baseClass)}>\n <item-image\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isListTile=${this.isListTile}\n .isCompactTile=${this.isCompactTile}\n .loggedIn=${this.loggedIn}\n style=\"--imgHeight: 100%; --imgWidth: 100%\"\n >\n </item-image>\n ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n </div>\n `;\n }\n\n private get baseClass(): ClassInfo {\n return {\n list: this.isListTile && !this.isCompactTile,\n 'list-compact': this.isListTile && this.isCompactTile,\n collection: this.model?.mediatype === 'collection', // fill the image in container\n [this.viewSize]: true,\n 'search-image': this.model?.mediatype === 'search',\n };\n }\n\n private get iconOverlayTemplate() {\n // Only list tiles use the icon overlay\n if (!this.isListTile) return nothing;\n\n const { overlayType } = this;\n if (!overlayType) return nothing;\n\n return html`\n <icon-overlay\n class=${this.isCompactTile ? 'list-compact' : 'list-detail'}\n .type=${this.overlayType}\n >\n </icon-overlay>\n `;\n }\n\n private get textOverlayTemplate() {\n // List tiles do not require the text overlay\n if (this.isListTile) return nothing;\n\n const { overlayType } = this;\n if (!overlayType) return nothing;\n\n return html` <text-overlay .type=${this.overlayType}></text-overlay> `;\n }\n\n private get overlayType(): TileOverlayType | undefined {\n // Prioritize showing the login-required overlay if needed.\n // Otherwise, if a content warning is required, show that overlay instead.\n // If neither flag is present, no overlay should be shown.\n if (this.model?.loginRequired && !this.loggedIn) {\n return 'login-required';\n }\n if (this.model?.contentWarning) {\n return 'content-warning';\n }\n return undefined;\n }\n\n static get styles(): CSSResultGroup {\n const imageBlockBackgroundColor = css`var(--imageBlockBackgroundColor, #f1f1f4)`;\n\n return css`\n div {\n display: flex;\n justify-content: center;\n position: relative;\n background-color: ${imageBlockBackgroundColor};\n border-radius: 4px;\n }\n\n .grid {\n height: var(--imgBlockHeight, 16rem);\n flex: 1;\n position: initial;\n padding: 5px;\n border-radius: 4px 4px 0 0;\n }\n\n .collection.grid,\n .grid.search-image {\n display: block;\n }\n\n /** tile-list view */\n .list {\n border-radius: 0;\n background-color: var(--imageBlockListBackgroundColor, #ebebee);\n box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);\n }\n\n .list.desktop {\n width: 100px;\n max-width: 100%;\n height: 100px;\n max-width: 100%;\n display: inline-block;\n position: relative;\n text-align: center;\n }\n\n .list.mobile {\n width: var(--image-width, 90px);\n height: 90px;\n }\n\n /** tile-list-compact view */\n .list-compact {\n display: block;\n text-align: center;\n }\n\n .list-compact.desktop {\n width: 45px;\n height: 45px;\n }\n\n .list-compact.mobile {\n width: 30px;\n height: 30px;\n }\n `;\n }\n}\n"]}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { css, html, LitElement, nothing } from 'lit';
|
|
2
|
+
import { css, html, LitElement, nothing, } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import { TILE_OVERLAY_ICONS } from '../../models';
|
|
5
5
|
let IconOverlay = class IconOverlay extends LitElement {
|
|
6
6
|
render() {
|
|
7
|
-
return html `<div class="icon-overlay"
|
|
8
|
-
${this.iconTemplate}
|
|
9
|
-
</div>`;
|
|
7
|
+
return html `<div class="icon-overlay">${this.iconTemplate}</div>`;
|
|
10
8
|
}
|
|
11
9
|
get iconTemplate() {
|
|
12
10
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"icon-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAmB,MAAM,cAAc,CAAC;AAGnE,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,MAAM;QACJ,OAAO,IAAI,CAAA,6BAA6B,IAAI,CAAC,YAAY,QAAQ,CAAC;IACpE,CAAC;IAED,IAAY,YAAY;;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC/B,OAAO,IAAI,CAAA,GAAG,MAAA,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,OAAO,EAAE,CAAC;IAC3D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BT,CAAC;IACJ,CAAC;CACF,CAAA;AA3C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAwB;AADxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4CvB;SA5CY,WAAW","sourcesContent":["import {\n css,\n CSSResultGroup,\n html,\n LitElement,\n nothing,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TILE_OVERLAY_ICONS, TileOverlayType } from '../../models';\n\n@customElement('icon-overlay')\nexport class IconOverlay extends LitElement {\n @property({ type: String }) type?: TileOverlayType;\n\n render() {\n return html`<div class=\"icon-overlay\">${this.iconTemplate}</div>`;\n }\n\n private get iconTemplate(): TemplateResult | typeof nothing {\n if (!this.type) return nothing;\n return html`${TILE_OVERLAY_ICONS[this.type] ?? nothing}`;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n z-index: 2;\n background-color: rgb(255, 254, 203);\n display: flex;\n justify-content: center;\n border: 1px solid #2c2c2c;\n }\n\n .icon-overlay {\n height: 20px;\n width: 20px;\n padding: 2px;\n padding: 2px;\n }\n\n :host(.list-detail) .icon-overlay {\n height: 20px;\n width: 20px;\n }\n :host(.list-compact) .icon-overlay {\n height: 15px;\n width: 15px;\n }\n `;\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { css, html, LitElement, nothing } from 'lit';
|
|
2
|
+
import { css, html, LitElement, nothing, } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
-
import { TILE_OVERLAY_ICONS, TILE_OVERLAY_TEXT } from '../../models';
|
|
4
|
+
import { TILE_OVERLAY_ICONS, TILE_OVERLAY_TEXT, } from '../../models';
|
|
5
5
|
let TextOverlay = class TextOverlay extends LitElement {
|
|
6
6
|
render() {
|
|
7
7
|
return html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/text-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/text-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EACL,kBAAkB,EAClB,iBAAiB,GAElB,MAAM,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,YAAY;kCACnB,IAAI,CAAC,YAAY;;KAE9C,CAAC;IACJ,CAAC;IAED,IAAY,YAAY;;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC/B,OAAO,IAAI,CAAA,GAAG,MAAA,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,OAAO,EAAE,CAAC;IAC3D,CAAC;IAED,IAAY,YAAY;;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC/B,OAAO,IAAI,CAAA,GAAG,MAAA,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,OAAO,EAAE,CAAC;IAC1D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT,CAAC;IACJ,CAAC;CACF,CAAA;AA7D6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAwB;AADxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA8DvB;SA9DY,WAAW","sourcesContent":["import {\n css,\n CSSResultGroup,\n html,\n LitElement,\n nothing,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n TILE_OVERLAY_ICONS,\n TILE_OVERLAY_TEXT,\n TileOverlayType,\n} from '../../models';\n\n@customElement('text-overlay')\nexport class TextOverlay extends LitElement {\n @property({ type: String }) type?: TileOverlayType;\n\n render() {\n return html`\n <div class=\"overlay no-preview\">\n <div class=\"icon-overlay\">${this.iconTemplate}</div>\n <p class=\"text-overlay\">${this.textTemplate}</p>\n </div>\n `;\n }\n\n private get iconTemplate(): TemplateResult | typeof nothing {\n if (!this.type) return nothing;\n return html`${TILE_OVERLAY_ICONS[this.type] ?? nothing}`;\n }\n\n private get textTemplate(): TemplateResult | typeof nothing {\n if (!this.type) return nothing;\n return html`${TILE_OVERLAY_TEXT[this.type] ?? nothing}`;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n align-items: center;\n display: flex;\n }\n\n .overlay {\n border: 1px solid #2c2c2c;\n border-radius: 1px;\n position: absolute;\n right: 0;\n left: 0;\n top: 50%;\n transform: translate(0px, -50%);\n width: auto;\n height: auto;\n padding: 5px;\n background-color: #fffecb;\n display: flex;\n align-items: center;\n border-radius: 1px;\n }\n\n .icon-overlay {\n width: 40px;\n height: 40px;\n display: inherit;\n }\n .text-overlay {\n margin: 0;\n vertical-align: bottom;\n padding-left: 5px;\n text-align: center;\n color: #2c2c2c;\n font-size: 1.4rem;\n line-height: 2rem;\n }\n `;\n }\n}\n"]}
|
|
@@ -3,26 +3,26 @@ import { expect, fixture } from '@open-wc/testing';
|
|
|
3
3
|
import { html } from 'lit';
|
|
4
4
|
import '../src/tiles/overlay/icon-overlay';
|
|
5
5
|
describe('Icon Overlay component', () => {
|
|
6
|
-
it('should render component
|
|
7
|
-
var _a
|
|
6
|
+
it('should render basic component', async () => {
|
|
7
|
+
var _a;
|
|
8
8
|
const el = await fixture(html `
|
|
9
|
-
<icon-overlay
|
|
9
|
+
<icon-overlay></icon-overlay>
|
|
10
10
|
`);
|
|
11
|
-
const
|
|
12
|
-
expect(
|
|
11
|
+
const overlayDiv = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.icon-overlay');
|
|
12
|
+
expect(overlayDiv).to.exist;
|
|
13
13
|
});
|
|
14
|
-
it('should render component
|
|
14
|
+
it('should render component with login-required type', async () => {
|
|
15
15
|
var _a, _b, _c;
|
|
16
16
|
const el = await fixture(html `
|
|
17
|
-
<icon-overlay .
|
|
17
|
+
<icon-overlay .type=${'login-required'}></icon-overlay>
|
|
18
18
|
`);
|
|
19
19
|
const svgTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg')) === null || _b === void 0 ? void 0 : _b.querySelector('title')) === null || _c === void 0 ? void 0 : _c.textContent;
|
|
20
|
-
expect(svgTitle).to.equal('
|
|
20
|
+
expect(svgTitle).to.equal('Log in to view this item');
|
|
21
21
|
});
|
|
22
|
-
it('should render component
|
|
22
|
+
it('should render component with content-warning type', async () => {
|
|
23
23
|
var _a, _b, _c;
|
|
24
24
|
const el = await fixture(html `
|
|
25
|
-
<icon-overlay .
|
|
25
|
+
<icon-overlay .type=${'content-warning'}></icon-overlay>
|
|
26
26
|
`);
|
|
27
27
|
const svgTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg')) === null || _b === void 0 ? void 0 : _b.querySelector('title')) === null || _c === void 0 ? void 0 : _c.textContent;
|
|
28
28
|
expect(svgTitle).to.equal('Content may be inappropriate');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-overlay.test.js","sourceRoot":"","sources":["../../test/icon-overlay.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mCAAmC,CAAC;AAE3C,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"icon-overlay.test.js","sourceRoot":"","sources":["../../test/icon-overlay.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mCAAmC,CAAC;AAE3C,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;;QAC7C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;;KAEzC,CAAC,CAAC;QAEH,MAAM,UAAU,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QACjE,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;;QAChE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;4BAClB,gBAAgB;KACvC,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,MAAA,MAAA,MAAA,EAAE,CAAC,UAAU,0CAC1B,aAAa,CAAC,KAAK,CAAC,0CACpB,aAAa,CAAC,OAAO,CAAC,0CAAE,WAAW,CAAC;QACxC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;;QACjE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;4BAClB,iBAAiB;KACxC,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,MAAA,MAAA,MAAA,EAAE,CAAC,UAAU,0CAC1B,aAAa,CAAC,KAAK,CAAC,0CACpB,aAAa,CAAC,OAAO,CAAC,0CAAE,WAAW,CAAC;QACxC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,8BAA8B,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { IconOverlay } from '../src/tiles/overlay/icon-overlay';\n\nimport '../src/tiles/overlay/icon-overlay';\n\ndescribe('Icon Overlay component', () => {\n it('should render basic component', async () => {\n const el = await fixture<IconOverlay>(html`\n <icon-overlay></icon-overlay>\n `);\n\n const overlayDiv = el.shadowRoot?.querySelector('.icon-overlay');\n expect(overlayDiv).to.exist;\n });\n\n it('should render component with login-required type', async () => {\n const el = await fixture<IconOverlay>(html`\n <icon-overlay .type=${'login-required'}></icon-overlay>\n `);\n\n const svgTitle = el.shadowRoot\n ?.querySelector('svg')\n ?.querySelector('title')?.textContent;\n expect(svgTitle).to.equal('Log in to view this item');\n });\n\n it('should render component with content-warning type', async () => {\n const el = await fixture<IconOverlay>(html`\n <icon-overlay .type=${'content-warning'}></icon-overlay>\n `);\n\n const svgTitle = el.shadowRoot\n ?.querySelector('svg')\n ?.querySelector('title')?.textContent;\n expect(svgTitle).to.equal('Content may be inappropriate');\n });\n});\n"]}
|
|
@@ -8,7 +8,7 @@ describe('Image block component', () => {
|
|
|
8
8
|
const el = await fixture(html `
|
|
9
9
|
<image-block
|
|
10
10
|
.model=${{
|
|
11
|
-
|
|
11
|
+
loginRequired: true,
|
|
12
12
|
contentWarning: true,
|
|
13
13
|
identifier: 'goody',
|
|
14
14
|
}}
|
|
@@ -32,7 +32,7 @@ describe('Image block component', () => {
|
|
|
32
32
|
const el = await fixture(html `
|
|
33
33
|
<image-block
|
|
34
34
|
.model=${{
|
|
35
|
-
|
|
35
|
+
loginRequired: true,
|
|
36
36
|
contentWarning: true,
|
|
37
37
|
identifier: 'goody',
|
|
38
38
|
}}
|
|
@@ -56,7 +56,7 @@ describe('Image block component', () => {
|
|
|
56
56
|
const el = await fixture(html `
|
|
57
57
|
<image-block
|
|
58
58
|
.model=${{
|
|
59
|
-
|
|
59
|
+
loginRequired: true,
|
|
60
60
|
contentWarning: true,
|
|
61
61
|
identifier: 'goody',
|
|
62
62
|
}}
|
|
@@ -75,5 +75,124 @@ describe('Image block component', () => {
|
|
|
75
75
|
expect(itemImage).to.exist;
|
|
76
76
|
expect(iconOverlay).to.exist;
|
|
77
77
|
});
|
|
78
|
+
it('should render a login-required overlay if model requires it and not logged in', async () => {
|
|
79
|
+
var _a;
|
|
80
|
+
const el = await fixture(html `
|
|
81
|
+
<image-block
|
|
82
|
+
.model=${{
|
|
83
|
+
loginRequired: true,
|
|
84
|
+
identifier: 'goody',
|
|
85
|
+
}}
|
|
86
|
+
.baseImageUrl=${'https://archive.org'}
|
|
87
|
+
.isCompactTile=${false}
|
|
88
|
+
.isListTile=${false}
|
|
89
|
+
.viewSize=${'desktop'}
|
|
90
|
+
.loggedIn=${false}
|
|
91
|
+
>
|
|
92
|
+
</image-block>
|
|
93
|
+
`);
|
|
94
|
+
const textOverlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-overlay');
|
|
95
|
+
expect(textOverlay).to.exist;
|
|
96
|
+
expect(textOverlay.type).to.equal('login-required');
|
|
97
|
+
});
|
|
98
|
+
it('should render no overlay if logged in and model only requires login', async () => {
|
|
99
|
+
var _a;
|
|
100
|
+
const el = await fixture(html `
|
|
101
|
+
<image-block
|
|
102
|
+
.model=${{
|
|
103
|
+
loginRequired: true,
|
|
104
|
+
identifier: 'goody',
|
|
105
|
+
}}
|
|
106
|
+
.baseImageUrl=${'https://archive.org'}
|
|
107
|
+
.isCompactTile=${false}
|
|
108
|
+
.isListTile=${false}
|
|
109
|
+
.viewSize=${'desktop'}
|
|
110
|
+
.loggedIn=${true}
|
|
111
|
+
>
|
|
112
|
+
</image-block>
|
|
113
|
+
`);
|
|
114
|
+
const textOverlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-overlay');
|
|
115
|
+
expect(textOverlay).not.to.exist;
|
|
116
|
+
});
|
|
117
|
+
it('should render a content-warning overlay if model requires it and no login overlay is present', async () => {
|
|
118
|
+
var _a;
|
|
119
|
+
const el = await fixture(html `
|
|
120
|
+
<image-block
|
|
121
|
+
.model=${{
|
|
122
|
+
contentWarning: true,
|
|
123
|
+
identifier: 'goody',
|
|
124
|
+
}}
|
|
125
|
+
.baseImageUrl=${'https://archive.org'}
|
|
126
|
+
.isCompactTile=${false}
|
|
127
|
+
.isListTile=${false}
|
|
128
|
+
.viewSize=${'desktop'}
|
|
129
|
+
.loggedIn=${false}
|
|
130
|
+
>
|
|
131
|
+
</image-block>
|
|
132
|
+
`);
|
|
133
|
+
const textOverlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-overlay');
|
|
134
|
+
expect(textOverlay).to.exist;
|
|
135
|
+
expect(textOverlay.type).to.equal('content-warning');
|
|
136
|
+
});
|
|
137
|
+
it('should prioritize login-required overlay over content-warning if both required and logged out', async () => {
|
|
138
|
+
var _a;
|
|
139
|
+
const el = await fixture(html `
|
|
140
|
+
<image-block
|
|
141
|
+
.model=${{
|
|
142
|
+
loginRequired: true,
|
|
143
|
+
contentWarning: true,
|
|
144
|
+
identifier: 'goody',
|
|
145
|
+
}}
|
|
146
|
+
.baseImageUrl=${'https://archive.org'}
|
|
147
|
+
.isCompactTile=${false}
|
|
148
|
+
.isListTile=${false}
|
|
149
|
+
.viewSize=${'desktop'}
|
|
150
|
+
.loggedIn=${false}
|
|
151
|
+
>
|
|
152
|
+
</image-block>
|
|
153
|
+
`);
|
|
154
|
+
const textOverlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-overlay');
|
|
155
|
+
expect(textOverlay).to.exist;
|
|
156
|
+
expect(textOverlay.type).to.equal('login-required');
|
|
157
|
+
});
|
|
158
|
+
it('should show content-warning overlay if both types required and logged in', async () => {
|
|
159
|
+
var _a;
|
|
160
|
+
const el = await fixture(html `
|
|
161
|
+
<image-block
|
|
162
|
+
.model=${{
|
|
163
|
+
loginRequired: true,
|
|
164
|
+
contentWarning: true,
|
|
165
|
+
identifier: 'goody',
|
|
166
|
+
}}
|
|
167
|
+
.baseImageUrl=${'https://archive.org'}
|
|
168
|
+
.isCompactTile=${false}
|
|
169
|
+
.isListTile=${false}
|
|
170
|
+
.viewSize=${'desktop'}
|
|
171
|
+
.loggedIn=${true}
|
|
172
|
+
>
|
|
173
|
+
</image-block>
|
|
174
|
+
`);
|
|
175
|
+
const textOverlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-overlay');
|
|
176
|
+
expect(textOverlay).to.exist;
|
|
177
|
+
expect(textOverlay.type).to.equal('content-warning');
|
|
178
|
+
});
|
|
179
|
+
it('should render no overlay if neither loginRequired nor contentWarning flag present', async () => {
|
|
180
|
+
var _a;
|
|
181
|
+
const el = await fixture(html `
|
|
182
|
+
<image-block
|
|
183
|
+
.model=${{
|
|
184
|
+
identifier: 'goody',
|
|
185
|
+
}}
|
|
186
|
+
.baseImageUrl=${'https://archive.org'}
|
|
187
|
+
.isCompactTile=${false}
|
|
188
|
+
.isListTile=${false}
|
|
189
|
+
.viewSize=${'desktop'}
|
|
190
|
+
.loggedIn=${false}
|
|
191
|
+
>
|
|
192
|
+
</image-block>
|
|
193
|
+
`);
|
|
194
|
+
const textOverlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-overlay');
|
|
195
|
+
expect(textOverlay).not.to.exist;
|
|
196
|
+
});
|
|
78
197
|
});
|
|
79
198
|
//# sourceMappingURL=image-block.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-block.test.js","sourceRoot":"","sources":["../../test/image-block.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { ImageBlock } from '../src/tiles/image-block';\n\nimport '../src/tiles/image-block';\n\ndescribe('Image block component', () => {\n it('should render component grid display mode', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n loggedInRequired: true,\n contentWarning: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n .loggedIn=${false}\n >\n </image-block>\n `);\n\n const viewSize = el.shadowRoot?.querySelector('.grid');\n const itemImage = el.shadowRoot?.querySelector('item-image');\n const textOverlay = el.shadowRoot?.querySelector('text-overlay');\n\n expect(viewSize).to.exist;\n expect(itemImage).to.exist;\n expect(textOverlay).to.exist;\n });\n\n it('should render component list display mode', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n loggedInRequired: true,\n contentWarning: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${false}\n .isListTile=${true}\n .viewSize=${'desktop'}\n .loggedIn=${false}\n >\n </image-block>\n `);\n\n const viewSize = el.shadowRoot?.querySelector('.list.desktop');\n const itemImage = el.shadowRoot?.querySelector('item-image');\n const iconOverlay = el.shadowRoot?.querySelector('icon-overlay');\n\n expect(viewSize).to.exist;\n expect(itemImage).to.exist;\n expect(iconOverlay).to.exist;\n });\n\n it('should render component compact display mode', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n loggedInRequired: true,\n contentWarning: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${true}\n .isListTile=${true}\n .viewSize=${'desktop'}\n .loggedIn=${false}\n >\n </image-block>\n `);\n\n const viewSize = el.shadowRoot?.querySelector('.list-compact.desktop');\n const itemImage = el.shadowRoot?.querySelector('item-image');\n const iconOverlay = el.shadowRoot?.querySelector('icon-overlay');\n\n expect(viewSize).to.exist;\n expect(itemImage).to.exist;\n expect(iconOverlay).to.exist;\n });\n});\n"]}
|
|
1
|
+
{"version":3,"file":"image-block.test.js","sourceRoot":"","sources":["../../test/image-block.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,OAAO,0BAA0B,CAAC;AAElC,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;;QACzD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,aAAa,EAAE,IAAI;YACnB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,OAAO;SACpB;wBACe,qBAAqB;yBACpB,KAAK;sBACR,KAAK;oBACP,MAAM;oBACN,KAAK;;;KAGpB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QACvD,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC7D,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QAEjE,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;;QACzD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,aAAa,EAAE,IAAI;YACnB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,OAAO;SACpB;wBACe,qBAAqB;yBACpB,KAAK;sBACR,IAAI;oBACN,SAAS;oBACT,KAAK;;;KAGpB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QAC/D,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC7D,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QAEjE,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;;QAC5D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,aAAa,EAAE,IAAI;YACnB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,OAAO;SACpB;wBACe,qBAAqB;yBACpB,IAAI;sBACP,IAAI;oBACN,SAAS;oBACT,KAAK;;;KAGpB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACvE,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC7D,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QAEjE,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+EAA+E,EAAE,KAAK,IAAI,EAAE;;QAC7F,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,aAAa,EAAE,IAAI;YACnB,UAAU,EAAE,OAAO;SACpB;wBACe,qBAAqB;yBACpB,KAAK;sBACR,KAAK;oBACP,SAAS;oBACT,KAAK;;;KAGpB,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC9C,cAAc,CACA,CAAC;QACjB,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7B,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;;QACnF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,aAAa,EAAE,IAAI;YACnB,UAAU,EAAE,OAAO;SACpB;wBACe,qBAAqB;yBACpB,KAAK;sBACR,KAAK;oBACP,SAAS;oBACT,IAAI;;;KAGnB,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC9C,cAAc,CACA,CAAC;QACjB,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8FAA8F,EAAE,KAAK,IAAI,EAAE;;QAC5G,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,OAAO;SACpB;wBACe,qBAAqB;yBACpB,KAAK;sBACR,KAAK;oBACP,SAAS;oBACT,KAAK;;;KAGpB,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC9C,cAAc,CACA,CAAC;QACjB,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7B,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+FAA+F,EAAE,KAAK,IAAI,EAAE;;QAC7G,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,aAAa,EAAE,IAAI;YACnB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,OAAO;SACpB;wBACe,qBAAqB;yBACpB,KAAK;sBACR,KAAK;oBACP,SAAS;oBACT,KAAK;;;KAGpB,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC9C,cAAc,CACA,CAAC;QACjB,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7B,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0EAA0E,EAAE,KAAK,IAAI,EAAE;;QACxF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,aAAa,EAAE,IAAI;YACnB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,OAAO;SACpB;wBACe,qBAAqB;yBACpB,KAAK;sBACR,KAAK;oBACP,SAAS;oBACT,IAAI;;;KAGnB,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC9C,cAAc,CACA,CAAC;QACjB,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7B,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mFAAmF,EAAE,KAAK,IAAI,EAAE;;QACjG,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,UAAU,EAAE,OAAO;SACpB;wBACe,qBAAqB;yBACpB,KAAK;sBACR,KAAK;oBACP,SAAS;oBACT,KAAK;;;KAGpB,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC9C,cAAc,CACA,CAAC;QACjB,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC;IACnC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { ImageBlock } from '../src/tiles/image-block';\nimport type { TextOverlay } from '../src/tiles/overlay/text-overlay';\n\nimport '../src/tiles/image-block';\n\ndescribe('Image block component', () => {\n it('should render component grid display mode', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n loginRequired: true,\n contentWarning: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n .loggedIn=${false}\n >\n </image-block>\n `);\n\n const viewSize = el.shadowRoot?.querySelector('.grid');\n const itemImage = el.shadowRoot?.querySelector('item-image');\n const textOverlay = el.shadowRoot?.querySelector('text-overlay');\n\n expect(viewSize).to.exist;\n expect(itemImage).to.exist;\n expect(textOverlay).to.exist;\n });\n\n it('should render component list display mode', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n loginRequired: true,\n contentWarning: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${false}\n .isListTile=${true}\n .viewSize=${'desktop'}\n .loggedIn=${false}\n >\n </image-block>\n `);\n\n const viewSize = el.shadowRoot?.querySelector('.list.desktop');\n const itemImage = el.shadowRoot?.querySelector('item-image');\n const iconOverlay = el.shadowRoot?.querySelector('icon-overlay');\n\n expect(viewSize).to.exist;\n expect(itemImage).to.exist;\n expect(iconOverlay).to.exist;\n });\n\n it('should render component compact display mode', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n loginRequired: true,\n contentWarning: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${true}\n .isListTile=${true}\n .viewSize=${'desktop'}\n .loggedIn=${false}\n >\n </image-block>\n `);\n\n const viewSize = el.shadowRoot?.querySelector('.list-compact.desktop');\n const itemImage = el.shadowRoot?.querySelector('item-image');\n const iconOverlay = el.shadowRoot?.querySelector('icon-overlay');\n\n expect(viewSize).to.exist;\n expect(itemImage).to.exist;\n expect(iconOverlay).to.exist;\n });\n\n it('should render a login-required overlay if model requires it and not logged in', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n loginRequired: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'desktop'}\n .loggedIn=${false}\n >\n </image-block>\n `);\n\n const textOverlay = el.shadowRoot?.querySelector(\n 'text-overlay'\n ) as TextOverlay;\n expect(textOverlay).to.exist;\n expect(textOverlay.type).to.equal('login-required');\n });\n\n it('should render no overlay if logged in and model only requires login', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n loginRequired: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'desktop'}\n .loggedIn=${true}\n >\n </image-block>\n `);\n\n const textOverlay = el.shadowRoot?.querySelector(\n 'text-overlay'\n ) as TextOverlay;\n expect(textOverlay).not.to.exist;\n });\n\n it('should render a content-warning overlay if model requires it and no login overlay is present', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n contentWarning: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'desktop'}\n .loggedIn=${false}\n >\n </image-block>\n `);\n\n const textOverlay = el.shadowRoot?.querySelector(\n 'text-overlay'\n ) as TextOverlay;\n expect(textOverlay).to.exist;\n expect(textOverlay.type).to.equal('content-warning');\n });\n\n it('should prioritize login-required overlay over content-warning if both required and logged out', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n loginRequired: true,\n contentWarning: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'desktop'}\n .loggedIn=${false}\n >\n </image-block>\n `);\n\n const textOverlay = el.shadowRoot?.querySelector(\n 'text-overlay'\n ) as TextOverlay;\n expect(textOverlay).to.exist;\n expect(textOverlay.type).to.equal('login-required');\n });\n\n it('should show content-warning overlay if both types required and logged in', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n loginRequired: true,\n contentWarning: true,\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'desktop'}\n .loggedIn=${true}\n >\n </image-block>\n `);\n\n const textOverlay = el.shadowRoot?.querySelector(\n 'text-overlay'\n ) as TextOverlay;\n expect(textOverlay).to.exist;\n expect(textOverlay.type).to.equal('content-warning');\n });\n\n it('should render no overlay if neither loginRequired nor contentWarning flag present', async () => {\n const el = await fixture<ImageBlock>(html`\n <image-block\n .model=${{\n identifier: 'goody',\n }}\n .baseImageUrl=${'https://archive.org'}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'desktop'}\n .loggedIn=${false}\n >\n </image-block>\n `);\n\n const textOverlay = el.shadowRoot?.querySelector(\n 'text-overlay'\n ) as TextOverlay;\n expect(textOverlay).not.to.exist;\n });\n});\n"]}
|
|
@@ -4,18 +4,8 @@ import { html } from 'lit';
|
|
|
4
4
|
import '../src/tiles/overlay/text-overlay';
|
|
5
5
|
describe('Text Overlay component', () => {
|
|
6
6
|
it('should render initial component', async () => {
|
|
7
|
-
var _a, _b;
|
|
8
|
-
const el = await fixture(html `<text-overlay></text-overlay>`);
|
|
9
|
-
const overlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.overlay');
|
|
10
|
-
const noPreview = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.no-preview');
|
|
11
|
-
expect(overlay).to.exist;
|
|
12
|
-
expect(noPreview).to.exist;
|
|
13
|
-
});
|
|
14
|
-
it('should render component if loggedIn required', async () => {
|
|
15
7
|
var _a, _b, _c, _d;
|
|
16
|
-
const el = await fixture(html
|
|
17
|
-
<text-overlay .loggedIn=${false} .loginRequired=${true}> </text-overlay>
|
|
18
|
-
`);
|
|
8
|
+
const el = await fixture(html `<text-overlay></text-overlay>`);
|
|
19
9
|
const overlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.overlay');
|
|
20
10
|
const noPreview = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.no-preview');
|
|
21
11
|
const iconOverlay = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.icon-overlay');
|
|
@@ -23,32 +13,30 @@ describe('Text Overlay component', () => {
|
|
|
23
13
|
expect(overlay).to.exist;
|
|
24
14
|
expect(noPreview).to.exist;
|
|
25
15
|
expect(iconOverlay).to.exist;
|
|
26
|
-
expect(textOverlay
|
|
16
|
+
expect(textOverlay).to.exist;
|
|
27
17
|
});
|
|
28
|
-
it('should render component
|
|
29
|
-
var _a, _b, _c, _d;
|
|
18
|
+
it('should render component with login-required type', async () => {
|
|
19
|
+
var _a, _b, _c, _d, _e;
|
|
30
20
|
const el = await fixture(html `
|
|
31
|
-
<text-overlay .
|
|
21
|
+
<text-overlay .type=${'login-required'}></text-overlay>
|
|
32
22
|
`);
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
const textOverlay = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.text-overlay');
|
|
37
|
-
expect(overlay).to.exist;
|
|
38
|
-
expect(noPreview).to.exist;
|
|
23
|
+
const iconOverlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.icon-overlay');
|
|
24
|
+
const textOverlay = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.text-overlay');
|
|
25
|
+
const svgTitle = (_e = (_d = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('svg')) === null || _d === void 0 ? void 0 : _d.querySelector('title')) === null || _e === void 0 ? void 0 : _e.textContent;
|
|
39
26
|
expect(iconOverlay).to.exist;
|
|
40
|
-
expect(
|
|
27
|
+
expect(svgTitle).to.equal('Log in to view this item');
|
|
28
|
+
expect(textOverlay === null || textOverlay === void 0 ? void 0 : textOverlay.textContent).to.equal('Log in to view this item');
|
|
41
29
|
});
|
|
42
|
-
it('should render component
|
|
43
|
-
var _a, _b, _c;
|
|
30
|
+
it('should render component with content-warning type', async () => {
|
|
31
|
+
var _a, _b, _c, _d, _e;
|
|
44
32
|
const el = await fixture(html `
|
|
45
|
-
<text-overlay .
|
|
33
|
+
<text-overlay .type=${'content-warning'}></text-overlay>
|
|
46
34
|
`);
|
|
47
|
-
const
|
|
48
|
-
const
|
|
49
|
-
const
|
|
50
|
-
expect(
|
|
51
|
-
expect(
|
|
35
|
+
const iconOverlay = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.icon-overlay');
|
|
36
|
+
const textOverlay = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.text-overlay');
|
|
37
|
+
const svgTitle = (_e = (_d = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('svg')) === null || _d === void 0 ? void 0 : _d.querySelector('title')) === null || _e === void 0 ? void 0 : _e.textContent;
|
|
38
|
+
expect(iconOverlay).to.exist;
|
|
39
|
+
expect(svgTitle).to.equal('Content may be inappropriate');
|
|
52
40
|
expect(textOverlay === null || textOverlay === void 0 ? void 0 : textOverlay.textContent).to.equal('Content may be inappropriate');
|
|
53
41
|
});
|
|
54
42
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-overlay.test.js","sourceRoot":"","sources":["../../test/text-overlay.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mCAAmC,CAAC;AAE3C,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA,+BAA+B,CAAC,CAAC;QAE3E,MAAM,OAAO,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"text-overlay.test.js","sourceRoot":"","sources":["../../test/text-overlay.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { TextOverlay } from '../src/tiles/overlay/text-overlay';\n\nimport '../src/tiles/overlay/text-overlay';\n\ndescribe('Text Overlay component', () => {\n it('should render initial component', async () => {\n const el = await fixture<TextOverlay>(html`<text-overlay></text-overlay>`);\n\n const overlay = el.shadowRoot?.querySelector('.overlay');\n const noPreview = el.shadowRoot?.querySelector('.no-preview');\n const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');\n const textOverlay = el.shadowRoot?.querySelector('.text-overlay');\n\n expect(overlay).to.exist;\n expect(noPreview).to.exist;\n expect(iconOverlay).to.exist;\n expect(textOverlay).to.exist;\n });\n\n it('should render component with login-required type', async () => {\n const el = await fixture<TextOverlay>(html`\n <text-overlay .type=${'login-required'}></text-overlay>\n `);\n\n const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');\n const textOverlay = el.shadowRoot?.querySelector('.text-overlay');\n\n const svgTitle = el.shadowRoot\n ?.querySelector('svg')\n ?.querySelector('title')?.textContent;\n\n expect(iconOverlay).to.exist;\n expect(svgTitle).to.equal('Log in to view this item');\n expect(textOverlay?.textContent).to.equal('Log in to view this item');\n });\n\n it('should render component with content-warning type', async () => {\n const el = await fixture<TextOverlay>(html`\n <text-overlay .type=${'content-warning'}></text-overlay>\n `);\n\n const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');\n const textOverlay = el.shadowRoot?.querySelector('.text-overlay');\n\n const svgTitle = el.shadowRoot\n ?.querySelector('svg')\n ?.querySelector('title')?.textContent;\n\n expect(iconOverlay).to.exist;\n expect(svgTitle).to.equal('Content may be inappropriate');\n expect(textOverlay?.textContent).to.equal('Content may be inappropriate');\n });\n});\n"]}
|
package/package.json
CHANGED
package/src/tiles/image-block.ts
CHANGED
|
@@ -54,8 +54,8 @@ export class ImageBlock extends LitElement {
|
|
|
54
54
|
// Only list tiles use the icon overlay
|
|
55
55
|
if (!this.isListTile) return nothing;
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
const { overlayType } = this;
|
|
58
|
+
if (!overlayType) return nothing;
|
|
59
59
|
|
|
60
60
|
return html`
|
|
61
61
|
<icon-overlay
|
|
@@ -70,12 +70,10 @@ export class ImageBlock extends LitElement {
|
|
|
70
70
|
// List tiles do not require the text overlay
|
|
71
71
|
if (this.isListTile) return nothing;
|
|
72
72
|
|
|
73
|
-
|
|
74
|
-
|
|
73
|
+
const { overlayType } = this;
|
|
74
|
+
if (!overlayType) return nothing;
|
|
75
75
|
|
|
76
|
-
return html`
|
|
77
|
-
<text-overlay .type=${this.overlayType}></text-overlay>
|
|
78
|
-
`;
|
|
76
|
+
return html` <text-overlay .type=${this.overlayType}></text-overlay> `;
|
|
79
77
|
}
|
|
80
78
|
|
|
81
79
|
private get overlayType(): TileOverlayType | undefined {
|
|
@@ -84,11 +82,11 @@ export class ImageBlock extends LitElement {
|
|
|
84
82
|
// If neither flag is present, no overlay should be shown.
|
|
85
83
|
if (this.model?.loginRequired && !this.loggedIn) {
|
|
86
84
|
return 'login-required';
|
|
87
|
-
} else if (this.model?.contentWarning) {
|
|
88
|
-
return 'content-warning'
|
|
89
|
-
} else {
|
|
90
|
-
return undefined;
|
|
91
85
|
}
|
|
86
|
+
if (this.model?.contentWarning) {
|
|
87
|
+
return 'content-warning';
|
|
88
|
+
}
|
|
89
|
+
return undefined;
|
|
92
90
|
}
|
|
93
91
|
|
|
94
92
|
static get styles(): CSSResultGroup {
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
css,
|
|
3
|
+
CSSResultGroup,
|
|
4
|
+
html,
|
|
5
|
+
LitElement,
|
|
6
|
+
nothing,
|
|
7
|
+
TemplateResult,
|
|
8
|
+
} from 'lit';
|
|
2
9
|
import { customElement, property } from 'lit/decorators.js';
|
|
3
10
|
import { TILE_OVERLAY_ICONS, TileOverlayType } from '../../models';
|
|
4
11
|
|
|
@@ -7,9 +14,7 @@ export class IconOverlay extends LitElement {
|
|
|
7
14
|
@property({ type: String }) type?: TileOverlayType;
|
|
8
15
|
|
|
9
16
|
render() {
|
|
10
|
-
return html`<div class="icon-overlay"
|
|
11
|
-
${this.iconTemplate}
|
|
12
|
-
</div>`;
|
|
17
|
+
return html`<div class="icon-overlay">${this.iconTemplate}</div>`;
|
|
13
18
|
}
|
|
14
19
|
|
|
15
20
|
private get iconTemplate(): TemplateResult | typeof nothing {
|
|
@@ -1,6 +1,17 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
css,
|
|
3
|
+
CSSResultGroup,
|
|
4
|
+
html,
|
|
5
|
+
LitElement,
|
|
6
|
+
nothing,
|
|
7
|
+
TemplateResult,
|
|
8
|
+
} from 'lit';
|
|
2
9
|
import { customElement, property } from 'lit/decorators.js';
|
|
3
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
TILE_OVERLAY_ICONS,
|
|
12
|
+
TILE_OVERLAY_TEXT,
|
|
13
|
+
TileOverlayType,
|
|
14
|
+
} from '../../models';
|
|
4
15
|
|
|
5
16
|
@customElement('text-overlay')
|
|
6
17
|
export class TextOverlay extends LitElement {
|
|
@@ -6,31 +6,29 @@ import type { IconOverlay } from '../src/tiles/overlay/icon-overlay';
|
|
|
6
6
|
import '../src/tiles/overlay/icon-overlay';
|
|
7
7
|
|
|
8
8
|
describe('Icon Overlay component', () => {
|
|
9
|
-
it('should render component
|
|
9
|
+
it('should render basic component', async () => {
|
|
10
10
|
const el = await fixture<IconOverlay>(html`
|
|
11
|
-
<icon-overlay
|
|
11
|
+
<icon-overlay></icon-overlay>
|
|
12
12
|
`);
|
|
13
13
|
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
?.querySelector('title')?.textContent;
|
|
17
|
-
expect(svgTitle).to.equal('Log in to view this item');
|
|
14
|
+
const overlayDiv = el.shadowRoot?.querySelector('.icon-overlay');
|
|
15
|
+
expect(overlayDiv).to.exist;
|
|
18
16
|
});
|
|
19
17
|
|
|
20
|
-
it('should render component
|
|
18
|
+
it('should render component with login-required type', async () => {
|
|
21
19
|
const el = await fixture<IconOverlay>(html`
|
|
22
|
-
<icon-overlay .
|
|
20
|
+
<icon-overlay .type=${'login-required'}></icon-overlay>
|
|
23
21
|
`);
|
|
24
22
|
|
|
25
23
|
const svgTitle = el.shadowRoot
|
|
26
24
|
?.querySelector('svg')
|
|
27
25
|
?.querySelector('title')?.textContent;
|
|
28
|
-
expect(svgTitle).to.equal('
|
|
26
|
+
expect(svgTitle).to.equal('Log in to view this item');
|
|
29
27
|
});
|
|
30
28
|
|
|
31
|
-
it('should render component
|
|
29
|
+
it('should render component with content-warning type', async () => {
|
|
32
30
|
const el = await fixture<IconOverlay>(html`
|
|
33
|
-
<icon-overlay .
|
|
31
|
+
<icon-overlay .type=${'content-warning'}></icon-overlay>
|
|
34
32
|
`);
|
|
35
33
|
|
|
36
34
|
const svgTitle = el.shadowRoot
|
package/test/image-block.test.ts
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { expect, fixture } from '@open-wc/testing';
|
|
3
3
|
import { html } from 'lit';
|
|
4
4
|
import type { ImageBlock } from '../src/tiles/image-block';
|
|
5
|
+
import type { TextOverlay } from '../src/tiles/overlay/text-overlay';
|
|
5
6
|
|
|
6
7
|
import '../src/tiles/image-block';
|
|
7
8
|
|
|
@@ -10,7 +11,7 @@ describe('Image block component', () => {
|
|
|
10
11
|
const el = await fixture<ImageBlock>(html`
|
|
11
12
|
<image-block
|
|
12
13
|
.model=${{
|
|
13
|
-
|
|
14
|
+
loginRequired: true,
|
|
14
15
|
contentWarning: true,
|
|
15
16
|
identifier: 'goody',
|
|
16
17
|
}}
|
|
@@ -36,7 +37,7 @@ describe('Image block component', () => {
|
|
|
36
37
|
const el = await fixture<ImageBlock>(html`
|
|
37
38
|
<image-block
|
|
38
39
|
.model=${{
|
|
39
|
-
|
|
40
|
+
loginRequired: true,
|
|
40
41
|
contentWarning: true,
|
|
41
42
|
identifier: 'goody',
|
|
42
43
|
}}
|
|
@@ -62,7 +63,7 @@ describe('Image block component', () => {
|
|
|
62
63
|
const el = await fixture<ImageBlock>(html`
|
|
63
64
|
<image-block
|
|
64
65
|
.model=${{
|
|
65
|
-
|
|
66
|
+
loginRequired: true,
|
|
66
67
|
contentWarning: true,
|
|
67
68
|
identifier: 'goody',
|
|
68
69
|
}}
|
|
@@ -83,4 +84,141 @@ describe('Image block component', () => {
|
|
|
83
84
|
expect(itemImage).to.exist;
|
|
84
85
|
expect(iconOverlay).to.exist;
|
|
85
86
|
});
|
|
87
|
+
|
|
88
|
+
it('should render a login-required overlay if model requires it and not logged in', async () => {
|
|
89
|
+
const el = await fixture<ImageBlock>(html`
|
|
90
|
+
<image-block
|
|
91
|
+
.model=${{
|
|
92
|
+
loginRequired: true,
|
|
93
|
+
identifier: 'goody',
|
|
94
|
+
}}
|
|
95
|
+
.baseImageUrl=${'https://archive.org'}
|
|
96
|
+
.isCompactTile=${false}
|
|
97
|
+
.isListTile=${false}
|
|
98
|
+
.viewSize=${'desktop'}
|
|
99
|
+
.loggedIn=${false}
|
|
100
|
+
>
|
|
101
|
+
</image-block>
|
|
102
|
+
`);
|
|
103
|
+
|
|
104
|
+
const textOverlay = el.shadowRoot?.querySelector(
|
|
105
|
+
'text-overlay'
|
|
106
|
+
) as TextOverlay;
|
|
107
|
+
expect(textOverlay).to.exist;
|
|
108
|
+
expect(textOverlay.type).to.equal('login-required');
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
it('should render no overlay if logged in and model only requires login', async () => {
|
|
112
|
+
const el = await fixture<ImageBlock>(html`
|
|
113
|
+
<image-block
|
|
114
|
+
.model=${{
|
|
115
|
+
loginRequired: true,
|
|
116
|
+
identifier: 'goody',
|
|
117
|
+
}}
|
|
118
|
+
.baseImageUrl=${'https://archive.org'}
|
|
119
|
+
.isCompactTile=${false}
|
|
120
|
+
.isListTile=${false}
|
|
121
|
+
.viewSize=${'desktop'}
|
|
122
|
+
.loggedIn=${true}
|
|
123
|
+
>
|
|
124
|
+
</image-block>
|
|
125
|
+
`);
|
|
126
|
+
|
|
127
|
+
const textOverlay = el.shadowRoot?.querySelector(
|
|
128
|
+
'text-overlay'
|
|
129
|
+
) as TextOverlay;
|
|
130
|
+
expect(textOverlay).not.to.exist;
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
it('should render a content-warning overlay if model requires it and no login overlay is present', async () => {
|
|
134
|
+
const el = await fixture<ImageBlock>(html`
|
|
135
|
+
<image-block
|
|
136
|
+
.model=${{
|
|
137
|
+
contentWarning: true,
|
|
138
|
+
identifier: 'goody',
|
|
139
|
+
}}
|
|
140
|
+
.baseImageUrl=${'https://archive.org'}
|
|
141
|
+
.isCompactTile=${false}
|
|
142
|
+
.isListTile=${false}
|
|
143
|
+
.viewSize=${'desktop'}
|
|
144
|
+
.loggedIn=${false}
|
|
145
|
+
>
|
|
146
|
+
</image-block>
|
|
147
|
+
`);
|
|
148
|
+
|
|
149
|
+
const textOverlay = el.shadowRoot?.querySelector(
|
|
150
|
+
'text-overlay'
|
|
151
|
+
) as TextOverlay;
|
|
152
|
+
expect(textOverlay).to.exist;
|
|
153
|
+
expect(textOverlay.type).to.equal('content-warning');
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
it('should prioritize login-required overlay over content-warning if both required and logged out', async () => {
|
|
157
|
+
const el = await fixture<ImageBlock>(html`
|
|
158
|
+
<image-block
|
|
159
|
+
.model=${{
|
|
160
|
+
loginRequired: true,
|
|
161
|
+
contentWarning: true,
|
|
162
|
+
identifier: 'goody',
|
|
163
|
+
}}
|
|
164
|
+
.baseImageUrl=${'https://archive.org'}
|
|
165
|
+
.isCompactTile=${false}
|
|
166
|
+
.isListTile=${false}
|
|
167
|
+
.viewSize=${'desktop'}
|
|
168
|
+
.loggedIn=${false}
|
|
169
|
+
>
|
|
170
|
+
</image-block>
|
|
171
|
+
`);
|
|
172
|
+
|
|
173
|
+
const textOverlay = el.shadowRoot?.querySelector(
|
|
174
|
+
'text-overlay'
|
|
175
|
+
) as TextOverlay;
|
|
176
|
+
expect(textOverlay).to.exist;
|
|
177
|
+
expect(textOverlay.type).to.equal('login-required');
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
it('should show content-warning overlay if both types required and logged in', async () => {
|
|
181
|
+
const el = await fixture<ImageBlock>(html`
|
|
182
|
+
<image-block
|
|
183
|
+
.model=${{
|
|
184
|
+
loginRequired: true,
|
|
185
|
+
contentWarning: true,
|
|
186
|
+
identifier: 'goody',
|
|
187
|
+
}}
|
|
188
|
+
.baseImageUrl=${'https://archive.org'}
|
|
189
|
+
.isCompactTile=${false}
|
|
190
|
+
.isListTile=${false}
|
|
191
|
+
.viewSize=${'desktop'}
|
|
192
|
+
.loggedIn=${true}
|
|
193
|
+
>
|
|
194
|
+
</image-block>
|
|
195
|
+
`);
|
|
196
|
+
|
|
197
|
+
const textOverlay = el.shadowRoot?.querySelector(
|
|
198
|
+
'text-overlay'
|
|
199
|
+
) as TextOverlay;
|
|
200
|
+
expect(textOverlay).to.exist;
|
|
201
|
+
expect(textOverlay.type).to.equal('content-warning');
|
|
202
|
+
});
|
|
203
|
+
|
|
204
|
+
it('should render no overlay if neither loginRequired nor contentWarning flag present', async () => {
|
|
205
|
+
const el = await fixture<ImageBlock>(html`
|
|
206
|
+
<image-block
|
|
207
|
+
.model=${{
|
|
208
|
+
identifier: 'goody',
|
|
209
|
+
}}
|
|
210
|
+
.baseImageUrl=${'https://archive.org'}
|
|
211
|
+
.isCompactTile=${false}
|
|
212
|
+
.isListTile=${false}
|
|
213
|
+
.viewSize=${'desktop'}
|
|
214
|
+
.loggedIn=${false}
|
|
215
|
+
>
|
|
216
|
+
</image-block>
|
|
217
|
+
`);
|
|
218
|
+
|
|
219
|
+
const textOverlay = el.shadowRoot?.querySelector(
|
|
220
|
+
'text-overlay'
|
|
221
|
+
) as TextOverlay;
|
|
222
|
+
expect(textOverlay).not.to.exist;
|
|
223
|
+
});
|
|
86
224
|
});
|
|
@@ -9,18 +9,6 @@ describe('Text Overlay component', () => {
|
|
|
9
9
|
it('should render initial component', async () => {
|
|
10
10
|
const el = await fixture<TextOverlay>(html`<text-overlay></text-overlay>`);
|
|
11
11
|
|
|
12
|
-
const overlay = el.shadowRoot?.querySelector('.overlay');
|
|
13
|
-
const noPreview = el.shadowRoot?.querySelector('.no-preview');
|
|
14
|
-
|
|
15
|
-
expect(overlay).to.exist;
|
|
16
|
-
expect(noPreview).to.exist;
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
it('should render component if loggedIn required', async () => {
|
|
20
|
-
const el = await fixture<TextOverlay>(html`
|
|
21
|
-
<text-overlay .loggedIn=${false} .loginRequired=${true}> </text-overlay>
|
|
22
|
-
`);
|
|
23
|
-
|
|
24
12
|
const overlay = el.shadowRoot?.querySelector('.overlay');
|
|
25
13
|
const noPreview = el.shadowRoot?.querySelector('.no-preview');
|
|
26
14
|
const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');
|
|
@@ -29,36 +17,40 @@ describe('Text Overlay component', () => {
|
|
|
29
17
|
expect(overlay).to.exist;
|
|
30
18
|
expect(noPreview).to.exist;
|
|
31
19
|
expect(iconOverlay).to.exist;
|
|
32
|
-
expect(textOverlay
|
|
20
|
+
expect(textOverlay).to.exist;
|
|
33
21
|
});
|
|
34
22
|
|
|
35
|
-
it('should render component
|
|
23
|
+
it('should render component with login-required type', async () => {
|
|
36
24
|
const el = await fixture<TextOverlay>(html`
|
|
37
|
-
<text-overlay .
|
|
25
|
+
<text-overlay .type=${'login-required'}></text-overlay>
|
|
38
26
|
`);
|
|
39
27
|
|
|
40
|
-
const overlay = el.shadowRoot?.querySelector('.overlay');
|
|
41
|
-
const noPreview = el.shadowRoot?.querySelector('.no-preview');
|
|
42
28
|
const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');
|
|
43
29
|
const textOverlay = el.shadowRoot?.querySelector('.text-overlay');
|
|
44
30
|
|
|
45
|
-
|
|
46
|
-
|
|
31
|
+
const svgTitle = el.shadowRoot
|
|
32
|
+
?.querySelector('svg')
|
|
33
|
+
?.querySelector('title')?.textContent;
|
|
34
|
+
|
|
47
35
|
expect(iconOverlay).to.exist;
|
|
48
|
-
expect(
|
|
36
|
+
expect(svgTitle).to.equal('Log in to view this item');
|
|
37
|
+
expect(textOverlay?.textContent).to.equal('Log in to view this item');
|
|
49
38
|
});
|
|
50
39
|
|
|
51
|
-
it('should render component
|
|
40
|
+
it('should render component with content-warning type', async () => {
|
|
52
41
|
const el = await fixture<TextOverlay>(html`
|
|
53
|
-
<text-overlay .
|
|
42
|
+
<text-overlay .type=${'content-warning'}></text-overlay>
|
|
54
43
|
`);
|
|
55
44
|
|
|
56
|
-
const
|
|
57
|
-
const noPreview = el.shadowRoot?.querySelector('.no-preview');
|
|
45
|
+
const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');
|
|
58
46
|
const textOverlay = el.shadowRoot?.querySelector('.text-overlay');
|
|
59
47
|
|
|
60
|
-
|
|
61
|
-
|
|
48
|
+
const svgTitle = el.shadowRoot
|
|
49
|
+
?.querySelector('svg')
|
|
50
|
+
?.querySelector('title')?.textContent;
|
|
51
|
+
|
|
52
|
+
expect(iconOverlay).to.exist;
|
|
53
|
+
expect(svgTitle).to.equal('Content may be inappropriate');
|
|
62
54
|
expect(textOverlay?.textContent).to.equal('Content may be inappropriate');
|
|
63
55
|
});
|
|
64
56
|
});
|