Skip to content

Commit b5a7da2

Browse files
HugoDFHugoDF
committed
2.5.0 feat: component message history
- fix: duplicated messages - stamp message history - message flyout, wip display messages - fix double inject, fix styling - display message history when a component is selected - add offline version of alpine - extract history flyout - display message in right pane - readonly for data attr display - set data from snapshot - fixup ui, autoscroll to newest message - pinning works, history flyout header is sticky - allow applying snapshots as long as we're in a selected component view (inc pinned path) - fix empty state styling - add tests - add alpha link survey
1 parent 59b030e commit b5a7da2

27 files changed

+1066
-293
lines changed

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
**/sa.js
2+
**/cdn.min.js

‎packages/shell-chrome-v3/.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
src/scripts/sa.js
2+
cdn.min.js

‎packages/shell-chrome-v3/cdn.min.js‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/shell-chrome-v3/cypress.config.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ export default defineConfig({
1010

1111
e2e: {
1212
experimentalRunAllSpecs: true,
13-
// TODO: when reworking the tests, we should do 1 test -> multiple assertions
14-
testIsolation: false,
1513
setupNodeEvents(on, config) {},
1614
baseUrl: 'http://localhost:3000',
1715
},

‎packages/shell-chrome-v3/cypress/e2e/component-history.cy.js‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
describe('History', () => {
2+
it('should display "history", open the flyout and display messages when clicked', () => {
3+
cy.visit('/simulator?target=v3.html', {
4+
onBeforeLoad(win) {
5+
Object.defineProperty(win.navigator, 'language', { value: 'en-US' });
6+
},
7+
})
8+
.get('[data-testid=component-name]')
9+
.should('be.visible');
10+
const now = new Date();
11+
const formattedHourMinute = now.toLocaleTimeString('en-US').split(':').slice(0, 2).join(':');
12+
13+
const formattedDate = now.toLocaleDateString('en-US', {
14+
year: 'numeric',
15+
month: '2-digit',
16+
day: '2-digit',
17+
});
18+
19+
// Setup
20+
cy.get('[data-testid=component-name]').contains('model-no-render').click();
21+
22+
cy.get('[data-testid=history-flyout]').contains('History').should('be.visible');
23+
24+
cy.get('[data-testid=history-flyout]').contains('History').click();
25+
26+
// Message is visible and displays information as expected
27+
cy.get('[data-testid=history-message-0]').should('be.visible');
28+
cy.get('[data-testid=history-message-0]').contains('+0ms').should('be.visible');
29+
cy.get('[data-testid=history-message-0]').contains(formattedHourMinute).should('be.visible');
30+
31+
cy.iframe('#target').find('[data-testid=model-no-render]').should('be.visible').clear();
32+
33+
cy.get('[data-testid=history-flyout] li').should('have.length', 2);
34+
35+
cy.iframe('#target')
36+
.find('[data-testid=model-no-render]')
37+
.should('be.visible')
38+
.type('new', { delay: 20 });
39+
40+
cy.get('[data-testid=history-flyout] li').should('have.length', 5);
41+
42+
// selecting a snapshot displays right info
43+
cy.get('[data-testid=history-message-3]').click();
44+
45+
cy.get('[data-testid=attr-list-header]')
46+
.should('be.visible')
47+
.should('contain.text', formattedDate)
48+
.should('contain.text', formattedHourMinute);
49+
cy.get('[data-testid=data-property-name-text]')
50+
.should('be.visible')
51+
.should('have.text', 'text');
52+
cy.get('[data-testid=data-property-value-text]')
53+
.should('be.visible')
54+
.should('have.text', '"ne"');
55+
56+
// unselecting a snapshot reverts
57+
cy.get('[data-testid=history-message-3]').click();
58+
59+
cy.get('[data-testid=data-property-name-text]')
60+
.should('be.visible')
61+
.should('have.text', 'text');
62+
cy.get('[data-testid=data-property-value-text]')
63+
.should('be.visible')
64+
.should('have.text', '"new"');
65+
66+
cy.get('[data-testid=apply-snapshot]').should('not.exist');
67+
68+
// Apply snapshot
69+
cy.get('[data-testid=history-message-3]').click();
70+
71+
cy.get('[data-testid=apply-snapshot]').should('be.visible');
72+
cy.get('[data-testid=apply-snapshot]').click();
73+
74+
cy.iframe('#target')
75+
.find('[data-testid=model-no-render]')
76+
.should('be.visible')
77+
.should('have.value', 'ne');
78+
});
79+
80+
it('pinning a field works across messages', () => {
81+
cy.visit('/simulator?target=v3.html').get('[data-testid=component-name]').should('be.visible');
82+
83+
// Setup
84+
cy.get('[data-testid=component-name]').contains('model-no-render').click();
85+
86+
cy.get('[data-testid=history-flyout]').contains('History').should('be.visible');
87+
88+
cy.get('[data-testid=history-flyout]').contains('History').click();
89+
90+
cy.iframe('#target')
91+
.find('[data-testid=nested-model-no-render]')
92+
.should('be.visible')
93+
.clear()
94+
.type('new', { delay: 0 });
95+
96+
cy.get('[data-testid=history-flyout] li').should('have.length', 3);
97+
98+
// Setup the "pin"
99+
cy.get('[data-testid=history-message-0]').click();
100+
101+
cy.get('[data-testid=data-property-name-model]').click();
102+
cy.get('[data-testid=data-property-name-nested')
103+
.should('be.visible')
104+
.should('have.text', 'nested');
105+
cy.get('[data-testid=data-property-value-nested')
106+
.should('be.visible')
107+
.should('have.text', '"nested-initial"');
108+
109+
cy.get('[data-testid="pin-model.nested"]').should('be.visible').should('have.text', '(pin)');
110+
cy.get('[data-testid="pin-model.nested"]').click();
111+
112+
cy.get('[data-testid=data-property-name-text').should('not.exist');
113+
cy.get('[data-testid=apply-snapshot]').should('be.visible');
114+
115+
cy.get('[data-testid=history-message-1]').click();
116+
cy.get('[data-testid=data-property-name-text').should('not.exist');
117+
cy.get('[data-testid=data-property-name-nested')
118+
.should('be.visible')
119+
.should('have.text', 'nested');
120+
cy.get('[data-testid=data-property-value-nested')
121+
.should('be.visible')
122+
.should('have.text', '""');
123+
124+
cy.get('[data-testid="unpin-model.nested"]').click();
125+
126+
cy.get('[data-testid=data-property-name-text').should('be.visible');
127+
});
128+
129+
it('opening attributes syncs across live component data and messages', () => {
130+
cy.visit('/simulator?target=v3.html').get('[data-testid=component-name]').should('be.visible');
131+
132+
// Setup
133+
cy.get('[data-testid=component-name]').contains('model-no-render').click();
134+
135+
cy.get('[data-testid=history-flyout]').contains('History').should('be.visible');
136+
137+
cy.get('[data-testid=history-flyout]').contains('History').click();
138+
139+
cy.iframe('#target')
140+
.find('[data-testid=nested-model-no-render]')
141+
.should('be.visible')
142+
.clear()
143+
.type('new', { delay: 0 });
144+
145+
cy.get('[data-testid=history-flyout] li').should('have.length', 3);
146+
147+
// open attr in "component live data view"
148+
cy.get('[data-testid=data-property-name-model]').click();
149+
cy.get('[data-testid=data-property-name-nested')
150+
.should('be.visible')
151+
.should('have.text', 'nested');
152+
153+
// select a message
154+
cy.get('[data-testid=history-message-2]').click();
155+
156+
cy.get('[data-testid=data-property-name-nested')
157+
.should('be.visible')
158+
.should('have.text', 'nested');
159+
// opened attr is maintained
160+
cy.get('[data-testid=data-property-value-nested')
161+
.should('be.visible')
162+
.should('have.text', '"new"');
163+
164+
// close attr from "message view"
165+
cy.get('[data-testid=data-property-name-model').click();
166+
cy.get('[data-testid=data-property-name-nested').should('not.exist');
167+
168+
// TODO: syncing message "open" state back to "component view" doesn't work
169+
// would need refactoring to maintain accurate "openAttrs" globally for messages
170+
// and component.
171+
172+
// // unselect message
173+
// cy.get('[data-testid=history-message-2]').click();
174+
175+
// // should be "live data view"
176+
// cy.get('[data-testid=apply-snapshot]').should('not.exist');
177+
// // close should have synced
178+
// cy.get('[data-testid=data-property-name-nested').should('not.exist');
179+
});
180+
});

‎packages/shell-chrome-v3/cypress/e2e/pin-data.cy.js‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,76 @@
1-
it('should display (pin) and filter/toggle to (unpin) when clicked', () => {
2-
cy.visit('/simulator?target=v3.html').get('[data-testid=component-name]').should('be.visible');
1+
describe('Pin data', () => {
2+
it('should display (pin) and filter/toggle to (unpin) when clicked', () => {
3+
cy.visit('/simulator?target=v3.html').get('[data-testid=component-name]').should('be.visible');
34

4-
// Setup
5-
cy.get('[data-testid=component-name]').first().click();
5+
// Setup
6+
cy.get('[data-testid=component-name]').first().click();
67

7-
cy.get('[data-testid="data-property-name-el"]').click();
8-
cy.get('[data-testid="data-property-name-children"]').should('be.visible');
9-
cy.get('[data-testid="data-property-name-children"]').click();
10-
// End setup
8+
cy.get('[data-testid="data-property-name-el"]').click();
9+
cy.get('[data-testid="data-property-name-children"]').should('be.visible');
10+
cy.get('[data-testid="data-property-name-children"]').click();
11+
// End setup
1112

12-
cy.get('[data-testid="pin-el.children"]').should('be.visible');
13-
cy.get('[data-testid="pin-el.children"]').should('have.text', '(pin)');
13+
cy.get('[data-testid="pin-el.children"]').should('be.visible');
14+
cy.get('[data-testid="pin-el.children"]').should('have.text', '(pin)');
1415

15-
// Pre-condition, this will get filtered out
16-
cy.get('[data-testid="data-property-name-myFunction"]').should('exist');
16+
// Pre-condition, this will get filtered out
17+
cy.get('[data-testid="data-property-name-myFunction"]').should('exist');
1718

18-
cy.get('[data-testid="pin-el.children"]').click();
19+
cy.get('[data-testid="pin-el.children"]').click();
1920

20-
// Assertions
21-
cy.get('[data-testid="pin-el.children"]').should('not.exist');
22-
cy.get('[data-testid="unpin-el.children"]').should('be.visible');
23-
cy.get('[data-testid="unpin-el.children"]').should('have.text', '(unpin)');
21+
// Assertions
22+
cy.get('[data-testid="pin-el.children"]').should('not.exist');
23+
cy.get('[data-testid="unpin-el.children"]').should('be.visible');
24+
cy.get('[data-testid="unpin-el.children"]').should('have.text', '(unpin)');
2425

25-
cy.get('[data-testid="data-property-name-myFunction"]').should('not.exist');
26+
cy.get('[data-testid="data-property-name-myFunction"]').should('not.exist');
2627

27-
cy.get('[data-testid="data-property-name-0"]').should('be.visible');
28-
cy.get('[data-testid="data-property-name-1"]').should('be.visible');
29-
cy.get('[data-testid="pin-el.children.2"]').click();
30-
cy.get('[data-testid="data-property-name-0"]').should('not.exist');
31-
cy.get('[data-testid="data-property-name-1"]').should('not.exist');
28+
cy.get('[data-testid="data-property-name-0"]').should('be.visible');
29+
cy.get('[data-testid="data-property-name-1"]').should('be.visible');
30+
cy.get('[data-testid="pin-el.children.2"]').click();
31+
cy.get('[data-testid="data-property-name-0"]').should('not.exist');
32+
cy.get('[data-testid="data-property-name-1"]').should('not.exist');
3233

33-
// Unpin
34-
cy.get('[data-testid="unpin-el.children.2"]').should('have.text', '(unpin)');
35-
cy.get('[data-testid="unpin-el.children.2"]').click();
34+
// Unpin
35+
cy.get('[data-testid="unpin-el.children.2"]').should('have.text', '(unpin)');
36+
cy.get('[data-testid="unpin-el.children.2"]').click();
3637

37-
// Assert that we reset correctly
38-
cy.get('[data-testid="pin-el.children"]').should('be.visible');
39-
cy.get('[data-testid="pin-el.children"]').should('have.text', '(pin)');
40-
cy.get('[data-testid="unpin-el.children"]').should('not.exist');
41-
cy.get('[data-testid="data-property-name-myFunction"]').should('exist');
42-
});
38+
// Assert that we reset correctly
39+
cy.get('[data-testid="pin-el.children"]').should('be.visible');
40+
cy.get('[data-testid="pin-el.children"]').should('have.text', '(pin)');
41+
cy.get('[data-testid="unpin-el.children"]').should('not.exist');
42+
cy.get('[data-testid="data-property-name-myFunction"]').should('exist');
43+
});
4344

44-
it('displays pinned path, clicking on path loosens the filtering', () => {
45-
cy.visit('/simulator?target=v3.html').get('[data-testid=component-name]').should('be.visible');
45+
it('displays pinned path, clicking on path loosens the filtering', () => {
46+
cy.visit('/simulator?target=v3.html').get('[data-testid=component-name]').should('be.visible');
4647

47-
// Setup
48-
cy.get('[data-testid=component-name]').first().click();
48+
// Setup
49+
cy.get('[data-testid=component-name]').first().click();
4950

50-
cy.get('[data-testid="data-property-name-el"]').click();
51-
cy.get('[data-testid="data-property-name-children"]').should('be.visible');
52-
cy.get('[data-testid="data-property-name-children"]').click();
53-
// End setup
51+
cy.get('[data-testid="data-property-name-el"]').click();
52+
cy.get('[data-testid="data-property-name-children"]').should('be.visible');
53+
cy.get('[data-testid="data-property-name-children"]').click();
54+
// End setup
5455

55-
cy.get('[data-testid="pinned-path"').should('not.exist');
56+
cy.get('[data-testid="pinned-path"').should('not.exist');
5657

57-
cy.get('[data-testid="pin-el.children"]').click();
58+
cy.get('[data-testid="pin-el.children"]').click();
5859

59-
// Assertions
60-
cy.get('[data-testid="data-property-name-myFunction"]').should('not.exist');
61-
cy.get('[data-testid="pinned-path"').should('be.visible');
62-
cy.get('[data-testid="pinned-path"').should('have.text', 'el>children');
60+
// Assertions
61+
cy.get('[data-testid="data-property-name-myFunction"]').should('not.exist');
62+
cy.get('[data-testid="pinned-path"').should('be.visible');
63+
cy.get('[data-testid="pinned-path"').should('have.text', 'el>children');
6364

64-
cy.get('[data-testid="pinned-path-children"')
65-
.should('be.visible')
66-
.should('have.text', 'children');
67-
cy.get('[data-testid="pinned-path-el"').click();
68-
cy.get('[data-testid="pinned-path-children"').should('not.exist');
65+
cy.get('[data-testid="pinned-path-children"')
66+
.should('be.visible')
67+
.should('have.text', 'children');
68+
cy.get('[data-testid="pinned-path-el"').click();
69+
cy.get('[data-testid="pinned-path-children"').should('not.exist');
6970

70-
cy.get('[data-testid="pinned-path-el"').click();
71+
cy.get('[data-testid="pinned-path-el"').click();
7172

72-
cy.get('[data-testid="pinned-path"').should('not.exist');
73-
cy.get('[data-testid="data-property-name-myFunction"]').should('exist');
73+
cy.get('[data-testid="pinned-path"').should('not.exist');
74+
cy.get('[data-testid="data-property-name-myFunction"]').should('exist');
75+
});
7476
});

0 commit comments

Comments
 (0)