Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Brackets Smoke Tests

Jump to bottom
JeffryBooher edited this page Sep 30, 2014 · 116 revisions

Brackets has a pretty good automated test suite that you can run from Debug > Run Tests, but that doesn't always cover issues with the overall UI and intetegrated functionality, or visual/layout issues that are only obvious if you're actually looking at the product. This is a set of manual tests intended to make sure we haven't broken the basic overall workflows of the product. The intention is to keep it quick--if it takes more than 5 minutes on a given platform it's too long.

There are also Brackets server smoke tests.

If you have trouble running through it or something is unclear, please post to the brackets-dev mailing list.

Setup

  1. Make sure your git status is clean and your user extensions folder and src/extensions/dev folders are both empty (git status will not tell you about these folders).
  2. Quit and relaunch Chrome if it's open (so it's not in remote debugger mode).
  3. If you've run the smokes previously, revert any changes you might have made in brackets/test/smokes/citrus completed.
  4. Delete your cache folder (Mac: ~/Library/Application\ Support/Brackets/cef_data, Win: %appdata%\Brackets\cef_data, Linux: ~/.config/Brackets/cef_data).
  5. Move your state.json file aside (rename it to state.json.bak or something if you want to get it back). (Mac: ~/Library/Application\ Support/Brackets/state.json, Win: %appdata%\Brackets\cef_data, Linux: ~/.config/Brackets/state.json)
  6. Disable any 3rd party extensions you've installed (see Extension Locations)

Smoke test steps

  1. Launch Brackets. Verify that the Brackets "Getting Started" folder is visible in the project panel and its index.html file is opened automatically and there is a single pane showing in the main view.

  2. File > Open Folder and browse to the Brackets source folder.

  3. Click on the triangle next to the project name. The dropdown should show the "Open Folder..." option, then the "Getting Started" folder.

  4. From the Finder/Explorer, create a new folder called "watch". Observe that the new folder appears in the file tree in a closed state.

  5. From the Finder/Explorer, rename the "watch" folder to "watcher". Observe that the folder is renamed in the file tree and remains in a closed state.

  6. From the Finder/Explorer window, copy the README.md file from the project from into the watcher folder. Confirm that NO CHANGES take place in the file tree.

  7. Expand the "watcher" folder in the project tree and observe the copied README.md file. From the Finder/Explorer, delete the copied README.md file. Observe that the copied file is removed from the project tree and that the watcher folder remains expanded.

  8. From the Finder/Explorer, delete the watcher folder and observe that it is removed from the file tree.

  9. Switch back to the "Getting Started" folder using the project dropdown, verifying that it switches back to the previous project and shows its index.html.

  10. Switch back to the "brackets" folder using the project dropdown.

  11. Expand some folders in the brackets project, enough that it has to scroll.

  12. Scroll around in the folder area. Verify that the shadows look right (appears at top when not scrolled all the way to the top) and there are no visual glitches.

  13. From the Finder/Explorer window, drag the brackets/test/smokes/citrus completed folder onto Brackets. In the Project panel, verify that the folder opened and it contains "css" and "images" folders and an "index.html" file.

  14. From the Finder/Explorer window, drag the brackets/test/smokes/citrus completed/index.html file onto Brackets. Verify that the file is opened, selected, and added to the working set.

  15. File > New

  16. File > Save, name the file temp.js in the current project. Verify that the name in the working set and title bar changes to temp.js and the mode in the status bar changes to "JavaScript".

  17. Type the following code

    var foo = "";
function add(a, b) {
    return a+b;
}

foo.

  18. Verify String method code hints on foo

  19. Replace the last line with add(

  20. Verify that the parameter hint Object a, Object b appears with Object a in boldface

  21. Type 5, 10); and press enter

  22. Type add(

  23. Verify that the parameter hint Number a, Number b appears with the Number a in boldface

  24. In the project tree, right-click on temp.js and choose "Rename". Rename the file to temp.txt. Verify that the name in the working set and title bar changes, the code coloring disappears and the mode changes to "Text".

  25. In the project tree, right click on temp.txt and choose delete (when prompted discard changes)

  26. Open the OS Trash/Recycle Bin and confirm temp.txt was deleted

  27. Verify that index.html is now current file. Move mouse over the name of the source of an <img> tag (e.g. "images/events.jpg" on line 33). Verify that Hover Preview of the image is displayed properly with the width and height.

  28. Set the cursor in the <body> tag immediately before the >.

  29. Enter a space. Verify that a list of attribute hints pops up and you can navigate the list with up/down arrow key.

  30. Hit Esc key to dismiss the code hints list, then delete the space so the cursor is after the "y" of "body".

  31. Hit Cmd/Ctrl-E. Verify that it shows a single body rule and that everything is laid out properly.

  32. With View > Themes..., change the theme from Brackets Light to Brackets Dark (or vice-versa, depending on what your standard theme is). Make sure that both the host editor and the inline editor look correct, then switch back to your normal theme.

  33. In the native shell menu, choose View > Increase Font Size. Verify both the host and inline editors font size increases. The inline editor should not show a vertical scrollbar.

  34. Click the lightning bolt in the upper right. If you moved your state.json file, you'll get an info dialog explaining how live preview works. Hit OK.

  35. You should see the page load in Chrome.

  36. Back in Brackets, on line 26, put the cursor after "A new". Verify that the box containing that text and the image to the right is highlighted (with a blue outline around it) in the browser.

  37. Type and totally <em>AWESOME</em> local; let the <em> tag autocomplete (you can arrow or click select after the </em> to type local). Verify while typing an incomplete tag <em that the gutter and the live preview lightning bolt icon show a pink error color. Verify that the changes appear in the browser as you type, and verify that AWESOME is italicized (and nothing else is).

  38. Undo the file back to a clean state. Verify that as you undo, the HTML preview continues to match the current state of the document, and ends up looking the same as when you first opened the file.

  39. Edit the background color for the

    tag in the inline editor (#D90 is a nice color). Verify that the color changes in Chrome as you type. Also verify that the CSS file is added to the working set with the dirty bit set.

  40. Hit Cmd/Ctrl-E. Verify that the inline editor closes.

  41. Put the cursor after the <a in one of the navbar items and hit Cmd/Ctrl-E to open another inline editor.

  42. Scroll up and down in the outer editor. Verify that the inline editor scrolls properly with the editor.

  43. Resize the window. Verify that the rule list moves properly and there are no visual glitches.

  44. Hit Esc to close the inline editor.

  45. Type class="huge", place the cursor in huge and hit Cmd/Ctrl-E. The inline editor should open with a message saying there are no matching rules, and focus should be on the New Rule button.

  46. Click the New Rule button and choose desktop.css. A blank .huge rule should appear in the inline editor. Type font-size: 30px; and verify that the navbar item gets huge.

  47. Switch to desktop.css and verify that the rule you added is at the end of the file.

  48. Choose File > Extension Manager. In the search box, type "emmet" and click Install on the Emmet extension. Verify that it's properly installed. Close Extension Manager.

  49. Verify the Emmet menu was added

  50. Quit the app. Verify that you get a "save changes" dialog for any CSS files you edited through the inline editor, and choose to discard the changes.

  51. Restart the app. Verify that the "citrus completed" project shows in the sidebar, and that the working set and current editor are showing the same files as when you quit. Also verify that the changes you had previously made were reverted (git status in the smokes folder should show clean).

  52. Close All Files (File > Close All) and verify that all files are closed

  53. Click on index.html in the file tree and verify that index.html is open but not added to the working set

  54. View > Split Vertically and verify a second pane is created and focused. index.html should still be open in the pane on the left

  55. Expand the css folder in the file tree and click on desktop.css to open it and verify that it opens in the right pane but is not added to the working set

  56. drag the splitter between the two views to the left and verify there are no visual glitches and the editor resizes appropriately

  57. switch back to the brackets project and back to citrus and verify the splitter is where it was before

  58. drag the splitter to the right and verify there are no visual glitches and the panes resize appropriately

  59. view > split horizontal and verify that the splitter jumps to the middle horizontally and there are 2 panes on top of each other

  60. click in the top pane to activate it and verify the visual styles on the pane are correct 1 Expand the images folder and double click events.jpg to open it to the top working set

  61. click in the opposite pane and double click specials.jpg open it to the bottom working set

  62. drag the splitter up and down and make sure there are no visual glitches and panes resize appropriately

  63. drag events.jpg to the bottom working set and verify that dragging between working sets works and there are no visual glitches and that specials.jpg is still the current file

  64. drag the current file (specials.jpg) to the to the top working set and verify that you can drag up into an empty working set and it's still the current file

  65. drag events.jpg to the top working set, drop it then drag it back down and verify that you can drag down into an empty bottom working set.

  66. drag events.jpg down into the file tree and verify that you cannot drop it

  67. switch back to brackets, split it and open enough files in each working set so that scroll bars are necessary

  68. make sure that you can scroll each view from top to bottom without any issues

  69. drag a file from the bottom working set up into the top working set and verify that scrollbars appear on both views while dragging

  70. grab the first file in the working set and verify you can drag it to the last position in the working set (scrolling will be necessary)

  71. grab the last file in the working set and verify you can drag it to the first position of the working set (scrolling will be necessary)

  72. grab any file in the top working set and verify you can drag it to the last position in the bottom working set (scrolling will be necessary)

  73. grab any file in the bottom working set and verify you can drag it to the first position in the top working set (scrolling will be necessary)

  74. grab any file in the bottom working set and verify you can drop it anywhere in the top working set

  75. grab any file in the bottom working set and gesture drag it down to the last position of the top working set (you'll need to drag up into the top working set then drag down to scroll the list)

  76. grab any file in the top working set and gesture drag it to the first position of the top working set (you'll need to drag down into the bottom working set then drag up to scroll the list)

  77. close are reopen brackets project

  78. drag the file after the current file in the working set in the working set to the opposite working set

  79. Ctrl+Tab to verify that the file you just dragged is still next MRU list

Clone this wiki locally