Merge pull request #35337 from code-dot-org/libs-ui-test

Libraries UI tests

apps/src/code-studio/components/SortedTableSelect.jsx

@@ -216,7 +216,7 @@ export default class SortedTableSelect extends React.Component {
       sort: orderBy
     })(rowData);
     return (
-      <div>
+      <div className="ui-test-sortable-table-select">
         {titleText && <Heading1>{titleText}</Heading1>}
         <div style={styles.container}>
           <div style={styles.leftColumn}>

apps/src/code-studio/components/libraries/LibraryListItem.jsx

@@ -158,6 +158,7 @@ export class LibraryListItem extends React.Component {
             >
               <button
                 type="button"
+                className="ui-test-remove-library"
                 key={'remove-' + library.id}
                 onClick={() => this.props.onRemove(library.channelId)}
                 style={[styles.actionBtn, styles.removeBtn]}

apps/src/code-studio/components/libraries/LibraryManagerDialog.jsx

@@ -434,7 +434,7 @@ export class LibraryManagerDialog extends React.Component {
           </div>
           <div style={styles.libraryList}>{this.displayClassLibraries()}</div>
           <h1 style={styles.header}>{i18n.libraryIdImport()}</h1>
-          <div style={styles.inputParent}>
+          <div style={styles.inputParent} id="ui-test-import-library">
             <input
               style={styles.linkBox}
               type="text"

apps/src/code-studio/components/libraries/LibraryPublisher.jsx

@@ -216,6 +216,7 @@ export default class LibraryPublisher extends React.Component {
     const {libraryDescription} = this.state;
     return (
       <textarea
+        id="ui-test-library-description"
         rows="2"
         cols="200"
         style={{...styles.textInput, ...styles.description}}
@@ -414,13 +415,15 @@ export default class LibraryPublisher extends React.Component {
         <div style={{position: 'relative'}}>
           <Button
             __useDeprecatedTag
+            id="ui-test-publish-library"
             style={{marginTop: 20}}
             onClick={this.validateAndPublish}
             text={alreadyPublished ? i18n.update() : i18n.publish()}
           />
           {onShareTeacherLibrary && (
             <Button
               __useDeprecatedTag
+              id="ui-test-manage-libraries"
               style={{marginTop: 20, marginLeft: 10}}
               onClick={onShareTeacherLibrary}
               text={i18n.manageLibraries()}
@@ -430,6 +433,7 @@ export default class LibraryPublisher extends React.Component {
           {alreadyPublished && (
             <Button
               __useDeprecatedTag
+              id="ui-test-unpublish-library"
               style={styles.unpublishButton}
               onClick={this.unpublish}
               text={i18n.unpublish()}

apps/src/templates/projects/LibraryTable.jsx

@@ -279,7 +279,7 @@ class LibraryTable extends React.Component {
     );
 
     return (
-      <div>
+      <div className="ui-test-library-table">
         {hasLibraries && (
           <Table.Provider columns={columns} style={tableLayoutStyles.table}>
             <Table.Header />

aws/cloudformation/s3_buckets.yml

@@ -1,5 +1,9 @@
 AWSTemplateFormatVersion: 2010-09-09
 Description: 'S3 Buckets'
+Parameters:
+  DeveloperAccount:
+    Type: String
+    NoEcho: true
 Resources:
   ## Create S3 bucket for student libraries
   LibraryBucket:
@@ -20,6 +24,25 @@ Resources:
         BlockPublicPolicy: true
         IgnorePublicAcls: true
         RestrictPublicBuckets: true
+  DroneLibraryBucketPolicy:
+    Type: AWS::S3::BucketPolicy
+    Properties:
+      Bucket: !Ref LibraryBucket
+      PolicyDocument:
+        Statement:
+        - Sid: Grant Drone permission to objects created by CI tests.
+          Effect: 'Allow'
+          Action: 's3:*'
+          Resource: 'arn:aws:s3:::cdo-v3-libraries/libraries_circle/*'
+          Principal: {AWS: [!Sub "arn:aws:iam::${DeveloperAccount}:role/DroneWorker"]}
+        - Sid: Grant Drone permission to list objects for CI tests.
+          Effect: 'Allow'
+          Action: 's3:ListBucket*'
+          Resource: 'arn:aws:s3:::cdo-v3-libraries'
+          Condition:
+            StringLike:
+              's3:Prefix': 'libraries_circle/*'
+          Principal: {AWS: [!Sub "arn:aws:iam::${DeveloperAccount}:role/DroneWorker"]}
   SpritelabAnimationBucket:
     Type: 'AWS::S3::Bucket'
     Properties:

dashboard/test/ui/features/star_labs/applab/libraries.feature

@@ -0,0 +1,73 @@
+# Maddie (6/12/2020) disabled in IE because "And I press keys" step does not work in IE.
+# https://github.com/code-dot-org/code-dot-org/pull/24646
+@no_ie
+@no_mobile
+Feature: Libraries
+
+  @as_student
+  Scenario: Publishing and unpublishing a library
+    Given I publish a basic library
+    Then I save the URL
+
+    # Check for library on /projects/libraries
+    Then I am on "http://studio.code.org/projects/libraries"
+    And I wait until element ".ui-test-library-table" is visible
+    And element ".ui-test-library-table td:contains('UntitledProject')" is visible
+
+    # Unpublish library
+    Then I navigate to the saved URL
+    And I wait for the page to fully load
+    Then I open the library publish dialog
+    And I click selector "#ui-test-unpublish-library" once I see it
+    And I wait until element "b:contains('Successfully unpublished your library')" is visible
+
+  Scenario: Adding and removing a library from a project
+    # Student1 publishes a library
+    Given I create a student named "Student1"
+    Given I publish a basic library
+    Then I save the channel id
+
+    # Student2 imports Student1's library
+    Given I create a student named "Student2"
+    And I start a new Applab project
+    And I wait for the page to fully load
+    Then I open the Manage Libraries dialog
+    And I wait until element "h1:contains('Import library from ID')" is visible
+    And I type the saved channel id into element "#ui-test-import-library > input"
+    And I click selector "#ui-test-import-library > button" to load a new page
+
+    # Confirm Student1's library is in Student2's project
+    And I wait for the page to fully load
+    Then I open the Manage Libraries dialog
+    And I wait until element "a:contains('UntitledProject')" is visible
+
+    # Remove Student1's library from Student2's project
+    And I click selector ".ui-test-remove-library:eq(0)" to load a new page
+    And I wait for the page to fully load
+    Then I open the Manage Libraries dialog
+    And I wait until element "div:contains('You have no libraries in your project')" is visible
+
+  Scenario: Assigning a library to a section as a teacher
+    Given I create a teacher named "Library_Teacher"
+    And I create a new section
+    Given I publish a basic library
+    When I close the dialog
+
+    # Teacher assigns library to a section
+    Then I open the library publish dialog
+    And I click selector "#ui-test-manage-libraries" once I see it
+    And I wait until element ".ui-test-sortable-table-select" is visible
+    When I select the "Untitled Project" option in dropdown named "selectOption"
+    And I click selector ".ui-test-sortable-table-select table input:eq(0)"
+    And I click selector ".modal div:contains('Assign library'):last"
+    And I wait until element "p:contains('This library is assigned to the following sections:')" is visible
+    Then I sign out
+
+    # Student in teacher's section should see teacher's library
+    Given I create a student named "Library_Student"
+    And I join the section
+    And I start a new Applab project
+    And I wait for the page to fully load
+    Then I open the Manage Libraries dialog
+    And I wait until element "a:contains('UntitledProject')" is visible
+    And I wait until element "span:contains('Library_Teacher')" is visible

dashboard/test/ui/features/step_definitions/applab.rb

@@ -9,6 +9,29 @@
   add_code_to_editor(code)
 end
 
+When /^I add code for a library function$/ do
+  code =
+    "// my library function\\n" \
+    "function myLibrary() {}"
+  add_code_to_editor(code)
+end
+
+Given /^I publish a basic library$/ do
+  steps <<-STEPS
+    And I start a new Applab project
+    And I wait for the page to fully load
+    And I wait for initial project save to complete
+    And I switch to text mode
+    When I add code for a library function
+    Then I open the library publish dialog
+    And I wait until element "#ui-test-library-description" is visible
+    And I press keys "My library" for element "#ui-test-library-description"
+    And I click selector "label:contains('Select all functions')"
+    Then I click selector "#ui-test-publish-library"
+    And I wait until element "b:contains('Successfully published your library:')" is visible
+  STEPS
+end
+
 And /^Applab HTML has a button$/ do
   code = @browser.execute_script "return Applab.levelHtml"
   expect(/button/.match(code).nil?).to be(false)
@@ -120,6 +143,15 @@
   STEPS
 end
 
+Then /^I open the library publish dialog/ do
+  steps <<-STEPS
+    When I open the share dialog
+    And I click selector "#project-share a:contains('Show advanced options')" if it exists
+    And I click selector "#project-share li:contains('Share as library')"
+    And I click selector "button:contains('Share as library')"
+  STEPS
+end
+
 Then(/^the palette has (\d+) blocks$/) do |num_blocks|
   expect(@browser.execute_script("return $('.droplet-palette-canvas > g').length")).to eq(num_blocks.to_i)
 end

dashboard/test/ui/features/step_definitions/steps.rb

@@ -1787,6 +1787,17 @@ def get_section_id_from_table(row_index)
   steps %Q{Then I am on "#{saved_url}"}
 end
 
+channel_id = nil
+Then /^I save the channel id$/ do
+  channel_id = @browser.execute_script('return (appOptions && appOptions.channel)')
+end
+
+And /^I type the saved channel id into element "([^"]*)"/ do |selector|
+  individual_steps %Q{
+    And I press keys "#{channel_id}" for element "#{selector}"
+  }
+end
+
 Then /^I sign out using jquery$/ do
   code = <<-JAVASCRIPT
     window.signOutComplete = false;
@@ -1810,6 +1821,13 @@ def get_section_id_from_table(row_index)
   STEPS
 end
 
+Then /^I open the Manage Libraries dialog$/ do
+  steps <<-STEPS
+    Then I click selector ".settings-cog"
+    And I click selector ".pop-up-menu-item:contains(Manage Libraries)"
+  STEPS
+end
+
 Then /^page text does (not )?contain "([^"]*)"$/ do |negation, text|
   body_text = @browser.execute_script('return document.body && document.body.textContent;').to_s
   expect(body_text.include?(text)).to eq(negation.nil?)

docker/ui_tests.sh

@@ -61,6 +61,7 @@ animations_s3_directory: animations_circle/$CIRCLE_BUILD_NUM
 assets_s3_directory: assets_circle/$CIRCLE_BUILD_NUM
 files_s3_directory: files_circle/$CIRCLE_BUILD_NUM
 sources_s3_directory: sources_circle/$CIRCLE_BUILD_NUM
+libraries_s3_directory: libraries_circle/$CIRCLE_BUILD_NUM
 " >> locals.yml
 echo "Wrote secrets from env vars into locals.yml."
 set -x