squiffy-runtime 6.0.0-alpha.1 → 6.0.0-alpha.10

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.
Files changed (9) hide show
  1. package/dist/squiffy.runtime.d.ts +51 -0
  2. package/dist/squiffy.runtime.js +685 -0
  3. package/dist/squiffy.runtime.test.d.ts +1 -0
  4. package/dist/squiffy.runtime.test.js +308 -0
  5. package/package.json +20 -6
  6. package/src/__snapshots__/squiffy.runtime.test.ts.snap +114 -0
  7. package/src/squiffy.runtime.test.ts +391 -0
  8. package/src/squiffy.runtime.ts +217 -90
  9. package/tsconfig.json +5 -1
package/src/squiffy.runtime.test.ts ADDED
@@ -0,0 +1,391 @@
1
+ import { expect, test, beforeEach, afterEach } from 'vitest';
2
+ import fs from 'fs/promises';
3
+ import globalJsdom from 'global-jsdom';
4
+ import { init } from './squiffy.runtime.js';
5
+ import { compile as squiffyCompile } from 'squiffy-compiler';
6
+
7
+ const html = `
8
+ <!DOCTYPE html>
9
+ <html>
10
+ <head>
11
+ </head>
12
+ <body>
13
+ <div id="squiffy">
14
+ </div>
15
+ <div id="test">
16
+ </div>
17
+ </body>
18
+ </html>
19
+ `;
20
+
21
+ const compile = async (script: string) => {
22
+ const compileResult = await squiffyCompile({
23
+ scriptBaseFilename: "filename.squiffy", // TODO: This shouldn't be required
24
+ script: script,
25
+ });
26
+
27
+ if (!compileResult.success) {
28
+ throw new Error('Compile failed');
29
+ }
30
+
31
+ const story = compileResult.output.story;
32
+ const js = compileResult.output.js.map(jsLines => new Function('squiffy', 'get', 'set', jsLines.join('\n')));
33
+
34
+ return {
35
+ story: {
36
+ js: js as any,
37
+ ...story,
38
+ },
39
+ };
40
+ }
41
+
42
+ const initScript = async (script: string) => {
43
+ globalJsdom(html);
44
+ const element = document.getElementById('squiffy');
45
+
46
+ if (!element) {
47
+ throw new Error('Element not found');
48
+ }
49
+
50
+ const compileResult = await compile(script);
51
+
52
+ const squiffyApi = init({
53
+ element: element,
54
+ story: compileResult.story,
55
+ });
56
+
57
+ return {
58
+ squiffyApi,
59
+ element
60
+ }
61
+ };
62
+
63
+ const findLink = (element: HTMLElement, linkType: string, linkText: string, onlyEnabled: boolean = false) => {
64
+ const links = onlyEnabled
65
+ ? element.querySelectorAll(`.squiffy-output-section:last-child a.squiffy-link.link-${linkType}`)
66
+ : element.querySelectorAll(`a.squiffy-link.link-${linkType}`);
67
+ return Array.from(links).find(link => link.textContent === linkText && (onlyEnabled ? !link.classList.contains("disabled") : true)) as HTMLElement;
68
+ };
69
+
70
+ const getTestOutput = () => {
71
+ const testElement = document.getElementById('test');
72
+ if (!testElement) {
73
+ throw new Error('Test element not found');
74
+ }
75
+ return testElement.innerText;
76
+ }
77
+
78
+ let cleanup: { (): void };
79
+
80
+ beforeEach(() => {
81
+ cleanup = globalJsdom();
82
+ });
83
+
84
+ afterEach(() => {
85
+ cleanup();
86
+ });
87
+
88
+ test('"Hello world" script should run', async () => {
89
+ const { element } = await initScript("Hello world");
90
+ expect(element.innerHTML).toMatchSnapshot();
91
+ });
92
+
93
+ test('Click a section link', async () => {
94
+ const script = await fs.readFile('../examples/test/example.squiffy', 'utf-8');
95
+ const { squiffyApi, element } = await initScript(script);
96
+ expect(element.innerHTML).toMatchSnapshot();
97
+
98
+ expect(element.querySelectorAll('a.squiffy-link').length).toBe(10);
99
+ const linkToPassage = findLink(element, 'passage', 'a link to a passage');
100
+ const section3Link = findLink(element, 'section', 'section 3');
101
+
102
+ expect(linkToPassage).not.toBeNull();
103
+ expect(section3Link).not.toBeNull();
104
+ expect(linkToPassage.classList).not.toContain('disabled');
105
+
106
+ const handled = squiffyApi.clickLink(section3Link);
107
+ expect(handled).toBe(true);
108
+
109
+ expect(element.innerHTML).toMatchSnapshot();
110
+
111
+ // passage link is from the previous section, so should be unclickable
112
+ expect(squiffyApi.clickLink(linkToPassage)).toBe(false);
113
+ });
114
+
115
+ test('Click a passage link', async () => {
116
+ const script = await fs.readFile('../examples/test/example.squiffy', 'utf-8');
117
+ const { squiffyApi, element } = await initScript(script);
118
+ expect(element.innerHTML).toMatchSnapshot();
119
+
120
+ expect(element.querySelectorAll('a.squiffy-link').length).toBe(10);
121
+ const linkToPassage = findLink(element, 'passage', 'a link to a passage');
122
+ const section3Link = findLink(element, 'section', 'section 3');
123
+
124
+ expect(linkToPassage).not.toBeNull();
125
+ expect(section3Link).not.toBeNull();
126
+ expect(linkToPassage.classList).not.toContain('disabled');
127
+
128
+ const handled = squiffyApi.clickLink(linkToPassage);
129
+ expect(handled).toBe(true);
130
+
131
+ expect(linkToPassage.classList).toContain('disabled');
132
+ expect(element.innerHTML).toMatchSnapshot();
133
+
134
+ // shouldn't be able to click it again
135
+ expect(squiffyApi.clickLink(linkToPassage)).toBe(false);
136
+ });
137
+
138
+ test('Run JavaScript functions', async () => {
139
+ const script = `
140
+ document.getElementById('test').innerText = 'Initial JavaScript';
141
+ @set some_string = some_value
142
+ @set some_number = 5
143
+
144
+ +++Continue...
145
+ document.getElementById('test').innerText = "Value: " + get("some_number");
146
+ +++Continue...
147
+ document.getElementById('test').innerText = "Value: " + get("some_string");
148
+ set("some_number", 10);
149
+ +++Continue...
150
+ document.getElementById('test').innerText = "Value: " + get("some_number");
151
+ +++Continue...
152
+ @inc some_number
153
+ +++Continue...
154
+ document.getElementById('test').innerText = "Value: " + get("some_number");
155
+ +++Continue...
156
+ squiffy.story.go("other section");
157
+ [[other section]]:
158
+ document.getElementById('test').innerText = "In other section";
159
+ `;
160
+
161
+ const clickContinue = () => {
162
+ const continueLink = findLink(element, 'section', 'Continue...', true);
163
+ expect(continueLink).not.toBeNull();
164
+ const handled = squiffyApi.clickLink(continueLink);
165
+ expect(handled).toBe(true);
166
+ };
167
+
168
+ const { squiffyApi, element } = await initScript(script);
169
+
170
+ expect(getTestOutput()).toBe('Initial JavaScript');
171
+ clickContinue();
172
+
173
+ expect(getTestOutput()).toBe('Value: 5');
174
+ clickContinue();
175
+
176
+ expect(getTestOutput()).toBe('Value: some_value');
177
+ clickContinue();
178
+
179
+ expect(getTestOutput()).toBe('Value: 10');
180
+
181
+ clickContinue();
182
+ clickContinue();
183
+ expect(getTestOutput()).toBe('Value: 11');
184
+
185
+ clickContinue();
186
+ expect(getTestOutput()).toBe('In other section');
187
+ });
188
+
189
+ function safeQuerySelector(name: string) {
190
+ return name.replace(/'/g, "\\'");
191
+ }
192
+
193
+ function getSectionContent(element: HTMLElement, section: string) {
194
+ return element.querySelector(`[data-source='[[${safeQuerySelector(section)}]]'] p`)?.textContent || null;
195
+ }
196
+
197
+ function getPassageContent(element: HTMLElement, section: string, passage: string) {
198
+ return element.querySelector(`[data-source='[[${safeQuerySelector(section)}]][${safeQuerySelector(passage)}]'] p`)?.textContent || null;
199
+ }
200
+
201
+ test('Update default section output', async () => {
202
+ const { squiffyApi, element } = await initScript("Hello world");
203
+ let defaultOutput = getSectionContent(element, '_default');
204
+ expect(defaultOutput).toBe('Hello world');
205
+ expect(element.innerHTML).toMatchSnapshot();
206
+
207
+ const updated = await compile("Updated content");
208
+ squiffyApi.update(updated.story);
209
+ defaultOutput = getSectionContent(element, '_default');
210
+ expect(defaultOutput).toBe('Updated content');
211
+ expect(element.innerHTML).toMatchSnapshot();
212
+ });
213
+
214
+ test.each(['a', 'a\'1'])('Update passage output - passage name "%s"', async (name) => {
215
+ const { squiffyApi, element } = await initScript(`Click this: [${name}]
216
+
217
+ [${name}]:
218
+ Passage a content`);
219
+
220
+ const link = findLink(element, 'passage', name);
221
+ const handled = squiffyApi.clickLink(link);
222
+ expect(handled).toBe(true);
223
+
224
+ let defaultOutput = getSectionContent(element, '_default');
225
+ expect(defaultOutput).toBe(`Click this: ${name}`);
226
+ let passageOutput = getPassageContent(element, '_default', name);
227
+ expect(passageOutput).toBe('Passage a content');
228
+ expect(element.innerHTML).toMatchSnapshot();
229
+
230
+ const updated = await compile(`Click this: [${name}]
231
+
232
+ [${name}]:
233
+ Updated passage content`);
234
+
235
+ squiffyApi.update(updated.story);
236
+
237
+ defaultOutput = getSectionContent(element, '_default');
238
+ expect(defaultOutput).toBe(`Click this: ${name}`);
239
+
240
+ passageOutput = getPassageContent(element, '_default', name);
241
+ expect(passageOutput).toBe('Updated passage content');
242
+ expect(element.innerHTML).toMatchSnapshot();
243
+ });
244
+
245
+ test('Delete section', async () => {
246
+ const { squiffyApi, element } = await initScript(`Click this: [[a]]
247
+
248
+ [[a]]:
249
+ New section`);
250
+
251
+ const link = findLink(element, 'section', 'a');
252
+ const handled = squiffyApi.clickLink(link);
253
+ expect(handled).toBe(true);
254
+
255
+ let defaultOutput = getSectionContent(element, '_default');
256
+ expect(defaultOutput).toBe('Click this: a');
257
+ let sectionOutput = getSectionContent(element, 'a');
258
+ expect(sectionOutput).toBe('New section');
259
+ expect(element.innerHTML).toMatchSnapshot();
260
+
261
+ const updated = await compile(`Click this: [[a]]`);
262
+
263
+ squiffyApi.update(updated.story);
264
+
265
+ defaultOutput = getSectionContent(element, '_default');
266
+ expect(defaultOutput).toBe('Click this: a');
267
+ sectionOutput = getSectionContent(element, 'a');
268
+ expect(sectionOutput).toBeNull();
269
+
270
+ expect(element.innerHTML).toMatchSnapshot();
271
+ });
272
+
273
+ test('Delete passage', async () => {
274
+ const { squiffyApi, element } = await initScript(`Click this: [a]
275
+
276
+ [a]:
277
+ New passage`);
278
+
279
+ const link = findLink(element, 'passage', 'a');
280
+ const handled = squiffyApi.clickLink(link);
281
+ expect(handled).toBe(true);
282
+
283
+ let defaultOutput = getSectionContent(element, '_default');
284
+ expect(defaultOutput).toBe('Click this: a');
285
+ let passageOutput = getPassageContent(element, '_default', 'a');
286
+ expect(passageOutput).toBe('New passage');
287
+ expect(element.innerHTML).toMatchSnapshot();
288
+
289
+ const updated = await compile(`Click this: [a]`);
290
+
291
+ squiffyApi.update(updated.story);
292
+
293
+ defaultOutput = getSectionContent(element, '_default');
294
+ expect(defaultOutput).toBe('Click this: a');
295
+ passageOutput = getPassageContent(element, '_default', 'a');
296
+ expect(passageOutput).toBeNull();
297
+
298
+ expect(element.innerHTML).toMatchSnapshot();
299
+ });
300
+
301
+ test('Clicked passage links remain disabled after an update', async () => {
302
+ const { squiffyApi, element } = await initScript(`Click one of these: [a] [b]
303
+
304
+ [a]:
305
+ Output for passage A.
306
+
307
+ [b]:
308
+ Output for passage B.`);
309
+
310
+ // click linkA
311
+
312
+ let linkA = findLink(element, 'passage', 'a');
313
+ expect(linkA.classList).not.toContain('disabled');
314
+ expect(squiffyApi.clickLink(linkA)).toBe(true);
315
+
316
+ const updated = await compile(`Click one of these (updated): [a] [b]
317
+
318
+ [a]:
319
+ Output for passage A.
320
+
321
+ [b]:
322
+ Output for passage B.`);
323
+
324
+ squiffyApi.update(updated.story);
325
+
326
+ // linkA should still be disabled
327
+
328
+ linkA = findLink(element, 'passage', 'a');
329
+ expect(linkA.classList).toContain('disabled');
330
+ expect(squiffyApi.clickLink(linkA)).toBe(false);
331
+
332
+ // linkB should still be enabled
333
+
334
+ let linkB = findLink(element, 'passage', 'b');
335
+ expect(linkB.classList).not.toContain('disabled');
336
+ expect(squiffyApi.clickLink(linkB)).toBe(true);
337
+ });
338
+
339
+ test('Deleting the current section activates the previous section', async () => {
340
+ const { squiffyApi, element } = await initScript(`Choose a section: [[a]] [[b]], or passage [start1].
341
+
342
+ [start1]:
343
+ Output for passage start1.
344
+
345
+ [[a]]:
346
+ Output for section A.
347
+
348
+ [[b]]:
349
+ Output for section B.`);
350
+
351
+ // click linkA
352
+
353
+ let linkA = findLink(element, 'section', 'a');
354
+ let linkB = findLink(element, 'section', 'b');
355
+ expect(linkA.classList).not.toContain('disabled');
356
+ expect(squiffyApi.clickLink(linkA)).toBe(true);
357
+
358
+ // can't click start1 passage as we're in section [[a]] now
359
+ let linkStart1 = findLink(element, 'passage', 'start1');
360
+ expect(squiffyApi.clickLink(linkStart1)).toBe(false);
361
+
362
+ // can't click linkB as we're in section [[a]] now
363
+ expect(squiffyApi.clickLink(linkB)).toBe(false);
364
+
365
+ // now we delete section [[a]]
366
+
367
+ const updated = await compile(`Choose a section: [[a]] [[b]], or passage [start1].
368
+
369
+ [start1]:
370
+ Output for passage start1.
371
+
372
+ [[b]]:
373
+ Output for section B. Here's a passage: [b1].
374
+
375
+ [b1]:
376
+ Passage in section B.`);
377
+
378
+ squiffyApi.update(updated.story);
379
+
380
+ // We're in the first section, so the start1 passage should be clickable now
381
+ linkStart1 = findLink(element, 'passage', 'start1');
382
+ expect(squiffyApi.clickLink(linkStart1)).toBe(true);
383
+
384
+ // We're in the first section, so linkB should be clickable now
385
+ linkB = findLink(element, 'section', 'b');
386
+ expect(squiffyApi.clickLink(linkB)).toBe(true);
387
+
388
+ // and the passage [b1] within it should be clickable
389
+ const linkB1 = findLink(element, 'passage', 'b1');
390
+ expect(squiffyApi.clickLink(linkB1)).toBe(true);
391
+ });