basic text cell functionality smoke test (#15195)

src/sql/workbench/contrib/notebook/browser/cellViews/placeholderCell.component.html

@@ -7,7 +7,7 @@
 <div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
 	<div class="placeholder-cell-component" style="flex: 0 0 auto;">
 		<div class="placeholder-cell-component text">
-			<p>{{clickOn}} <a href="#" (click)="addCell('code', $event)">{{plusCode}}</a> {{or}} <a href="#" (click)="addCell('markdown', $event)">{{plusText}}</a> {{toAddCell}}</p>
+			<p>{{clickOn}} <a id="addCode" href="#" (click)="addCell('code', $event)">{{plusCode}}</a> {{or}} <a id="addMarkdown" href="#" (click)="addCell('markdown', $event)">{{plusText}}</a> {{toAddCell}}</p>
 		</div>
 	</div>
 </div>

test/automation/src/sql/notebook.ts

@@ -15,6 +15,7 @@ export class Notebook {
 
 	public readonly toolbar: NotebookToolbar;
 	public readonly view: NotebookView;
+	private newNotebookCount: number = 0;
 
 	constructor(private code: Code, private quickAccess: QuickAccess, private quickInput: QuickInput, private editors: Editors) {
 		this.toolbar = new NotebookToolbar(code);
@@ -31,10 +32,13 @@ export class Notebook {
 
 	async newUntitledNotebook(): Promise<void> {
 		await this.code.dispatchKeybinding(winOrCtrl + '+alt+n');
-		await this.editors.waitForActiveTab('Notebook-0');
+		await this.editors.waitForActiveTab(`Notebook-${this.newNotebookCount}`);
 		await this.code.waitForElement('.notebookEditor');
+		this.newNotebookCount++;
 	}
 
+	// Notebook Toolbar Actions
+
 	async addCell(cellType: 'markdown' | 'code'): Promise<void> {
 		if (cellType === 'markdown') {
 			await this.code.dispatchKeybinding('ctrl+shift+t');
@@ -79,6 +83,8 @@ export class Notebook {
 		await this.toolbar.waitForNotTrustedIcon();
 	}
 
+	// Cell Actions
+
 	async waitForTypeInEditor(text: string) {
 		const editor = '.notebook-cell.active .monaco-editor';
 		await this.code.waitAndClick(editor);
@@ -95,6 +101,46 @@ export class Notebook {
 		return this.code.waitForTextContent(selector, undefined, c => accept(c.replace(/\u00a0/g, ' ')));
 	}
 
+	private static readonly placeholderSelector = 'div.placeholder-cell-component';
+	async addCellFromPlaceholder(cellType: 'Markdown' | 'Code'): Promise<void> {
+		await this.code.waitAndClick(`${Notebook.placeholderSelector} p a[id="add${cellType}"]`);
+		await this.code.waitForElement('.notebook-cell.active');
+	}
+
+	async waitForPlaceholderGone(): Promise<void> {
+		await this.code.waitForElementGone(Notebook.placeholderSelector);
+	}
+
+	// Text Cell Actions
+
+	private static readonly textCellPreviewSelector = 'div.notebook-preview';
+	private static readonly doubleClickToEditSelector = `${Notebook.textCellPreviewSelector} p i`;
+	async waitForDoubleClickToEdit(): Promise<void> {
+		await this.code.waitForElement(Notebook.doubleClickToEditSelector);
+	}
+
+	async doubleClickTextCell(): Promise<void> {
+		await this.code.waitAndClick(Notebook.textCellPreviewSelector);
+		await this.code.waitAndDoubleClick(`${Notebook.textCellPreviewSelector}.actionselect`);
+	}
+
+	async waitForDoubleClickToEditGone(): Promise<void> {
+		await this.code.waitForElementGone(Notebook.doubleClickToEditSelector);
+	}
+
+	private static readonly textCellToolbar = 'text-cell-component markdown-toolbar-component ul.actions-container';
+	async changeTextCellView(view: 'Rich Text View' | 'Split View' | 'Markdown View'): Promise<void> {
+		const actionSelector = `${Notebook.textCellToolbar} a[title="${view}"]`;
+		await this.code.waitAndClick(actionSelector);
+	}
+
+	async waitForTextCellPreviewContent(text: string, fontType: 'p' | 'h1' | 'h2' | 'h3'): Promise<void> {
+		const textSelector = `${Notebook.textCellPreviewSelector} ${fontType}`;
+		await this.code.waitForElement(textSelector, result => result?.textContent === text);
+	}
+
+	// Cell Output Actions
+
 	async waitForActiveCellResults(): Promise<void> {
 		const outputComponent = '.notebook-cell.active .notebook-output';
 		await this.code.waitForElement(outputComponent);

test/smoke/src/sql/areas/notebook/notebook.test.ts

@@ -59,6 +59,24 @@ export function setup() {
 
 			await app.workbench.quickaccess.runCommand('workbench.action.closeActiveEditor');
 		});
+
+		it('can perform basic text cell functionality', async function () {
+			const app = this.app as Application;
+			await app.workbench.sqlNotebook.newUntitledNotebook();
+			await app.workbench.sqlNotebook.addCellFromPlaceholder('Markdown');
+			await app.workbench.sqlNotebook.waitForPlaceholderGone();
+
+			await app.code.dispatchKeybinding('escape');
+			await app.workbench.sqlNotebook.waitForDoubleClickToEdit();
+			await app.workbench.sqlNotebook.doubleClickTextCell();
+			await app.workbench.sqlNotebook.waitForDoubleClickToEditGone();
+
+			await app.workbench.sqlNotebook.changeTextCellView('Split View');
+			const sampleText: string = 'Test text cells';
+			await app.workbench.sqlNotebook.waitForTypeInEditor(sampleText);
+			await app.code.dispatchKeybinding('escape');
+			await app.workbench.sqlNotebook.waitForTextCellPreviewContent(sampleText, 'p');
+		});
 	});
 }